/* eslint-disable camelcase */
import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import getPageList from '~tests/factories/pages/page.factory';
import ContactForm from '.';

let samplePages;
const relationType = 'default';
const market = 'ie_en';

beforeEach(() => {
  samplePages = {
    [market]: {
      [relationType]: getPageList({
        template: relationType,
        count: 3,
        relation: null,
        relation_id: 5,
        market,
      }),
    },
  };
});
describe('Contact Us form Component', () => {
  test('render contact us form and follow us titles', async () => {
    const { container } = render(
      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
    );

    await waitFor(() => {
      expect(container).toBeTruthy();
      expect(container.querySelector('H1').innerHTML).toBe('Contact Us');
    });
  });
  test('render form without main heading and description ', () => {
    const { container } = render(
      <ContactForm
        page={samplePages[market][relationType][0]}
        submitUrl="submit"
        showHeading={false}
        showDescription={false}
      />
    );

    expect(container.querySelector('h1')).toBeFalsy();
  });
  test('render contact us form ', async () => {
    const { container } = render(
      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
    );

    await waitFor(() => {
      expect(container.querySelector('.contactForm')).toBeTruthy();
      expect(container.querySelector('.contactForm').querySelectorAll('input')).toHaveLength(4);
      expect(
        container.querySelector('.contactForm').querySelectorAll('input[type="text"]')
      ).toHaveLength(2);
      expect(
        container.querySelector('.contactForm').querySelectorAll('input[type="email"]')
      ).toHaveLength(1);
      expect(container.querySelector('.contactForm').querySelectorAll('textarea')).toHaveLength(1);
    });
  });
  test('render form without labels ', () => {
    const { container } = render(
      <ContactForm
        page={samplePages[market][relationType][0]}
        submitUrl="submit"
        showLabels={false}
      />
    );

    expect(container.querySelectorAll('input[type="text"]').length).toEqual(2);
    expect(container.querySelector('textarea')).toBeTruthy();
    expect(container.querySelector('.formGroup').querySelector('label')).toBeFalsy();
    expect(container.querySelectorAll('label').length).toEqual(1);
  });
});
afterEach(() => {
  cleanup();
});
