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

describe('Pagination Component', () => {
  test('Render with props', () => {
    const { container, getByText } = render(
      <Pagination currentPage={1} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('.button')).toHaveLength(2);
    expect(container.querySelectorAll('li')).toHaveLength(9);
    expect(container.querySelectorAll('.pagination-gtm')).toHaveLength(6);
    expect(getByText('1')).toBeTruthy();
    expect(getByText('60')).toBeTruthy();
  });
  test('Show correct amount of blocks when current page is greater than 3 and less than total - 3', () => {
    const { container, getByText } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(10);
    expect(getByText('10')).toBeTruthy();
  });
  test('Show correct page urls', () => {
    const { container, getByText, getAllByText } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(getByText('1').getAttribute('href')).toEqual('/example');
    expect(getByText('9').getAttribute('href')).toEqual('/example/page/9');
    expect(getByText('11').getAttribute('href')).toEqual('/example/page/11');
    expect(getAllByText('60')[0].getAttribute('href')).toEqual('/example/page/60');
  });
  test('Show current page with correct url and class', () => {
    const { container, getByText } = render(
      <Pagination currentPage={20} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(getByText('20').getAttribute('href')).toEqual('/example/page/20');
    expect(getByText('20').parentElement.classList).toContain('active');
    expect(container.querySelectorAll('.active')).toHaveLength(1);
  });
  test('Show right bound midpoints when current page is less than 3', () => {
    const { container, getByText } = render(
      <Pagination currentPage={2} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(getByText('...')).toBeTruthy();
    expect(container.querySelectorAll('li')[6]).toHaveTextContent('...');
    expect(container.querySelectorAll('.midPoints')).toHaveLength(1);
  });
  test('Show left bound midpoints when current page is [total - 3]', () => {
    const { container, getByText } = render(
      <Pagination currentPage={58} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(getByText('...')).toBeTruthy();
    expect(container.querySelectorAll('li')[3]).toHaveTextContent('...');
    expect(container.querySelectorAll('.midPoints')).toHaveLength(1);
  });
  test('Show both midpoints when the current page is in the middle range', () => {
    const { container } = render(
      <Pagination currentPage={30} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')[3]).toHaveTextContent('...');
    expect(container.querySelectorAll('li')[7]).toHaveTextContent('...');
    expect(container.querySelectorAll('.midPoints')).toHaveLength(2);
  });
  test('Hide goToFirst goToLast buttons on default', () => {
    const { container } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(10);
    expect(container.querySelector('.goToFirst')).toBeFalsy();
    expect(container.querySelector('.goToLast')).toBeFalsy();
  });
  test('Show goToFirst goToLast buttons', () => {
    const { container } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} showFirstLast />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(12);
    expect(container.querySelector('.goToFirst')).toBeTruthy();
    expect(container.querySelector('.goToLast')).toBeTruthy();
  });
  test('Show goToPrev goToNext buttons on default', () => {
    const { container } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(10);
    expect(container.querySelector('.goToNext')).toBeTruthy();
    expect(container.querySelector('.goToPrevious')).toBeTruthy();
  });
  test('Hide goToPrev goToNext buttons and show goToFirst goToLast buttons', () => {
    const { container } = render(
      <Pagination
        currentPage={10}
        pagePath="example"
        totalPages={60}
        showFirstLast
        showPrevNext={false}
      />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(10);
    expect(container.querySelector('.goToFirst')).toBeTruthy();
    expect(container.querySelector('.goToLast')).toBeTruthy();
    expect(container.querySelector('.goToNext')).toBeFalsy();
    expect(container.querySelector('.goToPrevious')).toBeFalsy();
  });
  test('Hide all arrow buttons', () => {
    const { container } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} showPrevNext={false} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(8);
    expect(container.querySelector('.goToNext')).toBeFalsy();
    expect(container.querySelector('.goToPrevious')).toBeFalsy();
    expect(container.querySelector('.goToFirst')).toBeFalsy();
    expect(container.querySelector('.goToLast')).toBeFalsy();
  });
  test('Hide [current page] of [total pages] on default', () => {
    const { container } = render(
      <Pagination currentPage={10} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(10);
    expect(container.querySelector('.showOfCurrent')).toBeFalsy();
    expect(container.querySelector('.firstPage')).toBeTruthy();
    expect(container.querySelector('.lastPage')).toBeTruthy();
  });
  test('Show page numbers as [current page] of [total pages] instead of with midpoints', () => {
    const { container, getByText } = render(
      <Pagination currentPage={22} pagePath="example" totalPages={60} showOf />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(4);
    expect(container.querySelector('.showOfCurrent')).toBeTruthy();
    expect(getByText('of')).toBeTruthy();
    expect(getByText('22')).toBeTruthy();
    expect(container.querySelector('.firstPage')).toBeFalsy();
    expect(container.querySelector('.lastPage')).toBeFalsy();
    expect(container.querySelector('.active')).toBeFalsy();
    expect(container.querySelector('.page')).toBeFalsy();
  });
  test('Show nextPage previousPage buttons on default', () => {
    const { container } = render(
      <Pagination currentPage={33} pagePath="example" totalPages={60} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(10);
    expect(container.querySelector('.nextPage')).toBeTruthy();
    expect(container.querySelector('.previousPage')).toBeTruthy();
  });
  test('Hide nextPage previousPage buttons', () => {
    const { container } = render(
      <Pagination currentPage={33} pagePath="example" totalPages={60} hideNext hidePrevious />
    );
    expect(container).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(8);
    expect(container.querySelector('.nextPage')).toBeFalsy();
    expect(container.querySelector('.previousPage')).toBeFalsy();
    expect(container.querySelector('.active')).toBeTruthy();
  });
});
afterEach(() => {
  cleanup();
});
