import React from 'react';
import { mount } from 'enzyme';
import { DropdownItem } from '../';
import { DropdownContext } from '../DropdownContext';

describe('DropdownItem', () => {
  let isOpen;
  let toggle;

  beforeEach(() => {
    isOpen = false;
    toggle = () => { isOpen = !isOpen; };
  });

  it('should render a single child', () => {
    const wrapper = mount(<DropdownItem>Ello world</DropdownItem>);

    expect(wrapper.text()).toBe('Ello world');
    expect(wrapper.find('button').hostNodes().hasClass('dropdown-item')).toBe(true);
    expect(wrapper.find('button').hostNodes().length).toBe(1);
  });

  it('should render type as "button" by default when tag is "button"', () => {
    const wrapper = mount(<DropdownItem>Home</DropdownItem>);

    expect(wrapper.find('button').hostNodes().prop('type')).toBe('button');
    expect(wrapper.text()).toBe('Home');
  });

  it('should render type as undefined by default when tag is "button" and toggle is false', () => {
    const wrapper = mount(<DropdownItem toggle={false}>Home</DropdownItem>);

    expect(wrapper.find('button').hostNodes().prop('type')).toBe(undefined);
    expect(wrapper.text()).toBe('Home');
  });

  it('should render type as "button" by default when tag is "button" and onClick is provided', () => {
    const wrapper = mount(<DropdownItem onClick={() => {}}>Home</DropdownItem>);

    expect(wrapper.find('button').hostNodes().prop('type')).toBe('button');
    expect(wrapper.text()).toBe('Home');
  });

  it('should render type as user defined when defined by the user', () => {
    const wrapper = mount(<DropdownItem type="submit">Home</DropdownItem>);

    expect(wrapper.find('button').hostNodes().prop('type')).toBe('submit');
    expect(wrapper.text()).toBe('Home');
  });

  it('should not render type by default when the type is not defined and the tag is not "button"', () => {
    const wrapper = mount(<DropdownItem tag="a">Home</DropdownItem>);

    expect(wrapper.find('a').hostNodes().prop('type')).toBe(undefined);
    expect(wrapper.text()).toBe('Home');
  });

  it('should render custom element', () => {
    const Link = props => <a href="/home" {...props}>{props.children}</a>;
    const wrapper = mount(<DropdownItem tag={Link}>Home</DropdownItem>);

    expect(wrapper.find('a').hostNodes().length).toBe(1);
    expect(wrapper.find('a').hostNodes().hasClass('dropdown-item')).toBe(true);
    expect(wrapper.text()).toBe('Home');
  });

  it('should render dropdown item text', () => {
    const wrapper = mount(<DropdownItem text>text</DropdownItem>);

    expect(wrapper.find('span').hostNodes().length).toBe(1);
    expect(wrapper.find('span').hostNodes().hasClass('dropdown-item-text')).toBe(true);
    expect(wrapper.text()).toBe('text');
  });

  describe('header', () => {
    it('should render h6 tag heading', () => {
      const wrapper = mount(<DropdownItem header>Heading</DropdownItem>);

      expect(wrapper.find('h6').hostNodes().length).toBe(1);
      expect(wrapper.find('h6').hostNodes().hasClass('dropdown-header')).toBe(true);
      expect(wrapper.text()).toBe('Heading');
    });
  });

  describe('active', () => {
    it('should render an active class', () => {
      const wrapper = mount(<DropdownItem active />);

      expect(wrapper.find('.active').hostNodes().length).toBe(1);
    });
  });

  describe('divider', () => {
    it('should render a divider element', () => {
      const wrapper = mount(<DropdownItem divider />);

      expect(wrapper.find('.dropdown-divider').hostNodes().length).toBe(1);
    });
  });

  describe('link (with href)', () => {
    it('should render an anchor tag', () => {
      const wrapper = mount(<DropdownItem href="#">GO!</DropdownItem>);

      expect(wrapper.find('a').hostNodes().length).toBe(1);
      expect(wrapper.find('a').hostNodes().hasClass('dropdown-item')).toBe(true);
      expect(wrapper.text()).toBe('GO!');
    });
  });

  describe('onClick', () => {
    it('should not be called when disabled', () => {
      const e = { preventDefault: jest.fn() };
      const wrapper = mount(<DropdownItem disabled>Item</DropdownItem>);
      const instance = wrapper.instance();

      instance.onClick(e);
      expect(e.preventDefault).toHaveBeenCalled();
    });

    it('should not be called when divider is set', () => {
      const e = { preventDefault: jest.fn() };
      const wrapper = mount(<DropdownItem divider />);
      const instance = wrapper.instance();

      instance.onClick(e);
      expect(e.preventDefault).toHaveBeenCalled();
    });

    it('should not be called when header item', () => {
      const e = { preventDefault: jest.fn() };
      const wrapper = mount(<DropdownItem header>Header</DropdownItem>);
      const instance = wrapper.instance();

      instance.onClick(e);
      expect(e.preventDefault).toHaveBeenCalled();
    });

    it('should be called when not disabled, heading, or divider', () => {
      const e = { preventDefault: jest.fn() };
      const onClick = jest.fn();
      const wrapper = mount(
        <DropdownContext.Provider value={{ toggle: toggle }}>
          <DropdownItem onClick={() => onClick()}>Click me</DropdownItem>
        </DropdownContext.Provider>
      );
      const instance = wrapper.instance();

      instance.onClick(e);
      expect(onClick).toHaveBeenCalled();
    });

    it('should call onClick prop', () => {
      toggle = jest.fn();
      const clickHandler = jest.fn();
      const wrapper = mount(
        <DropdownContext.Provider value={{ toggle: toggle }}>
          <DropdownItem onClick={clickHandler}>Click me</DropdownItem>
        </DropdownContext.Provider>
      );

      wrapper.simulate('click');
      expect(clickHandler).toHaveBeenCalled();
      expect(toggle).toHaveBeenCalled();
    });

    it('should call toggle', () => {
      toggle = jest.fn();
      const wrapper = mount(
        <DropdownContext.Provider value={{ toggle: toggle }}>
          <DropdownItem>Click me</DropdownItem>
        </DropdownContext.Provider>
      );

      wrapper.simulate('click');
      expect(toggle).toHaveBeenCalled();
    });
  });
});