import '@testing-library/jest-dom/extend-expect';
import React, { RefObject } from 'react';
import { render, fireEvent, waitForDomChange, wait } from '@testing-library/react';
import StickyHeader, { CLASSNAME, CLASSNAME_ACTIVE } from '../StickyHeader';

describe('<StickyHeader>', () => {
    const CONTENT = 'content';

    const renderComponent = (top: number) => {
        const target = {
            current: {
                getBoundingClientRect: () => ({ top })
            }
        } as unknown as RefObject<HTMLElement>;

        return render(<StickyHeader target={target}><div>{CONTENT}</div></StickyHeader>);
    };

    const parentHasClass = (element: HTMLElement, className: string) =>
        element.parentElement
        && element.parentElement.parentElement
        && element.parentElement.parentElement.classList.contains(className);

    describe('beneath scroll threshold', () => {
        test('does not set the active class', async () => {
            const container = renderComponent(100);

            fireEvent.scroll(window);
            await wait();

            const content = container.getByText(CONTENT);
            expect(parentHasClass(content, CLASSNAME)).toBe(true);
            expect(parentHasClass(content, CLASSNAME_ACTIVE)).toBe(false);
        });
    });

    describe('above scroll threshold', () => {
        test('sets the active class', async () => {
            const container = renderComponent(-100);

            fireEvent.scroll(window);
            await waitForDomChange({ container: container.container });

            const content = container.getByText(CONTENT);
            expect(parentHasClass(content, CLASSNAME)).toBe(true);
            expect(parentHasClass(content, CLASSNAME_ACTIVE)).toBe(true);
        });
    });
});