@servicetitan/startup 22.16.0 → 22.17.0

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

@@ -0,0 +1,306 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import mockFS from 'mock-fs';
+import path from 'path';
+import {
+    Package,
+    PackageType,
+    getFolders,
+    getPackages,
+    isCustomStyleRules,
+    isExposeSharedDependencies,
+    isWebComponent,
+} from '../../utils';
+import { createPackage } from '../../__mocks__';
+import { createConfig as createSharedConfig } from '../shared.config';
+import { featureCohort } from '../utils/feature-cohort';
+
+import { createConfig as createDevelopmentConfig } from '../development.config';
+
+jest.mock('mini-css-extract-plugin', () =>
+    Object.assign(jest.fn(), { loader: 'MiniCssExtractPlugin.loader' })
+);
+jest.mock('../../utils', () => ({
+    ...jest.requireActual('../../utils'),
+    getFolders: jest.fn(),
+    getPackages: jest.fn(),
+    isCustomStyleRules: jest.fn(),
+    isExposeSharedDependencies: jest.fn(),
+    isWebComponent: jest.fn(),
+    log: { info: jest.fn() },
+}));
+jest.mock('../shared.config');
+jest.mock('../utils/feature-cohort');
+
+describe('createDevelopmentConfig', () => {
+    const packageName = '@servicetitan/foo';
+    const packageJson = 'package.json';
+    const sharedConfiguration = { resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] } };
+
+    let packages: Package[];
+    let overrides: Parameters<typeof createDevelopmentConfig>[0];
+    let options: Parameters<typeof createDevelopmentConfig>[1];
+
+    beforeEach(() => {
+        packages = [];
+        overrides = { configuration: { mode: 'development' } };
+        options = { name: '' };
+
+        jest.resetAllMocks();
+        jest.mocked(MiniCssExtractPlugin).mockImplementation(
+            (options: Record<string, any>): any => ({ MiniCssExtractPlugin: options })
+        );
+        jest.mocked(getPackages).mockImplementation(() => packages);
+        jest.mocked(createSharedConfig).mockReturnValue(sharedConfiguration);
+
+        mockFS({ [packageJson]: JSON.stringify({ name: packageName }) });
+    });
+
+    afterEach(() => mockFS.restore());
+
+    const subject = () => createDevelopmentConfig(overrides, options);
+
+    test('includes shared configuration', () => {
+        expect(subject()).toEqual(expect.objectContaining(sharedConfiguration));
+    });
+
+    test('includes input configuration', () => {
+        expect(subject()).toEqual(expect.objectContaining(overrides.configuration));
+    });
+
+    test('configures "devtool"', () => {
+        expect(subject().devtool).toEqual('cheap-module-source-map');
+    });
+
+    test('configures "output.filename"', () => {
+        expect(subject().output?.filename).toEqual('[name].bundle.js');
+    });
+
+    test('configures "devServer"', () => {
+        expect(subject().devServer).toEqual({
+            port: 8080,
+            historyApiFallback: true,
+            writeToDisk: true,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
+            },
+        });
+    });
+
+    describe('with subordinate TSC packages', () => {
+        const source = 'src';
+        const destination = 'dist';
+
+        beforeEach(() => {
+            jest.mocked(getFolders).mockReturnValue({ source, destination });
+            packages = [
+                createPackage({ name: 'bar', type: PackageType.TSC }),
+                createPackage({ name: 'baz', type: PackageType.Webpack }),
+            ];
+        });
+
+        test('configures "devServer.watchOptions" to ignore TSC packages', () => {
+            const ignored = packages
+                .filter(({ type }) => type === PackageType.TSC)
+                .map(({ location }) => path.join(location, source));
+            expect(subject().devServer?.watchOptions).toEqual({ ignored });
+        });
+    });
+
+    Object.entries({
+        '.css': {
+            test: /(\.css)$/,
+            exclude: expect.any(Function),
+            use: ['style-loader', 'css-loader'],
+        },
+        '.scss': {
+            test: /(\.scss)$/,
+            exclude: /\.module.scss$/,
+            use: ['style-loader', 'css-loader', 'sass-loader'],
+        },
+        '.less': {
+            test: /(\.less)$/,
+            exclude: /\.module.less$/,
+            use: [
+                'style-loader',
+                'css-loader',
+                {
+                    loader: 'less-loader',
+                    options: { lessOptions: { math: 'always' } },
+                },
+            ],
+        },
+        '.module.css': {
+            test: /\.module.css$/,
+            use: [
+                {
+                    loader: 'style-loader',
+                    options: { esModule: true },
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        esModule: true,
+                        modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                    },
+                },
+            ],
+        },
+        '.module.scss': {
+            test: /\.module.scss$/,
+            use: [
+                {
+                    loader: 'style-loader',
+                    options: { esModule: true },
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        esModule: true,
+                        modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                    },
+                },
+                'sass-loader',
+            ],
+        },
+        '.module.less': {
+            test: /\.module.less$/,
+            use: [
+                {
+                    loader: 'style-loader',
+                    options: { esModule: true },
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        esModule: true,
+                        modules: { exportLocalsConvention: 'camelCaseOnly', namedExport: true },
+                    },
+                },
+                {
+                    loader: 'less-loader',
+                    options: { lessOptions: { math: 'always' } },
+                },
+            ],
+        },
+    }).forEach(([extension, rules]) => {
+        test(`configures "${extension}" rules`, () => {
+            expect(subject().module?.rules).toContainEqual(rules);
+        });
+
+        describe('when package is web component', () => {
+            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+            test(`configures "${extension}" rules to use MiniCssExtractPlugin.loader instead of style-loader`, () => {
+                expect(subject().module?.rules).toContainEqual({
+                    ...rules,
+                    use: rules.use.map((loader: string | Record<string, any>) =>
+                        loader === 'style-loader'
+                            ? MiniCssExtractPlugin.loader
+                            : typeof loader === 'object' && loader.loader === 'style-loader'
+                            ? { ...loader, loader: MiniCssExtractPlugin.loader }
+                            : loader
+                    ),
+                });
+            });
+        });
+    });
+
+    test('does not configure "plugins"', () => {
+        expect(subject().plugins).toEqual([]);
+    });
+
+    function itConfiguresMiniCssExtractPlugIn() {
+        test('configures MiniCssExtractPlugIn plugin', () => {
+            expect(subject().plugins).toEqual([
+                new MiniCssExtractPlugin({ filename: '[name].bundle.css' }),
+            ]);
+        });
+    }
+
+    describe('when package is web component', () => {
+        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+        itConfiguresMiniCssExtractPlugIn();
+    });
+
+    describe('when package exposes shared dependencies', () => {
+        beforeEach(() => jest.mocked(isExposeSharedDependencies).mockReturnValue(true));
+
+        itConfiguresMiniCssExtractPlugIn();
+
+        describe('when package has custom style rules', () => {
+            beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+
+            test('does not configure MiniCssExtractPlugIn plugin', () => {
+                expect(subject().plugins).toEqual([]);
+            });
+        });
+
+        test('configures "design-system.css" rules', () => {
+            expect(subject().module?.rules).toContainEqual({
+                test: /design-system.css$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+            });
+        });
+
+        test('configures ".css" rule to exclude design-system.css and .module.css files', () => {
+            const cssRule: any = subject().module?.rules?.find(({ test }: { test: RegExp }) =>
+                '.css'.match(test)
+            );
+            expect(
+                ['design-system.css', 'foo.module.css', 'foo.css'].filter(
+                    path => !cssRule.exclude(path)
+                )
+            ).toEqual(['foo.css']);
+        });
+    });
+
+    describe('when package has custom style rules', () => {
+        beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+
+        test('does not configure "module.rules"', () => {
+            expect(subject().module?.rules).toEqual([]);
+        });
+    });
+
+    test('does not configure "cache"', () => {
+        expect(subject().cache).toBeUndefined();
+    });
+
+    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,
+                profile: true,
+            });
+        });
+
+        describe('when package is web component', () => {
+            beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+            function itAppendsSuffixToPackageName(suffix: string) {
+                test(`appends "${suffix}" to package name`, () => {
+                    expect(subject().cache).toEqual(
+                        expect.objectContaining({
+                            name: `${packageName}${suffix}`,
+                        })
+                    );
+                });
+            }
+
+            itAppendsSuffixToPackageName('__full');
+
+            describe('when embed option is set to true', () => {
+                beforeEach(() => (options.embed = true));
+
+                itAppendsSuffixToPackageName('__light');
+            });
+        });
+    });
+});

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

