@servicetitan/startup 22.14.0 → 22.16.0

package/src/utils/__tests__/get-packages.test.ts

@@ -0,0 +1,165 @@
+import execa from 'execa';
+import { isBundle, isLegacy } from '../get-configuration';
+
+import {
+    Package,
+    PackageType,
+    getPackages,
+    getPackagesGraph,
+    splitPackagesByType,
+} from '../get-packages';
+
+jest.mock('execa', () => ({ sync: jest.fn() }));
+jest.mock('../get-configuration');
+
+describe('[startup] Utils', () => {
+    const packages: Pick<Package, 'name' | 'location' | 'type'>[] = [
+        { name: 'foo', location: 'packages/foo', type: PackageType.Legacy },
+        { name: 'bar', location: 'packages/bar', type: PackageType.TSC },
+        { name: 'baz', location: 'packages/baz', type: PackageType.Webpack },
+    ];
+
+    describe(`${getPackages.name}`, () => {
+        let options: Parameters<typeof getPackages>[0] | undefined;
+        let dependencies: Record<string, string[]> | undefined;
+
+        function findPackageByLocation(location?: string) {
+            return packages.find(p => p.location === location);
+        }
+
+        function packageGraph() {
+            return dependencies ?? Object.fromEntries(packages.map(({ name }) => [name, []]));
+        }
+
+        function scopedPackages() {
+            let result = packages;
+            if (options?.scope) {
+                const arrayScope = Array.isArray(options.scope) ? options.scope : [options.scope];
+                result = result.filter(({ name }) => arrayScope.includes(name));
+            }
+            return result;
+        }
+
+        beforeEach(() => {
+            options = undefined;
+            dependencies = undefined;
+
+            jest.mocked(isBundle).mockImplementation(
+                location => findPackageByLocation(location)?.type === PackageType.Webpack
+            );
+            jest.mocked(isLegacy).mockImplementation(
+                location => findPackageByLocation(location)?.type === PackageType.Legacy
+            );
+            // @ts-expect-error because implementation doesn't match all exec.sync signatures
+            jest.mocked(execa.sync).mockImplementation((_: string, args: string[]): any => {
+                return {
+                    stdout: JSON.stringify(
+                        args.includes('--graph')
+                            ? packageGraph()
+                            : args.includes('--scope')
+                            ? scopedPackages().map(({ type, ...pkg }) => pkg)
+                            : packages.map(({ type, ...pkg }) => pkg)
+                    ),
+                };
+            });
+        });
+
+        const subject = () => getPackages(options);
+
+        test('returns lerna packages with type metadata', () => {
+            expect(subject()).toEqual(packages);
+            expect(execa.sync).toHaveBeenCalledWith('npx', 'lerna la --json'.split(' '));
+        });
+
+        describe.each(['scope', 'ignore'])('with "%s"', option => {
+            beforeEach(() => (options = { [option]: 'foo' }));
+
+            test(`passes "${option}" option to lerna`, () => {
+                subject();
+
+                expect(execa.sync).toHaveBeenCalledWith(
+                    'npx',
+                    `lerna la --${option} foo --json`.split(' ')
+                );
+            });
+        });
+
+        describe('with "scope"', () => {
+            beforeEach(() => (options = { scope: 'foo' }));
+
+            test('returns filtered packages', () => {
+                expect(subject()).toEqual(packages.filter(({ name }) => name === 'foo'));
+            });
+
+            describe('when filtered package has dependencies', () => {
+                beforeEach(() => (dependencies = { ...packageGraph(), foo: ['bar', 'external'] }));
+
+                test('also returns internal dependencies', () => {
+                    expect(subject()).toEqual(
+                        packages.filter(({ name }) => ['foo', 'bar'].includes(name))
+                    );
+                });
+            });
+        });
+    });
+
+    describe(`${getPackagesGraph.name}`, () => {
+        const packageGraph = Object.fromEntries(packages.map(({ name }) => [name, []]));
+        let options: Parameters<typeof getPackagesGraph>[0] | undefined;
+
+        beforeEach(() => {
+            options = undefined;
+            jest.mocked(execa.sync).mockImplementation((): any => ({
+                stdout: JSON.stringify(packageGraph),
+            }));
+        });
+
+        const subject = () => getPackagesGraph(options);
+
+        test('returns lerna package graph', () => {
+            expect(subject()).toEqual(packageGraph);
+            expect(execa.sync).toHaveBeenCalledWith('npx', 'lerna la --graph'.split(' '));
+        });
+
+        describe.each(['scope', 'ignore'])('with "%s"', option => {
+            beforeEach(() => (options = { [option]: 'foo' }));
+
+            test(`passes "${option}" option to lerna`, () => {
+                subject();
+
+                expect(execa.sync).toHaveBeenCalledWith(
+                    'npx',
+                    `lerna la --${option} foo --graph`.split(' ')
+                );
+            });
+        });
+    });
+
+    describe(`${splitPackagesByType.name}`, () => {
+        const subject = (packages: Package[]) => splitPackagesByType(packages as Package[]);
+
+        test('groups packages by type', () => {
+            expect(subject(packages as Package[])).toEqual(
+                packages.reduce<ReturnType<typeof splitPackagesByType>>(
+                    (result, pkg) => {
+                        result[pkg.type].push(pkg as Package);
+                        return result;
+                    },
+                    {
+                        [PackageType.TSC]: [],
+                        [PackageType.Webpack]: [],
+                        [PackageType.Legacy]: [],
+                    }
+                )
+            );
+        });
+
+        test('grouping always includes all types', () => {
+            expect(subject([])).toEqual({
+                [PackageType.TSC]: [],
+                [PackageType.Webpack]: [],
+                [PackageType.Legacy]: [],
+            });
+        });
+    });
+});

