import '@testing-library/jest-dom';
import { act, render, waitFor } from '@testing-library/react';
import * as common from '../common';
import { HeadlessLoader } from '../headless-loader';

describe('[web-components] HeadlessLoader', () => {
    class Page {
        static get webComponent() {
            return document.querySelector(`headless-${WEB_COMPONENT_NAME}`);
        }
    }

    class WebComponent extends HTMLElement {
        provide = () => {};
    }

    const baseName = 'mfe-component';
    const baseUrl = 'http://unpkg.servicetitan.com/mfe';
    const WEB_COMPONENT_NAME = `${baseName}-abc123`;
    const 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'],
            },
            headless: {
                js: ['headless.js'],
                css: [],
            },
        },
    };
    const props = {
        src: baseUrl,
        loadingFallback: null,
    };
    let onloadRef: Function | null;
    let getJsonMockFns: Record<string, Function>;

    function initializeGetJsonMockFns() {
        getJsonMockFns = {
            [`${props.src}/dist/metadata.json`]: () => {
                return Promise.resolve({
                    data: metadata,
                    headers: {} as Headers,
                    url: props.src,
                });
            },
        };
    }

    beforeAll(() => {
        // register web component in order to test the `provide` method
        window.customElements.define(`headless-${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;
            },
        });
    });

    beforeEach(() => {
        jest.resetAllMocks();
        onloadRef = null;
        initializeGetJsonMockFns();
        document.querySelectorAll('script').forEach(script => script.remove());
        jest.spyOn(common, 'getJson').mockImplementation((url, _) => {
            if (getJsonMockFns[url] === undefined) {
                throw new Error(`Unexpected getJson call with url: ${url}`);
            }
            return getJsonMockFns[url]();
        });
    });

    function subject() {
        return render(<HeadlessLoader {...props} />);
    }

    describe('after the script tag added is loaded', () => {
        async function scriptLoadedSetup() {
            const result = subject();

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

            await waitFor(() => expect(Page.webComponent).toBeInTheDocument());

            return result;
        }

        test(`adds the headless entrypoint to a script tag`, async () => {
            await scriptLoadedSetup();
            const script = document.querySelector('script');
            expect(script).toHaveAttribute(
                'src',
                `${baseUrl}/dist/bundle/headless/${metadata.entrypoints.headless.js[0]}`
            );
        });

        test('hides the web component', async () => {
            await scriptLoadedSetup();
            expect(Page.webComponent).toHaveStyle('display: none');
        });
    });
});