import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import getAuthorList from '../../../../tests/factories/authors/author.factory';

import Author from '.';

let author1Data = getAuthorList({})[1];
let author2Data = getAuthorList({})[1];
let reviewerData = getAuthorList({})[1];

author1Data = {
  ...author1Data,
  name: 'John Author1',
};

author2Data = {
  ...author2Data,
  name: 'Nick Author2',
};

reviewerData = {
  ...reviewerData,
  name: 'Jane Reviewer',
};

describe('Author Component', () => {
  test('render with props', async () => {
    const { container, getByText } = render(
      <Author authors={[author1Data, author2Data]} reviewer={reviewerData} />
    );
    expect(container).toBeTruthy();

    await waitFor(() => {
      const author1 = getByText('John Author1');
      const author2 = getByText('Nick Author2');
      const reviewer = getByText('Jane Reviewer');

      expect(author1).toBeTruthy();
      expect(author2).toBeTruthy();
      expect(reviewer).toBeTruthy();
    });
  });
  test('show three authors', async () => {
    const { container } = render(
      <Author authors={[author1Data, author2Data, author1Data]} reviewer={reviewerData} />
    );
    expect(container).toBeTruthy();

    await waitFor(() => {
      expect(container.querySelector('.author')).toBeTruthy();
      expect(container.querySelectorAll('.contributor').length).toBe(4);
      expect(container.querySelector('.reviewer')).toBeTruthy();
      expect(container.querySelectorAll('.reviewer').length).toBe(1);
    });
  });
  test('show two authors, and no reviewer', async () => {
    const { container } = render(<Author authors={[author1Data, author2Data]} />);
    expect(container).toBeTruthy();

    await waitFor(() => {
      expect(container.querySelector('.author')).toBeTruthy();
      expect(container.querySelectorAll('.contributor').length).toBe(2);
      expect(container.querySelector('.reviewer')).toBeFalsy();
    });
  });
});
afterEach(() => {
  cleanup();
});
