Merge pull request #2376 from MatthewShao/jest-dev

[WIP][web] Add tests for components/ContentView (con't)

14 files changed, 609 insertions, 0 deletions

diff --git a/web/src/js/__tests__/components/ContentView/ContentLoaderSpec.js b/web/src/js/__tests__/components/ContentView/ContentLoaderSpec.js
new file mode 100644
index 00000000..80b40c72
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/ContentLoaderSpec.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import withContentLoader from '../../../components/ContentView/ContentLoader'
+import { TFlow } from '../../ducks/tutils'
+import TestUtils from 'react-dom/test-utils'
+import mockXMLHttpRequest from 'mock-xmlhttprequest'
+
+global.XMLHttpRequest = mockXMLHttpRequest
+class tComponent extends React.Component {
+    constructor(props, context){
+        super(props, context)
+    }
+    render() {
+        return (<p>foo</p>)
+    }
+}
+
+let tflow = new TFlow(),
+    ContentLoader = withContentLoader(tComponent)
+
+describe('ContentLoader Component', () => {
+    it('should render correctly', () => {
+        let contentLoader = renderer.create(<ContentLoader flow={tflow} message={tflow.response}/>),
+            tree = contentLoader.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let contentLoader = TestUtils.renderIntoDocument(<ContentLoader flow={tflow} message={tflow.response}/>)
+
+    it('should handle updateContent', () => {
+        tflow.response.content = 'foo'
+        contentLoader.updateContent({flow: tflow, message: tflow.response})
+        expect(contentLoader.state.request).toEqual(undefined)
+        expect(contentLoader.state.content).toEqual('foo')
+        // when content length is 0 or null
+        tflow.response.contentLength = 0
+        tflow.response.content = undefined
+        contentLoader.updateContent({flow: tflow, message: tflow.response})
+        expect(contentLoader.state.request).toEqual(undefined)
+        expect(contentLoader.state.content).toEqual('')
+    })
+
+    it('should handle componentWillReceiveProps', () => {
+        contentLoader.updateContent = jest.fn()
+        contentLoader.componentWillReceiveProps({flow: tflow, message: tflow.request})
+        expect(contentLoader.updateContent).toBeCalled()
+    })
+
+    it('should handle requestComplete', () => {
+        expect(contentLoader.requestComplete(tflow.request, {})).toEqual(undefined)
+        // request == this.state.request
+        contentLoader.state.request = tflow.request
+        contentLoader.requestComplete(tflow.request, {})
+        expect(contentLoader.state.content).toEqual(tflow.request.responseText)
+        expect(contentLoader.state.request).toEqual(undefined)
+    })
+
+    it('should handle requestFailed', () => {
+        console.error = jest.fn()
+        expect(contentLoader.requestFailed(tflow.request, {})).toEqual(undefined)
+        //request == this.state.request
+        contentLoader.state.request = tflow.request
+        contentLoader.requestFailed(tflow.request, 'foo error')
+        expect(contentLoader.state.content).toEqual('Error getting content.')
+        expect(contentLoader.state.request).toEqual(undefined)
+        expect(console.error).toBeCalledWith('foo error')
+    })
+
+    it('should handle componentWillUnmount', () => {
+        contentLoader.state.request = { abort : jest.fn() }
+        contentLoader.componentWillUnmount()
+        expect(contentLoader.state.request.abort).toBeCalled()
+    })
+})
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 00000000..f519185d
--- /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/DownloadContentButtonSpec.js b/web/src/js/__tests__/components/ContentView/DownloadContentButtonSpec.js
new file mode 100644
index 00000000..fd00627d
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/DownloadContentButtonSpec.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import DownloadContentButton from '../../../components/ContentView/DownloadContentButton'
+import { TFlow } from '../../ducks/tutils'
+
+let tflow = new TFlow()
+describe('DownloadContentButton Component', () => {
+    it('should render correctly', () => {
+        let downloadContentButton = renderer.create(
+            <DownloadContentButton flow={tflow} message={tflow.response}/>
+        ),
+            tree = downloadContentButton.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/MetaViewsSpec.js b/web/src/js/__tests__/components/ContentView/MetaViewsSpec.js
new file mode 100644
index 00000000..26b2a27c
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/MetaViewsSpec.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { ContentEmpty, ContentMissing, ContentTooLarge } from '../../../components/ContentView/MetaViews'
+import { TFlow } from '../../ducks/tutils'
+
+let tflow = new TFlow()
+
+describe('ContentEmpty Components', () => {
+    it('should render correctly', () => {
+        let contentEmpty = renderer.create(<ContentEmpty flow={tflow} message={tflow.response}/>),
+            tree = contentEmpty.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('ContentMissing Components', () => {
+    it('should render correctly', () => {
+        let contentMissing = renderer.create(<ContentMissing flow={tflow} message={tflow.response}/>),
+            tree = contentMissing.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
+
+describe('ContentTooLarge Components', () => {
+    it('should render correctly', () => {
+        let clickFn = jest.fn(),
+            uploadContentFn = jest.fn(),
+            contentTooLarge = renderer.create(<ContentTooLarge
+                flow={tflow}
+                message={tflow.response}
+                onClick={clickFn}
+                uploadContent={uploadContentFn}
+            />),
+            tree = contentTooLarge.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/ShowFullContentButtonSpec.js b/web/src/js/__tests__/components/ContentView/ShowFullContentButtonSpec.js
new file mode 100644
index 00000000..14871f13
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/ShowFullContentButtonSpec.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Provider } from 'react-redux'
+import ConnectedComponent, { ShowFullContentButton } from '../../../components/ContentView/ShowFullContentButton'
+import { TStore } from '../../ducks/tutils'
+
+
+describe('ShowFullContentButton Component', () => {
+    let setShowFullContentFn = jest.fn(),
+        showFullContentButton = renderer.create(
+            <ShowFullContentButton
+                setShowFullContent={setShowFullContentFn}
+                showFullContent={false}
+                visibleLines={10}
+                contentLines={20}
+            />
+        ),
+        tree = showFullContentButton.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click', () => {
+        tree.children[0].props.onClick()
+        expect(setShowFullContentFn).toBeCalled()
+    })
+
+    it('should connect to state', () => {
+        let store = TStore(),
+            provider = renderer.create(
+                <Provider store={store}>
+                    <ConnectedComponent/>
+                </Provider>
+            ),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/UploadContentButtonSpec.js b/web/src/js/__tests__/components/ContentView/UploadContentButtonSpec.js
new file mode 100644
index 00000000..3695be72
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/UploadContentButtonSpec.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import UploadContentButton from '../../../components/ContentView/UploadContentButton'
+
+describe('UpdateContentButton Component', () => {
+    it('should render correctly', () => {
+        let uploadContentFn = jest.fn(),
+            uploadContentButton = renderer.create(<UploadContentButton uploadContent={uploadContentFn}/>),
+            tree = uploadContentButton.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/ViewSelectorSpec.js b/web/src/js/__tests__/components/ContentView/ViewSelectorSpec.js
new file mode 100644
index 00000000..9e87e2f0
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/ViewSelectorSpec.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ConnectedComponent, { ViewSelector } from '../../../components/ContentView/ViewSelector'
+import { Provider } from 'react-redux'
+import { TStore } from '../../ducks/tutils'
+
+
+describe('ViewSelector Component', () => {
+    let contentViews = ['Auto', 'Raw', 'Text'],
+        activeView = 'Auto',
+        setContentViewFn = jest.fn(),
+        viewSelector = renderer.create(
+            <ViewSelector contentViews={contentViews} activeView={activeView} setContentView={setContentViewFn}/>
+        ),
+        tree = viewSelector.toJSON()
+
+    it('should render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle click', () => {
+        let mockEvent = { preventDefault: jest.fn() },
+            tab = tree.children[1].children[0].children[1]
+        tab.props.onClick(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+    })
+
+    it('should connect to state', () => {
+        let store = TStore(),
+            provider = renderer.create(
+                <Provider store={store}>
+                    <ConnectedComponent/>
+                </Provider>
+            ),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/ContentLoaderSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/ContentLoaderSpec.js.snap
new file mode 100644
index 00000000..88d4a380
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/ContentLoaderSpec.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentLoader Component should render correctly 1`] = `
+<div
+  className="text-center"
+>
+  <i
+    className="fa fa-spinner fa-spin"
+  />
+</div>
+`;
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 00000000..a4bc06c5
--- /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>
+`;
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/DownloadContentButtonSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/DownloadContentButtonSpec.js.snap
new file mode 100644
index 00000000..66900ca4
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/DownloadContentButtonSpec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DownloadContentButton Component should render correctly 1`] = `
+<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>
+`;
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/MetaViewsSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/MetaViewsSpec.js.snap
new file mode 100644
index 00000000..18ec5bba
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/MetaViewsSpec.js.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentEmpty Components should render correctly 1`] = `
+<div
+  className="alert alert-info"
+>
+  No 
+  response
+   content.
+</div>
+`;
+
+exports[`ContentMissing Components should render correctly 1`] = `
+<div
+  className="alert alert-info"
+>
+  Response
+   content missing.
+</div>
+`;
+
+exports[`ContentTooLarge Components should render correctly 1`] = `
+<div>
+  <div
+    className="alert alert-warning"
+  >
+    <button
+      className="btn btn-xs btn-warning pull-right"
+      onClick={[Function]}
+    >
+      Display anyway
+    </button>
+    7b
+     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>
+`;
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/ShowFullContentButtonSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/ShowFullContentButtonSpec.js.snap
new file mode 100644
index 00000000..e0532154
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/ShowFullContentButtonSpec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShowFullContentButton Component should connect to state 1`] = `null`;
+
+exports[`ShowFullContentButton Component should render correctly 1`] = `
+<div>
+  <div
+    className="view-all-content-btn btn-xs btn btn-default"
+    disabled={undefined}
+    onClick={[Function]}
+    title={undefined}
+  >
+    Show full content
+  </div>
+  <span
+    className="pull-right"
+  >
+     
+    10
+    /
+    20
+     are visible   
+  </span>
+</div>
+`;
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/UploadContentButtonSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/UploadContentButtonSpec.js.snap
new file mode 100644
index 00000000..f642d731
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/UploadContentButtonSpec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpdateContentButton Component should render correctly 1`] = `
+<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>
+`;
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/ViewSelectorSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/ViewSelectorSpec.js.snap
new file mode 100644
index 00000000..481bd56a
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/ViewSelectorSpec.js.snap
@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewSelector Component should connect to state 1`] = `
+<div
+  className="dropup pull-left"
+>
+  <a
+    className="btn btn-default btn-xs"
+    href="#"
+    onClick={[Function]}
+  >
+    <span>
+       
+      <b>
+        View:
+      </b>
+       
+      auto
+       
+      <span
+        className="caret"
+      />
+       
+    </span>
+  </a>
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        auto
+      </a>
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        raw
+      </a>
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        text
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`ViewSelector Component should render correctly 1`] = `
+<div
+  className="dropup pull-left"
+>
+  <a
+    className="btn btn-default btn-xs"
+    href="#"
+    onClick={[Function]}
+  >
+    <span>
+       
+      <b>
+        View:
+      </b>
+       
+      auto
+       
+      <span
+        className="caret"
+      />
+       
+    </span>
+  </a>
+  <ul
+    className="dropdown-menu"
+    role="menu"
+  >
+    <li>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        auto
+      </a>
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        raw
+      </a>
+       
+    </li>
+    <li>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        text
+      </a>
+       
+    </li>
+  </ul>
+</div>
+`;