package/src/utils/__tests__/get-tsconfig.test.ts

@@ -0,0 +1,48 @@
+import mockFS from 'mock-fs';
+import path from 'path';
+
+import { getTsConfig } from '../get-tsconfig';
+
+describe(`[startup] Utils`, () => {
+    describe(`${getTsConfig.name}`, () => {
+        const defaultConfig = 'tsconfig.json';
+        const buildConfig = 'tsconfig.build.json';
+        let location: string | undefined;
+
+        const subject = () => getTsConfig(location);
+
+        beforeEach(() => (location = undefined));
+
+        afterEach(() => mockFS.restore());
+
+        test(`returns ${defaultConfig}`, () => {
+            expect(subject()).toBe(defaultConfig);
+        });
+
+        describe(`when ${buildConfig} is present`, () => {
+            beforeEach(() => mockFS({ [buildConfig]: JSON.stringify({}) }));
+
+            test(`returns ${buildConfig}`, () => {
+                expect(subject()).toBe(buildConfig);
+            });
+        });
+
+        describe('when passed a location', () => {
+            beforeEach(() => (location = 'packages/foo'));
+
+            test(`returns {location}/${defaultConfig}`, () => {
+                expect(subject()).toBe(path.join(location!, defaultConfig));
+            });
+
+            describe(`when ${buildConfig} is present`, () => {
+                beforeEach(() => {
+                    mockFS({ packages: { foo: { [buildConfig]: JSON.stringify({}) } } });
+                });
+
+                test(`returns {location}/${buildConfig}`, () => {
+                    expect(subject()).toBe(path.join(location!, buildConfig));
+                });
+            });
+        });
+    });
+});

package/src/utils/__tests__/log.test.ts

