import React, { ReactElement } from 'react';
import {
  render,
  fireEvent,
  waitFor,
  waitForElementToBeRemoved,
} from '@testing-library/react';

import Collapse from '..';

describe('rendering', () => {
  it('shows collapse content', () => {
    const { getByText } = render(<Collapse open>Collapse content</Collapse>);
    expect(getByText('Collapse content')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('allows to toggle content rendering', async () => {
    const Component = (): ReactElement => {
      const [open, setOpen] = React.useState<boolean>(false);
      return (
        <>
          <button type="button" onClick={(): void => setOpen(!open)}>
            Toggle
          </button>
          <Collapse open={open}>Collapse content</Collapse>
        </>
      );
    };
    const { queryByText, getByText } = render(<Component />);
    expect(queryByText('Collapse content')).not.toBeInTheDocument();

    fireEvent.click(getByText('Toggle'));
    await waitFor(() => {
      expect(getByText('Collapse content')).toBeInTheDocument();
    });

    fireEvent.click(getByText('Toggle'));
    await waitForElementToBeRemoved(() => queryByText('Collapse content'));
  });
});