class LoadingPage {
    static elementId = 'global-loading';
    static visibleClass = 'loading-visible';

    createElement({ className = '' }: { className?: string } = {}) {
        const div = document.createElement('div');
        div.setAttribute('id', LoadingPage.elementId);
        div.setAttribute('class', ['global-loading', className].join(' '));
        document.body.appendChild(div);
    }

    get element() {
        return document.getElementById(LoadingPage.elementId)!;
    }
}

describe('[ajax-handlers] loader', () => {
    const loadingPage = new LoadingPage();
    let loader: { show: Function; hide: Function };

    beforeAll(() => jest.useFakeTimers());

    afterEach(() => {
        loadingPage.element.remove();
    });

    const subject = () => {
        jest.isolateModules(() => {
            loader = require('../loader').loader;
        });
    };

    test('creates loading element', () => {
        subject();

        expect(loadingPage.element).not.toBeNull();
    });

    test('show() shows the loading element', () => {
        subject();

        loader.show();

        expect(loadingPage.element.className).toContain(LoadingPage.visibleClass);
    });

    describe('when loading element is showing', () => {
        beforeEach(() => {
            subject();
            loader.show();
            jest.runAllTimers();
        });

        describe('hide()', () => {
            beforeEach(() => loader.hide());

            test('hides the loading element', () => {
                expect(loadingPage.element.className).not.toContain(LoadingPage.visibleClass);
            });

            describe('when element is done hiding', () => {
                beforeEach(() => jest.runAllTimers());

                test("resets the element's style", () => {
                    expect(loadingPage.element.style).toMatchObject({
                        display: '',
                        opacity: '',
                        transition: '',
                    });
                });
            });
        });
    });

    describe('when loading element already exists with "dots" class', () => {
        beforeEach(() => loadingPage.createElement({ className: 'dots' }));

        test('adds <span class="s1">&#x25AA;</span> to element', () => {
            subject();

            expect(document.querySelector(`#${LoadingPage.elementId} > span.s1`)?.textContent).toBe(
                '\u25AA'
            );
        });
    });

    describe('when loading element already exists with "boxes" class', () => {
        beforeEach(() => loadingPage.createElement({ className: 'boxes' }));

        test('adds <span class="h"/> to element', () => {
            subject();

            expect(document.querySelector(`#${LoadingPage.elementId} > span.h`)).not.toBeNull();
        });
    });
});