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.

Sign up for GitHub

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

Addon Test: Improve postinstall script #29479

Merged
merged 3 commits into from
Oct 30, 2024
Merged

Addon Test: Improve postinstall script #29479

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
846d1fd
Improve postinstall script for addon test
yannbf Oct 29, 2024
b82bc68
pass configDir down to storybook remove command
yannbf Oct 29, 2024
9aac063
fix types
yannbf Oct 30, 2024
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
100 changes: 55 additions & 45 deletions code/addons/test/src/postinstall.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,43 +53,6 @@ export default async function postInstall(options: PostinstallOptions) {
// if Vitest is installed, we use the same version to keep consistency across Vitest packages
const vitestVersionToInstall = vitestVersionSpecifier ?? 'latest';

const addonInteractionsName = '@storybook/addon-interactions';
const interactionsAddon = info.addons.find((addon: string | { name: string }) => {
// account for addons as objects, as well as addons with PnP paths
const addonName = typeof addon === 'string' ? addon : addon.name;
return addonName.includes(addonInteractionsName);
});

if (!!interactionsAddon) {
let shouldUninstall = options.yes;
if (!options.yes) {
logger.plain(dedent`
We have detected that you're using ${addonInteractionsName}.
The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically.

More info: ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/test-addon')}
`);

const response = await prompts({
type: 'confirm',
name: 'shouldUninstall',
message: `Would you like me to remove and unregister ${addonInteractionsName}?`,
initial: true,
});

shouldUninstall = response.shouldUninstall;
}

if (shouldUninstall) {
await execa(
packageManager.getRemoteRunCommand(),
['storybook', 'remove', addonInteractionsName, '--package-manager', options.packageManager],
{
shell: true,
}
);
}
}
const annotationsImport = [
'@storybook/nextjs',
'@storybook/experimental-nextjs-vite',
Expand Down Expand Up @@ -122,9 +85,9 @@ export default async function postInstall(options: PostinstallOptions) {
`);
}

if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.0.0')) {
reasons.push(`
• The addon requires Vitest 2.0.0 or later. You are currently using ${vitestVersionSpecifier}.
if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.1.0')) {
reasons.push(dedent`
• The addon requires Vitest 2.1.0 or later. You are currently using ${picocolors.bold(vitestVersionSpecifier)}.
Please update your ${picocolors.bold(colors.pink('vitest'))} dependency and try again.
`);
}
Expand All @@ -145,7 +108,7 @@ export default async function postInstall(options: PostinstallOptions) {
);
reasons.push(
dedent`
To roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array
You can fix these issues and rerun the command to reinstall. If you wish to roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array
in your main Storybook config file and remove the dependency from your package.json file.
`
);
Expand Down Expand Up @@ -180,6 +143,49 @@ export default async function postInstall(options: PostinstallOptions) {
return;
}

const addonInteractionsName = '@storybook/addon-interactions';
const interactionsAddon = info.addons.find((addon: string | { name: string }) => {
// account for addons as objects, as well as addons with PnP paths
const addonName = typeof addon === 'string' ? addon : addon.name;
return addonName.includes(addonInteractionsName);
});

if (!!interactionsAddon) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: double negation could be simplified to just if (interactionsAddon)

let shouldUninstall = options.yes;
if (!options.yes) {
printInfo(
'⚠️ Attention',
dedent`
We have detected that you're using ${addonInteractionsName}.
The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically.

More info: ${picocolors.cyan('https://storybook.js.org/docs/writing-tests/test-addon')}
`
);

const response = await prompts({
type: 'confirm',
name: 'shouldUninstall',
message: `Would you like me to remove and unregister ${addonInteractionsName}? Press N to abort the entire installation.`,
initial: true,
});

shouldUninstall = response.shouldUninstall;
}

if (shouldUninstall) {
await execa(
packageManager.getRemoteRunCommand(),
['storybook', 'remove', addonInteractionsName, '--package-manager', options.packageManager],
{
shell: true,
}
);
} else {
return;
}
}

const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);

if (info.frameworkPackageName === '@storybook/nextjs') {
Expand Down Expand Up @@ -317,6 +323,8 @@ export default async function postInstall(options: PostinstallOptions) {
// If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
const extname = path.extname(rootConfig);
const browserWorkspaceFile = path.resolve(dirname(rootConfig), `vitest.workspace${extname}`);
// to be set in vitest config
const vitestSetupFilePath = path.relative(path.dirname(browserWorkspaceFile), vitestSetupFile);

logger.line(1);
logger.plain(`${step} Creating a Vitest project workspace file:`);
Expand All @@ -335,7 +343,7 @@ export default async function postInstall(options: PostinstallOptions) {
extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}',
plugins: [
// See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
storybookTest(),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
],
test: {
name: 'storybook',
Expand All @@ -347,7 +355,7 @@ export default async function postInstall(options: PostinstallOptions) {
},
// Make sure to adjust this pattern to match your stories files.
include: ['**/*.stories.?(m)[jt]s?(x)'],
setupFiles: ['./.storybook/vitest.setup.ts'],
setupFiles: ['${vitestSetupFilePath}'],
},
},
]);
Expand All @@ -356,6 +364,8 @@ export default async function postInstall(options: PostinstallOptions) {
} else {
// If there's no existing Vitest/Vite config, we create a new Vitest config file.
const newVitestConfigFile = path.resolve('vitest.config.ts');
// to be set in vitest config
const vitestSetupFilePath = path.relative(path.dirname(newVitestConfigFile), vitestSetupFile);

logger.line(1);
logger.plain(`${step} Creating a Vitest project config file:`);
Expand All @@ -371,7 +381,7 @@ export default async function postInstall(options: PostinstallOptions) {
export default defineConfig({
plugins: [
// See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
storybookTest(),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
],
test: {
name: 'storybook',
Expand All @@ -383,7 +393,7 @@ export default async function postInstall(options: PostinstallOptions) {
},
// Make sure to adjust this pattern to match your stories files.
include: ['**/*.stories.?(m)[jt]s?(x)'],
setupFiles: ['./.storybook/vitest.setup.ts'],
setupFiles: ['${vitestSetupFilePath}'],
},
});
`
Expand Down
Loading