import '@testing-library/jest-dom';
import { BundleInfo } from '../get-bundle-info';
import { loadScripts } from '../load-scripts';

describe('[web-components] loadScripts', () => {
    const url = 'https://unpkg.servicetitan.com/mfe/dist/bundle/light/light.js';
    const webComponentName = 'my-mfe';

    let bundleInfo: BundleInfo;
    let onloadRef: (() => void) | null;
    let onerrorRef: (() => void) | null;

    beforeAll(() => {
        /*
         * 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', {
            configurable: true,
            get() {
                return this._onload;
            },
            set(onload) {
                onloadRef = onload;
                this._onload = onload;
            },
        });
        Object.defineProperty(HTMLScriptElement.prototype, 'onerror', {
            configurable: true,
            get() {
                return this._onerror;
            },
            set(onerror) {
                onerrorRef = onerror;
                this._onerror = onerror;
            },
        });
    });

    beforeEach(() => {
        document.querySelectorAll('script').forEach(script => script.remove());
        onloadRef = null;
        onerrorRef = null;
        bundleInfo = {
            bundledWith: undefined,
            cacheHit: undefined,
            disposer: () => {},
            mfeSupportsRerendering: false,
            mfeHasUniqueChunkNamespace: false,
            mfeHasCompatibleLaunchDarklyVersion: false,
            mismatch: undefined,
            resolvedBundleType: 'light',
            urls: { js: [url], css: [] },
            WebComponent: webComponentName,
            version: undefined,
            module: undefined,
        };
    });

    const subject = () => loadScripts(bundleInfo);

    function scriptTag() {
        return document.querySelector(`script[src="${url}"]`) as HTMLScriptElement | null;
    }

    test('creates a script tag for the js url', () => {
        subject();

        expect(scriptTag()).toBeInTheDocument();
    });

    test('sets crossOrigin to anonymous', () => {
        subject();

        expect(scriptTag()).toHaveAttribute('crossorigin', 'anonymous');
    });

    describe('when the script loads successfully', () => {
        const subject = () => {
            const promise = loadScripts(bundleInfo);
            onloadRef!();
            return promise;
        };

        test('resolves', async () => {
            await expect(subject()).resolves.toEqual([undefined]);
        });

        test('marks the script tag with the web component name', async () => {
            await subject();

            expect(scriptTag()).toHaveAttribute('data-web-component', webComponentName);
        });

        test('unassigns the onload and onerror handlers', async () => {
            await subject();

            expect(scriptTag()!.onload).toBeNull();
            expect(scriptTag()!.onerror).toBeNull();
        });
    });

    describe('when the script fails to load', () => {
        const subject = () => {
            const promise = loadScripts(bundleInfo);
            onerrorRef!();
            return promise;
        };

        test('rejects with a network error', async () => {
            await expect(subject()).rejects.toThrow(`Failed to load script: "${url}".`);
        });

        test('removes the failed script tag from the DOM', async () => {
            await subject().catch(() => {});

            expect(scriptTag()).not.toBeInTheDocument();
        });
    });

    describe('when a script tag for this bundle already exists without a webComponent data attribute', () => {
        let originalOnloadSpy: jest.Mock;
        let originalOnerrorSpy: jest.Mock;

        beforeEach(() => {
            originalOnloadSpy = jest.fn();
            originalOnerrorSpy = jest.fn();

            const script = document.createElement('script');
            script.src = url;
            script.onload = originalOnloadSpy;
            script.onerror = originalOnerrorSpy;
            document.body.appendChild(script);
        });

        const subject = () => {
            const promise = loadScripts(bundleInfo);
            onloadRef!();
            return promise;
        };

        test('calls the original onload handler', async () => {
            await subject();

            expect(originalOnloadSpy).toHaveBeenCalled();
        });

        describe('when the script fails to load', () => {
            const subject = () => {
                const promise = loadScripts(bundleInfo);
                onerrorRef!();
                return promise;
            };

            test('calls the original onerror handler', async () => {
                await subject().catch(() => {});

                expect(originalOnerrorSpy).toHaveBeenCalled();
            });

            test('rejects with a network error', async () => {
                await expect(subject()).rejects.toThrow(`Failed to load script: "${url}".`);
            });

            test('removes the failed script tag from the DOM', async () => {
                await subject().catch(() => {});

                expect(scriptTag()).not.toBeInTheDocument();
            });
        });
    });
});