Merge pull request #26766 from storybookjs/norbert/vta-added-on-upgrade

CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x

code/lib/cli/src/automigrate/fixes/index.ts

@@ -26,6 +26,7 @@ import { removeJestTestingLibrary } from './remove-jest-testing-library';
 import { addonsAPI } from './addons-api';
 import { mdx1to3 } from './mdx-1-to-3';
 import { addonPostCSS } from './addon-postcss';
+import { vta } from './vta';
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
 
 export * from '../types';
@@ -58,6 +59,7 @@ export const allFixes: Fix[] = [
   webpack5CompilerSetup,
   mdx1to3,
   upgradeStorybookRelatedDependencies,
+  vta,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];

code/lib/cli/src/automigrate/fixes/vta.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import type { StorybookConfig } from '@storybook/types';
+import { vta } from './vta';
+
+const check = async ({
+  packageManager,
+  main: mainConfig,
+  storybookVersion = '7.0.0',
+}: {
+  packageManager: any;
+  main: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+}) => {
+  return vta.check({
+    packageManager,
+    configDir: '',
+    mainConfig: mainConfig as any,
+    storybookVersion,
+  });
+};
+
+describe('no-ops', () => {
+  it('with addon setup', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          addons: ['@chromatic-com/storybook'],
+        },
+      })
+    ).resolves.toBeFalsy();
+  });
+  it('with addon setup with options', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          addons: [
+            {
+              name: '@chromatic-com/storybook',
+              options: {},
+            },
+          ],
+        },
+      })
+    ).resolves.toBeFalsy();
+  });
+});
+
+describe('continue', () => {
+  it('no addons', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          stories: ['**/*.stories.mdx'],
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+});

code/lib/cli/src/automigrate/fixes/vta.ts

@@ -0,0 +1,55 @@
+import { dedent } from 'ts-dedent';
+import chalk from 'chalk';
+import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile';
+import type { Fix } from '../types';
+
+const logger = console;
+
+interface Options {}
+
+/**
+ */
+export const vta: Fix<Options> = {
+  id: 'visual-tests-addon',
+
+  versionRange: ['<8.0.7', '>=8.0.7'],
+
+  async check({ mainConfig }) {
+    const hadAddonInstalled = getAddonNames(mainConfig).some((addon) =>
+      addon.includes('@chromatic-com/storybook')
+    );
+
+    const skip = hadAddonInstalled;
+
+    if (skip) {
+      return null;
+    }
+
+    return {};
+  },
+
+  prompt() {
+    return dedent`
+      New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team.
+
+      Learn more: ${chalk.yellow('storybook.js.org/docs/writing-tests/visual-testing')}
+      
+      Install Visual Tests addon in your project?
+    `;
+  },
+
+  async run({ packageManager, dryRun, mainConfigPath, skipInstall }) {
+    if (!dryRun) {
+      const packageJson = await packageManager.retrievePackageJson();
+      await packageManager.addDependencies(
+        { installAsDevDependencies: true, skipInstall, packageJson },
+        [`@chromatic-com/storybook@^1`]
+      );
+
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
+        logger.info(`✅ Adding "@chromatic-com/storybook" addon`);
+        main.appendValueToArray(['addons'], '@chromatic-dom/storybook');
+      });
+    }
+  },
+};