From ab564ea5fdfda726a21b3f2d0d75099247a0ce7d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 22 May 2017 21:26:27 +0800
Subject: [PATCH 1/2] [web] Add tests for js/components/FlowTable/FlowRow.js

---
 .../components/FlowTable/FlowRowSpec.js       | 21 +++++++++
 .../__snapshots__/FlowRowSpec.js.snap         | 47 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 web/src/js/__tests__/components/FlowTable/FlowRowSpec.js
 create mode 100644 web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap

diff --git a/web/src/js/__tests__/components/FlowTable/FlowRowSpec.js b/web/src/js/__tests__/components/FlowTable/FlowRowSpec.js
new file mode 100644
index 000000000..7dfc1dcd0
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowTable/FlowRowSpec.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import FlowRow from '../../../components/FlowTable/FlowRow'
+import { TFlow } from '../../ducks/tutils'
+
+describe('FlowRow Component', () => {
+    let tFlow = new TFlow(),
+        selectFn = jest.fn(),
+        flowRow = renderer.create(<FlowRow flow={tFlow} onSelect={selectFn}/>),
+        tree = flowRow.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click', () => {
+        tree.props.onClick()
+        expect(selectFn).toBeCalledWith(tFlow.id)
+    })
+
+})
diff --git a/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap
new file mode 100644
index 000000000..b065b7462
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlowRow Component should render correctly 1`] = `
+<tr
+  className="has-request has-response"
+  onClick={[Function]}
+>
+  <td
+    className="col-tls col-tls-http"
+  />
+  <td
+    className="col-icon"
+  >
+    <div
+      className="resource-icon resource-icon-plain"
+    />
+  </td>
+  <td
+    className="col-path"
+  >
+    <i
+      className="fa fa-fw fa-exclamation pull-right"
+    />
+    http://address:22/path
+  </td>
+  <td
+    className="col-method"
+  >
+    GET
+  </td>
+  <td
+    className="col-status"
+  >
+    200
+  </td>
+  <td
+    className="col-size"
+  >
+    14b
+  </td>
+  <td
+    className="col-time"
+  >
+    415381h
+  </td>
+</tr>
+`;

From 8b5160ce5815954ab7188f1743fbe515a6284d59 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 22 May 2017 21:32:08 +0800
Subject: [PATCH 2/2] [web] Add tests for
 js/components/FlowTable/FlowTableHead.js

---
 .../components/FlowTable/FlowTableHeadSpec.js | 32 +++++++
 .../__snapshots__/FlowTableHeadSpec.js.snap   | 95 +++++++++++++++++++
 .../js/components/FlowTable/FlowTableHead.jsx |  2 +-
 3 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js
 create mode 100644 web/src/js/__tests__/components/FlowTable/__snapshots__/FlowTableHeadSpec.js.snap

diff --git a/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js b/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js
new file mode 100644
index 000000000..51ff4ceb2
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowTable/FlowTableHeadSpec.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ConnectedHead, { FlowTableHead } from '../../../components/FlowTable/FlowTableHead'
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+
+const mockStore = configureStore()
+
+describe('FlowTableHead Component', () => {
+    let sortFn = jest.fn(),
+        flowTableHead = renderer.create(<FlowTableHead setSort={sortFn} sortDesc={true}/>),
+        tree =flowTableHead.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click', () => {
+        tree.children[0].props.onClick()
+        expect(sortFn).toBeCalledWith('TLSColumn', false)
+    })
+
+    it('should connect to state', () => {
+        let store = mockStore({ flows: {sort: {desc: true, column: 'PathColumn'}} }),
+            provider = renderer.create(
+                <Provider store={store}>
+                    <ConnectedHead/>
+                </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowTableHeadSpec.js.snap b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowTableHeadSpec.js.snap
new file mode 100644
index 000000000..3f066c6e9
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowTableHeadSpec.js.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlowTableHead Component should connect to state 1`] = `
+<tr>
+  <th
+    className="col-tls"
+    onClick={[Function]}
+  >
+    
+  </th>
+  <th
+    className="col-icon"
+    onClick={[Function]}
+  >
+    
+  </th>
+  <th
+    className="col-path sort-desc"
+    onClick={[Function]}
+  >
+    Path
+  </th>
+  <th
+    className="col-method"
+    onClick={[Function]}
+  >
+    Method
+  </th>
+  <th
+    className="col-status"
+    onClick={[Function]}
+  >
+    Status
+  </th>
+  <th
+    className="col-size"
+    onClick={[Function]}
+  >
+    Size
+  </th>
+  <th
+    className="col-time"
+    onClick={[Function]}
+  >
+    Time
+  </th>
+</tr>
+`;
+
+exports[`FlowTableHead Component should render correctly 1`] = `
+<tr>
+  <th
+    className="col-tls"
+    onClick={[Function]}
+  >
+    
+  </th>
+  <th
+    className="col-icon"
+    onClick={[Function]}
+  >
+    
+  </th>
+  <th
+    className="col-path"
+    onClick={[Function]}
+  >
+    Path
+  </th>
+  <th
+    className="col-method"
+    onClick={[Function]}
+  >
+    Method
+  </th>
+  <th
+    className="col-status"
+    onClick={[Function]}
+  >
+    Status
+  </th>
+  <th
+    className="col-size"
+    onClick={[Function]}
+  >
+    Size
+  </th>
+  <th
+    className="col-time"
+    onClick={[Function]}
+  >
+    Time
+  </th>
+</tr>
+`;
diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx
index 59ad73e22..bbd8c9169 100644
--- a/web/src/js/components/FlowTable/FlowTableHead.jsx
+++ b/web/src/js/components/FlowTable/FlowTableHead.jsx
@@ -12,7 +12,7 @@ FlowTableHead.propTypes = {
     sortColumn: PropTypes.string,
 }
 
-function FlowTableHead({ sortColumn, sortDesc, setSort }) {
+export function FlowTableHead({ sortColumn, sortDesc, setSort }) {
     const sortType = sortDesc ? 'sort-desc' : 'sort-asc'
 
     return (