[web] Add tests for js/components/FlowView/Nav.jsx

3 files changed, 75 insertions, 1 deletions

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 00000000..867e6f2c
--- /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 00000000..b1b1d3fd
--- /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 af5a879e..022f2f2b 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="#"