[web] Add _flow.js for component tests.

test/mitmproxy/tools/web/test_app.py

@@ -1,5 +1,6 @@
 import json as _json
 from unittest import mock
+import os
 
 import tornado.testing
 from tornado import httpclient
@@ -275,3 +276,20 @@ def test_websocket(self):
         # trigger on_close by opening a second connection.
         ws_client2 = yield websocket.websocket_connect(ws_url)
         ws_client2.close()
+
+    def test_generate_tflow_js(self):
+        _tflow = app.flow_to_json(tflow.tflow(resp=True, err=True))
+        # Set some value as constant, so that _tflow.js would not change every time.
+        _tflow['client_conn']['id'] = "4a18d1a0-50a1-48dd-9aa6-d45d74282939"
+        _tflow['id'] = "d91165be-ca1f-4612-88a9-c0f8696f3e29"
+        _tflow['error']['timestamp'] = 1495370312.4814785
+        _tflow['response']['timestamp_end'] = 1495370312.4814625
+        _tflow['response']['timestamp_start'] = 1495370312.481462
+        _tflow['server_conn']['id'] = "f087e7b2-6d0a-41a8-a8f0-e1a4761395f8"
+        tflow_json = _json.dumps(_tflow, indent=4, sort_keys=True)
+        here = os.path.abspath(os.path.dirname(__file__))
+        web_root = os.path.join(here, os.pardir, os.pardir, os.pardir, os.pardir, 'web')
+        tflow_path = os.path.join(web_root, 'src/js/__tests__/ducks/_tflow.js')
+        content = """export default function(){{\n    return {tflow_json}\n}}""".format(tflow_json=tflow_json)
+        with open(tflow_path, 'w') as f:
+            f.write(content)

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

@@ -5,97 +5,103 @@ import { TFlow } from '../../ducks/tutils'
 
 describe('FlowColumns Components', () => {
 
-    let tFlow = new TFlow()
+    let tflow = TFlow()
     it('should render TLSColumn', () => {
-        let tlsColumn = renderer.create(<Columns.TLSColumn flow={tFlow}/>),
+        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}/>),
+        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}/>)
+        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}/>)
+        tflow.response.status_code = 302
+        iconColumn = renderer.create(<Columns.IconColumn flow={tflow}/>)
         tree = iconColumn.toJSON()
         expect(tree).toMatchSnapshot()
         // image
-        let imageFlow = new TFlow()
+        let imageFlow = 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()
+        let jsFlow = 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()
+        let cssFlow = TFlow()
         cssFlow.response.headers = [['Content-Type', 'text/css']]
         iconColumn = renderer.create(<Columns.IconColumn flow={cssFlow}/>)
         tree = iconColumn.toJSON()
         expect(tree).toMatchSnapshot()
+        // html
+        let htmlFlow = TFlow()
+        htmlFlow.response.headers = [['Content-Type', 'text/html']]
+        iconColumn = renderer.create(<Columns.IconColumn flow={htmlFlow}/>)
+        tree = iconColumn.toJSON()
+        expect(tree).toMatchSnapshot()
         // default
-        let fooFlow = new TFlow()
+        let fooFlow = 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}/>)
+        tflow.response = null
+        iconColumn = renderer.create(<Columns.IconColumn flow={tflow}/>)
         tree = iconColumn.toJSON()
         expect(tree).toMatchSnapshot()
     })
 
     it('should render pathColumn', () => {
-        let pathColumn = renderer.create(<Columns.PathColumn flow={tFlow}/>),
+        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}/>)
+        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}/>),
+        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}/>),
+        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}/>),
+        tflow = 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}/>),
+        let timeColumn = renderer.create(<Columns.TimeColumn flow={tflow}/>),
             tree = timeColumn.toJSON()
         expect(tree).toMatchSnapshot()
 
-        tFlow.response = null
-        timeColumn = renderer.create(<Columns.TimeColumn flow={tFlow}/>),
+        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

@@ -5,7 +5,7 @@ exports[`FlowColumns Components should render IconColumn 1`] = `
   className="col-icon"
 >
   <div
-    className="resource-icon resource-icon-document"
+    className="resource-icon resource-icon-plain"
   />
 </td>
 `;
@@ -65,7 +65,7 @@ exports[`FlowColumns Components should render IconColumn 7`] = `
   className="col-icon"
 >
   <div
-    className="resource-icon resource-icon-plain"
+    className="resource-icon resource-icon-document"
   />
 </td>
 `;
