/* eslint-disable no-magic-numbers */
import React from 'react';
import { shallow } from 'enzyme';
import MastheadNavigation from './masthead-navigation';
import { accountData } from '../../constants';

describe('<MastheadNavigation />', () => {
  describe('menu is open', () => {
    const component = shallow(
      <MastheadNavigation menuIsOpen showNavToggle accountData={accountData} />,
    );

    it('should render the masthead links', () => {
      expect(component.find('MastheadLinks')).toHaveLength(1);
    });

    it('should render the correct NavigationLists', () => {
      const navListCount = 7;
      expect(component.find('NavigationList')).toHaveLength(navListCount);
      expect(
        component
          .find('NavigationList')
          .at(0)
          .props().type,
      ).toEqual('opinion');
      expect(
        component
          .find('NavigationList')
          .at(1)
          .props().type,
      ).toEqual('current-topics');
      expect(
        component
          .find('NavigationList')
          .at(2)
          .props().type,
      ).toEqual('world');
      expect(
        component
          .find('NavigationList')
          .at(3)
          .props().type,
      ).toEqual('in-depth');
      expect(
        component
          .find('NavigationList')
          .at(4)
          .props().type,
      ).toEqual('business-and-economics');
      expect(
        component
          .find('NavigationList')
          .at(5)
          .props().type,
      ).toEqual('culture-and-society');
      expect(
        component
          .find('NavigationList')
          .at(6)
          .props().type,
      ).toEqual('more');
    });
  });

  describe('menu is closed', () => {
    const component = shallow(
      <MastheadNavigation
        menuIsOpen={false}
        showNavToggle={false}
        accountData={accountData}
      />,
    );

    it('should not render the masthead links', () => {
      expect(component.find('MastheadLinks')).toHaveLength(0);
    });

    it('should not render the search or subscribe icon', () => {
      expect(component.find('NavigationLink')).toHaveLength(0);
    });
  });
});
