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

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

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

    await waitFor(() => {
      expect(container).toBeTruthy();
      expect(container.querySelector('H1').innerHTML).toBe('Contact Us');
      expect(getByText('Follow Us')).toBeTruthy();
      expect(getByText('Follow Us')).toHaveClass('title');
    });
  });
  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 follow us social media ', async () => {
    const { container } = render(
      <ContactForm page={samplePages[market][relationType][0]} submitUrl="submit" />
    );

    const socialIcons =
      siteSchema &&
      (({ instagram, facebook, twitter, linkedin, youtube }) => ({
        instagram,
        facebook,
        twitter,
        linkedin,
        youtube,
      }))(siteSchema);

    await waitFor(() => {
      expect(container.querySelectorAll('.socialIcons a')).toHaveLength(
        Object.values(socialIcons).length
      );
      expect(container.querySelector('.socialIcons a')).toHaveAttribute(
        'href',
        Object.values(socialIcons)[0]
      );
      expect(container.querySelectorAll('.socialIcons a')[2]).toHaveAttribute(
        'href',
        Object.values(socialIcons)[2]
      );
    });
  });
});
afterEach(() => {
  cleanup();
});
