import { LD_SERVICE_TOKEN } from '@servicetitan/launchdarkly-service';
import { Log } from '@servicetitan/log-service';
import { Provider, ProviderProps } from '@servicetitan/react-ioc';
import { ExposedDependencies, getVersionMismatches } from '@servicetitan/startup-utils';
import '@testing-library/jest-dom';
import { act, render, screen, waitFor } from '@testing-library/react';
import { FC, ReactNode, RefObject, useEffect, useRef } from 'react';
import * as common from '../common';
import {
    EXPOSED_DEPENDENCIES_TOKEN,
    EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
    Entries,
    ExposedInstanceDependencies,
} from '../common';
import { EVENT_BUS_TOKEN } from '../event-bus';
import { HistoryManager } from '../history-manager';
import { Loader, LoaderProps, UnrestrictedLoaderProps } from '../loader';
import { Metadata } from '../types';
import { getMFEHasCompatibleLaunchDarklyVersion } from '../utils/get-mfe-has-compatible-launchdarkly-version';
import { getMFEHasUniqueChunkNamespace } from '../utils/get-mfe-has-unique-chunk-namespace';
import { getMFESupportsVersionedLDClient } from '../utils/get-mfe-supports-versioned-ld-client';

jest.mock('@servicetitan/startup-utils', () => ({
    getVersionMismatches: jest.fn(),
}));
jest.mock('../utils/get-mfe-has-compatible-launchdarkly-version');
jest.mock('../utils/get-mfe-has-unique-chunk-namespace');
jest.mock('../utils/get-mfe-supports-versioned-ld-client');

