/* eslint-disable no-multi-assign */
import React from 'react';
import { render, cleanup, waitFor, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
import TemplateOneThree from '.';

describe('Payment template one three component', () => {
  const data = getPaymentData();

  test('Template One Status Active', () => {
    const { container, queryByText } = render(<TemplateOneThree {...data} />);
    expect(queryByText('Next')).toBeInTheDocument();
    expect(container.querySelectorAll('h1')).toHaveLength(1);
    expect(queryByText('20 Free Spins No Deposit Bonus')).toBeInTheDocument();
    expect(queryByText('+ 300% & 555 Spins Welcome Bonus')).toBeInTheDocument();
    expect(queryByText('Visit')).toBeInTheDocument();
    expect(container.querySelectorAll('a')).toHaveLength(1);
    expect(container.getElementsByClassName('desc')).toHaveLength(1);
    expect(container.querySelectorAll('li')).toHaveLength(4);
  });

  test('Template Three Status Active', () => {
    const { container, queryByText } = render(
      <TemplateOneThree {...data} template="template_three" />
    );
    expect(queryByText('Next')).toBeInTheDocument();
    expect(container.querySelectorAll('h1')).toHaveLength(1);
    expect(queryByText('20 Free Spins No Deposit Bonus')).toBeInTheDocument();
    expect(queryByText('+ 300% & 555 Spins Welcome Bonus')).toBeInTheDocument();
    expect(queryByText('Visit')).toBeInTheDocument();
    expect(container.querySelectorAll('a')).toHaveLength(1);
    expect(container.getElementsByClassName('desc')).toHaveLength(1);
    expect(container.querySelectorAll('li')).toHaveLength(4);
  });
  test('Template five toggle read more button', async () => {
    const { container } = render(<TemplateOneThree {...data} />);

    await waitFor(() => {
      expect(container.querySelector('.desc')).toBeInTheDocument();
      expect(container.querySelector('.showReadMore')).toBeInTheDocument();
      expect(container.querySelector('.showReadMore span')).toBeInTheDocument();
      expect(container.querySelector('.desc')).toHaveTextContent(
        `${textWordsLimit(data.description, 60)} Continue reading`
      );
      expect(container.querySelector('.showReadMore span')).toHaveTextContent('Continue reading');
    });
  });
  test('Template five toggle read more button event', async () => {
    const { container } = render(<TemplateOneThree {...data} />);
    const button = container.querySelector('.showReadMore');

    fireEvent.click(button);

    await waitFor(() => {
      // test after click
      expect(container.querySelector('.showReadMore span')).toBeFalsy();
    });
  });
});

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