import React from 'react';
import { mount } from 'enzyme';
import Navigation from './Navigation';
import userData from './fixture';

describe('Navigation', () => {
  it('should match the snapshot', () => {
    const component = mount(<Navigation />);
    expect(component.getElement()).toMatchSnapshot();
  });

  it('should render a CreatePollMenu', () => {
    const component = mount(<Navigation />);
    const CreatePollMenu = component.find('CreatePollMenu');
    expect(component.contains(CreatePollMenu));
  });

  it('should render the HeaderWidget', () => {
    const component = mount(<Navigation />);
    const HeaderWidget = component.find('HeaderWidget');
    expect(component.contains(HeaderWidget));
  });

  it('should render the UserMenu', () => {
    const component = mount(<Navigation />);
    const UserMenu = component.find('UserMenu');
    expect(component.contains(UserMenu));
  });

  it('should render the HamburgerMenu', () => {
    const component = mount(<Navigation />);
    const HamburgerMenu = component.find('HamburgerMenu');
    expect(component.contains(HamburgerMenu));
  });

  describe('Navigation links on desktop', () => {
    it('should render a link to features', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Button');
      expect(button.find({ href: '/en/features' }).length).toBe(1);
    });

    it('should render a link to pricing', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Button');
      expect(button.find({ href: '/premium' }).length).toBe(1);
    });

    it('should render a link to integrations', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Button');
      expect(button.find({ href: '/en/integrations' }).length).toBe(1);
    });

    it('should render submenu when clicking on solutions', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Solutions span.Button');
      button.simulate('click');
      expect(component.find('.Solutions a[href*="/en/solutions"]').length).toBe(7);
    });

    it('should render submenu when clicking on resources', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Resources span.Button');
      button.simulate('click');
      expect(component.find('.Resources a[href="/en/resources"]').length).toBe(1);
      expect(component.find('.Resources a[href="https://blog.doodle.com/"]').length).toBe(1);
    });

    it('should render submenu when clicking on contact', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Contact span.Button');
      button.simulate('click');
      expect(component.find('.Contact a[href="https://landing.doodle.com/contact-sales"]').length).toBe(1);
      expect(component.find('.Contact a[href="https://help.doodle.com"]').length).toBe(1);
    });
  });

  describe('Hamburger Menu links on mobile', () => {
    it('should render a hamburger menu with feature link', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Navigation-hamburgerMenu span.Button');
      button.simulate('click');
      expect(component.find('.Navigation-hamburgerMenu a[href="/en/features"]').length).toBe(1);
    });

    it('should render a hamburger menu with pricing link', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Navigation-hamburgerMenu span.Button');
      button.simulate('click');
      expect(component.find('.Navigation-hamburgerMenu a[href="/premium"]').length).toBe(1);
    });

    it('should render a hamburger menu with integrations link', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Navigation-hamburgerMenu span.Button');
      button.simulate('click');
      expect(component.find('.Navigation-hamburgerMenu a[href="/en/integrations"]').length).toBe(1);
    });

    it('should render a hamburger menu with solutions links', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Navigation-hamburgerMenu span.Button');
      button.simulate('click');
      const solutionsButton = component.find('.Navigation-hamburgerMenu .SubmenuHead-toggleSubmenuButton').at(0);
      solutionsButton.simulate('click');
      expect(component.find('.Navigation-hamburgerMenu a[href*="/en/solutions"]').length).toBe(7);
    });

    it('should render a hamburger menu with resources links', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Navigation-hamburgerMenu span.Button');
      button.simulate('click');
      const resourcesButton = component.find('.Navigation-hamburgerMenu .SubmenuHead-toggleSubmenuButton').at(1);
      resourcesButton.simulate('click');
      expect(component.find('.Navigation-hamburgerMenu a[href="/en/resources"]').length).toBe(1);
      expect(component.find('.Navigation-hamburgerMenu a[href="https://blog.doodle.com/"]').length).toBe(1);
    });

    it('should render a hamburger menu with contacts links', () => {
      const component = mount(<Navigation />);
      const button = component.find('.Navigation-hamburgerMenu span.Button');
      button.simulate('click');
      const contactsButton = component.find('.Navigation-hamburgerMenu .SubmenuHead-toggleSubmenuButton').at(2);
      contactsButton.simulate('click');
      expect(
        component.find('.Navigation-hamburgerMenu a[href="https://landing.doodle.com/contact-sales"]').length
      ).toBe(1);
      expect(component.find('.Navigation-hamburgerMenu a[href="https://help.doodle.com"]').length).toBe(1);
    });
  });

  describe('Navigation passing custom logo', () => {
    it('should pass a custom logo to Logo Link', () => {
      const component = mount(<Navigation customLogo="https://doodle.com/graphics/mails0/doodleLogo.png" />);
      expect(component.find('LogoLink').props().logoUrl).toBe('https://doodle.com/graphics/mails0/doodleLogo.png');
    });

    it('should show Doodle logo if customLogo is not passed', () => {
      const component = mount(<Navigation />);
      expect(component.find('DoodleLogo').length).toBe(1);
    });
  });

  describe('Navigation redirects', () => {
    it('should call the function passed into onClickLogin', () => {
      const mockFunction = jest.fn();
      const component = mount(<Navigation onClickLogin={mockFunction} />);
      const loginButton = component.find('.HeaderWidget > .HeaderWidget-loginButton');
      loginButton.simulate('click');
      expect(mockFunction).toHaveBeenCalled();
    });

    it('should call the function passed into onClickSignup', () => {
      const mockFunction = jest.fn();
      const component = mount(<Navigation onClickSignup={mockFunction} />);
      const signupButton = component.find('.HeaderWidget > .HeaderWidget-signupButton');
      signupButton.simulate('click');
      expect(mockFunction).toHaveBeenCalled();
    });

    it('should call the function passed into onClickLogout', () => {
      const mockFunction = jest.fn();
      const component = mount(<Navigation onClickLogout={mockFunction} user={userData} />);
      const userMenu = component.find('.UserMenu span.Button');
      userMenu.simulate('click');

      const logoutButton = component.find('span.Menu-item');
      logoutButton.simulate('click');
      expect(mockFunction).toHaveBeenCalled();
    });
  });
});