From 9f58093954c5f84b9ba0de24339ca5b4fb13a117 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sun, 25 Jun 2017 21:13:53 +0800
Subject: [PATCH] [web] Add tests for js/components/EventLog.jsx

---
 .../js/__tests__/components/EventLogSpec.js   | 57 ++++++++++++++
 .../__snapshots__/EventLogSpec.js.snap        | 76 +++++++++++++++++++
 web/src/js/components/EventLog.jsx            |  2 +-
 3 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/__tests__/components/EventLogSpec.js
 create mode 100644 web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap

diff --git a/web/src/js/__tests__/components/EventLogSpec.js b/web/src/js/__tests__/components/EventLogSpec.js
new file mode 100644
index 000000000..651ac83bc
--- /dev/null
+++ b/web/src/js/__tests__/components/EventLogSpec.js
@@ -0,0 +1,57 @@
+jest.mock('../../components/EventLog/EventList')
+
+import React from 'react'
+import renderer from 'react-test-renderer'
+import TestUtils from 'react-dom/test-utils'
+import ConnectedComponent, { EventLog } from '../../components/EventLog'
+import { Provider } from 'react-redux'
+import { TStore } from '../ducks/tutils'
+
+window.addEventListener = jest.fn()
+window.removeEventListener = jest.fn()
+
+describe('EventLog Component', () => {
+    let store = TStore(),
+        provider = renderer.create(
+        <Provider store={store}>
+            <ConnectedComponent/>
+        </Provider>),
+        tree = provider.toJSON()
+
+    it('should connect to state and render correctly', () => {
+        expect(tree).toMatchSnapshot()
+    })
+
+    it('should handl toggleFilter', () => {
+        let debugToggleButton = tree.children[0].children[1].children[0]
+        debugToggleButton.props.onClick()
+    })
+
+    provider = TestUtils.renderIntoDocument(
+        <Provider store={store}><ConnectedComponent/></Provider>)
+    let eventLog = TestUtils.findRenderedComponentWithType(provider, EventLog),
+        mockEvent = { preventDefault: jest.fn() }
+
+    it('should handle DragStart', () => {
+        eventLog.onDragStart(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        expect(window.addEventListener).toBeCalledWith('mousemove', eventLog.onDragMove)
+        expect(window.addEventListener).toBeCalledWith('mouseup', eventLog.onDragStop)
+        expect(window.addEventListener).toBeCalledWith('dragend', eventLog.onDragStop)
+        mockEvent.preventDefault.mockClear()
+    })
+
+    it('should handle DragMove', () => {
+        eventLog.onDragMove(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        mockEvent.preventDefault.mockClear()
+    })
+
+    console.error = jest.fn() // silent the error.
+    it('should handle DragStop', () => {
+        eventLog.onDragStop(mockEvent)
+        expect(mockEvent.preventDefault).toBeCalled()
+        expect(window.removeEventListener).toBeCalledWith('mousemove', eventLog.onDragMove)
+    })
+
+})
diff --git a/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap b/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap
new file mode 100644
index 000000000..11c3a29e2
--- /dev/null
+++ b/web/src/js/__tests__/components/__snapshots__/EventLogSpec.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventLog Component should connect to state and render correctly 1`] = `
+<div
+  className="eventlog"
+  style={
+    Object {
+      "height": 200,
+    }
+  }
+>
+  <div
+    onMouseDown={[Function]}
+  >
+    Eventlog
+    <div
+      className="pull-right"
+    >
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        debug
+      </div>
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        info
+      </div>
+      <div
+        className="btn btn-toggle btn-default"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-square-o"
+        />
+         
+        web
+      </div>
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        warn
+      </div>
+      <div
+        className="btn btn-toggle btn-primary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-fw fa-check-square-o"
+        />
+         
+        error
+      </div>
+      <i
+        className="fa fa-close"
+        onClick={[Function]}
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx
index a83cdb288..451d0ca01 100644
--- a/web/src/js/components/EventLog.jsx
+++ b/web/src/js/components/EventLog.jsx
@@ -5,7 +5,7 @@ import { toggleFilter, toggleVisibility } from '../ducks/eventLog'
 import ToggleButton from './common/ToggleButton'
 import EventList from './EventLog/EventList'
 
-class EventLog extends Component {
+export class EventLog extends Component {
 
     static propTypes = {
         filters: PropTypes.object.isRequired,