[WIP][web] Add tests for UI components

web/src/js/__tests__/components/FlowTable/FlowColumnsSpec.js

@@ -0,0 +1,103 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import * as Columns from '../../../components/FlowTable/FlowColumns'
+import { TFlow } from '../../ducks/tutils'
+
+describe('FlowColumns Components', () => {
+
+    let tFlow = new TFlow()
+    it('should render TLSColumn', () => {
+        let tlsColumn = renderer.create(<Columns.TLSColumn flow={tFlow}/>),
+            tree = tlsColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render IconColumn', () => {
+        let iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>),
+            tree = iconColumn.toJSON()
+        // plain
+        expect(tree).toMatchSnapshot()
+        // not modified
+        tFlow.response.status_code = 304
+        iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+        // redirect
+        tFlow.response.status_code = 302
+        iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+        // image
+        let imageFlow = new TFlow()
+        imageFlow.response.headers = [['Content-Type', 'image/jpeg']]
+        iconColumn = renderer.create(<Columns.IconColumn flow={imageFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+        // javascript
+        let jsFlow = new TFlow()
+        jsFlow.response.headers = [['Content-Type', 'application/x-javascript']]
+        iconColumn = renderer.create(<Columns.IconColumn flow={jsFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+        // css
+        let cssFlow = new TFlow()
+        cssFlow.response.headers = [['Content-Type', 'text/css']]
+        iconColumn = renderer.create(<Columns.IconColumn flow={cssFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+        // default
+        let fooFlow = new TFlow()
+        fooFlow.response.headers = [['Content-Type', 'foo']]
+        iconColumn = renderer.create(<Columns.IconColumn flow={fooFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+        // no response
+        tFlow.response = null
+        iconColumn = renderer.create(<Columns.IconColumn flow={tFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render pathColumn', () => {
+        // error
+        let pathColumn = renderer.create(<Columns.PathColumn flow={tFlow}/>),
+            tree = pathColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        tFlow.error.msg = 'Connection killed'
+        tFlow.intercepted = true
+        pathColumn = renderer.create(<Columns.PathColumn flow={tFlow}/>)
+        tree = pathColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render MethodColumn', () => {
+        let methodColumn =renderer.create(<Columns.MethodColumn flow={tFlow}/>),
+            tree = methodColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render StatusColumn', () => {
+        let statusColumn = renderer.create(<Columns.StatusColumn flow={tFlow}/>),
+            tree = statusColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render SizeColumn', () => {
+        tFlow = new TFlow()
+        let sizeColumn = renderer.create(<Columns.SizeColumn flow={tFlow}/>),
+            tree = sizeColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should render TimeColumn', () => {
+        let timeColumn = renderer.create(<Columns.TimeColumn flow={tFlow}/>),
+            tree = timeColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        tFlow.response = null
+        timeColumn = renderer.create(<Columns.TimeColumn flow={tFlow}/>),
+        tree = timeColumn.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})

web/src/js/__tests__/components/FlowTable/__snapshots__/FlowColumnsSpec.js.snap

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlowColumns Components should render IconColumn 1`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-document"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 2`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-not-modified"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 3`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-redirect"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 4`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-image"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 5`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-js"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 6`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-css"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 7`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-plain"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render IconColumn 8`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-plain"
+  />
+</td>
+`;
+
+exports[`FlowColumns Components should render MethodColumn 1`] = `
+<td
+  className="col-method"
+>
+  GET
+</td>
+`;
+
+exports[`FlowColumns Components should render SizeColumn 1`] = `
+<td
+  className="col-size"
+>
+  100b
+</td>
+`;
+
+exports[`FlowColumns Components should render StatusColumn 1`] = `
+<td
+  className="col-status"
+/>
+`;
+
+exports[`FlowColumns Components should render TLSColumn 1`] = `
+<td
+  className="col-tls col-tls-http"
+/>
+`;
+
+exports[`FlowColumns Components should render TimeColumn 1`] = `
+<td
+  className="col-time"
+>
+  2min
+</td>
+`;
+
+exports[`FlowColumns Components should render TimeColumn 2`] = `
+<td
+  className="col-time"
+>
+  ...
+</td>
+`;
+
+exports[`FlowColumns Components should render pathColumn 1`] = `
+<td
+  className="col-path"
+>
+  <i
+    className="fa fa-fw fa-repeat pull-right"
+  />
+  <i
+    className="fa fa-fw fa-exclamation pull-right"
+  />
+  http://undefined:undefinedundefined
+</td>
+`;
+
+exports[`FlowColumns Components should render pathColumn 2`] = `
+<td
+  className="col-path"
+>
+  <i
+    className="fa fa-fw fa-repeat pull-right"
+  />
+  <i
+    className="fa fa-fw fa-pause pull-right"
+  />
+  <i
+    className="fa fa-fw fa-times pull-right"
+  />
+  http://undefined:undefinedundefined
+</td>
+`;

web/src/js/__tests__/components/ValueEditor/ValidateEditorSpec.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import TestUtils from 'react-dom/test-utils'
+import ValidateEditor from '../../../components/ValueEditor/ValidateEditor'
+
+describe('ValidateEditor Component', () => {
+    let validateFn = jest.fn( content => content.length == 3),
+        doneFn = jest.fn()
+
+    it('should be render correctly', () => {
+        let validateEditor = renderer.create(
+            <ValidateEditor content="foo" onDone={doneFn} isValid={validateFn}/>
+        ),
+            tree = validateEditor.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let validateEditor = TestUtils.renderIntoDocument(
+        <ValidateEditor content="foo" onDone={doneFn} isValid={validateFn}/>
+    )
+    it('should handle componentWillReceiveProps', () => {
+        let mockProps = {
+            isValid: s => s.length == 3,
+            content: "bar"
+        }
+        validateEditor.componentWillReceiveProps(mockProps)
+        expect(validateEditor.state.valid).toBeTruthy()
+        validateEditor.componentWillReceiveProps({...mockProps, content: "bars"})
+        expect(validateEditor.state.valid).toBeFalsy()
+
+    })
+
+    it('should handle input', () => {
+        validateEditor.onInput("foo bar")
+        expect(validateFn).toBeCalledWith("foo bar")
+    })
+
+    it('should handle done', () => {
+        // invalid
+        validateEditor.editor.reset = jest.fn()
+        validateEditor.onDone("foo bar")
+        expect(validateEditor.editor.reset).toBeCalled()
+        // valid
+        validateEditor.onDone("bar")
+        expect(doneFn).toBeCalledWith("bar")
+    })
+})