[web] Add tests for js/components/FlowView/Details.jsx

2 files changed, 324 insertions, 0 deletions

diff --git a/web/src/js/__tests__/components/FlowView/DetailsSpec.js b/web/src/js/__tests__/components/FlowView/DetailsSpec.js
new file mode 100644
index 00000000..1b0192cf
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowView/DetailsSpec.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Details, { TimeStamp, ConnectionInfo, CertificateInfo, Timing } from '../../../components/FlowView/Details'
+import { TFlow } from '../../ducks/tutils'
+
+let tflow = TFlow()
+
+describe('TimeStamp Component', () => {
+    it('should render correctly', () => {
+        let timestamp = renderer.create(<TimeStamp t={1483228800} deltaTo={1483228700} title="foo"/>),
+            tree = timestamp.toJSON()
+        expect(tree).toMatchSnapshot()
+        // without timestamp
+        timestamp = renderer.create(<TimeStamp/>)
+        tree = timestamp.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('ConnectionInfo Component', () => {
+    it('should render correctly', () => {
+        let connectionInfo = renderer.create(<ConnectionInfo conn={tflow.client_conn}/>),
+            tree = connectionInfo.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('CertificateInfo Component', () => {
+    it('should render correctly', () => {
+        let certificateInfo = renderer.create(<CertificateInfo flow={tflow}/>),
+            tree = certificateInfo.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('Timing Component', () => {
+    it('should render correctly', () => {
+        let timing = renderer.create(<Timing flow={tflow}/>),
+            tree = timing.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('Details Component', () => {
+    it('should render correctly', () => {
+        let details = renderer.create(<Details flow={tflow}/>),
+            tree = details.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap
new file mode 100644
index 00000000..dcee1895
--- /dev/null
+++ b/web/src/js/__tests__/components/FlowView/__snapshots__/DetailsSpec.js.snap
@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CertificateInfo Component should render correctly 1`] = `<div />`;
+
+exports[`ConnectionInfo Component should render correctly 1`] = `
+<table
+  className="connection-table"
+>
+  <tbody>
+    <tr>
+      <td>
+        Address:
+      </td>
+      <td>
+        address:22
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <abbr
+          title="TLS Server Name Indication"
+        >
+          TLS SNI:
+        </abbr>
+      </td>
+      <td>
+        address
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Details Component should render correctly 1`] = `
+<section
+  className="detail"
+>
+  <h4>
+    Client Connection
+  </h4>
+  <table
+    className="connection-table"
+  >
+    <tbody>
+      <tr>
+        <td>
+          Address:
+        </td>
+        <td>
+          address:22
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <abbr
+            title="TLS Server Name Indication"
+          >
+            TLS SNI:
+          </abbr>
+        </td>
+        <td>
+          address
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <h4>
+    Server Connection
+  </h4>
+  <table
+    className="connection-table"
+  >
+    <tbody>
+      <tr>
+        <td>
+          Address:
+        </td>
+        <td>
+          address:22
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <abbr
+            title="TLS Server Name Indication"
+          >
+            TLS SNI:
+          </abbr>
+        </td>
+        <td>
+          address
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div />
+  <div>
+    <h4>
+      Timing
+    </h4>
+    <table
+      className="timing-table"
+    >
+      <tbody>
+        <tr />
+        <tr />
+        <tr>
+          <td>
+            Server conn. initiated
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:01.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Client conn. established
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:01.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Server conn. TCP handshake
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:02.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Client conn. SSL handshake
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:02.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Server conn. SSL handshake
+            :
+          </td>
+          <td>
+            1970-01-01 00:00:03.000
+          </td>
+        </tr>
+        <tr>
+          <td>
+            First response byte
+            :
+          </td>
+          <td>
+            2017-05-21 12:38:32.481
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Response complete
+            :
+          </td>
+          <td>
+            2017-05-21 12:38:32.481
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+`;
+
+exports[`TimeStamp Component should render correctly 1`] = `
+<tr>
+  <td>
+    foo
+    :
+  </td>
+  <td>
+    2017-01-01 00:00:00.000
+    <span
+      className="text-muted"
+    >
+      (
+      2min
+      )
+    </span>
+  </td>
+</tr>
+`;
+
+exports[`TimeStamp Component should render correctly 2`] = `<tr />`;
+
+exports[`Timing Component should render correctly 1`] = `
+<div>
+  <h4>
+    Timing
+  </h4>
+  <table
+    className="timing-table"
+  >
+    <tbody>
+      <tr />
+      <tr />
+      <tr>
+        <td>
+          Server conn. initiated
+          :
+        </td>
+        <td>
+          1970-01-01 00:00:01.000
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Client conn. established
+          :
+        </td>
+        <td>
+          1970-01-01 00:00:01.000
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Server conn. TCP handshake
+          :
+        </td>
+        <td>
+          1970-01-01 00:00:02.000
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Client conn. SSL handshake
+          :
+        </td>
+        <td>
+          1970-01-01 00:00:02.000
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Server conn. SSL handshake
+          :
+        </td>
+        <td>
+          1970-01-01 00:00:03.000
+        </td>
+      </tr>
+      <tr>
+        <td>
+          First response byte
+          :
+        </td>
+        <td>
+          2017-05-21 12:38:32.481
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Response complete
+          :
+        </td>
+        <td>
+          2017-05-21 12:38:32.481
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;