@servicetitan/startup 22.17.0 → 22.18.0

package/src/webpack/__tests__/create-shared-config.test.ts

@@ -1,508 +0,0 @@
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import mockFS from 'mock-fs';
-import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
-import os from 'os';
-import path from 'path';
-import { DefinePlugin, ProvidePlugin } from 'webpack';
-import WebpackAssetsManifest from 'webpack-assets-manifest';
-import VirtualModulesPlugin from 'webpack-virtual-modules';
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
-import { argv } from 'yargs';
-import {
-    getFolders,
-    getPackageData,
-    getPackageDependencyVersion,
-    getTsConfig,
-    isExposeSharedDependencies,
-    isWebComponent,
-    loadSharedDependencies,
-} from '../../utils';
-import { getModuleEntryPath } from '../utils/bundle';
-import { splitByEntry } from '../utils/split-by-entry';
-
-import { createConfig as createSharedConfig } from '../shared.config';
-
-jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
-jest.mock('html-webpack-plugin', () => jest.fn());
-jest.mock('moment-locales-webpack-plugin', () => jest.fn());
-jest.mock('webpack', () => ({
-    ...jest.requireActual('webpack'),
-    DefinePlugin: jest.fn(),
-    ProvidePlugin: jest.fn(),
-}));
-jest.mock('webpack-assets-manifest', () => jest.fn());
-jest.mock('webpack-bundle-analyzer', () => ({ BundleAnalyzerPlugin: jest.fn() }));
-jest.mock('webpack-filter-warnings-plugin', () => jest.fn());
-jest.mock('webpack-virtual-modules', () => jest.fn());
-jest.mock('yargs', () => ({ argv: {} }));
-jest.mock('../../utils', () => ({
-    ...jest.requireActual('../../utils'),
-    getFolders: jest.fn(),
-    getPackageData: jest.fn(),
-    getPackageDependencyVersion: jest.fn(),
-    getTsConfig: jest.fn(),
-    loadSharedDependencies: jest.fn(),
-    isExposeSharedDependencies: jest.fn(),
-    isWebComponent: jest.fn(),
-}));
-jest.mock('../utils/bundle', () => ({
-    ...jest.requireActual('../utils/bundle'),
-    getModuleEntryPath: jest.fn(),
-}));
-
-describe('createSharedConfig', () => {
-    const source = 'src';
-    const destination = 'dist';
-    const tsConfig = 'tsconfig.build.json';
-
-    let overrides: Parameters<typeof createSharedConfig>[0];
-    let options: Parameters<typeof createSharedConfig>[1];
-
-    function mockPlugIn(name: string) {
-        return (options: Record<string, any>): any => ({ [name]: options });
-    }
-
-    beforeEach(() => {
-        overrides = {
-            configuration: { mode: 'production' },
-            plugins: {
-                ForkTsCheckerWebpackPlugin: { logger: 'webpack-infrastructure' },
-                HtmlWebpackPlugin: { favicon: 'foo' },
-            },
-        };
-        options = { name: '' };
-
-        jest.resetAllMocks();
-        jest.mocked(BundleAnalyzerPlugin).mockImplementation(mockPlugIn('BundleAnalyzerPlugin'));
-        jest.mocked(DefinePlugin).mockImplementation(mockPlugIn('DefinePlugin'));
-        jest.mocked(FilterWarningsPlugin).mockImplementation(mockPlugIn('FilterWarningsPlugin'));
-        jest.mocked(ForkTsCheckerWebpackPlugin).mockImplementation(
-            mockPlugIn('ForkTsCheckerWebpackPlugin')
-        );
-        jest.mocked(HtmlWebpackPlugin).mockImplementation(mockPlugIn('HtmlWebpackPlugin'));
-        jest.mocked(MomentLocalesPlugin).mockImplementation(mockPlugIn('MomentLocalesPlugin'));
-        jest.mocked(ProvidePlugin).mockImplementation(mockPlugIn('ProvidePlugin'));
-        jest.mocked(VirtualModulesPlugin).mockImplementation(mockPlugIn('VirtualModulesPlugin'));
-        jest.mocked(WebpackAssetsManifest).mockImplementation(mockPlugIn('WebpackAssetsManifest'));
-
-        jest.mocked(getFolders).mockReturnValue({ source, destination });
-        jest.mocked(getPackageData).mockReturnValue({ dependencies: {}, sharedDependencies: {} });
-        jest.mocked(getTsConfig).mockReturnValue(tsConfig);
-        jest.mocked(loadSharedDependencies).mockReturnValue({});
-
-        Object.keys(argv).forEach(key => delete (argv as any)[key]);
-    });
-
-    const subject = () => createSharedConfig(overrides, options);
-
-    test('includes input configuration', () => {
-        expect(subject()).toEqual(expect.objectContaining(overrides.configuration));
-    });
-
-    test('configures "resolve"', () => {
-        expect(subject().resolve).toEqual({ extensions: ['.js', '.jsx', '.ts', '.tsx'] });
-    });
-
-    test('configures "entry"', () => {
-        expect(subject().entry).toEqual({ main: [`./${source}/index`] });
-    });
-
-    Object.entries({
-        '.js': {
-            test: /\.js$/,
-            enforce: 'pre',
-            exclude: /node_modules/,
-            loader: 'source-map-loader',
-        },
-        '.worker.js': {
-            test: /\.worker\.js$/,
-            use: { loader: 'worker-loader' },
-        },
-        'images': {
-            test: /\.(png|svg|jpg|jpeg|gif)$/i,
-            type: 'asset',
-            generator: { filename: 'images/[contenthash][ext][query]' },
-        },
-        'fonts': {
-            test: /\.(woff|woff2|eot|ttf|otf)$/i,
-            type: 'asset/resource',
-            generator: { filename: 'fonts/[contenthash][ext][query]' },
-        },
-        '.tsx': {
-            test: /\.tsx?$/,
-            exclude: /node_modules/,
-            use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
-        },
-    }).forEach(([extension, rule]) => {
-        test(`configures "${extension}" rules`, () => {
-            expect(subject().module?.rules).toContainEqual(rule);
-        });
-    });
-
-    test('configures "output.path"', () => {
-        expect(subject().output!.path).toEqual(
-            expect.stringContaining(path.join(destination, 'bundle'))
-        );
-    });
-
-    test('configures "optimization"', () => {
-        expect(subject().optimization).toEqual({
-            chunkIds: 'size',
-            moduleIds: 'size',
-            mangleExports: 'size',
-            splitChunks: { cacheGroups: {} },
-        });
-    });
-
-    test('configures "stats"', () => {
-        expect(subject().stats).toEqual({
-            all: false,
-            errors: true,
-            errorDetails: true,
-            warnings: true,
-            builtAt: true,
-            colors: true,
-        });
-    });
-
-    test('configures MomentLocalesPlugin plugin', () => {
-        expect(subject().plugins).toContainEqual(
-            new MomentLocalesPlugin({ localesToKeep: ['en-au', 'en-ca', 'en-gb'] })
-        );
-    });
-
-    test('configures ForkTsCheckerWebpackPlugin plugin', () => {
-        expect(subject().plugins).toContainEqual(
-            new ForkTsCheckerWebpackPlugin({
-                typescript: {
-                    configFile: tsConfig,
-                    configOverwrite: {
-                        exclude: [
-                            '**/__tests__/**/*',
-                            '**/__mocks__/**/*',
-                            '**/*.test.*',
-                            '**/*.stories.tsx',
-                        ],
-                        references: [],
-                    },
-                },
-                ...overrides.plugins?.ForkTsCheckerWebpackPlugin,
-            })
-        );
-    });
-
-    test('configures FilterWarningsPlugin plugin', () => {
-        expect(subject().plugins).toContainEqual(
-            new FilterWarningsPlugin({
-                exclude: /export .* was not found in/,
-            })
-        );
-    });
-
-    const defaultHtmlWebpackPluginOptions: ConstructorParameters<typeof HtmlWebpackPlugin>[0] = {
-        title: 'ServiceTitan',
-        hash: true,
-        templateParameters: { splitByEntry },
-    };
-
-    test('configures HtmlWebpackPlugin plugin', () => {
-        expect(subject().plugins).toContainEqual(
-            new HtmlWebpackPlugin({
-                ...defaultHtmlWebpackPluginOptions,
-                ...overrides.plugins?.HtmlWebpackPlugin,
-            })
-        );
-    });
-
-    describe('when package is web component', () => {
-        const designSystemPath = () => path.join(process.cwd(), `${source}/design-system.css`);
-        const designSystemCode = [
-            `@import '~@servicetitan/tokens/core/tokens.css';`,
-            `@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
-            `@import '~@servicetitan/design-system/dist/system.min.css';`,
-        ].join('\n');
-
-        const indexPath = () => path.join(process.cwd(), `${source}/index.ts`);
-        const indexCode = [
-            `import { register } from '@servicetitan/web-components';`,
-            `import { App } from './app';`,
-            `require('./design-system.css');`,
-            `register(App, false);`,
-        ].join('\n');
-
-        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
-
-        test('configures WEB_COMPONENT_NAME', () => {
-            expect(subject().plugins).toContainEqual(
-                // eslint-disable-next-line @typescript-eslint/naming-convention
-                new DefinePlugin({ WEB_COMPONENT_NAME: JSON.stringify(options.name) })
-            );
-        });
-
-        test('configures WebpackAssetsManifest plugin', () => {
-            expect(subject().plugins).toContainEqual(
-                new WebpackAssetsManifest({
-                    entrypoints: true,
-                    output: 'entrypoints.json',
-                    transform: expect.any(Function),
-                })
-            );
-        });
-
-        test('WebpackAssetsManifest plugin groups assets by type', () => {
-            const assets = {
-                entrypoints: {
-                    foo: { assets: { css: ['bar.css'] } },
-                    baz: { assets: { js: ['qux.js'] } },
-                },
-            };
-
-            subject();
-
-            const transform: any = jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.transform;
-            expect(transform(assets)).toEqual({
-                css: ['bar.css'],
-                js: ['qux.js'],
-            });
-        });
-
-        test('configures HtmlWebpackPlugin plugin with additional properties', () => {
-            expect(subject().plugins).toContainEqual(
-                new HtmlWebpackPlugin({
-                    ...defaultHtmlWebpackPluginOptions,
-                    ...overrides.plugins?.HtmlWebpackPlugin,
-                    inject: false,
-                    publicPath: '/',
-                    templateContent: expect.any(Function),
-                })
-            );
-        });
-
-        test('configures HtmlWebpackPlugin plugin to render template content', () => {
-            const headTags = '{headTags}';
-            const bodyTags = '{bodyTags}';
-            const files = { css: ['foo.css'] };
-            const styleUrls = encodeURIComponent(JSON.stringify(files.css));
-            const template = `
-                <!DOCTYPE html>
-                <html>
-                    <head>
-                        <meta name="viewport" content="width=device-width,initial-scale=1">
-                        ${headTags}
-                    </head>
-                    <body>
-                        <${options.name} style-urls="${styleUrls}" />
-                        ${bodyTags}
-                    </body>
-                </html>
-            `;
-
-            subject();
-
-            const templateContent: any =
-                jest.mocked(HtmlWebpackPlugin).mock.calls[0][0]?.templateContent;
-            expect(
-                templateContent({
-                    htmlWebpackPlugin: { tags: { headTags, bodyTags }, files },
-                }).replace(/\n\s+/g, '\n')
-            ).toEqual(template.replace(/\n\s+/g, '\n'));
-        });
-
-        test(`configures virtual modules`, () => {
-            expect(subject().plugins).toContainEqual(
-                new VirtualModulesPlugin({
-                    [designSystemPath()]: designSystemCode,
-                    [indexPath()]: indexCode,
-                })
-            );
-        });
-
-        test('appends "/full" to output path', () => {
-            expect(subject().output?.path).toEqual(
-                expect.stringContaining(path.join(destination, 'bundle', 'full'))
-            );
-        });
-
-        test('configures "optimization.splitChunks.cacheGroups.styles', () => {
-            expect((subject().optimization?.splitChunks as any).cacheGroups.styles).toEqual({
-                name: 'main',
-                type: 'css/mini-extract',
-                chunks: 'all',
-                enforce: true,
-            });
-        });
-
-        describe('when design-system.css exists', () => {
-            beforeEach(() => mockFS({ [source]: { 'design-system.css': '' } }));
-            afterEach(() => mockFS.restore());
-
-            test('omits design system virtual module', () => {
-                expect(subject().plugins).toContainEqual(
-                    new VirtualModulesPlugin({
-                        [indexPath()]: indexCode,
-                    })
-                );
-            });
-        });
-
-        describe('when embed option is set to true', () => {
-            beforeEach(() => (options.embed = true));
-
-            test(`changes virtual index module to omit design system and to register App`, () => {
-                expect(subject().plugins).toContainEqual(
-                    new VirtualModulesPlugin({
-                        [designSystemPath()]: designSystemCode,
-                        [indexPath()]: indexCode
-                            .replace("require('./design-system.css');\n", '')
-                            .replace('register(App, false)', 'register(App, true)'),
-                    })
-                );
-            });
-
-            test('appends "/light" to output path', () => {
-                expect(subject().output?.path).toEqual(
-                    expect.stringContaining(path.join(destination, 'bundle', 'light'))
-                );
-            });
-        });
-    });
-
-    describe('when package exposes shared dependencies', () => {
-        const sharedDependencies = {
-            '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
-            'react': 'SharedDependencies.React',
-        };
-        const dependencies: Record<string, string> = {
-            '@servicetitan/design-system': '1.2.3',
-            'react': '4.5.6',
-        };
-
-        beforeEach(() => {
-            jest.mocked(isExposeSharedDependencies).mockReturnValue(true);
-            jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
-            jest.mocked(getModuleEntryPath).mockImplementation(name => `${name}/entryPath`);
-            jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
-            jest.mocked(getPackageDependencyVersion).mockImplementation(
-                (_, defaultVersion) => defaultVersion
-            );
-        });
-
-        test('configures EXPOSE_DEPENDENCIES', () => {
-            const exposedDependencies = Object.fromEntries(
-                Object.entries(sharedDependencies).map(([name, variable]) => [
-                    name,
-                    {
-                        version: getPackageDependencyVersion(name, dependencies[name]),
-                        variable,
-                    },
-                ])
-            );
-            expect(subject().plugins).toContainEqual(
-                new DefinePlugin({
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
-                })
-            );
-        });
-
-        test('configures shared dependency entry points', () => {
-            expect(subject().entry).toEqual({
-                main: expect.arrayContaining(
-                    Object.keys(sharedDependencies).map(getModuleEntryPath)
-                ),
-            });
-        });
-
-        test('configures shared dependencies to use expose-loader', () => {
-            Object.entries(sharedDependencies).forEach(([name, value]) => {
-                expect(subject().module?.rules).toContainEqual({
-                    test: getModuleEntryPath(name),
-                    loader: require.resolve('../loaders/expose-loader'),
-                    options: { exposes: value },
-                });
-            });
-        });
-
-        test('configures "optimization.splitChunks.cacheGroups.design-system"', () => {
-            expect(
-                (subject().optimization?.splitChunks as any).cacheGroups['design-system']
-            ).toEqual({
-                test: /[\\/]node_modules[\\/]@servicetitan[\\/](tokens|anvil-fonts|design-system)[\\/].*\.css$/,
-                name: 'design-system',
-                chunks: 'all',
-                enforce: true,
-            });
-        });
-
-        describe('when embed option is set to true', () => {
-            beforeEach(() => (options.embed = true));
-
-            test('configures "externals"', () => {
-                expect(subject().externals).toEqual(
-                    Object.fromEntries(
-                        Object.entries(sharedDependencies).map(([name, value]) => [
-                            name,
-                            `${value}['${options.name}']`,
-                        ])
-                    )
-                );
-            });
-        });
-    });
-
-    describe('when buildStat option is set to true', () => {
-        beforeEach(() => {
-            options.buildStat = true;
-            jest.useFakeTimers();
-            jest.spyOn(os, 'tmpdir').mockReturnValue('tmpdir');
-        });
-
-        const reportFilename = (type: string) =>
-            path.join(os.tmpdir(), `report-${type}-bundle-${Date.now()}.html`);
-
-        test('configures BundleAnalyzerPlugin plugin', () => {
-            expect(subject().plugins).toContainEqual(
-                new BundleAnalyzerPlugin({
-                    analyzerMode: 'static',
-                    reportFilename: reportFilename('full'),
-                })
-            );
-        });
-
-        describe('when embed option is set to true', () => {
-            beforeEach(() => (options.embed = true));
-
-            test('changes BundleAnalyzerPlugin reportFilename from "full" to "light"', () => {
-                expect(subject().plugins).toContainEqual(
-                    new BundleAnalyzerPlugin({
-                        analyzerMode: 'static',
-                        reportFilename: reportFilename('light'),
-                    })
-                );
-            });
-        });
-    });
-
-    describe('with --esbuild command line argument', () => {
-        beforeEach(() => Object.assign(argv, { esbuild: true }));
-
-        test('configures ".tsx" rules to use esbuild-loader', () => {
-            expect(subject().module?.rules).toContainEqual({
-                test: /\.tsx?$/,
-                exclude: /node_modules/,
-                use: [
-                    {
-                        loader: 'esbuild-loader',
-                        options: { loader: 'tsx', target: 'es2018' },
-                    },
-                ],
-            });
-        });
-
-        test('configures React to load automatically', () => {
-            expect(subject().plugins).toContainEqual(new ProvidePlugin({ React: 'react' }));
-        });
-    });
-});