Merge pull request #2347 from MatthewShao/jest-dev

[web] Add tests for js/components/FlowTable

5 files changed, 196 insertions, 1 deletions

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 00000000..7dfc1dcd
--- /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/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__/FlowRowSpec.js.snap b/web/src/js/__tests__/components/FlowTable/__snapshots__/FlowRowSpec.js.snap
new file mode 100644
index 00000000..b065b746
--- /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>
+`;
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 (