import React from 'react';
import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import Tabs from '.';

describe('Tabs Component', () => {
  test('render tabs', async () => {
    const { container, getByText } = render(
      <Tabs tabsAlign="right" HeaderComp={<div className="header">my header</div>}>
        <div label="one" key={1}>
          <span className="my-span">1111111111111</span>
        </div>
        <div label="two" key={2}>
          <span className="my-span">2222222</span>
        </div>
        <div label="three" key={3}>
          <span className="my-span">33333333</span>
        </div>
      </Tabs>
    );

    await waitFor(() => {
      expect(container.querySelectorAll('.tabListItem')).toHaveLength(2);
      // tabsAlign="right"
      expect(container.querySelectorAll('div.tabsHeader.invertOrder')).toHaveLength(1);
      // // HeaderComp
      expect(getByText('my header')).toBeTruthy();
      expect(getByText('1111111111111')).toBeTruthy();
    });
  });

  test('show all', async () => {
    const { container, getByText } = render(
      <Tabs
        tabsAlign="left"
        HeaderComp={<div className="header">my header</div>}
        showAll="show all"
      >
        <div label="one" key={1}>
          1111111111111
        </div>
        <div label="two" key={2}>
          2222222
        </div>
        <div label="three" key={3}>
          33333333
        </div>
      </Tabs>
    );
    await waitFor(() => {
      expect(container.querySelectorAll('.tabListItem')).toHaveLength(3);
      expect(container.querySelectorAll('div.tabsHeader')).toHaveLength(1);
      expect(getByText('1111111111111222222233333333')).toBeInTheDocument();
    });
  });

  test('switch tabs', async () => {
    const { getByText } = render(
      <Tabs tabsAlign="right" HeaderComp={<div className="header">my header</div>}>
        <div label="one" key={1}>
          <span className="my-span">1111111111111</span>
        </div>
        <div label="two" key={2}>
          <span className="my-span">2222222</span>
        </div>
        <div label="three" key={3}>
          <span className="my-span">33333333</span>
        </div>
      </Tabs>
    );

    await waitFor(() => {
      expect(getByText('two')).toBeTruthy();
    });

    fireEvent.click(getByText('two'));
    expect(getByText('2222222')).toBeTruthy();

    await waitFor(() => {
      fireEvent.click(getByText('three'));
    });

    expect(getByText('33333333')).toBeTruthy();

    await waitFor(() => {
      fireEvent.click(getByText('one'));
    });
    expect(getByText('1111111111111')).toBeTruthy();
  });
});
afterEach(() => {
  cleanup();
});
