Merge pull request #2342 from MatthewShao/jest-dev

[web] Add _flow.js for component tests.
2024-11-22 15:37:45 +00:00 · 2017-05-22 10:00:35 +02:00 · 2017-05-22 10:00:35 +02:00 · 5626c384ab
commit 5626c384ab
parent af0ad49434 546bac68d4
5 changed files with 162 additions and 62 deletions
--- a/test/mitmproxy/tools/web/test_app.py
+++ b/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 @@ class TestApp(tornado.testing.AsyncHTTPTestCase):
        # 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)
--- a/web/src/js/tests/components/FlowTable/FlowColumnsSpec.js
+++ b/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()
    })
--- a/web/src/js/tests/components/FlowTable/snapshots/FlowColumnsSpec.js.snap
+++ b/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,13 +138,10 @@ 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>
 `;

@ -142,15 +149,12 @@ 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>
 `;
--- a/web/src/js/tests/ducks/_tflow.js
+++ b/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"
+}
+}
--- a/web/src/js/tests/ducks/tutils.js
+++ b/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'