Merge pull request #2365 from MatthewShao/jest-dev

[WIP][web] Add tests for components/ContentView

4 files changed, 95 insertions, 0 deletions

diff --git a/web/src/js/__tests__/components/ContentView/CodeEditorSpec.js b/web/src/js/__tests__/components/ContentView/CodeEditorSpec.js
new file mode 100644
index 00000000..ba7acf07
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/CodeEditorSpec.js
@@ -0,0 +1,26 @@
+jest.mock('react-codemirror')
+import React from 'react'
+import renderer from 'react-test-renderer'
+import CodeEditor from '../../../components/ContentView/CodeEditor'
+
+describe('CodeEditor Component', () => {
+    let content = "foo content",
+        changeFn = jest.fn(),
+        codeEditor = renderer.create(
+            <CodeEditor content={content} onChange={changeFn}/>
+        ),
+        tree = codeEditor.toJSON()
+    
+    it('should render correctly', () => {
+        // This actually does not render properly, but getting a full CodeMirror rendering
+        // is cumbersome. This is hopefully good enough.
+        // see: https://github.com/mitmproxy/mitmproxy/pull/2365#discussion_r119766850
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle key down', () => {
+        let mockEvent = { stopPropagation: jest.fn() }
+        tree.props.onKeyDown(mockEvent)
+        expect(mockEvent.stopPropagation).toBeCalled()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/ContentViewOptionsSpec.js b/web/src/js/__tests__/components/ContentView/ContentViewOptionsSpec.js
new file mode 100644
index 00000000..68afb4ec
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/ContentViewOptionsSpec.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ContentViewOptions from '../../../components/ContentView/ContentViewOptions'
+import { Provider } from 'react-redux'
+import { TFlow, TStore } from '../../ducks/tutils'
+import { uploadContent } from '../../../ducks/flows'
+
+let tflow = new TFlow()
+
+describe('ContentViewOptions Component', () => {
+    let store = TStore()
+    it('should render correctly', () => {
+        let provider = renderer.create(
+            <Provider store={store}>
+                <ContentViewOptions flow={tflow} message={tflow.response} uploadContent={uploadContent}/>
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+})
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/CodeEditorSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/CodeEditorSpec.js.snap
new file mode 100644
index 00000000..7e688a60
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/CodeEditorSpec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeEditor Component should render correctly 1`] = `
+<div
+  className="codeeditor"
+  onKeyDown={[Function]}
+/>
+`;
diff --git a/web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewOptionsSpec.js.snap b/web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewOptionsSpec.js.snap
new file mode 100644
index 00000000..e3561ec1
--- /dev/null
+++ b/web/src/js/__tests__/components/ContentView/__snapshots__/ContentViewOptionsSpec.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentViewOptions Component should render correctly 1`] = `
+<div
+  className="view-options"
+>
+  <span>
+    <b>
+      View:
+    </b>
+     edit
+  </span>
+   
+  <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>
+   
+  <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>
+   
+</div>
+`;