storybook/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts

/* eslint-disable no-underscore-dangle */
import path from 'path';
import { JsPackageManager } from '../../js-package-manager';
import { newFrameworks } from './new-frameworks';

// eslint-disable-next-line global-require, jest/no-mocks-import
jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));

const checkNewFrameworks = async ({ packageJson, main }) => {
  if (main) {
    // eslint-disable-next-line global-require
    require('fs-extra').__setMockFiles({
      [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`,
    });
  }
  const packageManager = {
    retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }),
  } as JsPackageManager;
  return newFrameworks.check({ packageManager });
};

describe('new-frameworks fix', () => {
  describe('should no-op', () => {
    it('in sb < 7', async () => {
      const packageJson = { dependencies: { '@storybook/vue': '^6.2.0' } };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: {},
        })
      ).resolves.toBeFalsy();
    });

    it('in sb 7 with no main', async () => {
      const packageJson = { dependencies: { '@storybook/vue': '^7.0.0' } };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: undefined,
        })
      ).resolves.toBeFalsy();
    });

    it('in sb 7 with no framework field in main', async () => {
      const packageJson = { dependencies: { '@storybook/vue': '^7.0.0' } };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: {},
        })
      ).resolves.toBeFalsy();
    });

    it('in sb 7 with no builder', async () => {
      const packageJson = { dependencies: { '@storybook/vue': '^7.0.0' } };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: {
            framework: '@storybook/vue',
          },
        })
      ).resolves.toBeFalsy();
    });

    it('in sb 7 with unsupported package', async () => {
      const packageJson = { dependencies: { '@storybook/riot': '^7.0.0' } };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: {
            framework: '@storybook/riot',
            core: {
              builder: 'webpack5',
            },
          },
        })
      ).resolves.toBeFalsy();
    });

    // TODO: once we have vite frameworks e.g. @storybook/react-vite, then we should remove this test
    it('in sb 7 with vite', async () => {
      const packageJson = { dependencies: { '@storybook/react': '^7.0.0' } };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: {
            framework: '@storybook/react',
            core: {
              builder: '@storybook/builder-vite',
            },
          },
        })
      ).resolves.toBeFalsy();
    });
  });

  describe('sb >= 7', () => {
    describe('new-frameworks dependency', () => {
      it('should update to @storybook/react-webpack5', async () => {
        const packageJson = {
          dependencies: {
            '@storybook/react': '^7.0.0-alpha.0',
            '@storybook/builder-webpack5': '^6.5.9',
            '@storybook/manager-webpack5': '^6.5.9',
          },
        };
        await expect(
          checkNewFrameworks({
            packageJson,
            main: {
              framework: '@storybook/react',
              core: {
                builder: {
                  name: 'webpack5',
                  options: {
                    lazyCompilation: true,
                  },
                },
              },
              reactOptions: {
                fastRefresh: true,
              },
            },
          })
        ).resolves.toEqual(
          expect.objectContaining({
            frameworkPackage: '@storybook/react',
            dependenciesToAdd: ['@storybook/react-webpack5'],
            dependenciesToRemove: [
              '@storybook/react',
              '@storybook/builder-webpack5',
              '@storybook/manager-webpack5',
            ],
            frameworkOptions: {
              fastRefresh: true,
            },
            builderInfo: {
              name: 'webpack5',
              options: {
                lazyCompilation: true,
              },
            },
          })
        );
      });
    });

    // TODO: enable this once Vite is supported
    // eslint-disable-next-line jest/no-disabled-tests
    it.skip('should update to @storybook/react-vite', async () => {
      const packageJson = {
        dependencies: {
          '@storybook/react': '^7.0.0-alpha.0',
          '@storybook/builder-vite': '^0.0.2',
        },
      };
      await expect(
        checkNewFrameworks({
          packageJson,
          main: {
            framework: '@storybook/react',
            core: {
              builder: '@storybook/builder-vite',
            },
          },
        })
      ).resolves.toEqual(
        expect.objectContaining({
          dependenciesToAdd: '@storybook/react-vite',
          dependenciesToRemove: [
            '@storybook/react',
            'storybook-builder-vite',
            '@storybook/builder-vite',
          ],
        })
      );
    });
  });
});