import { act, cleanup, waitFor } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';
import Notification, { showNotif } from './notification';

afterEach(cleanup);

describe('<Notification />', () => {
  it('should render null when no notification fired', () => {
    const message = 'hello';
    const { debug, queryByText } = render(<Notification />);
  });

  it('should render notification and hide after timeout', async () => {
    const message = 'hello';
    const timeout = 4000;
    const { getByText, queryByText } = render(<Notification />);
    act(() => showNotif(message, { ms: timeout }));
    const el = getByText(message);
    expect(el.innerHTML).toBe(message);
    await waitFor(async () => await new Promise(r => setTimeout(r, timeout)), {
      timeout: timeout + 500
    }).then(() => expect(queryByText(message)).toBeNull());
  });

  it('should render a ReactNode inside the notification', async () => {
    const message = 'HELLO';
    const timeout = 4000;
    const Component = (
      <div>
        <h1>HELLO</h1>
      </div>
    );
    const { getByText } = render(<Notification />);
    act(() => showNotif(Component, { ms: timeout }));
    const el = getByText(message);
    expect(el.innerHTML).toBe(message);
  });
});