@@ -80,6 +80,16 @@ exports[`FlowColumns Components should render IconColumn 8`] = `
 </td>
 `;
 
+exports[`FlowColumns Components should render IconColumn 9`] = `
+<td
+  className="col-icon"
+>
+  <div
+    className="resource-icon resource-icon-plain"
+  />
+</td>
+`;
+
 exports[`FlowColumns Components should render MethodColumn 1`] = `
 <td
   className="col-method"
@@ -92,7 +102,7 @@ exports[`FlowColumns Components should render SizeColumn 1`] = `
 <td
   className="col-size"
 >
-  100b
+  14b
 </td>
 `;
 
@@ -112,7 +122,7 @@ exports[`FlowColumns Components should render TimeColumn 1`] = `
 <td
   className="col-time"
 >
-  2min
+  415381h
 </td>
 `;
 
@@ -128,29 +138,23 @@ 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
+  http://address:22/path
 </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
+  http://address:22/path
 </td>
 `;

web/src/js/__tests__/ducks/_tflow.js

@@ -0,0 +1,97 @@
+export default function(){
+    return {
+    "client_conn": {
+        "address": [
+            "address",
+            22
+        ],
+        "alpn_proto_negotiated": "http/1.1",
+        "cipher_name": "cipher",
+        "clientcert": null,
+        "id": "4a18d1a0-50a1-48dd-9aa6-d45d74282939",
+        "sni": "address",
+        "ssl_established": false,
+        "timestamp_end": 3.0,
+        "timestamp_ssl_setup": 2.0,
+        "timestamp_start": 1.0,
+        "tls_version": "TLSv1.2"
+    },
+    "error": {
+        "msg": "error",
+        "timestamp": 1495370312.4814785
+    },
+    "id": "d91165be-ca1f-4612-88a9-c0f8696f3e29",
+    "intercepted": false,
+    "marked": false,
+    "modified": false,
+    "request": {
+        "contentHash": "ed7002b439e9ac845f22357d822bac1444730fbdb6016d3ec9432297b9ec9f73",
+        "contentLength": 7,
+        "headers": [
+            [
+                "header",
+                "qvalue"
+            ],
+            [
+                "content-length",
+                "7"
+            ]
+        ],
+        "host": "address",
+        "http_version": "HTTP/1.1",
+        "is_replay": false,
+        "method": "GET",
+        "path": "/path",
+        "port": 22,
+        "pretty_host": "address",
+        "scheme": "http",
+        "timestamp_end": null,
+        "timestamp_start": null
+    },
+    "response": {
+        "contentHash": "ab530a13e45914982b79f9b7e3fba994cfd1f3fb22f71cea1afbf02b460c6d1d",
+        "contentLength": 7,
+        "headers": [
+            [
+                "header-response",
+                "svalue"
+            ],
+            [
+                "content-length",
+                "7"
+            ]
+        ],
+        "http_version": "HTTP/1.1",
+        "is_replay": false,
+        "reason": "OK",
+        "status_code": 200,
+        "timestamp_end": 1495370312.4814625,
+        "timestamp_start": 1495370312.481462
+    },
+    "server_conn": {
+        "address": [
+            "address",
+            22
+        ],
+        "alpn_proto_negotiated": null,
+        "id": "f087e7b2-6d0a-41a8-a8f0-e1a4761395f8",
+        "ip_address": [
+            "192.168.0.1",
+            22
+        ],
+        "sni": "address",
+        "source_address": [
+            "address",
+            22
+        ],
+        "ssl_established": false,
+        "timestamp_end": 4.0,
+        "timestamp_ssl_setup": 3.0,
+        "timestamp_start": 1.0,
+        "timestamp_tcp_setup": 2.0,
+        "tls_version": "TLSv1.2",
+        "via": null
+    },
+    "type": "http"
+}
+}

web/src/js/__tests__/ducks/tutils.js

@@ -8,29 +8,4 @@ export function createStore(parts) {
     )
 }
 
-export function TFlow(intercepted=false, marked=false, modified=false) {
-    return {
-        intercepted ,
-        marked,
-        modified,
-        id: "foo",
-        request: {
-            scheme: 'http',
-            is_replay: true,
-            method: 'GET',
-            contentLength: 100
-        },
-        response: {
-            status_code: 200,
-            headers: [["Content-Type", 'text/html']],
-            timestamp_end: 200
-        },
-        error: {
-            msg: ''
-        },
-        server_conn: {
-            timestamp_start: 100
-        },
-        type: 'http'
-    }
-}
+export { default as TFlow } from './_tflow'