diff --git a/code/core/src/component-testing/constants.ts b/code/core/src/component-testing/constants.ts index d096abc1f3f1..8a7fb0a80792 100644 --- a/code/core/src/component-testing/constants.ts +++ b/code/core/src/component-testing/constants.ts @@ -1,5 +1,6 @@ export const ADDON_ID = 'storybook/interactions'; export const PANEL_ID = `${ADDON_ID}/panel`; +export const PARAM_KEY = 'interactions'; export const DOCUMENTATION_LINK = 'writing-tests/integrations/vitest-addon'; export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`; diff --git a/code/core/src/component-testing/manager.test.tsx b/code/core/src/component-testing/manager.test.tsx new file mode 100644 index 000000000000..60f5fdeb8e1d --- /dev/null +++ b/code/core/src/component-testing/manager.test.tsx @@ -0,0 +1,41 @@ +import { describe, expect, it } from 'vitest'; + +import { PARAM_KEY } from './constants'; +import type { InteractionsParameters } from './types'; +import { isInteractionsDisabled } from './utils'; + +describe('Interactions Panel Disable Parameter', () => { + it('should return true when interactions.disable is true', () => { + const parameters: InteractionsParameters = { + [PARAM_KEY]: { + disable: true, + }, + }; + + expect(isInteractionsDisabled(parameters)).toBe(true); + }); + + it('should return false when interactions.disable is false', () => { + const parameters: InteractionsParameters = { + [PARAM_KEY]: { + disable: false, + }, + }; + + expect(isInteractionsDisabled(parameters)).toBe(false); + }); + + it('should return false when interactions parameter is not provided', () => { + const parameters: InteractionsParameters = {}; + + expect(isInteractionsDisabled(parameters)).toBe(false); + }); + + it('should return false when disable is undefined', () => { + const parameters: InteractionsParameters = { + [PARAM_KEY]: {}, + }; + + expect(isInteractionsDisabled(parameters)).toBe(false); + }); +}); diff --git a/code/core/src/component-testing/manager.tsx b/code/core/src/component-testing/manager.tsx index 7db4f722c368..9b610ed38757 100644 --- a/code/core/src/component-testing/manager.tsx +++ b/code/core/src/component-testing/manager.tsx @@ -7,6 +7,7 @@ import { type Combo, Consumer, addons, types } from 'storybook/manager-api'; import { Panel } from './components/Panel'; import { PanelTitle } from './components/PanelTitle'; import { ADDON_ID, PANEL_ID } from './constants'; +import { isInteractionsDisabled } from './utils'; export default addons.register(ADDON_ID, () => { if (globalThis?.FEATURES?.interactions) { @@ -25,6 +26,7 @@ export default addons.register(ADDON_ID, () => { type: types.PANEL, title: () => , match: ({ viewMode }) => viewMode === 'story', + disabled: isInteractionsDisabled, render: ({ active }) => { return ( diff --git a/code/core/src/component-testing/types.ts b/code/core/src/component-testing/types.ts new file mode 100644 index 000000000000..513a59c862b0 --- /dev/null +++ b/code/core/src/component-testing/types.ts @@ -0,0 +1,21 @@ +export interface InteractionsParameters { + /** + * Interactions configuration + * + * @see https://storybook.js.org/docs/writing-tests/interaction-testing + */ + interactions?: { + /** + * Removes the addon panel and disables the feature's behavior. If you wish to turn off this + * feature for the entire Storybook, you can set the option in your `main.js|ts` configuration + * file. + * + * @see https://storybook.js.org/docs/writing-tests/interaction-testing#disable + */ + disable?: boolean; + }; +} + +export interface InteractionsTypes { + parameters: InteractionsParameters; +} diff --git a/code/core/src/component-testing/utils.ts b/code/core/src/component-testing/utils.ts index dac3f236d38f..cc779e3647ec 100644 --- a/code/core/src/component-testing/utils.ts +++ b/code/core/src/component-testing/utils.ts @@ -1,8 +1,16 @@ +import type { API_StoryEntry } from 'storybook/internal/types'; + import Filter from 'ansi-to-html'; import { type StorybookTheme, useTheme } from 'storybook/theming'; // eslint-disable-next-line depend/ban-dependencies import stripAnsi from 'strip-ansi'; +import { PARAM_KEY } from './constants'; + +export function isInteractionsDisabled(parameters: API_StoryEntry['parameters']): boolean { + return !!parameters?.[PARAM_KEY]?.disable; +} + export function isTestAssertionError(error: unknown) { return isChaiError(error) || isJestError(error); } diff --git a/code/core/template/stories/component-play.stories.ts b/code/core/template/stories/component-play.stories.ts index 592e787299d4..729cbf882ed1 100644 --- a/code/core/template/stories/component-play.stories.ts +++ b/code/core/template/stories/component-play.stories.ts @@ -24,3 +24,11 @@ export default { export const StoryOne = {}; export const StoryTwo = {}; + +export const DisabledInteractions = { + parameters: { + interactions: { + disable: true, + }, + }, +};