GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into norbert/upgrades-2025-02-11

Browse Source
This commit is contained in:
Norbert de Langen 2025-02-12 17:02:20 +01:00 committed by GitHub
commit f7a4c76a1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 200 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
code/addons/a11y/src/constants.ts
View File

@ -13,5 +13,3 @@ export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-
export const TEST_PROVIDER_ID = 'storybook/addon-a11y/test-provider';
export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL };
export const A11Y_TEST_TAG = 'a11y-test';

3
code/addons/a11y/src/params.ts
View File

@ -1,5 +1,7 @@
import type { ElementContext, RunOptions, Spec } from 'axe-core';
type A11yTest = 'off' | 'todo' | 'error';
export interface Setup {
element?: ElementContext;
config: Spec;
@ -13,4 +15,5 @@ export interface A11yParameters {
/** @deprecated Use globals.a11y.manual instead */
manual?: boolean;
disable?: boolean;
test?: A11yTest;
}

63
code/addons/a11y/src/preview.test.tsx
View File

@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
import type { StoryContext } from 'storybook/internal/csf';
import { run } from './a11yRunner';
import { A11Y_TEST_TAG } from './constants';
import { experimental_afterEach } from './preview';
import { getIsVitestRunning, getIsVitestStandaloneRun } from './utils';
@ -88,12 +87,13 @@ describe('afterEach', () => {
addReport: vi.fn(),
},
parameters: {
a11y: {},
a11y: {
test: 'error',
},
},
globals: {
a11y: {},
},
tags: [A11Y_TEST_TAG],
...overrides,
}) as any;
@ -138,6 +138,33 @@ describe('afterEach', () => {
});
});
it('should run accessibility checks and should report them as warnings', async () => {
const context = createContext({
parameters: {
a11y: {
test: 'todo',
},
},
});
const result = {
violations,
};
mockedRun.mockResolvedValue(result as any);
mocks.getIsVitestStandaloneRun.mockReturnValue(false);
await experimental_afterEach(context);
expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
expect(context.reporting.addReport).toHaveBeenCalledWith({
type: 'a11y',
version: 1,
result,
status: 'warning',
});
});
it('should report passed status when there are no violations', async () => {
const context = createContext();
const result = {
@ -156,27 +183,6 @@ describe('afterEach', () => {
});
});
it('should run accessibility checks if "a11y-test" flag is not available and is not running in Vitest', async () => {
const context = createContext({
tags: [],
});
const result = {
violations: [],
};
mockedRun.mockResolvedValue(result as any);
vi.mocked(getIsVitestRunning).mockReturnValue(false);
await experimental_afterEach(context);
expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
expect(context.reporting.addReport).toHaveBeenCalledWith({
type: 'a11y',
version: 1,
result,
status: 'passed',
});
});
it('should not run accessibility checks when manual is true', async () => {
const context = createContext({
parameters: {
@ -222,11 +228,14 @@ describe('afterEach', () => {
expect(context.reporting.addReport).not.toHaveBeenCalled();
});
it('should not run accessibility checks if vitest is running and story is not tagged with a11ytest', async () => {
it('should not run accessibility checks when parameters.a11y.test is "off"', async () => {
const context = createContext({
tags: [],
parameters: {
a11y: {
test: 'off',
},
},
});
vi.mocked(getIsVitestRunning).mockReturnValue(true);
await experimental_afterEach(context);

28
code/addons/a11y/src/preview.tsx
View File

@ -3,9 +3,8 @@ import type { AfterEach } from 'storybook/internal/types';
import { expect } from '@storybook/test';
import { run } from './a11yRunner';
import { A11Y_TEST_TAG } from './constants';
import type { A11yParameters } from './params';
import { getIsVitestRunning, getIsVitestStandaloneRun } from './utils';
import { getIsVitestStandaloneRun } from './utils';
let vitestMatchersExtended = false;
@ -14,7 +13,6 @@ export const experimental_afterEach: AfterEach<any> = async ({
reporting,
parameters,
globals,
tags,
}) => {
const a11yParameter: A11yParameters | undefined = parameters.a11y;
const a11yGlobals = globals.a11y;
@ -22,12 +20,20 @@ export const experimental_afterEach: AfterEach<any> = async ({
const shouldRunEnvironmentIndependent =
a11yParameter?.manual !== true &&
a11yParameter?.disable !== true &&
a11yParameter?.test !== 'off' &&
a11yGlobals?.manual !== true;
if (shouldRunEnvironmentIndependent) {
if (getIsVitestRunning() && !tags.includes(A11Y_TEST_TAG)) {
return;
const getMode = (): (typeof reporting)['reports'][0]['status'] => {
switch (a11yParameter?.test) {
case 'todo':
return 'warning';
case 'error':
default:
return 'failed';
}
};
if (shouldRunEnvironmentIndependent) {
try {
const result = await run(a11yParameter);
@ -38,7 +44,7 @@ export const experimental_afterEach: AfterEach<any> = async ({
type: 'a11y',
version: 1,
result: result,
status: hasViolations ? 'failed' : 'passed',
status: hasViolations ? getMode() : 'passed',
});
/**
@ -50,7 +56,7 @@ export const experimental_afterEach: AfterEach<any> = async ({
* implement proper try catch handling.
*/
if (getIsVitestStandaloneRun()) {
if (hasViolations) {
if (hasViolations && getMode() === 'failed') {
if (!vitestMatchersExtended) {
const { toHaveNoViolations } = await import('vitest-axe/matchers');
expect.extend({ toHaveNoViolations });
@ -88,3 +94,9 @@ export const initialGlobals = {
manual: false,
},
};
export const parameters = {
a11y: {
test: 'todo',
} as A11yParameters,
};

9
code/addons/test/src/vitest-plugin/index.ts
View File

@ -224,15 +224,6 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
},
};
},
getTags: () => {
const envConfig = JSON.parse(process.env.VITEST_STORYBOOK_CONFIG ?? '{}');
const shouldSetTag = process.env.VITEST_STORYBOOK
? (envConfig.a11y ?? false)
: false;
return shouldSetTag ? ['a11y-test'] : [];
},
},
// if there is a test.browser config AND test.browser.screenshotFailures is not explicitly set, we set it to false
...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.browser &&

5
code/addons/test/src/vitest-plugin/test-utils.ts
View File

@ -17,11 +17,10 @@ import { setViewport } from './viewports';
declare module '@vitest/browser/context' {
interface BrowserCommands {
getInitialGlobals: () => Promise<Record<string, any>>;
getTags: () => Promise<string[] | undefined>;
}
}
const { getInitialGlobals, getTags } = server.commands;
const { getInitialGlobals } = server.commands;
export const testStory = (
exportName: string,
@ -34,7 +33,7 @@ export const testStory = (
const composedStory = composeStory(
annotations.story,
annotations.meta!,
{ initialGlobals: (await getInitialGlobals?.()) ?? {}, tags: await getTags?.() },
{ initialGlobals: (await getInitialGlobals?.()) ?? {} },
annotations.preview,
exportName
);

5
code/addons/viewport/src/constants.ts
View File

@ -1,7 +1,2 @@
export const ADDON_ID = 'storybook/viewport';
export const PARAM_KEY = 'viewport';
export const UPDATE = `${ADDON_ID}/update`;
export const CONFIGURE = `${ADDON_ID}/configure`;
export const SET = `${ADDON_ID}/setStoryDefaultViewport`;
export const CHANGED = `${ADDON_ID}/viewportChanged`;

14
code/core/template/stories/tags-add.stories.ts
View File

@ -17,17 +17,11 @@ export default {
export const Inheritance = {
tags: ['story-one', '!vitest'],
play: async ({ canvasElement, tags }: PlayFunctionContext<any>) => {
play: async ({ canvasElement }: PlayFunctionContext<any>) => {
const canvas = within(canvasElement);
if (tags.includes('a11y-test')) {
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['a11y-test', 'story-one'],
});
} else {
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['story-one'],
});
}
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['story-one'],
});
},
parameters: { chromatic: { disable: false } },
};

22
code/core/template/stories/tags-config.stories.ts
View File

@ -17,25 +17,11 @@ export default {
export const Inheritance = {
tags: ['story-one', '!vitest'],
play: async ({ canvasElement, tags }: PlayFunctionContext<any>) => {
play: async ({ canvasElement }: PlayFunctionContext<any>) => {
const canvas = within(canvasElement);
if (tags.includes('a11y-test')) {
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: [
'dev',
'test',
'a11y-test',
'component-one',
'component-two',
'autodocs',
'story-one',
],
});
} else {
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],
});
}
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],
});
},
parameters: { chromatic: { disable: false } },
};

14
code/core/template/stories/tags-remove.stories.ts
View File

@ -17,17 +17,11 @@ export default {
export const Inheritance = {
tags: ['story-one', '!vitest'],
play: async ({ canvasElement, tags }: PlayFunctionContext<any>) => {
play: async ({ canvasElement }: PlayFunctionContext<any>) => {
const canvas = within(canvasElement);
if (tags.includes('a11y-test')) {
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['dev', 'test', 'a11y-test', 'component-one', 'autodocs', 'story-one'],
});
} else {
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['dev', 'test', 'component-one', 'autodocs', 'story-one'],
});
}
await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
tags: ['dev', 'test', 'component-one', 'autodocs', 'story-one'],
});
},
parameters: { chromatic: { disable: false } },
};

245
code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
View File

@ -41,6 +41,7 @@ vi.mock('picocolors', async (importOriginal) => {
green: (s: string) => s,
cyan: (s: string) => s,
magenta: (s: string) => s,
yellow: (s: string) => s,
},
};
});
@ -108,7 +109,11 @@ describe('addonA11yAddonTest', () => {
} else {
return `
export default {
tags: ['a11y-test'],
parameters: {
a11y: {
test: 'todo'
}
}
}
`;
}
@ -154,7 +159,7 @@ describe('addonA11yAddonTest', () => {
previewFile: null,
transformedPreviewCode: null,
transformedSetupCode: expect.any(String),
skipPreviewTransformation: true,
skipPreviewTransformation: false,
skipVitestSetupTransformation: false,
});
});
@ -226,7 +231,7 @@ describe('addonA11yAddonTest', () => {
previewFile: null,
transformedPreviewCode: null,
transformedSetupCode: null,
skipPreviewTransformation: true,
skipPreviewTransformation: false,
skipVitestSetupTransformation: false,
});
});
@ -262,7 +267,7 @@ describe('addonA11yAddonTest', () => {
previewFile: path.join(configDir, 'preview.js'),
transformedPreviewCode: null,
transformedSetupCode: null,
skipPreviewTransformation: true,
skipPreviewTransformation: false,
skipVitestSetupTransformation: false,
});
});
@ -287,7 +292,11 @@ describe('addonA11yAddonTest', () => {
} else {
return `
export default {
tags: ['a11y-test'],
parameters: {
a11y: {
test: 'todo'
}
}
}
`;
}
@ -342,7 +351,14 @@ describe('addonA11yAddonTest', () => {
},
configDir,
} as any);
expect(result).toEqual(null);
expect(result).toEqual({
setupFile: path.join(configDir, 'vitest.setup.js'),
previewFile: path.join(configDir, 'preview.js'),
transformedPreviewCode: expect.any(String),
transformedSetupCode: null,
skipPreviewTransformation: false,
skipVitestSetupTransformation: true,
});
});
});
@ -374,12 +390,16 @@ describe('addonA11yAddonTest', () => {
beforeAll(annotations.beforeAll);
2) We couldn't find or automatically update your .storybook/preview.<ts|js> in your project to smoothly set up tags from @storybook/addon-a11y.
2) We couldn't find or automatically update your .storybook/preview.<ts|js> in your project to smoothly set up parameters.a11y.test from @storybook/addon-a11y.
Please manually update your .storybook/preview.<ts|js> file to include the following:
export default {
...
+ tags: ["a11y-test"],
...
parameters: {
+ a11y: {
+ test: "todo"
+ }
}
}
For more information, please refer to the accessibility addon documentation:
@ -414,7 +434,7 @@ describe('addonA11yAddonTest', () => {
beforeAll(annotations.beforeAll);
2) We have to update your .storybook/preview.js file to set up tags from @storybook/addon-a11y.
2) We have to update your .storybook/preview.js file to set up parameters.a11y.test from @storybook/addon-a11y.
For more information, please refer to the accessibility addon documentation:
https://storybook.js.org/docs/writing-tests/accessibility-testing#test-addon-integration"
@ -437,12 +457,16 @@ describe('addonA11yAddonTest', () => {
1) We have to update your .storybook/vitest.setup.ts file to set up project annotations from @storybook/addon-a11y.
2) We couldn't find or automatically update your .storybook/preview.<ts|js> in your project to smoothly set up tags from @storybook/addon-a11y.
2) We couldn't find or automatically update your .storybook/preview.<ts|js> in your project to smoothly set up parameters.a11y.test from @storybook/addon-a11y.
Please manually update your .storybook/preview.<ts|js> file to include the following:
export default {
...
+ tags: ["a11y-test"],
...
parameters: {
+ a11y: {
+ test: "todo"
+ }
}
}
For more information, please refer to the accessibility addon documentation:
@ -485,7 +509,7 @@ describe('addonA11yAddonTest', () => {
@storybook/addon-a11y now integrates with @storybook/experimental-addon-test to provide automatic accessibility checks for your stories, powered by Axe and Vitest.
1) We have to update your .storybook/preview.js file to set up tags from @storybook/addon-a11y.
1) We have to update your .storybook/preview.js file to set up parameters.a11y.test from @storybook/addon-a11y.
For more information, please refer to the accessibility addon documentation:
https://storybook.js.org/docs/writing-tests/accessibility-testing#test-addon-integration"
@ -635,20 +659,11 @@ describe('addonA11yAddonTest', () => {
});
describe('transformPreviewFile', () => {
it('should add a new tags property if it does not exist', async () => {
it('should add a new parameter property if it does not exist', async () => {
const source = dedent`
import type { Preview } from '@storybook/react';
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
const preview: Preview = {};
export default preview;
`;
@ -660,25 +675,37 @@ describe('addonA11yAddonTest', () => {
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
// The \`a11y-test\` tag controls whether accessibility tests are run as part of a standalone Vitest test run
// The tag and its behavior are experimental and subject to change.
// For more information please see: https://storybook.js.org/docs/writing-tests/accessibility-testing#configure-accessibility-tests-with-the-test-addon
tags: [/*'a11y-test'*/]
a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: 'todo'
}
}
};
export default preview;"
`);
});
it('should add a new tags property if it does not exist and a default export does not exist', async () => {
it('should add a new parameter property if it does not exist and a default export does not exist', async () => {
const source = dedent``;
const transformed = await transformPreviewFile(source, process.cwd());
expect(transformed).toMatchInlineSnapshot(`
"export const parameters = {
a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: "todo"
}
};"
`);
});
it('should extend the existing parameters property', async () => {
const source = dedent`
export const parameters = {
controls: {
@ -700,24 +727,26 @@ describe('addonA11yAddonTest', () => {
date: /Date$/i,
},
},
}
export const tags = ["a11y-test"];"
`);
a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: "todo"
}
}"
`);
});
it('should extend the existing tags property', async () => {
it('should not add the test parameter if it already exists', async () => {
const source = dedent`
import type { Preview } from "@storybook/react";
const preview: Preview = {
tags: ["existingTag"],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
a11y: {
test: "off"
}
},
};
@ -730,57 +759,10 @@ describe('addonA11yAddonTest', () => {
"import type { Preview } from "@storybook/react";
const preview: Preview = {
// The \`a11y-test\` tag controls whether accessibility tests are run as part of a standalone Vitest test run
// The tag and its behavior are experimental and subject to change.
// For more information please see: https://storybook.js.org/docs/writing-tests/accessibility-testing#configure-accessibility-tests-with-the-test-addon
tags: ["existingTag"/*, "a11y-test"*/],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;"
`);
});
it('should not add a11y-test if it already exists in the tags property', async () => {
const source = dedent`
import type { Preview } from "@storybook/react";
const preview: Preview = {
tags: ["a11y-test"],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;
`;
const transformed = await transformPreviewFile(source, process.cwd());
expect(transformed).toMatchInlineSnapshot(`
"import type { Preview } from "@storybook/react";
const preview: Preview = {
tags: ["a11y-test"],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
a11y: {
test: "off"
}
},
};
@ -790,16 +772,7 @@ describe('addonA11yAddonTest', () => {
it('should handle the default export without type annotations', async () => {
const source = dedent`
export default {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default {};
`;
const transformed = await transformPreviewFile(source, process.cwd());
@ -807,53 +780,13 @@ describe('addonA11yAddonTest', () => {
expect(transformed).toMatchInlineSnapshot(`
"export default {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
// The \`a11y-test\` tag controls whether accessibility tests are run as part of a standalone Vitest test run
// The tag and its behavior are experimental and subject to change.
// For more information please see: https://storybook.js.org/docs/writing-tests/accessibility-testing#configure-accessibility-tests-with-the-test-addon
tags: [/*"a11y-test"*/]
};"
`);
});
it('should extend the existing tags property without type annotations', async () => {
const source = dedent`
export default {
tags: ["existingTag"],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
`;
const transformed = await transformPreviewFile(source, process.cwd());
expect(transformed).toMatchInlineSnapshot(`
"export default {
// The \`a11y-test\` tag controls whether accessibility tests are run as part of a standalone Vitest test run
// The tag and its behavior are experimental and subject to change.
// For more information please see: https://storybook.js.org/docs/writing-tests/accessibility-testing#configure-accessibility-tests-with-the-test-addon
tags: ["existingTag"/*, "a11y-test"*/],
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: "todo"
}
}
};"
`);
});

86
code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
View File

@ -90,15 +90,14 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
.find((filePath) => existsSync(filePath)) ?? null;
let skipVitestSetupTransformation = false;
// TODO: Set it to false after we have decided how to deal with a11y:test tag.
const skipPreviewTransformation = true;
let skipPreviewTransformation = false;
if (vitestSetupFile && previewFile) {
const vitestSetupSource = readFileSync(vitestSetupFile, 'utf8');
// const previewSetupSource = readFileSync(previewFile, 'utf8');
const previewSetupSource = readFileSync(previewFile, 'utf8');
skipVitestSetupTransformation = vitestSetupSource.includes('@storybook/addon-a11y');
// skipPreviewTransformation = previewSetupSource.includes('a11y-test');
skipPreviewTransformation = !shouldPreviewFileBeTransformed(previewSetupSource);
if (skipVitestSetupTransformation && skipPreviewTransformation) {
return null;
@ -118,14 +117,14 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
}
};
const getTransformedPreviewCode = async () => {
const getTransformedPreviewCode = () => {
if (!previewFile || skipPreviewTransformation) {
return null;
}
try {
const previewSetupSource = readFileSync(previewFile, 'utf8');
return await transformPreviewFile(previewSetupSource, previewFile);
return transformPreviewFile(previewSetupSource, previewFile);
} catch (e) {
return null;
}
@ -187,12 +186,16 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
if (!skipPreviewTransformation) {
if (transformedPreviewCode === null) {
prompt.push(dedent`
${counter++}) We couldn't find or automatically update your ${picocolors.cyan(`.storybook/preview.<ts|js>`)} in your project to smoothly set up tags from ${picocolors.magenta(`@storybook/addon-a11y`)}.
${counter++}) We couldn't find or automatically update your ${picocolors.cyan(`.storybook/preview.<ts|js>`)} in your project to smoothly set up ${picocolors.yellow(`parameters.a11y.test`)} from ${picocolors.magenta(`@storybook/addon-a11y`)}.
Please manually update your ${picocolors.cyan(`.storybook/preview.<ts|js>`)} file to include the following:
${picocolors.gray('export default {')}
${picocolors.gray('...')}
${picocolors.green('+ tags: ["a11y-test"],')}
${picocolors.gray(' ...')}
${picocolors.gray(' parameters: {')}
${picocolors.green('+ a11y: {')}
${picocolors.gray('+ test: "todo"')}
${picocolors.green('+ }')}
${picocolors.gray(' }')}
${picocolors.gray('}')}
`);
} else {
@ -200,7 +203,7 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
prompt.push(
dedent`
${counter++}) We have to update your ${picocolors.cyan(`.storybook/preview${fileExtensionPreviewFile}`)} file to set up tags from ${picocolors.magenta(`@storybook/addon-a11y`)}.
${counter++}) We have to update your ${picocolors.cyan(`.storybook/preview${fileExtensionPreviewFile}`)} file to set up ${picocolors.yellow('parameters.a11y.test')} from ${picocolors.magenta(`@storybook/addon-a11y`)}.
`
);
}
@ -268,59 +271,44 @@ export function transformSetupFile(source: string) {
return root.toSource();
}
export async function transformPreviewFile(source: string, filePath: string) {
const previewConfig = loadConfig(source).parse();
const tags = previewConfig.getFieldNode(['tags']);
const tagsNode = previewConfig.getFieldNode(['tags']) as ArrayExpression;
const tagsValue = previewConfig.getFieldValue(['tags']) ?? [];
if (tags && tagsValue && (tagsValue.includes('a11y-test') || tagsValue.includes('!a11y-test'))) {
export function transformPreviewFile(source: string, filePath: string) {
if (!shouldPreviewFileBeTransformed(source)) {
return source;
}
if (tagsNode) {
const tagsElementsLength = (tagsNode as ArrayExpression).elements.length;
const lastTagElement = tagsNode.elements[tagsElementsLength - 1];
const previewConfig = loadConfig(source).parse();
if (lastTagElement) {
// t.addComment(lastTagElement, 'trailing', ", 'a11y-test'");
// @ts-expect-error The commented line above would be the proper way of how to add a trailing comment but it is not supported by recast.
// https://github.com/benjamn/recast/issues/572
lastTagElement.comments = [
{
type: 'CommentBlock',
leading: false,
trailing: true,
value: ', "a11y-test"',
},
];
previewConfig.setFieldNode(['tags'], tagsNode);
}
} else {
// t.addComment(newTagsNode, 'inner', 'a11y-test');
// The commented line above would be the proper way of how to add a trailing comment but innercomments are not supported by recast.
// https://github.com/benjamn/recast/issues/1417
// This case will be handled later by parsing the source code and editing it later.
previewConfig.setFieldValue(['tags'], ['a11y-test']);
}
previewConfig.setFieldValue(['parameters', 'a11y', 'test'], 'todo');
const formattedPreviewConfig = formatConfig(previewConfig);
const lines = formattedPreviewConfig.split('\n');
// Find the line with the "tags" property
const tagsLineIndex = lines.findIndex((line) => line.includes('tags: ['));
if (tagsLineIndex === -1) {
// Find the line with the "parameters.a11y.test" property
const parametersLineIndex = lines.findIndex(
(line) => line.includes('test: "todo"') || line.includes("test: 'todo'")
);
if (parametersLineIndex === -1) {
return formattedPreviewConfig;
}
// Determine the indentation level of the "tags" property
lines[tagsLineIndex] = lines[tagsLineIndex].replace("['a11y-test']", "[/*'a11y-test'*/]");
lines[tagsLineIndex] = lines[tagsLineIndex].replace('["a11y-test"]', '[/*"a11y-test"*/]');
const indentation = lines[tagsLineIndex]?.match(/^\s*/)?.[0];
const parametersLine = lines[parametersLineIndex];
const indentation = parametersLine?.match(/^\s*/)?.[0];
// Add the comment with the same indentation level
const comment = `${indentation}// The \`a11y-test\` tag controls whether accessibility tests are run as part of a standalone Vitest test run\n${indentation}// The tag and its behavior are experimental and subject to change.\n${indentation}// For more information please see: https://storybook.js.org/docs/writing-tests/accessibility-testing#configure-accessibility-tests-with-the-test-addon`;
lines.splice(tagsLineIndex, 0, comment);
const comment = `${indentation}// 'todo' - show a11y violations in the test UI only\n${indentation}// 'error' - fail CI on a11y violations\n${indentation}// 'off' - skip a11y checks entirely`;
lines.splice(parametersLineIndex, 0, comment);
return formatFileContent(filePath, lines.join('\n'));
}
export function shouldPreviewFileBeTransformed(source: string) {
const previewConfig = loadConfig(source).parse();
const parametersA11yTest = previewConfig.getFieldNode(['parameters', 'a11y', 'test']);
if (parametersA11yTest) {
return false;
}
return true;
}

2
scripts/tasks/sandbox-parts.ts
View File

@ -912,7 +912,7 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
}
if (template.expected.builder.includes('vite')) {
previewConfig.setFieldValue(['tags'], ['vitest', '!a11y-test']);
previewConfig.setFieldValue(['tags'], ['vitest']);
}
await writeConfig(previewConfig);