import '@testing-library/jest-dom';
import { act, render, screen } from '@testing-library/react';
import { Delayed, DelayedProps } from '../delayed';

describe(`${Delayed.name}`, () => {
    const content = 'foo';
    let props: DelayedProps;

    beforeEach(() => {
        jest.useFakeTimers();
        props = {};
    });

    const subject = () => render(<Delayed {...props}>{content}</Delayed>);

    test('renders content after 200ms delay', () => {
        subject();

        act(() => jest.advanceTimersByTime(199));
        expect(screen.queryByText(content)).not.toBeInTheDocument();

        act(() => jest.advanceTimersByTime(1));
        expect(screen.getByText(content)).toBeInTheDocument();
    });

    describe('with zero delay', () => {
        beforeEach(() => (props.delayMs = 0));

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

            expect(screen.getByText(content)).toBeInTheDocument();
        });
    });

    describe('with custom delay', () => {
        beforeEach(() => (props.delayMs = 1000));

        test('renders content after specified delay', () => {
            subject();

            act(() => jest.advanceTimersByTime(props.delayMs! - 1));
            expect(screen.queryByText(content)).not.toBeInTheDocument();

            act(() => jest.advanceTimersByTime(1));
            expect(screen.queryByText(content)).toBeInTheDocument();
        });
    });
});