[web] Add tests for js/components/ContentView.jsx

2 files changed, 141 insertions, 0 deletions

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>
+`;