diff --git a/web/src/js/__tests__/components/common/DropdownSpec.js b/web/src/js/__tests__/components/common/DropdownSpec.js
new file mode 100644
index 000000000..c8c57ea6d
--- /dev/null
+++ b/web/src/js/__tests__/components/common/DropdownSpec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Dropdown, { Divider } from '../../../components/common/Dropdown'
+
+describe('Dropdown Component', () => {
+    let dropup = renderer.create(<Dropdown dropup btnClass="foo">
+            <a href="#">1</a>
+            <Divider/>
+            <a href="#">2</a>
+        </Dropdown>),
+        dropdown = renderer.create(<Dropdown btnClass="foo">
+            <a href="#">1</a>
+            <a href="#">2</a>
+        </Dropdown>)
+
+    it('should render correctly', () => {
+        let tree = dropup.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        tree = dropdown.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle open/close action', () => {
+        document.body.addEventListener('click', ()=>{})
+        let tree = dropup.toJSON(),
+            e = { preventDefault: jest.fn() }
+        tree.children[0].props.onClick(e)
+        expect(tree).toMatchSnapshot()
+
+        // click action when the state is open
+        tree.children[0].props.onClick(e)
+
+        // close
+        document.body.click()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap
new file mode 100644
index 000000000..57d4968d3
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown Component should handle open/close action 1`] = `
+<div
+  className="dropup"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <hr
+        className="divider"
+      />
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown Component should handle open/close action 2`] = `
+<div
+  className="dropup"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <hr
+        className="divider"
+      />
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown Component should render correctly 1`] = `
+<div
+  className="dropup"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <hr
+        className="divider"
+      />
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown Component should render correctly 2`] = `
+<div
+  className="dropdown"
+>
+  <a
+    className="foo"
+    href="#"
+    onClick={[Function]}
+  />
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+      >
+        1
+      </a>
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+      >
+        2
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;