Add new tests for dropdown component

test/unit/responsive/components/dropdown-test.js

@@ -9,14 +9,18 @@ const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'res
 const DropdownMenuItem = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'responsive', 'app', 'components', 'dropdown.js')).DropdownMenuItem;
 
 describe('Dropdown components', function () {
-  it('can render two items', function () {
+  let onClickOutside;
-    const renderer = ReactTestUtils.createRenderer()
+  let closeMenu;
+  let onClick;
 
-    const onClickOutside = sinon.spy();
+  let dropdownComponentProps;
-    const closeMenu = sinon.spy();
+  const renderer = ReactTestUtils.createRenderer()
-    const onClick = sinon.spy();
+  beforeEach(function () {
+    onClickOutside = sinon.spy();
+    closeMenu = sinon.spy();
+    onClick = sinon.spy();
 
-    const dropdownComponent = h(Dropdown, {
+    dropdownComponentProps = {
       isOpen: true,
       zIndex: 11,
       onClickOutside,
@@ -26,26 +30,86 @@ describe('Dropdown components', function () {
         top: '36px',
       },
       innerStyle: {},
-    }, [ // DROP MENU ITEMS
+    }
-      h('style', `
+  });
-        .drop-menu-item:hover { background:rgb(235, 235, 235); }
+
-        .drop-menu-item i { margin: 11px; }
+  it('can render two items', function () {
-      `),
+    const dropdownComponent = h(
-
+      Dropdown,
-      h(DropdownMenuItem, {
+      dropdownComponentProps,
-        closeMenu,
+      [
-        onClick,
+        h('style', `
-      }, 'Item 1'),
+          .drop-menu-item:hover { background:rgb(235, 235, 235); }
-
+          .drop-menu-item i { margin: 11px; }
-      h(DropdownMenuItem, {
+        `),
-        closeMenu,
+        h(DropdownMenuItem, {
-        onClick,
+          closeMenu,
-      }, 'Item 2'),
+          onClick,
-    ])
+        }, 'Item 1'),
+        h(DropdownMenuItem, {
+          closeMenu,
+          onClick,
+        }, 'Item 2'),
+      ]
+    )
 
     const component = additions.renderIntoDocument(dropdownComponent);
     renderer.render(dropdownComponent);
     const items = additions.find(component, 'li');
     assert.equal(items.length, 2);
   });
+
+  it('closes when item clicked', function() {
+    const dropdownComponent = h(
+      Dropdown,
+      dropdownComponentProps,
+      [
+        h('style', `
+          .drop-menu-item:hover { background:rgb(235, 235, 235); }
+          .drop-menu-item i { margin: 11px; }
+        `),
+        h(DropdownMenuItem, {
+          closeMenu,
+          onClick,
+        }, 'Item 1'),
+        h(DropdownMenuItem, {
+          closeMenu,
+          onClick,
+        }, 'Item 2'),
+      ]
+    )
+    const component = additions.renderIntoDocument(dropdownComponent);
+    renderer.render(dropdownComponent);
+    const items = additions.find(component, 'li');
+    const node = items[0];
+    ReactTestUtils.Simulate.click(node);
+    assert.equal(closeMenu.calledOnce, true);
+  });
+
+  it('invokes click handler when item clicked', function() {
+    const dropdownComponent = h(
+      Dropdown,
+      dropdownComponentProps,
+      [
+        h('style', `
+          .drop-menu-item:hover { background:rgb(235, 235, 235); }
+          .drop-menu-item i { margin: 11px; }
+        `),
+        h(DropdownMenuItem, {
+          closeMenu,
+          onClick,
+        }, 'Item 1'),
+        h(DropdownMenuItem, {
+          closeMenu,
+          onClick,
+        }, 'Item 2'),
+      ]
+    )
+    const component = additions.renderIntoDocument(dropdownComponent);
+    renderer.render(dropdownComponent);
+    const items = additions.find(component, 'li');
+    const node = items[0];
+    ReactTestUtils.Simulate.click(node);
+    assert.equal(onClick.calledOnce, true);
+  });
 });