From f840d018e5a61c39fe465d28ff31d08b9a03a5a8 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Tue, 30 May 2017 21:46:17 +0800
Subject: [PATCH] [web] Add tests for js/components/FlowView/Nav.jsx

---
 .../__tests__/components/FlowView/NavSpec.js  | 38 +++++++++++++++++++
 .../FlowView/__snapshots__/NavSpec.js.snap    | 35 +++++++++++++++++
 web/src/js/components/FlowView/Nav.jsx        |  3 +-
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/__tests__/components/FlowView/NavSpec.js
 create mode 100644 web/src/js/__tests__/components/FlowView/__snapshots__/NavSpec.js.snap

diff --git a/web/src/js/__tests__/components/FlowView/NavSpec.js b/web/src/js/__tests__/components/FlowView/NavSpec.js
new file mode 100644
index 000000000..867e6f2c4
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowView/NavSpec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Nav, { NavAction } from '../../../components/FlowView/Nav'
+
+describe('Nav Component', () => {
+    let tabs = ['foo', 'bar'],
+        onSelectTab = jest.fn(),
+        nav = renderer.create(<Nav active='foo' tabs={tabs} onSelectTab={onSelectTab}/>),
+        tree = nav.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click', () => {
+        let mockEvent = { preventDefault: jest.fn() }
+        tree.children[0].props.onClick(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        expect(onSelectTab).toBeCalledWith('foo')
+    })
+})
+
+describe('NavAction Component', () => {
+    let clickFn = jest.fn(),
+        navAction = renderer.create(<NavAction icon="foo" title="bar" onClick={clickFn}/>),
+        tree = navAction.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click', () => {
+        let mockEvent = { preventDefault: jest.fn() }
+        tree.props.onClick(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        expect(clickFn).toBeCalledWith(mockEvent)
+    })
+})
diff --git a/web/src/js/__tests__/components/FlowView/__snapshots__/NavSpec.js.snap b/web/src/js/__tests__/components/FlowView/__snapshots__/NavSpec.js.snap
new file mode 100644
index 000000000..b1b1d3fd9
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowView/__snapshots__/NavSpec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nav Component should render correctly 1`] = `
+<nav
+  className="nav-tabs nav-tabs-sm"
+>
+  <a
+    className="active"
+    href="#"
+    onClick={[Function]}
+  >
+    Foo
+  </a>
+  <a
+    className=""
+    href="#"
+    onClick={[Function]}
+  >
+    Bar
+  </a>
+</nav>
+`;
+
+exports[`NavAction Component should render correctly 1`] = `
+<a
+  className="nav-action"
+  href="#"
+  onClick={[Function]}
+  title="bar"
+>
+  <i
+    className="fa fa-fw foo"
+  />
+</a>
+`;
diff --git a/web/src/js/components/FlowView/Nav.jsx b/web/src/js/components/FlowView/Nav.jsx
index af5a879ee..022f2f2be 100644
--- a/web/src/js/components/FlowView/Nav.jsx
+++ b/web/src/js/components/FlowView/Nav.jsx
@@ -2,6 +2,7 @@ import React  from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
+import _ from 'lodash'
 
 NavAction.propTypes = {
     icon: PropTypes.string.isRequired,
@@ -9,7 +10,7 @@ NavAction.propTypes = {
     onClick: PropTypes.func.isRequired,
 }
 
-function NavAction({ icon, title, onClick }) {
+export function NavAction({ icon, title, onClick }) {
     return (
         <a title={title}
             href="#"