From 602ab1a687b2f61853f667056ff33c04f881a921 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Thu, 8 Jun 2017 11:13:59 +0800
Subject: [PATCH] [web] Add tests for js/components/ContentView/ContentView.jsx

---
 .../components/ContentView/ContentViewSpec.js | 85 +++++++++++++++++++
 .../__snapshots__/ContentViewSpec.js.snap     | 52 ++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 web/src/js/__tests__/components/ContentView/ContentViewSpec.js
 create mode 100644 web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewSpec.js.snap

diff --git a/web/src/js/__tests__/components/ContentView/ContentViewSpec.js b/web/src/js/__tests__/components/ContentView/ContentViewSpec.js
new file mode 100644
index 000000000..f519185dd
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/ContentViewSpec.js
@@ -0,0 +1,85 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import TestUtils from 'react-dom/test-utils'
+import { Provider } from 'react-redux'
+import { ViewServer, ViewImage, PureViewServer, Edit } from '../../../components/ContentView/ContentViews'
+import { TFlow, TStore } from '../../ducks/tutils'
+import mockXMLHttpRequest from 'mock-xmlhttprequest'
+
+global.XMLHttpRequest = mockXMLHttpRequest
+let tflow = new TFlow()
+
+describe('ViewImage Component', () => {
+    let viewImage = renderer.create(<ViewImage flow={tflow} message={tflow.response}/>),
+        tree = viewImage.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('ViewServer Component', () => {
+    let store = TStore(),
+    setContentViewDescFn = jest.fn(),
+    setContentFn = jest.fn()
+
+    it('should render correctly and connect to state', () => {
+        let provider = renderer.create(
+            <Provider store={store}>
+                <ViewServer
+                    setContentViewDescription={setContentViewDescFn}
+                    setContent={setContentFn}
+                    flow={tflow}
+                    message={tflow.response}
+                />
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+
+        let viewServer = renderer.create(
+            <PureViewServer
+                showFullContent={true}
+                maxLines={10}
+                setContentViewDescription={setContentViewDescFn}
+                setContent={setContentViewDescFn}
+                flow={tflow}
+                message={tflow.response}
+                content={JSON.stringify({lines: [['k1', 'v1']]})}
+            />
+        )
+        tree = viewServer.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle componentWillReceiveProps', () => {
+        // case of fail to parse content
+        let viewSever = TestUtils.renderIntoDocument(
+            <PureViewServer
+                showFullContent={true}
+                maxLines={10}
+                setContentViewDescription={setContentViewDescFn}
+                setContent={setContentViewDescFn}
+                flow={tflow}
+                message={tflow.response}
+                content={JSON.stringify({lines: [['k1', 'v1']]})}
+            />
+        )
+        viewSever.componentWillReceiveProps({...viewSever.props, content: '{foo' })
+        let e = ''
+        try {JSON.parse('{foo') } catch(err){ e = err.message}
+        expect(viewSever.data).toEqual({ description: e, lines: [] })
+    })
+})
+
+describe('Edit Component', () => {
+    it('should render correctly', () => {
+        let edit = renderer.create(<Edit
+                content="foo"
+                onChange={jest.fn}
+                flow={tflow}
+                message={tflow.response}
+            />),
+            tree = edit.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewSpec.js.snap
new file mode 100644
index 000000000..a4bc06c5a
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewSpec.js.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit Component should render correctly 1`] = `
+<div
+  className="text-center"
+>
+  <i
+    className="fa fa-spinner fa-spin"
+  />
+</div>
+`;
+
+exports[`ViewImage Component should render correctly 1`] = `
+<div
+  className="flowview-image"
+>
+  <img
+    alt="preview"
+    className="img-thumbnail"
+    src="/flows/d91165be-ca1f-4612-88a9-c0f8696f3e29/response/content"
+  />
+</div>
+`;
+
+exports[`ViewServer Component should render correctly and connect to state 1`] = `
+<div
+  className="text-center"
+>
+  <i
+    className="fa fa-spinner fa-spin"
+  />
+</div>
+`;
+
+exports[`ViewServer Component should render correctly and connect to state 2`] = `
+<div>
+  <pre>
+    <div>
+      <span
+        className="k"
+      >
+        1
+      </span>
+      <span
+        className="v"
+      >
+        1
+      </span>
+    </div>
+  </pre>
+</div>
+`;