@servicetitan/startup 22.17.0 → 22.19.0

package/src/webpack/__tests__/create-webpack-config-web-component.test.ts

@@ -0,0 +1,331 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import mockFS from 'mock-fs';
+import path from 'path';
+import { DefinePlugin } from 'webpack';
+import WebpackAssetsManifest from 'webpack-assets-manifest';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
+
+import { webpackDevConfigFileName, webpackProdConfigFileName } from '../../cli/utils';
+import { getFolders, getPackageData, getPackages, getTsConfig, isWebComponent } from '../../utils';
+import { webComponentStyleRules } from '../__mocks__';
+import { generateMetadata } from '../configs/utils';
+import { featureCohort, getCallerFile, splitByEntry } from '../utils';
+
+import { createWebpackConfig } from '../index';
+
+jest.mock('fork-ts-checker-webpack-plugin', () => jest.fn());
+jest.mock('html-webpack-plugin', () => jest.fn());
+jest.mock('mini-css-extract-plugin', () =>
+    Object.assign(jest.fn(), { loader: 'MiniCssExtractPlugin.loader' })
+);
+jest.mock('moment-locales-webpack-plugin', () => jest.fn());
+jest.mock('webpack', () => ({
+    ...jest.requireActual('webpack'),
+    DefinePlugin: jest.fn(),
+}));
+jest.mock('webpack-assets-manifest', () => jest.fn());
+jest.mock('webpack-virtual-modules', () => jest.fn());
+jest.mock('../../utils', () => ({
+    ...jest.requireActual('../../utils'),
+    getFolders: jest.fn(),
+    getPackageData: jest.fn(),
+    getPackages: jest.fn(),
+    getTsConfig: jest.fn(),
+    isWebComponent: jest.fn(),
+}));
+jest.mock('../configs/utils/generate-metadata');
+jest.mock('../utils', () => ({
+    ...jest.requireActual('../utils'),
+    featureCohort: jest.fn(),
+    getCallerFile: jest.fn(),
+}));
+
+describe(`[startup] ${createWebpackConfig.name}`, () => {
+    const source = 'src';
+    const destination = 'dist';
+    const packageName = '@servicetitan/foo';
+    const packageJson = 'package.json';
+    const tsConfig = 'tsconfig.build.json';
+    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');
+
+    let overrides: Parameters<typeof createWebpackConfig>[0];
+    let options: NonNullable<Parameters<typeof createWebpackConfig>[1]>;
+
+    function mockPlugIn(name: string) {
+        return (options: Record<string, any>): any => ({ [name]: options });
+    }
+
+    beforeEach(() => {
+        overrides = { plugins: { HtmlWebpackPlugin: { favicon: 'foo' } } };
+        options = { name: packageName };
+
+        jest.resetAllMocks();
+        jest.mocked(MiniCssExtractPlugin).mockImplementation(mockPlugIn('MiniCssExtractPlugin'));
+        jest.mocked(DefinePlugin).mockImplementation(mockPlugIn('DefinePlugin'));
+        jest.mocked(HtmlWebpackPlugin).mockImplementation(mockPlugIn('HtmlWebpackPlugin'));
+        jest.mocked(VirtualModulesPlugin).mockImplementation(mockPlugIn('VirtualModulesPlugin'));
+        jest.mocked(WebpackAssetsManifest).mockImplementation(mockPlugIn('WebpackAssetsManifest'));
+
+        jest.mocked(getCallerFile).mockReturnValue('');
+        jest.mocked(getFolders).mockReturnValue({ source, destination });
+        jest.mocked(getPackageData).mockReturnValue({ dependencies: {}, sharedDependencies: {} });
+        jest.mocked(getPackages).mockReturnValue([]);
+        jest.mocked(getTsConfig).mockReturnValue(tsConfig);
+
+        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
+    });
+
+    afterEach(() => mockFS.restore());
+
+    const subject = () => createWebpackConfig(overrides, options);
+
+    describe('when package is a web component', () => {
+        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+        test('configures MiniCssExtractPlugIn plugin', () => {
+            expect(subject().plugins).toContainEqual(
+                new MiniCssExtractPlugin({ filename: '[name].bundle.css' })
+            );
+        });
+
+        Object.entries(webComponentStyleRules).forEach(([extension, rule]) => {
+            test(`configures "${extension}" rules`, () => {
+                expect(subject().module?.rules).toContainEqual(rule);
+            });
+        });
+
+        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,
+            });
+        });
+
+        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),
+                    done: 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('generates metadata when WebpackAssetsManifest plugin is done', () => {
+            subject();
+
+            const done: any = jest.mocked(WebpackAssetsManifest).mock.calls[0][0]?.done;
+            done();
+
+            expect(generateMetadata).toHaveBeenCalled();
+        });
+
+        test('configures HtmlWebpackPlugin plugin', () => {
+            expect(subject().plugins).toContainEqual(
+                new HtmlWebpackPlugin({
+                    title: 'ServiceTitan',
+                    hash: true,
+                    templateParameters: { splitByEntry },
+                    ...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,
+                })
+            );
+        });
+
+        describe('when design-system.css exists', () => {
+            beforeEach(() => {
+                mockFS({
+                    [packageJson]: JSON.stringify({ name: packageName }),
+                    [source]: { 'design-system.css': '' },
+                });
+            });
+
+            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.each([webpackDevConfigFileName, webpackProdConfigFileName])(
+            'when invoked from "%s"',
+            configFileName => {
+                beforeEach(() => jest.mocked(getCallerFile).mockReturnValue(configFileName));
+
+                test('throws error', () => {
+                    expect(subject).toThrowError(/cannot call createWebpackConfig/);
+                });
+            }
+        );
+
+        describe('when featureCohort is active', () => {
+            beforeEach(() => {
+                jest.mocked(featureCohort).mockImplementation((_: number[], fn: Function) => fn());
+            });
+
+            test('configures "cache"', () => {
+                expect(subject().cache).toEqual({
+                    type: 'filesystem',
+                    name: `${packageName}__full`,
+                    profile: true,
+                });
+            });
+
+            describe('when embed option is set to true', () => {
+                beforeEach(() => (options.embed = true));
+
+                test('changes "cache.name" suffix to "__light"', () => {
+                    expect(subject().cache).toEqual(
+                        expect.objectContaining({
+                            name: `${packageName}__light`,
+                        })
+                    );
+                });
+            });
+        });
+
+        describe('when mode is production', () => {
+            beforeEach(() =>
+                Object.assign((overrides.configuration ??= {}), { mode: 'production' })
+            );
+
+            test('configures "devtool"', () => {
+                expect(subject().devtool).toBe(false);
+            });
+
+            test('configures "optimization.splitChunks.cacheGroups"', () => {
+                // @ts-expect-error because splitChunks is polymorphic
+                expect(subject().optimization?.splitChunks.cacheGroups).toEqual(
+                    expect.objectContaining({
+                        common: {
+                            name: 'common',
+                            test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
+                            chunks: 'all',
+                        },
+                        kendo: {
+                            name: 'kendo',
+                            test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
+                            chunks: 'all',
+                        },
+                        servicetitan: {
+                            name: 'servicetitan',
+                            test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+                            chunks: 'all',
+                        },
+                    })
+                );
+            });
+        });
+    });
+});