@@ -0,0 +1,231 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { isCustomStyleRules, isWebComponent } from '../../utils';
+import { createConfig as createSharedConfig } from '../shared.config';
+
+import { createConfig as createProductionConfig } from '../production.config';
+
+jest.mock('mini-css-extract-plugin', () =>
+    Object.assign(jest.fn(), { loader: 'MiniCssExtractPlugin.loader' })
+);
+jest.mock('../shared.config');
+jest.mock('../../utils', () => ({
+    ...jest.requireActual('../../utils'),
+    isCustomStyleRules: jest.fn(),
+    isWebComponent: jest.fn(),
+}));
+
+describe('createProductionConfig', () => {
+    const sharedConfig = { resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] } };
+    let overrides: Parameters<typeof createProductionConfig>[0];
+    let options: Parameters<typeof createProductionConfig>[1];
+
+    beforeEach(() => {
+        overrides = {
+            configuration: { mode: 'production' },
+            plugins: { MiniCssExtractPlugin: { attributes: { foo: 'bar' } } },
+        };
+        options = { name: '' };
+
+        jest.resetAllMocks();
+        jest.mocked(MiniCssExtractPlugin).mockImplementation(
+            (options: Record<string, any>): any => ({ MiniCssExtractPlugin: options })
+        );
+        jest.mocked(createSharedConfig).mockReturnValue(sharedConfig);
+    });
+
+    const subject = () => createProductionConfig(overrides, options);
+
+    test('includes shared config', () => {
+        expect(subject()).toEqual(expect.objectContaining(sharedConfig));
+    });
+
+    test('includes input configuration', () => {
+        expect(subject()).toEqual(expect.objectContaining(overrides.configuration));
+    });
+
+    test('configures "devtool"', () => {
+        expect(subject().devtool).toEqual('source-map');
+    });
+
+    test('configures MiniCssExtractPlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new MiniCssExtractPlugin({
+                ...overrides.plugins?.MiniCssExtractPlugin,
+                filename: '[name].[contenthash:8].bundle.css',
+            })
+        );
+    });
+
+    describe('when package has custom style rules', () => {
+        beforeEach(() => jest.mocked(isCustomStyleRules).mockReturnValue(true));
+
+        test('does not configure "plugins"', () => {
+            expect(subject().plugins).toEqual([]);
+        });
+    });
+
+    test('configures "output"', () => {
+        expect(subject().output).toEqual({
+            filename: '[name].[contenthash:8].bundle.js',
+            clean: true,
+        });
+    });
+
+    describe('with process.env.CLIENT_CDN_PATH', () => {
+        const cdnPath = 'http://www.example.com/cdn';
+
+        beforeEach(() => (process.env.CLIENT_CDN_PATH = cdnPath));
+        afterEach(() => delete process.env.CLIENT_CDN_PATH);
+
+        const subject = () => {
+            let result: ReturnType<typeof createProductionConfig>;
+
+            jest.isolateModules(() => {
+                const { createConfig } = require('../production.config');
+                result = createConfig(overrides, options);
+            });
+
+            // @ts-expect-error because result is assigned inside callback
+            return result;
+        };
+
+        test('configures "output.publicPath"', () => {
+            expect(subject().output?.publicPath).toEqual(cdnPath);
+        });
+    });
+
+    Object.entries({
+        '.css': {
+            test: /(\.css)$/,
+            exclude: /\.module.css$/,
+            use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+        '.scss': {
+            test: /(\.scss)$/,
+            exclude: /\.module.scss$/,
+            use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+        },
+        '.less': {
+            test: /(\.less)$/,
+            exclude: /\.module.less$/,
+            use: [
+                MiniCssExtractPlugin.loader,
+                'css-loader',
+                {
+                    loader: 'less-loader',
+                    options: { lessOptions: { math: 'always' } },
+                },
+            ],
+        },
+        '.module.css': {
+            test: /\.module.css$/,
+            use: [
+                {
+                    loader: MiniCssExtractPlugin.loader,
+                    options: { esModule: true },
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        esModule: true,
+                        modules: {
+                            localIdentName: '[local]__[hash:base64:5]',
+                            exportLocalsConvention: 'camelCaseOnly',
+                            namedExport: true,
+                        },
+                    },
+                },
+            ],
+        },
+        '.module.scss': {
+            test: /\.module.scss$/,
+            use: [
+                {
+                    loader: MiniCssExtractPlugin.loader,
+                    options: { esModule: true },
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        esModule: true,
+                        modules: {
+                            localIdentName: '[local]__[hash:base64:5]',
+                            exportLocalsConvention: 'camelCaseOnly',
+                            namedExport: true,
+                        },
+                    },
+                },
+                'sass-loader',
+            ],
+        },
+        '.module.less': {
+            test: /\.module.less$/,
+            use: [
+                {
+                    loader: MiniCssExtractPlugin.loader,
+                    options: { esModule: true },
+                },
+                {
+                    loader: 'css-loader',
+                    options: {
+                        esModule: true,
+                        modules: {
+                            localIdentName: '[local]__[hash:base64:5]',
+                            exportLocalsConvention: 'camelCaseOnly',
+                            namedExport: true,
+                        },
+                    },
+                },
+                {
+                    loader: 'less-loader',
+                    options: {
+                        lessOptions: {
+                            math: 'always',
+                        },
+                    },
+                },
+            ],
+        },
+    }).forEach(([extension, rules]) => {
+        test(`configures "${extension}" rules`, () => {
+            expect(subject().module?.rules).toContainEqual(rules);
+        });
+    });
+
+    test('configures "optimization"', () => {
+        expect(subject().optimization).toEqual({
+            runtimeChunk: 'single',
+            splitChunks: { cacheGroups: {} },
+        });
+    });
+
+    describe('when package is web component', () => {
+        beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
+
+        test('configures "devtool" to false', () => {
+            expect(subject().devtool).toBe(false);
+        });
+
+        test('configures "optimization.splitChunks.cacheGroups"', () => {
+            expect(subject().optimization?.splitChunks).toEqual({
+                cacheGroups: {
+                    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',
+                    },
+                },
+            });
+        });
+    });
+});