@servicetitan/web-components 22.15.0 → 22.16.0

package/src/__tests__/register.test.tsx

@@ -1,22 +1,25 @@
-import { FC } from 'react';
+import { FC, useContext } from 'react';
+import { TablePopupPropsContext } from '@servicetitan/design-system';
 import { render } from '@testing-library/react';
 import { screen } from 'shadow-dom-testing-library';
 import '@testing-library/jest-dom';
 
-import { register } from '../register';
 import { IWebComponent } from '../common';
 import { useMFEDataContext } from '../mfe-data-context';
 
-describe(`[web-component] ${register.name}`, () => {
-    const Component: any = WEB_COMPONENT_NAME;
+describe('[web-components] register', () => {
+    let onloadRefs: Function[];
+    const componentName = 'mock-app';
     const handleRef = (webComponent: IWebComponent | null) => {
         webComponent?.provide({
-            onReady: () => {},
-            onDispose: () => {},
+            onReady: jest.fn(),
+            onDispose: jest.fn(),
         });
     };
     const TestComponent: FC<Record<string, any>> = props => {
         const data = useMFEDataContext();
+        const popupProps = useContext(TablePopupPropsContext);
+
         return (
             <div>
                 {Object.entries(props).map(([name, value]) => (
@@ -25,30 +28,125 @@ describe(`[web-component] ${register.name}`, () => {
                 {Object.entries(data).map(([name, value]) => (
                     <span key={name}>{`Data: ${name}, Value: ${JSON.stringify(value)}`}</span>
                 ))}
+                <span>TablePopupPropsContext appendTo: {String(popupProps({}).appendTo)}</span>
             </div>
         );
     };
 
+    class Page {
+        static get componentShadowRoot() {
+            return document.querySelector(componentName)!.shadowRoot!;
+        }
+
+        static get portalShadowRoot() {
+            return document.querySelector('body')!.lastElementChild!.shadowRoot!;
+        }
+    }
+
     beforeAll(() => {
         /*
          * This register can only happen once, unfortunately. So the TestComponent needs to
          * work for all tests. If ran more than once, window.customElements.define will throw
          * the error: "NotSupportedError: This name has already been registered in the registry."
          *
-         * The other issue is that the global WEB_COMPONENT_NAME can only be set in the jest config
-         * via package.json, so we can only have one WEB_COMPONENT_NAME name for the test suite.
-         *
          * Also note that there is not way to "unregister" a web component, so an afterAll
          * cannot be used.
          */
+        (global as any).WEB_COMPONENT_NAME = componentName;
+        const { register } = require('../register');
         register(TestComponent, true);
+
+        /*
+         * mock <link>'s onload so that we can call it directly from the test,
+         * because it won't call itself in the test environment
+         */
+        Object.defineProperty(HTMLLinkElement.prototype, 'onload', {
+            get() {
+                return this._onload;
+            },
+            set(onload: Function) {
+                onloadRefs.push(onload);
+                this._onload = onload;
+            },
+        });
     });
 
-    const subject = (props: Record<string, any>) => {
+    beforeEach(() => {
+        onloadRefs = [];
+    });
+
+    const subject = (props: Record<string, any> = {}, dataAttrs: Record<string, any> = {}) => {
         const data = props && { 'data-mfe-data': JSON.stringify(props) };
-        return render(<Component ref={handleRef} {...data} />);
+        const Component: any = componentName;
+        const renderResult = render(<Component ref={handleRef} {...data} {...dataAttrs} />);
+
+        for (const onload of onloadRefs) {
+            onload();
+        }
+
+        return renderResult;
     };
 
+    describe('when component has style urls', () => {
+        let styleUrls: string[];
+
+        beforeEach(() => {
+            styleUrls = ['foo.css', 'bar.css'];
+        });
+
+        function expectStylesInDom(styleUrls: string[], shadowRootFn: () => ShadowRoot) {
+            expect(shadowRootFn().querySelectorAll('link').length).toBe(styleUrls.length);
+            for (const styleUrl of styleUrls) {
+                const link = shadowRootFn().querySelector(
+                    `link[href='${styleUrl}'][rel='stylesheet'][crossorigin='anonymous']`
+                );
+                expect(link).toBeInTheDocument();
+            }
+        }
+
+        test('loads the styles into the component shadow DOM', () => {
+            subject({}, { 'style-urls': JSON.stringify(styleUrls) });
+            expectStylesInDom(styleUrls, () => Page.componentShadowRoot);
+        });
+
+        test('loads the styles into the portal shadow DOM', () => {
+            subject({}, { 'style-urls': JSON.stringify(styleUrls) });
+            expectStylesInDom(styleUrls, () => Page.portalShadowRoot);
+        });
+
+        describe('when a design system link is present in the DOM', () => {
+            let designSystemLink: HTMLLinkElement;
+
+            beforeEach(() => {
+                designSystemLink = Object.assign(document.createElement('link'), {
+                    href: 'http://localhost/design-system.foobar.bundle.css',
+                    rel: 'stylesheet',
+                });
+                document.body.appendChild(designSystemLink);
+            });
+
+            afterEach(() => {
+                designSystemLink.remove();
+            });
+
+            test('loads the styles and design system styles into the component shadow DOM', () => {
+                subject({}, { 'style-urls': JSON.stringify(styleUrls) });
+                expectStylesInDom(
+                    [...styleUrls, designSystemLink.href],
+                    () => Page.componentShadowRoot
+                );
+            });
+
+            test('loads the styles and design system styles into the portal shadow DOM', () => {
+                subject({}, { 'style-urls': JSON.stringify(styleUrls) });
+                expectStylesInDom(
+                    [...styleUrls, designSystemLink.href],
+                    () => Page.portalShadowRoot
+                );
+            });
+        });
+    });
+
     describe('when component has custom data-attributes', () => {
         const props = {
             string: 'foo',
@@ -81,7 +179,7 @@ describe(`[web-component] ${register.name}`, () => {
             const setup = () => {
                 subject(props);
 
-                const webComponent = document.getElementsByTagName(Component);
+                const webComponent = document.getElementsByTagName(componentName);
                 webComponent[0]?.setAttribute(
                     'data-mfe-data',
                     JSON.stringify({ ...props, string: 'baz' })
@@ -96,4 +194,29 @@ describe(`[web-component] ${register.name}`, () => {
             });
         });
     });
+
+    describe('when WEB_COMPONENT_NAME is not set', () => {
+        let register: typeof import('../register').register;
+
+        beforeEach(() => {
+            jest.isolateModules(() => {
+                (global as any).WEB_COMPONENT_NAME = undefined;
+                register = require('../register').register;
+            });
+            jest.spyOn(console, 'error').mockImplementation(jest.fn());
+        });
+
+        test('logs an error', () => {
+            register(TestComponent, true);
+            // eslint-disable-next-line no-console
+            expect(console.error).toHaveBeenCalledWith('"WEB_COMPONENT_NAME" is not defined!');
+        });
+    });
+
+    test('configures the shadow root in PopupPropsContext', () => {
+        subject();
+        expect(screen.getByShadowText(/TablePopupPropsContext appendTo:/)).toHaveTextContent(
+            /[object ShadowRoot]/
+        );
+    });
 });

package/src/__tests__/utils.test.ts

@@ -1,101 +1,95 @@
+import { ExposedDependencies } from '../common';
 import { getVersionMismatches, isVersionedUrl } from '../utils';
 
-describe('getVersionMismatches', () => {
-    const getSharedDependencies = () => ({
-        '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
-        'classnames': 'SharedDependencies.ClassNames',
-        'formstate': 'SharedDependencies.FormState',
-        'mobx': 'SharedDependencies.MobX',
-        'mobx-react': 'SharedDependencies.MobXReact',
-        'mobx-utils': 'SharedDependencies.MobXUtils',
-        'react': 'SharedDependencies.React',
-        'react-dom': 'SharedDependencies.ReactDOM',
-    });
+describe('[web-components] utils', () => {
+    describe(`${getVersionMismatches.name}`, () => {
+        let sharedDependencies: Record<string, string> = {};
+        let dependencies: Record<string, string> = {};
+        let exposedDependencies: ExposedDependencies = {};
 
-    const getDependencies = () => ({
-        '@servicetitan/confirm': '^21.7.1',
-        '@servicetitan/culture': '^21.7.1',
-        '@servicetitan/datetime-utils': '^21.7.1',
-        '@servicetitan/design-system': '~11.8.0',
-        '@servicetitan/form': '^21.7.1',
-        '@servicetitan/log-service': '^21.7.1',
-        '@servicetitan/react-ioc': '^21.7.1',
-        '@servicetitan/tokens': '~12.1.11',
-        '@servicetitan/web-components': '^21.7.1',
-        'accounting': '~0.4.1',
-        'axios': '~0.25.0',
-        'classnames': '~2.3.1',
-        'formstate': '^2.0.0',
-        'mobx': '~6.6.0',
-        'mobx-react': '~7.5.0',
-        'react': '~17.0.2',
-        'react-dom': '~17.0.2',
-        'react-router-dom': '~6.3.0',
-        'resumablejs': '1.0.2',
-        'utils': '^0.15.9',
-    });
+        beforeEach(() => {
+            sharedDependencies = {
+                '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
+            };
 
-    const getExposedDependencies = () => ({
-        '@servicetitan/design-system': {
-            version: '~11.8.0',
-            variable: 'SharedDependencies.ServiceTitan.DesignSystem',
-        },
-        'classnames': {
-            version: '~2.3.1',
-            variable: 'SharedDependencies.ClassNames',
-        },
-        'formstate': {
-            version: '~2.0.0',
-            variable: 'SharedDependencies.FormState',
-        },
-        'mobx': {
-            version: '~6.6.0',
-            variable: 'SharedDependencies.MobX',
-        },
-        'mobx-react': {
-            version: '~7.5.0',
-            variable: 'SharedDependencies.MobXReact',
-        },
-        'mobx-utils': {
-            version: '~6.0.4',
-            variable: 'SharedDependencies.MobXUtils',
-        },
-        'react': {
-            version: '~17.0.2',
-            variable: 'SharedDependencies.React',
-        },
-        'react-dom': {
-            version: '~17.0.2',
-            variable: 'SharedDependencies.ReactDOM',
-        },
-    });
+            dependencies = {
+                '@servicetitan/design-system': '~11.8.0',
+            };
+
+            exposedDependencies = {
+                '@servicetitan/design-system': {
+                    version: '~11.8.0',
+                    variable: 'SharedDependencies.ServiceTitan.DesignSystem',
+                },
+            };
+        });
 
-    test('doesnt find mismatches when everything ok', () => {
-        expect(
-            getVersionMismatches(
-                getExposedDependencies(),
-                getDependencies(),
-                getSharedDependencies()
-            )
-        ).toEqual({});
+        test('returns no mismatches', () => {
+            expect(
+                getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+            ).toEqual({});
+        });
+
+        describe('when there is a versions mismatch', () => {
+            beforeEach(() => (dependencies['@servicetitan/design-system'] = '~12.0.0'));
+
+            test('returns one mismatch', () => {
+                expect(
+                    getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+                ).toEqual({
+                    '@servicetitan/design-system': {
+                        host: '~11.8.0',
+                        package: '~12.0.0',
+                    },
+                });
+            });
+        });
+
+        describe('when a dependency is missing from exposed dependencies', () => {
+            beforeEach(() => delete exposedDependencies['@servicetitan/design-system']);
+
+            test('returns an object citing the dependency is missing from the host', () => {
+                expect(
+                    getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+                ).toEqual({
+                    '@servicetitan/design-system': {
+                        host: 'missing',
+                        package: '~11.8.0',
+                    },
+                });
+            });
+        });
+
+        describe('when a variable does not match', () => {
+            beforeEach(() => (exposedDependencies['@servicetitan/design-system'].variable = 'foo'));
+
+            test('returns an object citing the variable is wrong', () => {
+                expect(
+                    getVersionMismatches(exposedDependencies, dependencies, sharedDependencies)
+                ).toEqual({
+                    '@servicetitan/design-system': {
+                        host: 'wrong global variable',
+                        package: '~11.8.0',
+                    },
+                });
+            });
+        });
     });
-});
 
-describe('isVersionedUrl', () => {
-    const results: [string, boolean][] = [
-        ['localhost:9090', false],
-        ['localhost:9090@1.1.1', false],
-        ['localhost:9090@dev', false],
-        ['//unpkg.servicetitan.com/@servicetitan/test', false],
-        ['//unpkg.servicetitan.com/@servicetitan/test@dev', false],
-        ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0', true],
-        ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0-hash', true],
-        ['//unpkg.servicetitan.com/@servicetitan/test@^16', false],
-    ];
+    describe(`${isVersionedUrl.name}`, () => {
+        const results: [string, boolean][] = [
+            ['localhost:9090', false],
+            ['localhost:9090@1.1.1', false],
+            ['localhost:9090@dev', false],
+            ['//unpkg.servicetitan.com/@servicetitan/test', false],
+            ['//unpkg.servicetitan.com/@servicetitan/test@dev', false],
+            ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0', true],
+            ['//unpkg.servicetitan.com/@servicetitan/test@0.0.0-hash', true],
+            ['//unpkg.servicetitan.com/@servicetitan/test@^16', false],
+        ];
 
-    for (const [url, result] of results) {
-        test(`versioned url check for '${url}' should be ${result}`, () => {
+        test.each(results)(`providing %s returns %s`, (url, result) => {
             expect(isVersionedUrl(url)).toEqual(result);
         });
-    }
+    });
 });

package/src/common.ts

@@ -93,19 +93,26 @@ export async function getJson<T = any>(
     try {
         response = await fetch(url, config);
     } catch {
-        if (retries > 0) {
+        if (retries > 0 && !config.signal?.aborted) {
             return new Promise((resolve, reject) => {
                 const { signal } = config;
 
                 const timeoutId = window.setTimeout(() => {
                     getJson(url, {
                         ...config,
+                        onRequestError,
                         retries: retries - 1,
                         retryDelay: retryDelay * 4,
                     }).then(resolve, reject);
                 }, retryDelay);
 
-                signal?.addEventListener('abort', () => window.clearTimeout(timeoutId));
+                const abortHandler = () => {
+                    window.clearTimeout(timeoutId);
+                    signal?.removeEventListener('abort', abortHandler);
+                    reject(signal?.reason);
+                };
+
+                signal?.addEventListener('abort', abortHandler);
             });
         }
 

package/src/loader.tsx

@@ -264,6 +264,7 @@ export const Loader: <T>(props: LoaderProps<T> & { ref?: Ref<LoaderRef> }) => Re
                                                 script.crossOrigin = 'anonymous';
                                                 script.onload = () => {
                                                     script.dataset.webComponent = WebComponent;
+                                                    script.onload = null;
                                                     resolve();
                                                 };
                                                 script.async = true;
@@ -276,6 +277,7 @@ export const Loader: <T>(props: LoaderProps<T> & { ref?: Ref<LoaderRef> }) => Re
                                                 const originalOnload = script.onload;
                                                 script.onload = (...args) => {
                                                     originalOnload?.call(script, ...args);
+                                                    script.onload = null;
                                                     resolve();
                                                 };
                                             });

package/src/mfe-data-context.ts

@@ -25,9 +25,5 @@ export const MFEDataContext = createContext<JSON>({});
 export function useMFEDataContext<T extends MFEContextData<T>>() {
     const context = useContext(MFEDataContext) as T;
 
-    if (!context) {
-        throw new Error('useMFEDataContext must be used within a MFEDataContext.Provider');
-    }
-
     return context;
 }