Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automigration: Improve addon-a11y-addon-test #30127

Merged
merged 2 commits into from
Dec 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions code/addons/test/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@ export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happen

export const COVERAGE_DIRECTORY = 'coverage';

export const SUPPORTED_FRAMEWORKS = [
'@storybook/nextjs',
'@storybook/experimental-nextjs-vite',
'@storybook/sveltekit',
];

export const SUPPORTED_RENDERERS = ['@storybook/react', '@storybook/svelte', '@storybook/vue3'];
export interface Config {
coverage: boolean;
a11y: boolean;
Expand Down
12 changes: 3 additions & 9 deletions code/addons/test/src/postinstall.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { coerce, satisfies } from 'semver';
import { dedent } from 'ts-dedent';

import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
import { SUPPORTED_FRAMEWORKS, SUPPORTED_RENDERERS } from './constants';
import { printError, printInfo, printSuccess, step } from './postinstall-logger';
import { getAddonNames } from './utils';

Expand Down Expand Up @@ -106,18 +107,11 @@ export default async function postInstall(options: PostinstallOptions) {
}
}

const annotationsImport = [
'@storybook/nextjs',
'@storybook/experimental-nextjs-vite',
'@storybook/sveltekit',
].includes(info.frameworkPackageName)
const annotationsImport = SUPPORTED_FRAMEWORKS.includes(info.frameworkPackageName)
? info.frameworkPackageName === '@storybook/nextjs'
? '@storybook/experimental-nextjs-vite'
: info.frameworkPackageName
: info.rendererPackageName &&
['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
info.rendererPackageName
)
: info.rendererPackageName && SUPPORTED_RENDERERS.includes(info.rendererPackageName)
? info.rendererPackageName
: null;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import dedent from 'ts-dedent';
import { getAddonNames } from '../helpers/mainConfigFile';
import { addonA11yAddonTest, transformSetupFile } from './addon-a11y-addon-test';

vi.mock('../helpers/mainConfigFile');
vi.mock('../helpers/mainConfigFile', async (importOriginal) => {
const mod = (await importOriginal()) as any;
return {
...mod,
getAddonNames: vi.fn(),
};
});

// mock fs.existsSync
vi.mock('fs', async (importOriginal) => {
Expand Down Expand Up @@ -46,6 +52,20 @@ describe('addonA11yAddonTest', () => {
expect(result).toBeNull();
});

it('should return null if provided framework is not supported', async () => {
vi.mocked(getAddonNames).mockReturnValue([
'@storybook/addon-a11y',
'@storybook/experimental-addon-test',
]);
const result = await addonA11yAddonTest.check({
mainConfig: {
framework: '@storybook/angular',
},
configDir: '',
} as any);
expect(result).toBeNull();
});

it('should return setupFile and transformedSetupCode if vitest.setup file exists', async () => {
vi.mocked(getAddonNames).mockReturnValue([
'@storybook/addon-a11y',
Expand All @@ -54,7 +74,12 @@ describe('addonA11yAddonTest', () => {
vi.mocked(existsSync).mockReturnValue(true);
vi.mocked(readFileSync).mockReturnValue('const annotations = setProjectAnnotations([]);');

const result = await addonA11yAddonTest.check({ mainConfig, configDir } as any);
const result = await addonA11yAddonTest.check({
mainConfig: {
framework: '@storybook/react-vite',
},
configDir,
} as any);
expect(result).toEqual({
setupFile: path.join(configDir, 'vitest.setup.js'),
transformedSetupCode: expect.any(String),
Expand All @@ -71,7 +96,12 @@ describe('addonA11yAddonTest', () => {
throw new Error('Test error');
});

const result = await addonA11yAddonTest.check({ mainConfig, configDir } as any);
const result = await addonA11yAddonTest.check({
mainConfig: {
framework: '@storybook/sveltekit',
},
configDir,
} as any);
expect(result).toEqual({
setupFile: path.join(configDir, 'vitest.setup.js'),
transformedSetupCode: null,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { rendererPackages } from 'storybook/internal/common';

import { existsSync, readFileSync, writeFileSync } from 'fs';
import * as jscodeshift from 'jscodeshift';
import path from 'path';
import picocolors from 'picocolors';
import { dedent } from 'ts-dedent';

import { getAddonNames } from '../helpers/mainConfigFile';
// Relative path import to avoid dependency to @storybook/test
import {
SUPPORTED_FRAMEWORKS,
SUPPORTED_RENDERERS,
} from '../../../../../addons/test/src/constants';
import { getAddonNames, getFrameworkPackageName, getRendererName } from '../helpers/mainConfigFile';
import type { Fix } from '../types';

export const vitestFileExtensions = ['.js', '.ts', '.cts', '.mts', '.cjs', '.mjs'] as const;
Expand Down Expand Up @@ -35,11 +42,23 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
async check({ mainConfig, configDir }) {
const addons = getAddonNames(mainConfig);

const frameworkPackageName = getFrameworkPackageName(mainConfig);
valentinpalkovic marked this conversation as resolved.
Show resolved Hide resolved
const rendererPackageName = getRendererName(mainConfig);

const hasA11yAddon = !!addons.find((addon) => addon.includes('@storybook/addon-a11y'));
const hasTestAddon = !!addons.find((addon) =>
addon.includes('@storybook/experimental-addon-test')
valentinpalkovic marked this conversation as resolved.
Show resolved Hide resolved
);

if (
!SUPPORTED_FRAMEWORKS.find((framework) => frameworkPackageName?.includes(framework)) &&
!SUPPORTED_RENDERERS.find((renderer) =>
rendererPackageName?.includes(rendererPackages[renderer])
)
) {
valentinpalkovic marked this conversation as resolved.
Show resolved Hide resolved
return null;
}

if (!hasA11yAddon || !hasTestAddon || !configDir) {
return null;
}
Expand Down
Loading