From 9c90d13149ec2db5bbe6db3b076bf3da78e0cac9 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sun, 28 May 2017 19:20:09 +0800
Subject: [web] Add tests for js/components/Header/MainMenu.js

---
 .../js/__tests__/components/Header/MainMenuSpec.js | 26 +++++++
 .../Header/__snapshots__/MainMenuSpec.js.snap      | 86 ++++++++++++++++++++++
 web/src/js/components/Header/MainMenu.jsx          |  6 +-
 3 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/__tests__/components/Header/MainMenuSpec.js
 create mode 100644 web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap

diff --git a/web/src/js/__tests__/components/Header/MainMenuSpec.js b/web/src/js/__tests__/components/Header/MainMenuSpec.js
new file mode 100644
index 00000000..927166fd
--- /dev/null
+++ b/web/src/js/__tests__/components/Header/MainMenuSpec.js
@@ -0,0 +1,26 @@
+jest.mock('../../../ducks/settings')
+
+import React from 'react'
+import renderer from 'react-test-renderer'
+import  MainMenu, { setIntercept } from '../../../components/Header/MainMenu'
+import { Provider } from 'react-redux'
+import { update as updateSettings } from '../../../ducks/settings'
+import { TStore } from '../../ducks/tutils'
+
+describe('MainMenu Component', () => {
+    let store = TStore()
+
+    it('should render and connect to state', () => {
+        let provider = renderer.create(
+            <Provider store={store}>
+                <MainMenu/>
+            </Provider>),
+            tree = provider.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handle change on interceptInput', () => {
+        setIntercept('foo')
+        expect(updateSettings).toBeCalledWith({ intercept: 'foo' })
+    })
+})
diff --git a/web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap b/web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap
new file mode 100644
index 00000000..b9735aa5
--- /dev/null
+++ b/web/src/js/__tests__/components/Header/__snapshots__/MainMenuSpec.js.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MainMenu Component should render and connect to state 1`] = `
+<div
+  className="menu-main"
+>
+  <div
+    className="filter-input input-group"
+  >
+    <span
+      className="input-group-addon"
+    >
+      <i
+        className="fa fa-fw fa-search"
+        style={
+          Object {
+            "color": "black",
+          }
+        }
+      />
+    </span>
+    <input
+      className="form-control"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Search"
+      type="text"
+      value="~u foo"
+    />
+  </div>
+  <div
+    className="filter-input input-group"
+  >
+    <span
+      className="input-group-addon"
+    >
+      <i
+        className="fa fa-fw fa-tag"
+        style={
+          Object {
+            "color": "hsl(48, 100%, 50%)",
+          }
+        }
+      />
+    </span>
+    <input
+      className="form-control"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Highlight"
+      type="text"
+      value="~a bar"
+    />
+  </div>
+  <div
+    className="filter-input input-group"
+  >
+    <span
+      className="input-group-addon"
+    >
+      <i
+        className="fa fa-fw fa-pause"
+        style={
+          Object {
+            "color": "hsl(208, 56%, 53%)",
+          }
+        }
+      />
+    </span>
+    <input
+      className="form-control"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Intercept"
+      type="text"
+      value=""
+    />
+  </div>
+</div>
+`;
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 465649d7..162ed0f5 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -17,6 +17,10 @@ export default function MainMenu() {
     )
 }
 
+export function setIntercept(intercept) {
+    updateSettings({ intercept })
+}
+
 const InterceptInput = connect(
     state => ({
         value: state.settings.intercept || '',
@@ -24,7 +28,7 @@ const InterceptInput = connect(
         type: 'pause',
         color: 'hsl(208, 56%, 53%)'
     }),
-    { onChange: intercept => updateSettings({ intercept }) }
+    { onChange: setIntercept }
 )(FilterInput);
 
 const FlowFilterInput = connect(
-- 
cgit v1.2.3