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 Contributor from '.';

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

authorData = {
  ...authorData,
  name: 'John Author',
  profile_page_path: 'john-author',
};

describe('Author Component', () => {
  test('render with props', () => {
    const { container, getByText } = render(<Contributor contributor={authorData} />);

    expect(container).toBeTruthy();
    const contributor = getByText(authorData.name);
    expect(contributor).toBeTruthy();
  });
  test('Author data', async () => {
    const { container, getByText } = render(<Contributor contributor={authorData} />);

    await waitFor(() => {
      expect(container.querySelector('.topContainer')).toBeTruthy();
      expect(container.querySelector('.author')).toBeTruthy();
      expect(container.querySelector('.author a')).toHaveAttribute(
        'href',
        `/${authorData.profile_page_path}`
      );
      expect(container.querySelector('.author a')).toHaveTextContent(authorData.name);
      const articlesWrittenText = getByText('Articles Written');
      const experienceText = getByText('Years of experience');

      expect(articlesWrittenText).toBeTruthy();
      expect(experienceText).toBeTruthy();
    });
  });
  test('Author title', async () => {
    const { container, getByText } = render(<Contributor contributor={authorData} />);

    await waitFor(() => {
      expect(container.querySelector('.author')).toBeTruthy();
      expect(container.querySelector('.author span')).toHaveTextContent(authorData.author_title);
      const authorTitle = getByText(authorData.author_title);

      expect(authorTitle).toBeTruthy();
    });
  });
  test('Reviewer fact checker text', async () => {
    const { container } = render(
      <Contributor contributor={authorData} isReviewer showTitle={false} />
    );

    await waitFor(() => {
      expect(container.querySelector('.reviewer')).toBeTruthy();
      expect(container.querySelector('.reviewer label')).toHaveTextContent('Fact-checker');
    });
  });
  test('Author socials', async () => {
    const { container } = render(<Contributor contributor={authorData} />);

    await waitFor(() => {
      expect(container.querySelector('.socials')).toBeTruthy();
      expect(container.querySelectorAll('.socials > a').length).toBe(6);
      expect(container.querySelector('.socials a')).toHaveAttribute(
        'href',
        authorData.facebook_profile
      );
      expect(container.querySelectorAll('.socials a')[5]).toHaveAttribute(
        'href',
        authorData.personal_website
      );
    });
  });
  test('Author experience', async () => {
    const { container } = render(<Contributor contributor={authorData} />);

    await waitFor(() => {
      expect(container.querySelector('.statsContainer')).toBeTruthy();
      expect(container.querySelector('.stats')).toBeTruthy();
      expect(container.querySelectorAll('.stats').length).toBe(2);
      expect(parseInt(container.querySelector('.stats').innerHTML.split('<p>')[0])).toBe(
        authorData.pages_count
      );
      expect(parseInt(container.querySelectorAll('.stats')[1].innerHTML.split('<p>')[0])).toBe(
        authorData.experience
      );
    });
  });
  test('Author bio', async () => {
    const { container } = render(<Contributor contributor={authorData} />);

    await waitFor(() => {
      expect(container.querySelector('.bottomContainer')).toBeTruthy();
      expect(container.querySelector('.biography')).toBeTruthy();
      expect(container.querySelector('.biography')).toHaveTextContent(authorData.biography);
    });
  });
});
afterEach(() => {
  cleanup();
});
