import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/toplist.factory';

import Popup from '.';

const module = singleToplistData;

describe('Popup test component', () => {
  test('render', () => {
    const { container } = render(<Popup module={module} />);
    expect(container).toBeTruthy();
    const paragraph = container.querySelector('p');
    expect(paragraph).toHaveTextContent('Claim These Exclusive Bonuses');
  });

  test('Popup Rows and click close button', () => {
    const { container } = render(<Popup module={module} toggle isStorybook />);
    const rows = container.querySelectorAll('.popupCard');
    expect(rows).toHaveLength(4);

    expect(container.querySelectorAll('.imgContainer')).toHaveLength(4);

    let isVisible = container.querySelector('.activeModal');
    expect(isVisible).toBeTruthy();

    fireEvent.click(container.querySelector('.closeIcon'));
    isVisible = container.querySelector('.activeModal');
    expect(isVisible).toBeFalsy();
  });
});
afterEach(() => {
  cleanup();
});
