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

import Author from '.';

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

authorData = {
  ...authorData,
  name: 'John Author',
};

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

describe('Author Component', () => {
  test('render with props', () => {
    const { container, getByText } = render(
      <Author
        authors={[authorData]}
        reviewer={reviewerData}
        date="2020-04-24 15:37:42"
        readingTime={5}
      />
    );
    expect(container.querySelector('.authorWraper')).toBeTruthy();

    const author = getByText('John Author');
    const reviewer = getByText('Jane Reviewer');
    const readingTime = getByText('5 min');
    const date = getByText('24.04.2020');

    expect(author).toBeTruthy();
    expect(reviewer).toBeTruthy();
    expect(readingTime).toBeTruthy();
    expect(date).toBeTruthy();
  });
  test('Review credits collapse button with icon', () => {
    const { container } = render(
      <Author
        authors={[authorData]}
        reviewer={reviewerData}
        date="2020-04-24 15:37:42"
        readingTime={5}
      />
    );

    expect(container.querySelector('button')).toBeTruthy();
    expect(container.querySelector('button svg')).toBeTruthy();
    expect(container.querySelector('button')).toHaveTextContent('About this page');
  });
  test('Review credits collapse button without icon', () => {
    const { container } = render(
      <Author
        authors={[authorData]}
        reviewer={reviewerData}
        date="2020-04-24 15:37:42"
        readingTime={5}
        buttonIcon={null}
      />
    );

    expect(container.querySelector('button')).toBeTruthy();
    expect(container.querySelector('buttin img')).toBeFalsy();
  });
  test('Show editorial guide with icon', () => {
    const { container } = render(
      <Author
        authors={[authorData]}
        reviewer={reviewerData}
        date="2020-04-24 15:37:42"
        readingTime={5}
        editorialContent={
          <div>
            Click here for <a href="/">Guide</a>
          </div>
        }
      />
    );

    expect(container.querySelector('.editorial')).toBeTruthy();
    expect(container.querySelector('.editorial')).toHaveTextContent('Click here for Guide');
    expect(container.querySelector('.editorial a')).toHaveTextContent('Guide');
    expect(container.querySelector('.editorial svg')).toBeTruthy();
  });
  test('Show editorial guide without icon', () => {
    const { container } = render(
      <Author
        authors={[authorData]}
        reviewer={reviewerData}
        date="2020-04-24 15:37:42"
        readingTime={5}
        editorialLinkText="Guide"
        editorialText="Click here for "
        editorialIcon={null}
      />
    );

    expect(container.querySelector('.editorial')).toBeTruthy();
    expect(container.querySelector('.editorial svg')).toBeFalsy();
  });
  test('Hide editorial guide', () => {
    const { container } = render(
      <Author
        authors={[authorData]}
        reviewer={reviewerData}
        date="2020-04-24 15:37:42"
        readingTime={5}
        showEditorialGuide={false}
      />
    );

    expect(container.querySelector('.editorial')).toBeFalsy();
  });
  test('Show Author and Reviewer', () => {
    const { container } = render(<Author authors={[authorData]} reviewer={reviewerData} />);

    expect(container.querySelector('.people')).toBeTruthy();
    expect(container.querySelectorAll('.people a').length).toEqual(2);
  });
  test('Show Only Author no Reviewer', () => {
    const { container } = render(<Author authors={[authorData]} />);

    expect(container.querySelector('.people')).toBeTruthy();
    expect(container.querySelectorAll('.people a').length).toEqual(1);
  });
  test('Show Author data', () => {
    authorData = {
      ...authorData,
      name: 'John Author',
      profile_page_path: 'john-author',
    };
    const { container } = render(
      <Author authors={[authorData]} reviewer={reviewerData} showPrefix />
    );

    expect(container.querySelector('.author')).toBeTruthy();
    expect(container.querySelector('.author a')).toHaveTextContent('John Author');
    expect(container.querySelector('.author a')).toHaveAttribute('href', '/john-author');
  });
  test('Show Reviewer data', () => {
    reviewerData = {
      ...reviewerData,
      name: 'Jane Reviewer',
      profile_page_path: 'jane-reviewer',
    };
    const { container } = render(
      <Author authors={[authorData]} reviewer={reviewerData} showPrefix />
    );

    expect(container.querySelector('.reviewer')).toBeTruthy();
    expect(container.querySelector('.reviewer a')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.reviewer a')).toHaveAttribute('href', '/jane-reviewer');
  });
  test('No reading time or date', () => {
    const { container } = render(<Author authors={[authorData]} />);

    expect(container.querySelector('.readtimeDate')).toBeFalsy();
  });
  test('Show reading time and date', () => {
    const { container, getByText } = render(
      <Author authors={[authorData]} date="2020-04-24 15:37:42" readingTime={2} />
    );

    expect(container.querySelector('.readtimeDate')).toBeTruthy();
    const readingTime = getByText('2 min');
    expect(readingTime).toBeTruthy();
    expect(container.querySelector('.dateTimeWrapper')).toHaveTextContent(
      'Published on 24.04.2020'
    );
  });
});
afterEach(() => {
  cleanup();
});
