@servicetitan/web-components 22.14.0 → 22.16.0

package/src/__tests__/loader.test.tsx

@@ -0,0 +1,638 @@
+import { Loader, LoaderProps } from '../loader';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Entries, EXPOSED_DEPENDENCIES_TOKEN } from '../common';
+import * as common from '../common';
+import * as utils from '../utils';
+import { FC } from 'react';
+import { Provider, ProviderProps } from '@servicetitan/react-ioc';
+import { Log } from '@servicetitan/log-service';
+import { HistoryManager } from '../history-manager';
+import { EVENT_BUS_TOKEN } from '../event-bus';
+
+describe('[web-components] Loader', () => {
+    const baseUrl = 'http://localhost/mfe';
+    const WEB_COMPONENT_NAME = 'mfe-component';
+    let webComponentState: Partial<Entries>;
+    let webComponent: WebComponent | undefined;
+    class WebComponent extends HTMLElement {
+        provide = (entries: Entries) => {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            webComponent = this;
+            for (const [key, value] of Object.entries(entries)) {
+                /*
+                 * set values to external state so that we can call or
+                 * check any of the values in the test
+                 */
+                webComponentState[key as keyof Entries] = value;
+            }
+        };
+    }
+
+    let props: LoaderProps<any>;
+    let onloadRef: Function | null;
+    let singletons: ProviderProps['singletons'];
+    let getJsonMockFns: Record<string, Function>;
+
+    let metadata: {
+        name: string;
+        bundledWith?: Record<string, string | undefined>;
+        sharedDependencies?: Record<string, string>;
+        dependencies?: Record<string, string>;
+        entrypoints?: Record<string, { css: string[]; js: string[] }>;
+    };
+
+    function setStartupVersion(version: string | undefined) {
+        if (!version) {
+            metadata.bundledWith = undefined;
+        } else {
+            metadata.bundledWith = { '@servicetitan/startup': version };
+        }
+    }
+
+    beforeAll(() => {
+        // register web component in order to test the `provide` method
+        window.customElements.define(WEB_COMPONENT_NAME, WebComponent);
+
+        /*
+         * mock <script>'s onload so that we can call it directly from the test,
+         * because it won't call itself in the test environment
+         */
+        Object.defineProperty(HTMLScriptElement.prototype, 'onload', {
+            get() {
+                return this._onload;
+            },
+            set(onload: Function) {
+                onloadRef = onload;
+                this._onload = onload;
+            },
+        });
+    });
+
+    function initializeGetJsonMockFns(url = baseUrl) {
+        getJsonMockFns = {
+            [`${url}/dist/metadata.json`]: () => {
+                return Promise.resolve({
+                    data: metadata,
+                    headers: {} as Headers,
+                    url,
+                });
+            },
+        };
+    }
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+        document.querySelectorAll('script').forEach(script => script.remove());
+
+        webComponentState = {};
+        webComponent = undefined;
+        metadata = {
+            name: WEB_COMPONENT_NAME,
+            sharedDependencies: {},
+            dependencies: {},
+            entrypoints: {
+                full: {
+                    css: ['full.css'],
+                    js: ['full.js'],
+                },
+                light: {
+                    css: ['light.css'],
+                    js: ['light.js'],
+                },
+            },
+        };
+        setStartupVersion('22.14.0');
+        props = { src: baseUrl };
+        onloadRef = null;
+        singletons = [];
+        initializeGetJsonMockFns();
+
+        jest.spyOn(common, 'getJson').mockImplementation((url, _) => {
+            if (getJsonMockFns[url] === undefined) {
+                throw new Error(`Unexpected getJson call with url: ${url}`);
+            }
+            return getJsonMockFns[url]();
+        });
+        jest.spyOn(utils, 'getVersionMismatches').mockReturnValue({});
+    });
+
+    function subject() {
+        return render(
+            <Provider singletons={singletons}>
+                <Loader {...props} />
+            </Provider>
+        );
+    }
+
+    test('renders default loading fallback', () => {
+        subject();
+        expect(screen.getByText(/loading/i)).toBeInTheDocument();
+    });
+
+    describe('when loadingFallback is provided', () => {
+        beforeEach(() => {
+            props.loadingFallback = <div>foo</div>;
+        });
+
+        test('renders provided loading fallback', () => {
+            subject();
+            expect(screen.getByText('foo')).toBeInTheDocument();
+        });
+    });
+
+    describe('when the loadingFallback throws an error', () => {
+        beforeEach(() => {
+            // suppress console.error that appears in the test output
+            jest.spyOn(console, 'error').mockImplementation(jest.fn);
+            const ThrowError: FC = () => {
+                throw new Error('woops');
+            };
+            props.loadingFallback = (
+                <div>
+                    <ThrowError />
+                </div>
+            );
+        });
+
+        test('renders default error fallback', () => {
+            subject();
+            expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
+        });
+
+        describe('when an errorFallback is provided', () => {
+            beforeEach(() => {
+                props.errorFallback = <div>bar</div>;
+            });
+
+            test('renders provided error fallback', () => {
+                subject();
+                expect(screen.getByText('bar')).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('when a script tag (with a webComponent data attr) for this bundle is in the DOM before Loader is rendered', () => {
+        beforeEach(() => {
+            const script = document.createElement('script');
+            script.setAttribute('src', `${baseUrl}/dist/bundle/light/light.js`);
+            script.dataset.webComponent = 'foo';
+            document.body.appendChild(script);
+        });
+
+        /*
+         * when a script tag is already in the dom, we don't need to manually trigger the onload,
+         * as we do with the remaining tests
+         */
+        test('renders web component', async () => {
+            subject();
+            await waitFor(() =>
+                expect(document.querySelector(WEB_COMPONENT_NAME)).toBeInTheDocument()
+            );
+        });
+    });
+
+    describe('after the script tag added is loaded', () => {
+        async function scriptLoadedSetup() {
+            subject();
+
+            await waitFor(() => onloadRef !== undefined);
+            act(() => {
+                onloadRef!();
+            });
+
+            await waitFor(() =>
+                expect(document.querySelector(WEB_COMPONENT_NAME)).toBeInTheDocument()
+            );
+        }
+
+        function itAddsJsEntrypointToWebComponent(entrypointTestText: string, urlFn: () => string) {
+            test(`adds the ${entrypointTestText} to a script tag`, async () => {
+                await scriptLoadedSetup();
+                const script = document.querySelector('script');
+                expect(script).toHaveAttribute('src', urlFn());
+            });
+        }
+
+        function itAddsCssEntrypointToWebComponent(
+            entrypointTestText: string,
+            urlFn: () => string
+        ) {
+            test(`adds the ${entrypointTestText} to the web component style-urls attribute`, async () => {
+                await scriptLoadedSetup();
+                expect(webComponent).toHaveAttribute(
+                    'style-urls',
+                    encodeURIComponent(JSON.stringify([urlFn()]))
+                );
+            });
+        }
+
+        function itCallsGetJsonWithUrlAndCacheValue(
+            urlFn: () => string,
+            cache: string | undefined
+        ) {
+            test(`getJson is called with url and cache set to ${cache}`, async () => {
+                await scriptLoadedSetup();
+                expect(common.getJson).toHaveBeenCalledWith(
+                    urlFn(),
+                    expect.objectContaining({ cache })
+                );
+            });
+        }
+
+        describe('when the metadata contains no dependencies prop', () => {
+            const dependencies = 'baz';
+            function addGetJsonPackageJsonMockFn(url: string) {
+                getJsonMockFns[`${url}/package.json`] = () => ({
+                    data: { dependencies },
+                });
+            }
+
+            beforeEach(() => {
+                metadata.dependencies = undefined;
+                addGetJsonPackageJsonMockFn(baseUrl);
+            });
+
+            test('dependencies are pulled from package.json', async () => {
+                await scriptLoadedSetup();
+                expect(utils.getVersionMismatches).toHaveBeenCalledWith(
+                    expect.anything(),
+                    dependencies,
+                    expect.anything()
+                );
+            });
+
+            itCallsGetJsonWithUrlAndCacheValue(() => `${baseUrl}/package.json`, 'no-store');
+
+            describe('when baseUrl is versioned', () => {
+                const versionedBaseUrl = 'http://unpkg.localhost/mfe@v1.0.0';
+
+                beforeEach(() => {
+                    props = { src: versionedBaseUrl };
+                    initializeGetJsonMockFns(versionedBaseUrl);
+                    addGetJsonPackageJsonMockFn(versionedBaseUrl);
+                });
+
+                itCallsGetJsonWithUrlAndCacheValue(
+                    () => `${versionedBaseUrl}/package.json`,
+                    undefined
+                );
+            });
+        });
+
+        describe('when the startup version is < 22.12.0', () => {
+            beforeEach(() => {
+                setStartupVersion('22.11.0');
+                props.data = { fooBar: 'foobar' };
+            });
+
+            test('data is spread as data attributes in kebab case on the web component', async () => {
+                await scriptLoadedSetup();
+                expect(webComponent).toHaveAttribute('data-foo-bar', 'foobar');
+            });
+        });
+
+        itAddsJsEntrypointToWebComponent(
+            'light js entrypoint from metadata.json',
+            () => `${baseUrl}/dist/bundle/light/${metadata.entrypoints!.light.js[0]}`
+        );
+
+        itAddsCssEntrypointToWebComponent(
+            'light css entrypoint from metadata.json',
+            () => `${baseUrl}/dist/bundle/light/${metadata.entrypoints!.light.css[0]}`
+        );
+
+        describe('when the startup version is < 17.0.0', () => {
+            beforeEach(() => {
+                setStartupVersion('16.0.0');
+            });
+
+            itAddsJsEntrypointToWebComponent(
+                'full js entrypoint from metadata.json',
+                () => `${baseUrl}/dist/bundle/full/${metadata.entrypoints!.full.js[0]}`
+            );
+
+            itAddsCssEntrypointToWebComponent(
+                'full css entrypoint from metadata.json',
+                () => `${baseUrl}/dist/bundle/full/${metadata.entrypoints!.full.css[0]}`
+            );
+        });
+
+        describe('when the startup version is missing', () => {
+            beforeEach(() => {
+                setStartupVersion(undefined);
+            });
+
+            itAddsJsEntrypointToWebComponent(
+                'full js entrypoint from metadata.json',
+                () => `${baseUrl}/dist/bundle/full/${metadata.entrypoints!.full.js[0]}`
+            );
+
+            itAddsCssEntrypointToWebComponent(
+                'full css entrypoint from metadata.json',
+                () => `${baseUrl}/dist/bundle/full/${metadata.entrypoints!.full.css[0]}`
+            );
+        });
+
+        itCallsGetJsonWithUrlAndCacheValue(() => `${baseUrl}/dist/metadata.json`, 'no-store');
+
+        describe('when baseUrl is versioned', () => {
+            const versionedBaseUrl = 'http://unpkg.localhost/mfe@v1.0.0';
+
+            beforeEach(() => {
+                props.src = versionedBaseUrl;
+                initializeGetJsonMockFns(versionedBaseUrl);
+            });
+
+            itCallsGetJsonWithUrlAndCacheValue(
+                () => `${versionedBaseUrl}/dist/metadata.json`,
+                undefined
+            );
+        });
+
+        describe('when the metadata request fails', () => {
+            const fallbackCssEntrypoint = 'foo.css';
+            const fallbackJsEntrypoint = 'bar.js';
+
+            beforeEach(() => {
+                getJsonMockFns[`${baseUrl}/dist/metadata.json`] = () => {
+                    return Promise.reject();
+                };
+            });
+
+            test('throws an error', async () => {
+                await expect(scriptLoadedSetup()).rejects.toThrow();
+            });
+
+            describe('when the fallback url is provided', () => {
+                function addGetJsonFallbackMockFn(url: string) {
+                    getJsonMockFns[`${url}/dist/metadata.json`] = () => {
+                        const fallbackMetadata = { ...metadata };
+                        fallbackMetadata.entrypoints = {
+                            light: {
+                                css: [fallbackCssEntrypoint],
+                                js: [fallbackJsEntrypoint],
+                            },
+                        };
+                        return Promise.resolve({
+                            data: fallbackMetadata,
+                            headers: {} as Headers,
+                            url,
+                        });
+                    };
+                }
+                const fallbackSrc = 'http://localhost/mfe-fallback';
+
+                beforeEach(() => {
+                    props.fallbackSrc = fallbackSrc;
+                    addGetJsonFallbackMockFn(fallbackSrc);
+                });
+
+                itAddsJsEntrypointToWebComponent(
+                    "js entrypoint from the fallback url's metadata.json",
+                    () => `${fallbackSrc}/dist/bundle/light/${fallbackJsEntrypoint}`
+                );
+
+                itAddsCssEntrypointToWebComponent(
+                    "css entrypoint from the fallback url's metadata.json",
+                    () => `${fallbackSrc}/dist/bundle/light/${fallbackCssEntrypoint}`
+                );
+
+                itCallsGetJsonWithUrlAndCacheValue(
+                    () => `${fallbackSrc}/dist/metadata.json`,
+                    'no-store'
+                );
+
+                describe('when fallback url is versioned', () => {
+                    const fallbackSrc = 'http://unpkg.localhost/mfe-fallback@v1.0.0';
+
+                    beforeEach(() => {
+                        props.fallbackSrc = fallbackSrc;
+                        addGetJsonFallbackMockFn(fallbackSrc);
+                    });
+
+                    itCallsGetJsonWithUrlAndCacheValue(
+                        () => `${fallbackSrc}/dist/metadata.json`,
+                        undefined
+                    );
+                });
+            });
+        });
+
+        describe('when the metadata does not contain entrypoints', () => {
+            const cssEntrypoint = 'foo.css';
+            const jsEntrypoint = 'bar.js';
+            beforeEach(() => {
+                metadata.entrypoints = undefined;
+                getJsonMockFns[`${baseUrl}/dist/bundle/light/entrypoints.json`] = () => {
+                    return Promise.resolve({
+                        data: { css: [cssEntrypoint], js: [jsEntrypoint] },
+                    });
+                };
+            });
+
+            itAddsJsEntrypointToWebComponent(
+                'js entrypoint from entrypoints.json',
+                () => `${baseUrl}/dist/bundle/light/${jsEntrypoint}`
+            );
+
+            itAddsCssEntrypointToWebComponent(
+                'css entrypoint from entrypoints.json',
+                () => `${baseUrl}/dist/bundle/light/${cssEntrypoint}`
+            );
+
+            describe('when entrypoints.json is missing', () => {
+                beforeEach(() => {
+                    getJsonMockFns[`${baseUrl}/dist/bundle/light/entrypoints.json`] = () => {
+                        return Promise.reject();
+                    };
+                });
+
+                itAddsJsEntrypointToWebComponent(
+                    'default js entrypoint',
+                    () => `${baseUrl}/dist/bundle/light/index.js`
+                );
+
+                itAddsCssEntrypointToWebComponent(
+                    'default css entrypoint',
+                    () => `${baseUrl}/dist/bundle/light/index.css`
+                );
+            });
+        });
+
+        test('renders web component', async () => {
+            await scriptLoadedSetup();
+            expect(document.querySelector(WEB_COMPONENT_NAME)).toBeInTheDocument();
+        });
+
+        describe('after the web component is ready', () => {
+            async function webComponentReadySetup() {
+                await scriptLoadedSetup();
+
+                act(() => {
+                    webComponentState.onReady!();
+                });
+            }
+
+            test('removes loading fallback', async () => {
+                await webComponentReadySetup();
+                expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
+            });
+
+            describe('when data is provided', () => {
+                beforeEach(() => {
+                    props.data = { foo: 'bar' };
+                });
+
+                test('provides stringified data to the web component', async () => {
+                    await webComponentReadySetup();
+                    expect(webComponent).toHaveAttribute(
+                        'data-mfe-data',
+                        JSON.stringify(props.data)
+                    );
+                });
+            });
+
+            describe('when a className is provided', () => {
+                beforeEach(() => {
+                    props.className = 'foobar';
+                });
+
+                test('provides the className to the web component', async () => {
+                    await webComponentReadySetup();
+                    expect(webComponent).toHaveClass('foobar');
+                });
+            });
+
+            (
+                [
+                    [Log, 'logService'],
+                    [HistoryManager, 'historyManager'],
+                    [EXPOSED_DEPENDENCIES_TOKEN, 'exposedDependencies'],
+                    [EVENT_BUS_TOKEN, 'eventBus'],
+                ] as [any, string][]
+            ).forEach(([klass, propName]) => {
+                describe(`when ${propName} is provided to the parent <Provider>`, () => {
+                    beforeEach(() => {
+                        singletons?.push({ provide: klass, useValue: propName });
+                    });
+
+                    test(`provides ${propName} to the web component`, async () => {
+                        await webComponentReadySetup();
+                        expect(webComponentState[propName as keyof Entries]).toEqual(propName);
+                    });
+                });
+            });
+
+            describe('when onDispose is called from the web component', () => {
+                async function onDisposeSetup() {
+                    await webComponentReadySetup();
+                    webComponentState.onDispose!();
+                }
+
+                const clearSpy = jest.fn();
+
+                beforeEach(() => {
+                    Object.defineProperty(window, 'SharedDependencies.ServiceTitan.DesignSystem', {
+                        value: {
+                            getStorage: () => ({
+                                clear: clearSpy,
+                            }),
+                        },
+                        configurable: true,
+                    });
+                });
+
+                test('storage is not cleared', async () => {
+                    await onDisposeSetup();
+                    expect(clearSpy).not.toHaveBeenCalledWith(WEB_COMPONENT_NAME);
+                });
+
+                describe('when peerDependencies are provided', () => {
+                    beforeEach(() => {
+                        metadata.sharedDependencies = {
+                            '@servicetitan/design-system':
+                                'SharedDependencies.ServiceTitan.DesignSystem',
+                        };
+                    });
+
+                    test('storage is cleared', async () => {
+                        await onDisposeSetup();
+                        expect(clearSpy).toHaveBeenCalledWith(WEB_COMPONENT_NAME);
+                    });
+                });
+            });
+
+            describe('when a script tag (without a webComponent data attr) for this bundle is in the DOM before Loader is rendered', () => {
+                const originalOnloadSpy = jest.fn();
+
+                beforeEach(() => {
+                    const script = document.createElement('script');
+                    script.setAttribute('src', `${baseUrl}/dist/bundle/light/light.js`);
+                    script.onload = originalOnloadSpy;
+                    document.body.appendChild(script);
+                });
+
+                test("the script tag's original onload is called", async () => {
+                    await webComponentReadySetup();
+                    expect(originalOnloadSpy).toHaveBeenCalled();
+                });
+
+                test('onload handler gets unassigned after it gets called', async () => {
+                    await webComponentReadySetup();
+                    expect(onloadRef).toBeNull();
+                });
+            });
+
+            describe('when there are version mismatches', () => {
+                const mismatchedDeps = {
+                    foo: {
+                        host: 'bar',
+                        package: 'baz',
+                    },
+                };
+
+                beforeEach(() => {
+                    jest.spyOn(utils, 'getVersionMismatches').mockReturnValue(mismatchedDeps);
+                });
+
+                itAddsJsEntrypointToWebComponent(
+                    'full js entrypoint from metadata.json',
+                    () => `${baseUrl}/dist/bundle/full/${metadata.entrypoints!.full.js[0]}`
+                );
+
+                itAddsCssEntrypointToWebComponent(
+                    'full css entrypoint from metadata.json',
+                    () => `${baseUrl}/dist/bundle/full/${metadata.entrypoints!.full.css[0]}`
+                );
+
+                describe('when logService is provided', () => {
+                    const logService = { warning: jest.fn() };
+
+                    beforeEach(() => {
+                        singletons?.push({ provide: Log, useValue: logService });
+                    });
+
+                    test('logs a warning', async () => {
+                        await webComponentReadySetup();
+
+                        expect(logService.warning).toHaveBeenCalledWith(
+                            expect.objectContaining({
+                                category: 'MicroFrontends.DependenciesMismatch',
+                                data: {
+                                    package: baseUrl,
+                                    dependencies: JSON.stringify(mismatchedDeps),
+                                },
+                            })
+                        );
+                    });
+                });
+            });
+        });
+
+        test('onload handler gets unassigned after it gets called', async () => {
+            await scriptLoadedSetup();
+            expect(onloadRef).toBeNull();
+        });
+    });
+});

package/src/__tests__/mfe-data-context.test.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { MFEDataContext, useMFEDataContext } from '../mfe-data-context';
+
+describe(`[web-components] ${useMFEDataContext.name}`, () => {
+    const subject = (wrapper?: FC) => renderHook(() => useMFEDataContext(), { wrapper });
+
+    describe('when the MFEDataContext is provided by a parent', () => {
+        const data = { foo: 'bar' };
+        const Wrapper: FC = ({ children }) => {
+            return <MFEDataContext.Provider value={data}>{children}</MFEDataContext.Provider>;
+        };
+
+        test('returns the context', () => {
+            expect(subject(Wrapper).result.current).toEqual(data);
+        });
+    });
+
+    describe('when the MFEDataContext is not provided by a parent', () => {
+        const Wrapper: FC = ({ children }) => {
+            return <div>{children}</div>;
+        };
+
+        test('returns an empty object', () => {
+            expect(subject(Wrapper).result.current).toEqual({});
+        });
+    });
+});