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

import { authorObject } from '~tests/factories/modules/author-box.factory';
import AuthorBox from '.';

describe('author box component', () => {
  test('render', () => {
    const author = authorObject;
    const { container, getByText } = render(<AuthorBox author={author} />);
    expect(container).toBeTruthy();
    // Logo
    // expect(container.querySelector('img')).toBeFalsy();
    // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
    // Name
    expect(getByText('Ida Moen Olsen')).toBeTruthy();
    // Title
    expect(getByText('Casino Specialist')).toBeTruthy();
    // Email, website, additional url
    expect(container.querySelectorAll('.contactLinks a')).toBeTruthy();
    // Facebook, Instagram, LinkedIn
    expect(container.querySelectorAll('.socialIcons a')).toBeTruthy();
    // Biography
    expect(getByText('Here goes the biography of the author.')).toBeTruthy();
    // CTA
    expect(getByText('More about Ida')).toBeTruthy();
  });

  test('render with read more ', async () => {
    const author = authorObject;

    author.biography =
      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out";

    const { container, getByText } = render(<AuthorBox author={author} />);

    expect(container).toBeTruthy();
    expect(
      getByText(
        "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying..."
      )
    ).toBeTruthy();
    const button = container.querySelector('.contReadText');
    fireEvent.click(button);

    await waitFor(() => {
      expect(getByText(author.biography)).toBeTruthy();
    }, 4000);
  });
});
afterEach(() => {
  cleanup();
});