describe('[web-components] Loader', () => {
    const localHosts = ['localhost', '127.0.0.1'];
    const baseUrl = 'http://unpkg.servicetitan.com/mfe';
    const baseName = 'mfe-component';
    const WEB_COMPONENT_NAME = `${baseName}-abc123`;
    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 onerrorRef: Function | null;
    let singletons: ProviderProps['singletons'];
    let getJsonMockFns: Record<string, Function>;

    let metadata: Metadata;

    function setStartupVersion(version: string | undefined) {
        metadata.bundledWith = version ? { '@servicetitan/startup': version } : undefined;
    }

    beforeAll(() => {
        // register web component in order to test the `provide` method
        window.customElements.define(WEB_COMPONENT_NAME, WebComponent);

        /*
         * mock <script>'s onload/onerror so that we can call them directly from the test,
         * because they won't call themselves in the test environment
         */
        Object.defineProperty(HTMLScriptElement.prototype, 'onload', {
            get() {
                return this._onload;
            },
            set(onload: Function) {
                onloadRef = onload;
                this._onload = onload;
            },
        });
        Object.defineProperty(HTMLScriptElement.prototype, 'onerror', {
            get() {
                return this._onerror;
            },
            set(onerror: Function) {
                onerrorRef = onerror;
                this._onerror = onerror;
            },
        });
    });

    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,
            version: `0.0.0-test-abc123`,
            sharedDependencies: {},
            dependencies: {},
            entrypoints: {
                full: {
                    css: ['full.css'],
                    js: ['full.js'],
                },
                light: {
                    css: ['light.css'],
                    js: ['light.js'],
                },
            },
        };
        setStartupVersion('27.2.0');
        props = { src: baseUrl, cache: false };
        onloadRef = null;
        onerrorRef = 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.mocked(getMFEHasCompatibleLaunchDarklyVersion).mockReturnValue(true);
        jest.mocked(getVersionMismatches).mockReturnValue(undefined);
        jest.mocked(getMFEHasUniqueChunkNamespace).mockReturnValue(true);
        jest.mocked(getMFESupportsVersionedLDClient).mockReturnValue(false);
    });

    const Root = () => (
        <Provider singletons={singletons}>
            <Loader {...props} />
        </Provider>
    );

    function subject() {
        return render(<Root />);
    }

    test('renders default loading fallback', async () => {
        subject();

        await waitFor(() => expect(screen.getByText('Loading...')).toBeInTheDocument());
    });

    function expectPreservesComponentState(rerender: (ui: ReactNode) => any, action?: () => void) {
        expect(common.getJson).toHaveBeenCalledTimes(1);

        action?.();
        rerender(<Root />);

        expect(common.getJson).toHaveBeenCalledTimes(1);
    }

    function itRendersErrorFallback(triggerFailure?: () => void | Promise<void>) {
        beforeEach(() => {
            jest.spyOn(console, 'error').mockImplementation(jest.fn); // suppress error boundary logging
        });

        test('renders default error fallback', async () => {
            subject();
            await triggerFailure?.();

            await waitFor(() =>
                expect(screen.getByText('Something went wrong')).toBeInTheDocument()
            );
        });

        describe.each(localHosts)('when src contains "%s"', host => {
            beforeEach(() => {
                props.src = `http://${host}/mfe`;
                initializeGetJsonMockFns(props.src);
            });

            test('appends src to error fallback', async () => {
                subject();
                await triggerFailure?.();

                await waitFor(() =>
                    expect(
                        screen.getByText(`Something went wrong loading ${props.src}`)
                    ).toBeInTheDocument()
                );
            });
        });

        describe('when an errorFallback is provided', () => {
            beforeEach(() => {
                props.errorFallback = <div>bar</div>;
            });

            test('renders provided error fallback', async () => {
                subject();
                await triggerFailure?.();

                await waitFor(() => expect(screen.getByText('bar')).toBeInTheDocument());
            });
        });
    }

    describe.each(localHosts)('when src contains "%s"', host => {
        beforeEach(() => {
            props.src = `http://${host}/mfe`;
            initializeGetJsonMockFns(props.src);
        });

        test('appends src to lading fallback', async () => {
            subject();

            await waitFor(() =>
                expect(screen.getByText(`Loading ${props.src}...`)).toBeInTheDocument()
            );
        });
    });

    describe('with ref parameter', () => {
        let loaderRef: RefObject<any> | undefined;

        const RootWithRef = () => {
            const ref = useRef(null);

            useEffect(() => {
                loaderRef = ref;
            }, []);

            return <Loader {...props} ref={ref} />;
        };

        const subject = () => render(<RootWithRef />);

        beforeEach(() => (loaderRef = undefined));

        test('initializes ref object', () => {
            subject();

            expect(loaderRef?.current).not.toBeNull();
        });
    });

    describe('when loadingFallback is provided', () => {
        beforeEach(() => {
            props.loadingFallback = <div>foo</div>;
        });

        test('renders provided loading fallback', async () => {
            subject();

            await waitFor(() => expect(screen.getByText('foo')).toBeInTheDocument());
        });

        test('preserves component state when loading fallback is updated', () => {
            const { rerender } = subject();

            expectPreservesComponentState(rerender, () => (props.loadingFallback = <div>foo</div>));
        });
    });

    describe('when the loadingFallback throws an error', () => {
        beforeEach(() => {
            const ThrowError: FC = () => {
                throw new Error('woops');
            };
            props.loadingFallback = <ThrowError />;
        });

        itRendersErrorFallback();
    });

    describe('when loadingFallback is not delayed', () => {
        beforeEach(() => (props.loadingFallbackDelayed = false));

        test('renders loading fallback immediately', () => {
            subject();

            expect(screen.getByText(/loading/i)).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() {
            const result = subject();

            await waitFor(() => onloadRef !== null);
            act(() => {
                onloadRef!();
            });

            await waitFor(() =>
                expect(document.querySelector(WEB_COMPONENT_NAME)).toBeInTheDocument()
            );

            return result;
        }

        test('hides web component', async () => {
            await scriptLoadedSetup();

            expect(document.querySelector(WEB_COMPONENT_NAME)).not.toBeVisible();
        });

        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(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 data is passed in as a prop', () => {
            beforeEach(() => {
                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 entrypoint specifies a dev-server port', () => {
            const port = 3000;

            beforeEach(() => {
                Object.assign(metadata.entrypoints!.light, { port });
            });

            function withPort(url: string) {
                const result = new URL(url);
                result.port = String(port);
                return String(result);
            }

            itAddsJsEntrypointToWebComponent(
                'entrypoint with dev-server port',
                () => `${withPort(baseUrl)}/dist/bundle/light/${metadata.entrypoints!.light.js[0]}`
            );

            describe('when NODE_ENV is production', () => {
                const originalNodeEnv = process.env.NODE_ENV;

                beforeEach(() => (process.env.NODE_ENV = 'production'));

                afterEach(() => (process.env.NODE_ENV = originalNodeEnv));

                itAddsJsEntrypointToWebComponent(
                    'entrypoint without dev-server port',
                    () => `${baseUrl}/dist/bundle/light/${metadata.entrypoints!.light.js[0]}`
                );
            });
        });

        describe('when entrypoint has module: true', () => {
            beforeEach(() => {
                metadata.entrypoints!.light.module = true;
            });

            test('creates script with type="module"', async () => {
                await scriptLoadedSetup();

                expect(document.querySelector('script')).toHaveAttribute('type', 'module');
            });
        });

        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();
        });

        test('renders "data-mfe-name" attribute with undecorated name', async () => {
            await scriptLoadedSetup();

            expect(document.querySelector(WEB_COMPONENT_NAME)).toHaveAttribute(
                'data-mfe-name',
                baseName
            );
        });

        const mfeVersionAttribute = 'data-mfe-version';

        test(`renders "${mfeVersionAttribute}" attribute`, async () => {
            await scriptLoadedSetup();

            expect(document.querySelector(WEB_COMPONENT_NAME)).toHaveAttribute(
                mfeVersionAttribute,
                metadata.version
            );
        });

        describe('when metadata omits version', () => {
            beforeEach(() => delete metadata.version);

            test(`omits "${mfeVersionAttribute}" attribute`, async () => {
                await scriptLoadedSetup();

                expect(document.querySelector(WEB_COMPONENT_NAME)).not.toHaveAttribute(
                    mfeVersionAttribute
                );
            });
        });

        describe('after the web component is ready', () => {
            async function webComponentReadySetup() {
                const result = await scriptLoadedSetup();

                act(() => {
                    webComponentState.onReady!();
                });

                return result;
            }

            test('removes loading fallback', async () => {
                await webComponentReadySetup();
                expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
            });

            test('shows web component', async () => {
                await webComponentReadySetup();

                expect(document.querySelector(WEB_COMPONENT_NAME)).toBeVisible();
            });

            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'],
                    [EXPOSED_INSTANCE_DEPENDENCIES_TOKEN, 'exposedInstanceDependencies'],
                    [EVENT_BUS_TOKEN, 'eventBus'],
                ] as [any, string][]
            ).forEach(([klass, propName]) => {
                describe(`when ${propName} is provided`, () => {
                    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 ldService is provided via EXPOSED_INSTANCE_DEPENDENCIES', () => {
                let ldService: { getVersionClient?: jest.Mock };

                beforeEach(() => {
                    ldService = {};
                    singletons?.push({
                        provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
                        useValue: { launchDarkly: { version: '1.0', ldService } },
                    });
                });

                test('provides ldService to the web component', async () => {
                    await webComponentReadySetup();
                    expect(webComponentState.ldService).toEqual(ldService);
                });

                describe('when MFE has incompatible LaunchDarkly version', () => {
                    beforeEach(() => {
                        jest.mocked(getMFEHasCompatibleLaunchDarklyVersion).mockReturnValue(false);
                    });

                    function itDoesNotProvideLDService() {
                        test('does not provide ldService to the web component', async () => {
                            await webComponentReadySetup();
                            expect(webComponentState.ldService).toBeUndefined();
                        });
                    }

                    itDoesNotProvideLDService();

                    describe('when MFE supports a versioned LD client', () => {
                        beforeEach(() => {
                            jest.mocked(getMFESupportsVersionedLDClient).mockReturnValue(true);
                        });

                        itDoesNotProvideLDService();

                        describe("when the host's LDService supports a versioned client", () => {
                            beforeEach(() => {
                                ldService.getVersionClient = jest.fn();
                            });

                            test('provides ldService to the web component', async () => {
                                await webComponentReadySetup();
                                expect(webComponentState.ldService).toEqual(ldService);
                            });
                        });
                    });
                });
            });

            describe('when only LaunchDarkly version is provided via EXPOSED_INTERNAL_DEPENDENCIES', () => {
                beforeEach(() => {
                    singletons?.push({
                        provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
                        useValue: { launchDarkly: { version: '1.0' } },
                    });
                });

                describe('when ldService is provided via LD_SERVICE_TOKEN', () => {
                    const ldService = Symbol('ldService');

                    beforeEach(() =>
                        singletons?.push({ provide: LD_SERVICE_TOKEN, useValue: ldService })
                    );

                    test('adds ldService to exposedInternalDependencies provided to web component', async () => {
                        await webComponentReadySetup();
                        expect(webComponentState.exposedInstanceDependencies).toEqual(
                            expect.objectContaining({
                                launchDarkly: expect.objectContaining({ ldService }),
                            })
                        );
                    });

                    test('provides ldService to the web component', async () => {
                        await webComponentReadySetup();
                        expect(webComponentState.ldService).toEqual(ldService);
                    });

                    test('preserves state when component is rerendered', async () => {
                        const { rerender } = await webComponentReadySetup();

                        expectPreservesComponentState(rerender);
                    });
                });
            });

            describe('when metadata.bundledWith includes LaunchDarkly', () => {
                const version = '1.0.0';

                beforeEach(() => {
                    metadata.bundledWith = { 'launchdarkly-js-client-sdk': version };
                });

                function itAddsLaunchDarklyVersion() {
                    test('adds LaunchDarkly version to exposedInternalDependencies provided to web component', async () => {
                        await webComponentReadySetup();

                        expect(webComponentState.exposedInstanceDependencies).toEqual(
                            expect.objectContaining({ launchDarkly: { version } })
                        );
                    });
                }

                describe('when EXPOSED_INTERNAL_DEPENDENCIES omits launchDarkly', () => {
                    beforeEach(() => {
                        singletons?.push({
                            provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
                            useValue: {},
                        });
                    });

                    itAddsLaunchDarklyVersion();
                });

                describe('when EXPOSED_INTERNAL_DEPENDENCIES.launchDarkly omits ldService', () => {
                    beforeEach(() => {
                        singletons?.push({
                            provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
                            useValue: { launchDarkly: { version: '1.2.3' } },
                        });
                    });

                    itAddsLaunchDarklyVersion();
                });
            });

            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('onload handler gets unassigned after it gets called', async () => {
                    await webComponentReadySetup();
                    expect(onloadRef).toBeNull();
                });
            });

            describe('when there are version mismatches', () => {
                const exposedDependencies: ExposedDependencies = {
                    foo: { variable: 'foo', version: '1.0' },
                };
                const exposedInstanceDependencies: ExposedInstanceDependencies = {
                    launchDarkly: { version: '1.0' },
                };
                const mismatchedDeps = {
                    foo: { host: '1.0', package: '2.0' },
                };

                beforeEach(() => {
                    jest.mocked(getVersionMismatches).mockReturnValue(mismatchedDeps);
                    singletons?.push(
                        {
                            provide: EXPOSED_DEPENDENCIES_TOKEN,
                            useValue: exposedDependencies,
                        },
                        {
                            provide: EXPOSED_INSTANCE_DEPENDENCIES_TOKEN,
                            useValue: exposedInstanceDependencies,
                        }
                    );
                });

                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 "mismatch" warning', async () => {
                        await webComponentReadySetup();

                        expect(logService.warning).toHaveBeenCalledWith(
                            expect.objectContaining({
                                category: 'MicroFrontends.DependenciesMismatch',
                                data: {
                                    package: baseUrl,
                                    dependencies: JSON.stringify(mismatchedDeps),
                                },
                            })
                        );
                    });

                    describe('when host exposes no dependencies', () => {
                        beforeEach(() => {
                            singletons = singletons?.filter(
                                ({ provide }: any) => provide !== EXPOSED_DEPENDENCIES_TOKEN
                            );
                        });

                        test('logs "no dependencies" warning', async () => {
                            await webComponentReadySetup();

                            expect(logService.warning).toHaveBeenCalledWith(
                                expect.objectContaining({
                                    category: 'MicroFrontends.NoExposedDependencies',
                                })
                            );
                        });
                    });

                    describe('when MFE has incompatible version of LaunchDarkly', () => {
                        beforeEach(() => {
                            jest.mocked(getMFEHasCompatibleLaunchDarklyVersion).mockReturnValue(
                                false
                            );
                        });

                        test('logs "LaunchDarkly mismatch" warning', async () => {
                            await webComponentReadySetup();

                            expect(logService.warning).toHaveBeenCalledWith(
                                expect.objectContaining({
                                    category: 'MicroFrontends.LaunchDarklyMismatch',
                                    data: {
                                        package: props.src,
                                        hostVersion:
                                            exposedInstanceDependencies.launchDarkly?.version,
                                    },
                                })
                            );
                        });
                    });
                });
            });
        });

        test('onload handler gets unassigned after it gets called', async () => {
            await scriptLoadedSetup();
            expect(onloadRef).toBeNull();
        });
    });

    describe('when the script tag fails to load', () => {
        beforeEach(() => {
            jest.spyOn(console, 'error').mockImplementation(jest.fn); // suppress error boundary logging
        });

        async function triggerScriptError() {
            await waitFor(() => onerrorRef !== null);
            act(() => {
                onerrorRef!();
            });
        }

        itRendersErrorFallback(triggerScriptError);

        test('does not hang on the loading fallback', async () => {
            subject();
            await triggerScriptError();

            await waitFor(() => expect(screen.queryByText(/loading/i)).not.toBeInTheDocument());
        });
    });

    describe('when cache is enabled', () => {
        beforeAll(() => {
            jest.useFakeTimers();
            jest.spyOn(console, 'error').mockImplementation(jest.fn); // suppress "suspended resource finished loading inside a test" error
        });

        beforeEach(() => delete props.cache);

        function preloadComponent({ id, cache }: { id?: string; cache?: boolean | number } = {}) {
            if (id) {
                props.src = `http://localhost/${id}`;
                initializeGetJsonMockFns(props.src);
            }
            if (cache !== undefined) {
                props.cache = cache;
            }
            subject();
            jest.mocked(common.getJson).mockClear();
        }

        function itReloadsMetadataAfter(delay: number, description: string) {
            test(`reloads metadata after ${description}`, () => {
                act(() => jest.advanceTimersByTime(delay - 1));
                subject();
                expect(common.getJson).not.toHaveBeenCalled();

                act(() => jest.advanceTimersByTime(1));
                subject();
                expect(common.getJson).toHaveBeenCalledTimes(1);
            });
        }

        function itNeverReloadsMetadata() {
            test('never reloads metadata', () => {
                jest.runOnlyPendingTimers();
                subject();

                expect(common.getJson).not.toHaveBeenCalled();
            });
        }

        describe('when component was previously loaded', () => {
            beforeEach(() => preloadComponent({ id: 'mfe1' }));

            itNeverReloadsMetadata();
        });

        describe('when cache is true', () => {
            beforeEach(() => preloadComponent({ id: 'mfe2', cache: true }));

            test('uses cached metadata', () => {
                subject();

                expect(common.getJson).not.toHaveBeenCalled();
            });

            itReloadsMetadataAfter(1000 * 60 * 15, 'fifteen minutes');
        });

        describe('when cache is true and mfe does not have unique chunk namespace', () => {
            beforeEach(() => {
                jest.mocked(getMFEHasUniqueChunkNamespace).mockReturnValue(false);
                preloadComponent({ id: 'mfe3', cache: true });
            });

            itNeverReloadsMetadata();
        });

        describe('when component has custom ttl', () => {
            const customTtl = 1000 * 60; // one minute

            beforeEach(() => preloadComponent({ id: 'mfe4', cache: customTtl }));

            itReloadsMetadataAfter(customTtl, 'custom ttl');
        });

        describe('when component has zero ttl', () => {
            beforeEach(() => preloadComponent({ id: 'mfe5', cache: 0 }));

            test('always reloads metadata', () => {
                subject();
                expect(common.getJson).toHaveBeenCalledTimes(1);

                subject();
                expect(common.getJson).toHaveBeenCalledTimes(2);
            });
        });

        describe("when mfe doesn't have unique chunk namespace", () => {
            beforeEach(() => {
                preloadComponent({ id: 'mfe6' });
                setStartupVersion('27.1.1');
            });

            itNeverReloadsMetadata();
        });

        describe('when headless mfe is loaded after non-headless mfe', () => {
            beforeEach(() => {
                preloadComponent({ id: 'mfe7' });
                (props as UnrestrictedLoaderProps).isHeadless = true;
                initializeGetJsonMockFns(props.src);
            });

            itNeverReloadsMetadata();
        });
    });
});