import React from 'react';
import SkinDeep from 'skin-deep';
import { expect } from 'chai';

import DropDown from '../../../src/js/common/components/DropDown.jsx';

describe('<DropDown>', () => {
  const props = {
    buttonText: 'Button text',
    clickHandler: () => {},
    contents: (<h1>Hi</h1>),
    cssClass: 'testClass',
    isOpen: true,
    icon: (<svg><rect x="50" y="50" width="50" height="50"/></svg>),
    id: 'testId'
  };

  const tree = SkinDeep.shallowRender(<DropDown {...props}/>);

  it('should render', () => {
    const vdom = tree.getRenderOutput();
    expect(vdom).to.not.be.undefined;
  });
});

import React from 'react';
import ReactDOM from 'react-dom';
import { expect } from 'chai';
import sinon from 'sinon';

import DropDown from '../../../src/js/common/components/DropDown.jsx';

describe('<DropDown>', () => {

  const clickHandler = sinon.stub();
  const container = window.document.createElement('div');

  container.addEventListener = sinon.spy(container.addEventListener.bind(container));
  container.removeEventListener = sinon.spy(container.removeEventListener.bind(container));

  const props = {
    buttonText: 'Button text',
    clickHandler,
    container,
    contents: (<h1>Hi</h1>),
    cssClass: 'testClass',
    isOpen: true,
    icon: (<svg><rect x="50" y="50" width="50" height="50"/></svg>),
    id: 'testId'
  };

  ReactDOM.render(<DropDown {...props}/>, container);

  it('should render', () => {
    const dropdownDOM = ReactDOM.findDOMNode(container);
    expect(dropdownDOM).to.not.be.undefined;
  });

  it('should register event listeners on the parent element', () => {
    expect(container.addEventListener.called).to.be.true;
  });

  it('should call clickHandler when the parent element\'s click event occurs', () => {
    expect(clickHandler.called).to.be.false;
    container.dispatchEvent(new window.MouseEvent('click'));
    expect(clickHandler.called).to.be.true;
  });

  it('should unregister event listeners on the parent element', () => {
    ReactDOM.unmountComponentAtNode(container);
    expect(container.removeEventListener.called).to.be.true;
  });

});

Add test cases for closing dropdowns when a different element is clicked
Add test cases for closing dropdowns when a different element is clicked
