import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import '~tests/helpers/match-media.mock';
import Footer from '.';
import getFooterData from '../../../../tests/factories/modules/footer.factory';
import getPageData from '../../../../tests/factories/pages/default.factory';

describe('header component', () => {
  test('render', async () => {
    const { container } = render(
      <Footer
        section={getFooterData()}
        template="homepage"
        hasFooterLinks={false}
        footerTemplate="template_one"
      />
    );

    await waitFor(() => {
      expect(container.querySelectorAll('footer')).toHaveLength(1);
    });
  });
  test('Template Two', async () => {
    const { container } = render(
      <Footer
        section={getFooterData()}
        template="homepage"
        hasFooterLinks={false}
        footerTemplate="template_two"
      />
    );

    await waitFor(() => {
      expect(container.querySelectorAll('.footer.templateOne')).toHaveLength(0);
      expect(container.querySelectorAll('.footer.templateTwo')).toHaveLength(1);
      expect(container.querySelectorAll('.footer.templateThree')).toHaveLength(0);
    });
  });
  test('Template Three', async () => {
    const { container } = render(
      <Footer
        section={getFooterData()}
        template="homepage"
        hasFooterLinks={false}
        footerTemplate="template_three"
      />
    );

    await waitFor(() => {
      expect(container.querySelectorAll('.footer.templateOne')).toHaveLength(0);
      expect(container.querySelectorAll('.footer.templateTwo')).toHaveLength(0);
      expect(container.querySelectorAll('.footer.templateThree')).toHaveLength(1);
    });
  });
  test('Default Template', async () => {
    const { container } = render(
      <Footer section={getFooterData()} template="homepage" hasFooterLinks={false} />
    );

    await waitFor(() => {
      expect(container.querySelectorAll('.footer.templateOne')).toHaveLength(1);
      expect(container.querySelectorAll('.footer.templateTwo')).toHaveLength(0);
      expect(container.querySelectorAll('.footer.templateThree')).toHaveLength(0);
    });
  });
  test('Test new responsible gaming logos', async () => {
    const { container } = render(
      <Footer section={getFooterData()} template="homepage" page={getPageData()} />
    );

    await waitFor(() => {
      expect(container.querySelectorAll('.footer .logos li')).toHaveLength(3);
    });
  });
  test('Test when new responsible gaming logos are not available', async () => {
    const { container } = render(<Footer section={getFooterData()} template="homepage" />);

    await waitFor(() => {
      expect(container.querySelectorAll('.footer .logos li')).toHaveLength(3);
    });
  });
});
afterEach(() => {
  cleanup();
});
