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

---
 web/src/js/__tests__/components/ContentViewSpec.js | 61 +++++++++++++++++
 .../__snapshots__/ContentViewSpec.js.snap          | 80 ++++++++++++++++++++++
 2 files changed, 141 insertions(+)
 create mode 100644 web/src/js/__tests__/components/ContentViewSpec.js
 create mode 100644 web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap

(limited to 'web/src/js')

diff --git a/web/src/js/__tests__/components/ContentViewSpec.js b/web/src/js/__tests__/components/ContentViewSpec.js
new file mode 100644
index 00000000..c106b28b
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentViewSpec.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ContentView from '../../components/ContentView'
+import { TStore, TFlow } from '../ducks/tutils'
+import { Provider } from 'react-redux'
+import mockXMLHttpRequest from 'mock-xmlhttprequest'
+
+global.XMLHttpRequest = mockXMLHttpRequest
+
+describe('ContentView Component', () => {
+    let store = TStore()
+
+    it('should render correctly', () => {
+        let tflow = TFlow(),
+            provider = renderer.create(
+            <Provider store={store}>
+                <ContentView flow={tflow} message={tflow.request}/>
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render correctly with empty content', () => {
+        let tflow = TFlow()
+        tflow.response.contentLength = 0
+        let provider = renderer.create(
+            <Provider store={store}>
+                <ContentView flow={tflow} message={tflow.response} readonly={true}/>
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render correctly with missing content', () => {
+        let tflow = TFlow()
+        tflow.response.contentLength = null
+        let provider = renderer.create(
+            <Provider store={store}>
+                <ContentView flow={tflow} message={tflow.response} readonly={true}/>
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render correctly with content too large', () => {
+        let tflow = TFlow()
+        tflow.response.contentLength = 1024 * 1024 * 100
+        let provider = renderer.create(
+            <Provider store={store}>
+                <ContentView
+                    flow={tflow}
+                    message={tflow.response}
+                    readonly={true}
+                    uploadContent={jest.fn()}
+                    onOpenFile={jest.fn()}
+                />
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap
new file mode 100644
index 00000000..60b816e2
--- /dev/null
+++ b/web/src/js/__tests__/components/__snapshots__/ContentViewSpec.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentView Component should render correctly 1`] = `
+<div
+  className="contentview"
+>
+  <div
+    className="text-center"
+  >
+    <i
+      className="fa fa-spinner fa-spin"
+    />
+  </div>
+</div>
+`;
+
+exports[`ContentView Component should render correctly with content too large 1`] = `
+<div>
+  <div
+    className="alert alert-warning"
+  >
+    <button
+      className="btn btn-xs btn-warning pull-right"
+      onClick={[Function]}
+    >
+      Display anyway
+    </button>
+    100mb
+     content size.
+  </div>
+  <div
+    className="view-options text-center"
+  >
+    <a
+      className="btn btn-default btn-xs"
+      href="#"
+      onClick={[Function]}
+      title="Upload a file to replace the content."
+    >
+      <i
+        className="fa fa-fw fa-upload"
+      />
+      <input
+        className="hidden"
+        onChange={[Function]}
+        type="file"
+      />
+    </a>
+     
+    <a
+      className="btn btn-default btn-xs"
+      href="/flows/d91165be-ca1f-4612-88a9-c0f8696f3e29/response/content"
+      title="Download the content of the flow."
+    >
+      <i
+        className="fa fa-download"
+      />
+    </a>
+  </div>
+</div>
+`;
+
+exports[`ContentView Component should render correctly with empty content 1`] = `
+<div
+  className="alert alert-info"
+>
+  No 
+  response
+   content.
+</div>
+`;
+
+exports[`ContentView Component should render correctly with missing content 1`] = `
+<div
+  className="alert alert-info"
+>
+  Response
+   content missing.
+</div>
+`;
-- 
cgit v1.2.3


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

---
 web/src/js/__tests__/components/EventLogSpec.js    | 57 ++++++++++++++++
 .../components/__snapshots__/EventLogSpec.js.snap  | 76 ++++++++++++++++++++++
 web/src/js/components/EventLog.jsx                 |  2 +-
 3 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/__tests__/components/EventLogSpec.js
 create mode 100644 web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap

(limited to 'web/src/js')

diff --git a/web/src/js/__tests__/components/EventLogSpec.js b/web/src/js/__tests__/components/EventLogSpec.js
new file mode 100644
index 00000000..651ac83b
--- /dev/null
+++ b/web/src/js/__tests__/components/EventLogSpec.js
@@ -0,0 +1,57 @@
+jest.mock('../../components/EventLog/EventList')
+
+import React from 'react'
+import renderer from 'react-test-renderer'
+import TestUtils from 'react-dom/test-utils'
+import ConnectedComponent, { EventLog } from '../../components/EventLog'
+import { Provider } from 'react-redux'
+import { TStore } from '../ducks/tutils'
+
+window.addEventListener = jest.fn()
+window.removeEventListener = jest.fn()
+
+describe('EventLog Component', () => {
+    let store = TStore(),
+        provider = renderer.create(
+        <Provider store={store}>
+            <ConnectedComponent/>
+        </Provider>),
+        tree = provider.toJSON()
+
+    it('should connect to state and render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handl toggleFilter', () => {
+        let debugToggleButton = tree.children[0].children[1].children[0]
+        debugToggleButton.props.onClick()
+    })
+
+    provider = TestUtils.renderIntoDocument(
+        <Provider store={store}><ConnectedComponent/></Provider>)
+    let eventLog = TestUtils.findRenderedComponentWithType(provider, EventLog),
+        mockEvent = { preventDefault: jest.fn() }
+
+    it('should handle DragStart', () => {
+        eventLog.onDragStart(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        expect(window.addEventListener).toBeCalledWith('mousemove', eventLog.onDragMove)
+        expect(window.addEventListener).toBeCalledWith('mouseup', eventLog.onDragStop)
+        expect(window.addEventListener).toBeCalledWith('dragend', eventLog.onDragStop)
+        mockEvent.preventDefault.mockClear()
+    })
+
+    it('should handle DragMove', () => {
+        eventLog.onDragMove(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        mockEvent.preventDefault.mockClear()
+    })
+
+    console.error = jest.fn() // silent the error.
+    it('should handle DragStop', () => {
+        eventLog.onDragStop(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        expect(window.removeEventListener).toBeCalledWith('mousemove', eventLog.onDragMove)
+    })
+
+})
diff --git a/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap
new file mode 100644
index 00000000..11c3a29e
--- /dev/null
+++ b/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventLog Component should connect to state and render correctly 1`] = `
+<div
+  className="eventlog"
+  style={
+    Object {
+      "height": 200,
+    }
+  }
+>
+  <div
+    onMouseDown={[Function]}
+  >
+    Eventlog
+    <div
+      className="pull-right"
+    >
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        debug
+      </div>
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        info
+      </div>
+      <div
+        className="btn btn-toggle btn-default"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-square-o"
+        />
+         
+        web
+      </div>
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        warn
+      </div>
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        error
+      </div>
+      <i
+        className="fa fa-close"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx
index a83cdb28..451d0ca0 100644
--- a/web/src/js/components/EventLog.jsx
+++ b/web/src/js/components/EventLog.jsx
@@ -5,7 +5,7 @@ import { toggleFilter, toggleVisibility } from '../ducks/eventLog'
 import ToggleButton from './common/ToggleButton'
 import EventList from './EventLog/EventList'
 
-class EventLog extends Component {
+export class EventLog extends Component {
 
     static propTypes = {
         filters: PropTypes.object.isRequired,
-- 
cgit v1.2.3


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

(limited to 'web/src/js')

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


From 9ff29cdb2b790e0b88fb8a5519dc13785f3c9819 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Mon, 26 Jun 2017 09:46:29 +0800
Subject: [web] Minor fix and Coverage ++

---
 web/src/js/__tests__/components/ContentViewSpec.js |  1 +
 web/src/js/__tests__/components/EventLogSpec.js    | 10 +++++-----
 web/src/js/components/EventLog.jsx                 |  4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'web/src/js')

diff --git a/web/src/js/__tests__/components/ContentViewSpec.js b/web/src/js/__tests__/components/ContentViewSpec.js
index c106b28b..a654870e 100644
--- a/web/src/js/__tests__/components/ContentViewSpec.js
+++ b/web/src/js/__tests__/components/ContentViewSpec.js
@@ -11,6 +11,7 @@ describe('ContentView Component', () => {
     let store = TStore()
 
     it('should render correctly', () => {
+        store.getState().ui.flow.contentView = 'Edit'
         let tflow = TFlow(),
             provider = renderer.create(
             <Provider store={store}>
diff --git a/web/src/js/__tests__/components/EventLogSpec.js b/web/src/js/__tests__/components/EventLogSpec.js
index 651ac83b..8510de55 100644
--- a/web/src/js/__tests__/components/EventLogSpec.js
+++ b/web/src/js/__tests__/components/EventLogSpec.js
@@ -3,7 +3,7 @@ jest.mock('../../components/EventLog/EventList')
 import React from 'react'
 import renderer from 'react-test-renderer'
 import TestUtils from 'react-dom/test-utils'
-import ConnectedComponent, { EventLog } from '../../components/EventLog'
+import EventLog, { PureEventLog } from '../../components/EventLog'
 import { Provider } from 'react-redux'
 import { TStore } from '../ducks/tutils'
 
@@ -14,7 +14,7 @@ describe('EventLog Component', () => {
     let store = TStore(),
         provider = renderer.create(
         <Provider store={store}>
-            <ConnectedComponent/>
+            <EventLog/>
         </Provider>),
         tree = provider.toJSON()
 
@@ -22,14 +22,14 @@ describe('EventLog Component', () => {
         expect(tree).toMatchSnapshot()
     })
 
-    it('should handl toggleFilter', () => {
+    it('should handle toggleFilter', () => {
         let debugToggleButton = tree.children[0].children[1].children[0]
         debugToggleButton.props.onClick()
     })
 
     provider = TestUtils.renderIntoDocument(
-        <Provider store={store}><ConnectedComponent/></Provider>)
-    let eventLog = TestUtils.findRenderedComponentWithType(provider, EventLog),
+        <Provider store={store}><EventLog/></Provider>)
+    let eventLog = TestUtils.findRenderedComponentWithType(provider, PureEventLog),
         mockEvent = { preventDefault: jest.fn() }
 
     it('should handle DragStart', () => {
diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx
index 451d0ca0..40fe900e 100644
--- a/web/src/js/components/EventLog.jsx
+++ b/web/src/js/components/EventLog.jsx
@@ -5,7 +5,7 @@ import { toggleFilter, toggleVisibility } from '../ducks/eventLog'
 import ToggleButton from './common/ToggleButton'
 import EventList from './EventLog/EventList'
 
-export class EventLog extends Component {
+export class PureEventLog extends Component {
 
     static propTypes = {
         filters: PropTypes.object.isRequired,
@@ -77,4 +77,4 @@ export default connect(
         close: toggleVisibility,
         toggleFilter: toggleFilter,
     }
-)(EventLog)
+)(PureEventLog)
-- 
cgit v1.2.3