diff --git a/code/addons/test/src/components/GlobalErrorModal.stories.tsx b/code/addons/test/src/components/GlobalErrorModal.stories.tsx index effcbf158ece..3cf0e4cf01d1 100644 --- a/code/addons/test/src/components/GlobalErrorModal.stories.tsx +++ b/code/addons/test/src/components/GlobalErrorModal.stories.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; +import { ManagerContext } from 'storybook/internal/manager-api'; + import type { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from '@storybook/test'; @@ -9,21 +11,32 @@ import { GlobalErrorModal } from './GlobalErrorModal'; type Story = StoryObj; +const managerContext: any = { + state: {}, + api: { + getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName( + 'api::getDocsUrl' + ), + }, +}; + const meta = { component: GlobalErrorModal, decorators: [ (storyFn) => ( -
- {storyFn()} -
+ +
+ {storyFn()} +
+
), ], args: { diff --git a/code/addons/test/src/components/GlobalErrorModal.tsx b/code/addons/test/src/components/GlobalErrorModal.tsx index cabfba9a0c4e..3dcd7ee881a6 100644 --- a/code/addons/test/src/components/GlobalErrorModal.tsx +++ b/code/addons/test/src/components/GlobalErrorModal.tsx @@ -1,10 +1,13 @@ import React from 'react'; import { Button, IconButton, Modal } from 'storybook/internal/components'; +import { useStorybookApi } from 'storybook/internal/manager-api'; import { CloseIcon, SyncIcon } from '@storybook/icons'; import { styled } from '@storybook/theming'; +import { TROUBLESHOOTING_LINK } from '../constants'; + interface GlobalErrorModalProps { error: string; open: boolean; @@ -45,9 +48,15 @@ const TroubleshootLink = styled.a(({ theme }) => ({ color: theme.color.defaultText, })); -const TROUBLESHOOT_LINK = `https://storybook.js.org/docs/vitest/troubleshooting`; - export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorModalProps) { + const api = useStorybookApi(); + + const troubleshootURL = api.getDocsUrl({ + subpath: TROUBLESHOOTING_LINK, + versioned: true, + renderer: true, + }); + return ( @@ -58,8 +67,7 @@ export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorM Rerun @@ -73,8 +81,8 @@ export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorM

Troubleshoot:{' '} - - {TROUBLESHOOT_LINK} + + {troubleshootURL}
diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts index 42995d81d183..bc90b7430b34 100644 --- a/code/addons/test/src/constants.ts +++ b/code/addons/test/src/constants.ts @@ -4,3 +4,4 @@ export const PANEL_ID = `${ADDON_ID}/panel`; export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA'; export const DOCUMENTATION_LINK = 'writing-tests/component-testing'; +export const TROUBLESHOOTING_LINK = `${DOCUMENTATION_LINK}#troubleshooting`;