@@ -0,0 +1,123 @@
+import chalk from 'chalk';
+import { log, logErrors } from '../log';
+
+describe(`[startup] Utils`, () => {
+    describe('log', () => {
+        const message = 'foo';
+        let stdoutSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+            jest.resetAllMocks();
+            stdoutSpy = jest.spyOn(process.stdout, 'write').mockImplementation(jest.fn());
+        });
+
+        test('info() writes cyan text', () => {
+            log.info(message);
+
+            expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.cyan(message)}\n`);
+        });
+
+        test('success() writes green text', () => {
+            log.success(message);
+
+            expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.green(message)}\n`);
+        });
+
+        test('warning() writes orange text', () => {
+            log.warning(message);
+
+            expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.keyword('orange')(message)}\n`);
+        });
+
+        test('log error writes red text', () => {
+            log.error(message);
+
+            expect(stdoutSpy).toHaveBeenCalledWith(`${chalk.bold.red(message)}\n`);
+        });
+    });
+
+    describe(`${logErrors.name}`, () => {
+        const error = new Error('Oops!');
+
+        class SubjectClass {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            private _foo: boolean;
+
+            constructor() {
+                this._foo = false;
+            }
+
+            @logErrors
+            execute(callback: Function) {
+                return callback();
+            }
+
+            @logErrors
+            async executeAsync(callback: Function) {
+                await callback();
+            }
+
+            @logErrors
+            get foo() {
+                throw error;
+            }
+
+            set foo(value: boolean) {
+                this._foo = value;
+            }
+        }
+
+        const instance = new SubjectClass();
+
+        beforeEach(() => {
+            jest.resetAllMocks();
+            jest.spyOn(log, 'error').mockImplementation(jest.fn());
+        });
+
+        describe('when decorated function raises no error', () => {
+            const subject = () => instance.execute(jest.fn());
+
+            test('logs nothing', () => {
+                subject();
+
+                expect(log.error).not.toHaveBeenCalled();
+            });
+        });
+
+        describe('when decorated function throws error', () => {
+            const subject = () =>
+                instance.execute(() => {
+                    throw error;
+                });
+
+            test('logs error', () => {
+                expect(subject).toThrowError(error);
+
+                expect(log.error).toHaveBeenCalledWith(String(error));
+            });
+        });
+
+        describe('when decorated asynchronous function throws error', () => {
+            const subject = async () =>
+                instance.executeAsync(() => {
+                    throw error;
+                });
+
+            test('logs error', async () => {
+                await expect(subject).rejects.toThrowError(error);
+
+                expect(log.error).toHaveBeenCalledWith(String(error));
+            });
+        });
+
+        describe('when decorated accessor throws error', () => {
+            const subject = () => instance.foo;
+
+            test('logs nothing', () => {
+                expect(subject).toThrowError(error);
+
+                expect(log.error).not.toHaveBeenCalled();
+            });
+        });
+    });
+});

package/src/utils/__tests__/to-array.test.ts

@@ -0,0 +1,19 @@
+import { toArray } from '../to-array';
+
+describe(`[startup] Utils`, () => {
+    describe(`${toArray.name}`, () => {
+        const subject = (value: any) => toArray(value);
+
+        test('when value is an Array, returns the value ', () => {
+            [[], [''], [null]].forEach(value => expect(subject(value)).toBe(value));
+        });
+
+        test('when value is not an Array, wraps value within array', () => {
+            ['', null, 'foo', {}].forEach(value => expect(subject(value)).toEqual([value]));
+        });
+
+        test('when value us undefined, returns []', () => {
+            expect(subject(undefined)).toEqual([]);
+        });
+    });
+});

package/src/utils/get-configuration.ts

@@ -5,8 +5,7 @@ import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-serv
 import { ESLint } from 'eslint';
 import { LinterOptions } from 'stylelint';
 import { Config } from '@jest/types';
-
-import { readJson } from '.';
+import { readJson } from './read-json';
 
 const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'contentBase'] as const;
 
@@ -34,7 +33,13 @@ export interface StylelintConfiguration extends Partial<LinterOptions> {
 
 export type JestConfiguration = Omit<Config.Argv, '_' | '$0'>;
 
-interface Configuration {
+export interface NodeConfiguration {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    NODE_OPTIONS?: string[];
+}
+
+export interface Configuration extends NodeConfiguration {
+    [key: string]: any;
     'webpack'?: false | WebpackConfiguration;
     'web-component'?: boolean;
     'legacy'?: boolean;

package/src/utils/get-jest-config.ts

@@ -1,6 +1,8 @@
 import path from 'path';
 import { Config } from '@jest/types';
-import { getDestinationFolders, getJestConfiguration, JestConfiguration, toArray } from '.';
+import { JestConfiguration, getJestConfiguration } from './get-configuration';
+import { getDestinationFolders } from './get-destination-folders';
+import { toArray } from './to-array';
 
 const getJestConfigBase = (
     stringify: boolean,

package/src/utils/get-package-data.ts

@@ -1,4 +1,4 @@
-import { readJson } from '.';
+import { readJson } from './read-json';
 
 export function getPackageData(): {
     dependencies: Record<string, string>;

package/src/utils/get-package-name.ts

@@ -1,6 +1,5 @@
 import path from 'path';
-
-import { readJson } from '.';
+import { readJson } from './read-json';
 
 export function getPackageName(location = './'): string {
     return readJson(path.join(location, 'package.json')).name;

package/src/utils/get-packages.ts

@@ -1,6 +1,6 @@
 import execa from 'execa';
-
-import { isBundle, isLegacy, toArray } from '.';
+import { isBundle, isLegacy } from './get-configuration';
+import { toArray } from './to-array';
 
 export enum PackageType {
     TSC,

package/src/webpack/shared.config.ts

@@ -156,6 +156,7 @@ export function createConfig(
                                                   '**/__tests__/**/*',
                                                   '**/__mocks__/**/*',
                                                   '**/*.test.*',
+                                                  '**/*.stories.tsx',
                                               ],
                                               references: [],
                                           },

package/template/package.json

@@ -21,5 +21,12 @@
     },
     "workspaces": [
         "packages/*"
-    ]
+    ],
+    "cli": {
+        "test": {
+            "setupFilesAfterEnv": [
+                "./setupTests.ts"
+            ]
+        }
+    }
 }

package/template/packages/application/package.json

@@ -9,6 +9,7 @@
     "dependencies": {
         "@servicetitan/design-system": "^12.10.0",
         "@servicetitan/link-item": "^23.1.0",
+        "@servicetitan/react-ioc": "^22.15.0",
         "feature-a": "^0.0.0",
         "feature-b": "^0.0.0",
         "feature-c": "^0.0.0",
@@ -17,6 +18,10 @@
         "react-router-dom": "^5.3.0"
     },
     "devDependencies": {
+        "@servicetitan/testing-library": "^0.3.0",
+        "@testing-library/jest-dom": "^5.17.0",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/react-hooks": "^8.0.1",
         "@types/react": "^17.0.37",
         "@types/react-dom": "^17.0.11",
         "@types/react-router-dom": "^5.3.2"

package/template/packages/application/src/__tests__/app.test.tsx

@@ -0,0 +1,33 @@
+import { mockComponent, mockLocation } from '@servicetitan/testing-library';
+import { render, screen } from '@testing-library/react';
+
+import { App } from '../app';
+
+jest.mock('../main-page', () => mockComponent('MainPage'));
+jest.mock('../second-page', () => mockComponent('SecondPage'));
+
+describe(`${App.name}`, () => {
+    const subject = () => render(<App />);
+
+    test('renders sidebar', () => {
+        subject();
+
+        expect(screen.getByRole('link', { name: 'Main page' })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'Second page' })).toBeInTheDocument();
+    });
+
+    const routes = Object.entries({
+        MainPage: '/',
+        SecondPage: '/second-page',
+    }).map(([component, path]) => ({ component, path }));
+
+    describe.each(routes)('when location is $path', ({ component, path }) => {
+        beforeEach(() => mockLocation(path));
+
+        test(`renders <${component} />`, () => {
+            subject();
+
+            expect(screen).toContainComponent(component);
+        });
+    });
+});

package/template/packages/application/src/app.tsx

@@ -1,8 +1,10 @@
-import { StrictMode, Fragment, FC } from 'react';
+import { StrictMode, FC } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { SideNav, Frame, Page, Sidebar } from '@servicetitan/design-system';
 import { SideNavLinkItem } from '@servicetitan/link-item';
 
+import { SecondPage } from './second-page';
+import { MainPage } from './main-page';
 import './design-system.css';
 import './app.css';
 
@@ -28,11 +30,12 @@ export const App: FC = () => (
                     maxWidth="wide"
                 >
                     <Switch>
-                        <Route path="/" exact component={() => <Fragment>Main page</Fragment>} />
-                        <Route
-                            path="/second-page"
-                            component={() => <Fragment>Second page</Fragment>}
-                        />
+                        <Route path="/" exact>
+                            <MainPage />
+                        </Route>
+                        <Route path="/second-page">
+                            <SecondPage />
+                        </Route>
                     </Switch>
                 </Page>
             </Frame>

package/template/packages/application/src/main-page.tsx

@@ -0,0 +1,5 @@
+import { Fragment } from 'react';
+
+export function MainPage() {
+    return <Fragment>Main page</Fragment>;
+}

package/template/packages/application/src/second-page.tsx

@@ -0,0 +1,5 @@
+import { Fragment } from 'react';
+
+export function SecondPage() {
+    return <Fragment>Second page</Fragment>;
+}

package/template/setupTests.ts

@@ -0,0 +1,27 @@
+import '@servicetitan/testing-library';
+import '@testing-library/jest-dom';
+
+Object.defineProperties(window, {
+    location: { value: window.location, writable: true, configurable: true },
+    matchMedia: {
+        value: jest.fn().mockImplementation(query => ({
+            matches: false,
+            media: query,
+            onChange: null,
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+        writable: true,
+        configurable: true,
+    },
+    ResizeObserver: {
+        value: jest.fn().mockImplementation(() => ({
+            disconnect: jest.fn(),
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+        })),
+        writable: true,
+        configurable: true,
+    },
+});

package/template/tsconfig.test.json

@@ -1,5 +1,5 @@
 {
     "extends": "@servicetitan/startup/tsconfig/base",
-    "include": ["**/__tests__/**/*", "**/*.d.ts"],
+    "include": ["**/__tests__/**/*", "**/*.d.ts", "setupTests.ts"],
     "exclude": ["node_modules"]
 }