import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import getHeaderSection from '~tests/factories/sections/header.factory';
import '~tests/helpers/match-media.mock';
import Header from '.';

const headerSection = getHeaderSection();

describe('header component', () => {
  test('render header', () => {
    const { container } = render(<Header section={headerSection} />);
    expect(container.querySelectorAll('header')).toHaveLength(1);
    expect(container.querySelectorAll('.headerContent')).toHaveLength(1);

    // Inner HTML
    expect(container.querySelectorAll('p')).toHaveLength(1);
    expect(container.querySelectorAll('i')).toHaveLength(1);

    // Testing image
    expect(container.querySelector('img')).toBeTruthy();
  });

  test('render header', () => {
    const { container } = render(<Header section={headerSection} content="<p>Hello</p>" />);
    expect(container.querySelectorAll('header')).toHaveLength(1);
    expect(container.querySelectorAll('.headerContent')).toHaveLength(1);
  });
});
afterEach(() => {
  cleanup();
});
