From d2fa4d8341e742d66b644928405ee64ce83c414d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sun, 25 Jun 2017 21:15:01 +0800
Subject: [web] Add tests for js/components/FlowTable.jsx

---
 web/src/js/__tests__/components/FlowTableSpec.js   | 50 ++++++++++++++
 .../components/__snapshots__/FlowTableSpec.js.snap | 79 ++++++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 web/src/js/__tests__/components/FlowTableSpec.js
 create mode 100644 web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap

diff --git a/web/src/js/__tests__/components/FlowTableSpec.js b/web/src/js/__tests__/components/FlowTableSpec.js
new file mode 100644
index 00000000..4d8de12c
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowTableSpec.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import FlowTable from '../../components/FlowTable'
+import TestUtils from 'react-dom/test-utils'
+import { TFlow, TStore } from '../ducks/tutils'
+import { Provider } from 'react-redux'
+
+window.addEventListener = jest.fn()
+
+describe('FlowTable Component', () => {
+    let selectFn = jest.fn(),
+        tflow = TFlow(),
+        store = TStore()
+
+    it('should render correctly', () => {
+        let provider = renderer.create(
+                <Provider store={store}>
+                    <FlowTable onSelect={selectFn} flows={[tflow]}/>
+                </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let provider = TestUtils.renderIntoDocument(
+        <Provider store={store} >
+            <FlowTable onSelect={selectFn} flows={[tflow]}/>
+        </Provider>),
+        flowTable = TestUtils.findRenderedComponentWithType(provider, FlowTable)
+
+    it('should handle componentWillUnmount', () => {
+        flowTable.componentWillUnmount()
+        expect(window.addEventListener).toBeCalledWith('resize', flowTable.onViewportUpdate)
+    })
+
+    it('should handle componentDidUpdate', () => {
+        // flowTable.shouldScrollIntoView == false
+        expect(flowTable.componentDidUpdate()).toEqual(undefined)
+        // rowTop - headHeight < viewportTop
+        flowTable.shouldScrollIntoView = true
+        flowTable.componentDidUpdate()
+        // rowBottom > viewportTop + viewportHeight
+        flowTable.shouldScrollIntoView = true
+        flowTable.componentDidUpdate()
+    })
+
+    it('should handle componentWillReceiveProps', () => {
+        flowTable.componentWillReceiveProps({selected: tflow})
+        expect(flowTable.shouldScrollIntoView).toBeTruthy()
+    })
+})
diff --git a/web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap
new file mode 100644
index 00000000..7149903c
--- /dev/null
+++ b/web/src/js/__tests__/components/__snapshots__/FlowTableSpec.js.snap
@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlowTable Component should render correctly 1`] = `
+<div
+  className="flow-table"
+  onScroll={[Function]}
+>
+  <table>
+    <thead
+      style={
+        Object {
+          "transform": "translateY(undefinedpx)",
+        }
+      }
+    >
+      <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>
+    </thead>
+    <tbody>
+      <tr
+        style={
+          Object {
+            "height": 0,
+          }
+        }
+      />
+      <tr
+        style={
+          Object {
+            "height": 0,
+          }
+        }
+      />
+    </tbody>
+  </table>
+</div>
+`;
-- 
cgit v1.2.3