[web] Add tests for js/components/common/Splitter.jsx

2 files changed, 96 insertions, 0 deletions

diff --git a/web/src/js/__tests__/components/common/SplitterSpec.js b/web/src/js/__tests__/components/common/SplitterSpec.js
new file mode 100644
index 00000000..9ec48350
--- /dev/null
+++ b/web/src/js/__tests__/components/common/SplitterSpec.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import renderer from 'react-test-renderer'
+import Splitter from '../../../components/common/Splitter'
+import TestUtils from 'react-dom/test-utils';
+
+describe('Splitter Component', () => {
+
+    it('should render correctly', () => {
+        let splitter = renderer.create(<Splitter></Splitter>),
+            tree = splitter.toJSON()
+        expect(tree).toMatchSnapshot()
+    })
+
+    let splitter = TestUtils.renderIntoDocument(<Splitter></Splitter>),
+        dom = ReactDOM.findDOMNode(splitter),
+        previousElementSibling = {
+            offsetHeight: 0,
+            offsetWidth: 0,
+            style: {flex: ''}
+        },
+        nextElementSibling = {
+            style: {flex: ''}
+        }
+
+    it('should handle mouseDown ', () => {
+        window.addEventListener = jest.fn()
+        splitter.onMouseDown({ pageX: 1, pageY: 2})
+        expect(splitter.state.startX).toEqual(1)
+        expect(splitter.state.startY).toEqual(2)
+        expect(window.addEventListener).toBeCalledWith('mousemove', splitter.onMouseMove)
+        expect(window.addEventListener).toBeCalledWith('mouseup', splitter.onMouseUp)
+        expect(window.addEventListener).toBeCalledWith('dragend', splitter.onDragEnd)
+    })
+
+    it('should handle dragEnd', () => {
+        window.removeEventListener = jest.fn()
+        splitter.onDragEnd()
+        expect(dom.style.transform).toEqual('')
+        expect(window.removeEventListener).toBeCalledWith('dragend', splitter.onDragEnd)
+        expect(window.removeEventListener).toBeCalledWith('mouseup', splitter.onMouseUp)
+        expect(window.removeEventListener).toBeCalledWith('mousemove', splitter.onMouseMove)
+    })
+
+    it('should handle mouseUp', () => {
+
+        Object.defineProperty(dom, 'previousElementSibling', { value: previousElementSibling })
+        Object.defineProperty(dom, 'nextElementSibling', { value: nextElementSibling })
+        splitter.onMouseUp({ pageX: 3, pageY: 4 })
+        expect(splitter.state.applied).toBeTruthy()
+        expect(nextElementSibling.style.flex).toEqual('1 1 auto')
+        expect(previousElementSibling.style.flex).toEqual('0 0 2px')
+    })
+
+    it('should handle mouseMove', () => {
+        splitter.onMouseMove({pageX: 10, pageY: 10})
+        expect(dom.style.transform).toEqual("translate(9px, 0px)")
+
+        let splitterY = TestUtils.renderIntoDocument(<Splitter axis="y"></Splitter>)
+        splitterY.onMouseMove({pageX: 10, pageY: 10})
+        expect(ReactDOM.findDOMNode(splitterY).style.transform).toEqual("translate(0px, 10px)")
+    })
+
+    it('should handle resize', () => {
+        window.setTimeout = jest.fn((event, time) => event())
+        splitter.onResize()
+        expect(window.setTimeout).toHaveBeenCalled()
+    })
+
+    it('should handle componentWillUnmount', () => {
+        splitter.componentWillUnmount()
+        expect(previousElementSibling.style.flex).toEqual('')
+        expect(nextElementSibling.style.flex).toEqual('')
+        expect(splitter.state.applied).toBeTruthy()
+    })
+
+    it('should handle reset', () => {
+        splitter.reset(false)
+        expect(splitter.state.applied).toBeFalsy()
+
+        expect(splitter.reset(true)).toEqual(undefined)
+    })
+
+})
diff --git a/web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap
new file mode 100644
index 00000000..dd70ed7a
--- /dev/null
+++ b/web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Splitter Component should render correctly 1`] = `
+<div
+  className="splitter splitter-x"
+>
+  <div
+    draggable="true"
+    onMouseDown={[Function]}
+  />
+</div>
+`;