import React from 'react';
import { render, cleanup } from '@testing-library/react';
import TemplateThree from '.';

describe('AuthorTemplateOne Component', () => {
  it('renders author name in desired format when authorTemplateTwo is false', () => {
    const { container } = render(
      <TemplateThree
        authorName="John Doe"
        authorPath="/path-to-author"
        authorTitle="casino expert"
      />
    );

    expect(container.querySelectorAll('a')).toHaveLength(1);
    expect(container.querySelector('a')).toHaveAttribute('href', '/path-to-author');
  });
  test('Show Author data', () => {
    const { container } = render(
      <TemplateThree
        authorName="John Author"
        authorPath="/john-author"
        authorTitle="casino expert"
      />
    );

    expect(container.querySelector('.authorContainer')).toBeTruthy();
    expect(container.querySelector('.authorContainer a')).toHaveTextContent('John Author');
    expect(container.querySelector('.authorContainer a')).toHaveAttribute('href', '/john-author');
  });
  test('Show Author without as a link', () => {
    const { container } = render(
      <TemplateThree
        authorName="John Author"
        authorPath="/john-author"
        authorTitle="casino expert"
        showLinks={false}
      />
    );

    expect(container.querySelector('.authorContainer')).toBeTruthy();
    expect(container.querySelector('.authorContainer p')).toHaveTextContent('John Author');
    expect(container.querySelector('.authorContainer')).not.toHaveAttribute('href', '/john-author');
  });
  test('Show Author title', () => {
    const { container } = render(
      <TemplateThree
        authorName="John Author"
        authorPath="/john-author"
        authorTitle="casino expert"
      />
    );

    expect(container.querySelector('.authorContainer')).toBeTruthy();
    expect(container.querySelector('.authorContainer a')).toHaveTextContent('John Author');
    expect(container.querySelector('.authorTitle')).toBeTruthy();
    expect(container.querySelector('.authorTitle')).toHaveTextContent('casino expert');
  });
  test('Hide Author title', () => {
    const { container } = render(
      <TemplateThree
        authorName="John Author"
        authorPath="/john-author"
        authorTitle="casino expert"
        showTitle={false}
      />
    );

    expect(container.querySelector('.authorContainer')).toBeTruthy();
    expect(container.querySelector('.authorContainer a')).toHaveTextContent('John Author');
    expect(container.querySelector('.authorTitle')).toBeFalsy();
  });
  test('Show Reviewer data', () => {
    const { container } = render(
      <TemplateThree
        authorName="Jane Reviewer"
        authorPath="/jane-reviewer"
        authorTitle="casino expert"
        isReviewer
      />
    );

    expect(container.querySelector('.authorContainer')).toBeTruthy();
    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.authorContainer a')).toHaveAttribute('href', '/jane-reviewer');
  });
  test('Show Reviewer title', () => {
    const { container } = render(
      <TemplateThree
        authorName="Jane Reviewer"
        authorPath="/jane-reviewer"
        authorTitle="casino expert"
        isReviewer
        showTitle={false}
      />
    );

    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.reviewerTitle')).toBeTruthy();
    expect(container.querySelector('.reviewerTitle')).toHaveTextContent('Fact-checker');
  });
  test('Hide Reviewer title', () => {
    const { container } = render(
      <TemplateThree
        authorName="Jane Reviewer"
        authorPath="/jane-reviewer"
        authorTitle="casino expert"
        isReviewer
      />
    );

    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.reviewerTitle')).toBeFalsy();
  });
  test('Show Reviewer verification icon', () => {
    const { container } = render(
      <TemplateThree
        authorName="Jane Reviewer"
        authorPath="/jane-reviewer"
        authorTitle="casino expert"
        isReviewer
        showTitle={false}
      />
    );
    const verificationIcon = expect(container.querySelector('.reviewerTitle svg'));

    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.reviewerTitle')).toBeTruthy();
    expect(container.querySelector('.reviewerTitle')).toHaveTextContent('Fact-checker');

    verificationIcon.toBeTruthy();
  });
  test('Hide Reviewer verification icon', () => {
    const { container } = render(
      <TemplateThree
        authorName="Jane Reviewer"
        authorPath="/jane-reviewer"
        authorTitle="casino expert"
        isReviewer
        showVerification={false}
        showTitle={false}
      />
    );

    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.reviewerTitle')).toBeTruthy();
    expect(container.querySelector('.reviewerTitle')).toHaveTextContent('Fact-checker');
    expect(container.querySelector('.reviewerTitle svg')).toBeFalsy();
  });
  test('Show Reviewer without as a link', () => {
    const { container } = render(
      <TemplateThree
        authorName="Jane Reviewer"
        authorPath="/jane-reviewer"
        authorTitle="casino expert"
        showLinks={false}
        isReviewer
      />
    );

    expect(container.querySelector('.authorContainer')).toBeTruthy();
    expect(container.querySelector('.authorContainer p')).toHaveTextContent('Jane Reviewer');
    expect(container.querySelector('.authorContainer')).not.toHaveAttribute(
      'href',
      '/jane-reviewer'
    );
  });
});

afterEach(() => {
  cleanup();
});
