Merge branch 'next' into shilman/cli-new-users

Author: shilman

code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js

@@ -1,6 +1,12 @@
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-vitest'],
+  addons: [
+    {
+      name: '@chromatic-com/storybook',
+      options: {},
+    },
+    '@storybook/addon-vitest',
+  ],
   framework: {
     name: '@storybook/angular',
     options: {},

code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts

@@ -193,9 +193,9 @@ export function wrapValueWithRequireWrapper(config: ConfigFile, node: t.Node) {
     }
 
     if (t.isArrayExpression(n)) {
-      n.elements.forEach((element, index, elements) => {
-        if (t.isStringLiteral(element)) {
-          elements[index] = getReferenceToRequireWrapper(config, element.value);
+      n.elements.forEach((element) => {
+        if (element && isRequireWrapperNecessary(element)) {
+          wrapValueWithRequireWrapper(config, element);
         }
       });
     }

code/lib/cli-storybook/src/automigrate/fixes/wrap-require.test.ts

@@ -3,13 +3,19 @@ import { describe, expect, it, vi } from 'vitest';
 
 import * as detect from 'storybook/internal/cli';
 
-import { wrapRequire } from './wrap-require';
+import type { RunOptions } from '../types';
+import { type WrapRequireRunOptions, wrapRequire } from './wrap-require';
 
 vi.mock('storybook/internal/cli', async (importOriginal) => ({
   ...(await importOriginal<typeof import('storybook/internal/cli')>()),
   detectPnp: vi.fn(),
 }));
 
+vi.mock('node:fs/promises', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('node:fs/promises')>()),
+  writeFile: vi.fn(),
+}));
+
 describe('wrapRequire', () => {
   describe('check', () => {
     it('should return null if not in a monorepo and pnp is not enabled', async () => {
@@ -21,7 +27,7 @@ describe('wrapRequire', () => {
         },
         storybookVersion: '7.0.0',
         mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
-      } as any);
+      } as RunOptions<WrapRequireRunOptions>);
 
       await expect(check).resolves.toBeNull();
     });
@@ -35,7 +41,7 @@ describe('wrapRequire', () => {
         },
         storybookVersion: '7.0.0',
         mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
-      } as any);
+      } as RunOptions<WrapRequireRunOptions>);
 
       await expect(check).resolves.toEqual({
         isConfigTypescript: false,
@@ -54,7 +60,7 @@ describe('wrapRequire', () => {
         },
         storybookVersion: '7.0.0',
         mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
-      } as any);
+      } as RunOptions<WrapRequireRunOptions>);
 
       await expect(check).resolves.toEqual({
         isConfigTypescript: false,
@@ -73,9 +79,51 @@ describe('wrapRequire', () => {
         },
         storybookVersion: '7.0.0',
         mainConfigPath: require.resolve('./__test__/main-config-with-wrappers.js'),
-      } as any);
+      } as RunOptions<WrapRequireRunOptions>);
 
       await expect(check).resolves.toBeNull();
     });
   });
+
+  describe('run', () => {
+    it('should wrap the require wrapper', async () => {
+      await wrapRequire.run?.({
+        mainConfigPath: require.resolve('./__test__/main-config-without-wrappers.js'),
+        result: {
+          isConfigTypescript: false,
+        },
+      } as RunOptions<WrapRequireRunOptions>);
+
+      const writeFile = vi.mocked((await import('node:fs/promises')).writeFile);
+
+      const call = writeFile.mock.calls[0];
+
+      expect(call[1]).toMatchInlineSnapshot(`
+  "import { dirname, join } from "path";
+  const config = {
+    stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+      {
+        name: getAbsolutePath("@chromatic-com/storybook"),
+        options: {},
+      },
+      getAbsolutePath("@storybook/addon-vitest"),
+    ],
+    framework: {
+      name: getAbsolutePath("@storybook/angular"),
+      options: {},
+    },
+    docs: {
+      autodocs: 'tag',
+    },
+  };
+  export default config;
+
+  function getAbsolutePath(value) {
+    return dirname(require.resolve(join(value, "package.json")));
+  }
+  "
+`);
+    });
+  });
 });

code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts

@@ -14,7 +14,7 @@ import {
   wrapValueWithRequireWrapper,
 } from './wrap-require-utils';
 
-interface WrapRequireRunOptions {
+export interface WrapRequireRunOptions {
   storybookVersion: string;
   isStorybookInMonorepo: boolean;
   isPnp: boolean;
@@ -61,34 +61,24 @@ export const wrapRequire: Fix<WrapRequireRunOptions> = {
   },
 
   async run({ dryRun, mainConfigPath, result }) {
-    return new Promise((resolve, reject) => {
-      updateMainConfig({ dryRun: !!dryRun, mainConfigPath }, (mainConfig) => {
-        try {
-          getFieldsForRequireWrapper(mainConfig).forEach((node) => {
-            wrapValueWithRequireWrapper(mainConfig, node);
-          });
-
-          if (getRequireWrapperName(mainConfig) === null) {
-            if (
-              mainConfig?.fileName?.endsWith('.cjs') ||
-              mainConfig?.fileName?.endsWith('.cts') ||
-              mainConfig?.fileName?.endsWith('.cjsx') ||
-              mainConfig?.fileName?.endsWith('.ctsx')
-            ) {
-              mainConfig.setRequireImport(['dirname', 'join'], 'path');
-            } else {
-              mainConfig.setImport(['dirname', 'join'], 'path');
-            }
-            mainConfig.setBodyDeclaration(
-              getRequireWrapperAsCallExpression(result.isConfigTypescript)
-            );
-          }
-
-          resolve();
-        } catch (e) {
-          reject(e);
-        }
+    await updateMainConfig({ dryRun: !!dryRun, mainConfigPath }, (mainConfig) => {
+      getFieldsForRequireWrapper(mainConfig).forEach((node) => {
+        wrapValueWithRequireWrapper(mainConfig, node);
       });
+
+      if (getRequireWrapperName(mainConfig) === null) {
+        if (
+          mainConfig?.fileName?.endsWith('.cjs') ||
+          mainConfig?.fileName?.endsWith('.cts') ||
+          mainConfig?.fileName?.endsWith('.cjsx') ||
+          mainConfig?.fileName?.endsWith('.ctsx')
+        ) {
+          mainConfig.setRequireImport(['dirname', 'join'], 'path');
+        } else {
+          mainConfig.setImport(['dirname', 'join'], 'path');
+        }
+        mainConfig.setBodyDeclaration(getRequireWrapperAsCallExpression(result.isConfigTypescript));
+      }
     });
   },
 };