import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import { getNavigationMenus } from '~tests/factories/sections/navigation.factory';
import Navigation from '.';

const menuSection = getNavigationMenus(1, 2, true);

describe('Navigation Component', () => {
  test('render navigation', async () => {
    const { container } = render(<Navigation section={menuSection} />);

    await waitFor(() => {
      expect(container.querySelectorAll('.nav')).toBeTruthy();
      expect(container.querySelectorAll('.logo')).toHaveLength(1);
      expect(container.querySelectorAll('.menuContainer')).toHaveLength(1);
      expect(container.querySelectorAll('.search')).toHaveLength(1);
    });
  });
  test('render navigation when template is ppc', async () => {
    const { container } = render(<Navigation section={menuSection} template="ppc" />);

    await waitFor(() => {
      expect(container.querySelectorAll('.nav')).toBeTruthy();
      expect(container.querySelectorAll('.logo')).toHaveLength(0);
      expect(container.querySelectorAll('.menuContainer')).toHaveLength(0);
      expect(container.querySelectorAll('.search')).toHaveLength(0);
    });
  });
  test('render navigation without search', async () => {
    const { container } = render(<Navigation section={menuSection} hasSearch={false} />);

    await waitFor(() => {
      expect(container.querySelectorAll('.nav')).toBeTruthy();
      expect(container.querySelectorAll('.menuContainer')).toHaveLength(1);
      expect(container.querySelectorAll('.search')).toHaveLength(0);
    });
  });
});
afterEach(() => {
  cleanup();
});
