3 files changed, 128 insertions, 1 deletions
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 00000000..51ff4ceb
--- /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 00000000..3f066c6e
--- /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 59ad73e2..bbd8c916 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 (