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

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

  it('should render the user avatar when the user is logged in and no links are passed into items', () => {
    const component = mount(<HamburgerMenu items={[]} user={userData} />);
    const hamburgerButton = component.find('.Menu span.Button');
    hamburgerButton.simulate('click');

    expect(component.contains('.UserArea'));
    expect(component.find('.UserArea .UserAvatar-avatar').length).toBe(1);
    expect(component.find('.UserArea .UserArea-userName').length).toBe(1);
  });

  it('should render dashboard and account links when the user is logged in and no links are passed into items', () => {
    const component = mount(<HamburgerMenu items={[]} user={userData} />);
    const hamburgerButton = component.find('.Menu span.Button');
    hamburgerButton.simulate('click');
    expect(component.find('.HamburgerMenu-menu a[href="/dashboard"]').length).toBe(1);
    expect(component.find('.HamburgerMenu-menu a[href="/account"]').length).toBe(1);
  });

  it('should render a signup and login button when the user is not logged in and no links are passed into items', () => {
    const component = mount(<HamburgerMenu items={[]} />);
    const hamburgerButton = component.find('.Menu span.Button');
    hamburgerButton.simulate('click');
    expect(component.contains('.UserArea'));
    expect(component.find('.HamburgerMenu-menu button.UserArea-signupButton').length).toBe(1);
    expect(component.find('.HamburgerMenu-menu button.UserArea-loginButton').length).toBe(1);
  });

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

  it('should render a UserArea with login and sign up buttons if user is not logged in', () => {
    const component = mount(<HamburgerMenu />);
    const UserArea = component.find('UserArea');
    expect(UserArea.find('.UserArea-loginButton'));
    expect(UserArea.find('.UserArea-signupButton'));
  });

  it('should render a UserArea with user avatar and name if user is logged in', () => {
    const component = mount(<HamburgerMenu user={userData} />);
    const UserArea = component.find('UserArea');
    expect(UserArea.find('.UserAvatar-avatar'));
    expect(UserArea.find('.UserArea-userName'));
  });

  it('should provide a menu item to the dashboard if user is logged in', () => {
    const component = mount(<HamburgerMenu user={userData} />);
    const button = component.find('.Menu span.Button');
    button.simulate('click');
    expect(component.find('.Menu a[href="/dashboard"]').length).toBe(1);
  });

  it('should provide a menu item to admin if user is logged in and an admin', () => {
    const component = mount(<HamburgerMenu user={userData} isOrgAdmin />);
    const button = component.find('.Menu span.Button');
    button.simulate('click');
    expect(component.find('.Menu a[href="/admin"]').length).toBe(1);
  });

  it('should provide a menu item to the account if user is logged in', () => {
    const component = mount(<HamburgerMenu user={userData} />);
    const button = component.find('.Menu span.Button');
    button.simulate('click');
    expect(component.find('.Menu a[href="/account"]').length).toBe(1);
  });

  it('should provide a menu item to logout if user is logged in', () => {
    const component = mount(<HamburgerMenu user={userData} />);
    const button = component.find('.Menu span.Button');
    button.simulate('click');
    const logoutButton = component.find('.Menu .Menu-item').at(3);
    expect(logoutButton.length).toBe(1);
  });
});