From f3e5c35b49db114968b722652738c4cdaec705ee Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Thu, 11 May 2017 08:19:10 +0800 Subject: [PATCH 01/11] [web] Add tests for js/components/common/Button.jsx --- .../__tests__/components/common/ButtonSpec.js | 26 ++++++++++++++++ .../common/__snapshots__/ButtonSpec.js.snap | 30 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 web/src/js/__tests__/components/common/ButtonSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap diff --git a/web/src/js/__tests__/components/common/ButtonSpec.js b/web/src/js/__tests__/components/common/ButtonSpec.js new file mode 100644 index 000000000..ea05ee6e9 --- /dev/null +++ b/web/src/js/__tests__/components/common/ButtonSpec.js @@ -0,0 +1,26 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import Button from '../../../components/common/Button' + +describe('Button Component', () => { + + it('should render correctly', () => { + let button = renderer.create( + + ), + tree = button.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should be able to be disabled', () => { + let button = renderer.create( + + ), + tree = button.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap new file mode 100644 index 000000000..1d403b2d5 --- /dev/null +++ b/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button Component should be able to be disabled 1`] = ` +
+ + foo + +
+`; + +exports[`Button Component should render correctly 1`] = ` +
+ + + foo + +
+`; From f295bfd558b01edad81e7799b30e15369a22066f Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Thu, 11 May 2017 08:27:40 +0800 Subject: [PATCH 02/11] [web] Add 'react-test-renderer' dependency. --- web/package.json | 5 ++++- web/yarn.lock | 18 +++++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/web/package.json b/web/package.json index ca170a547..94b0ee603 100644 --- a/web/package.json +++ b/web/package.json @@ -18,7 +18,9 @@ "coveragePathIgnorePatterns": [ "/src/js/filt/filt.js" ], - "collectCoverageFrom" : ["src/js/**/*.{js,jsx}"] + "collectCoverageFrom": [ + "src/js/**/*.{js,jsx}" + ] }, "dependencies": { "bootstrap": "^3.3.7", @@ -29,6 +31,7 @@ "react-codemirror": "^0.3.0", "react-dom": "^15.4.2", "react-redux": "^5.0.2", + "react-test-renderer": "^15.5.4", "redux": "^3.6.0", "redux-logger": "^2.8.1", "redux-mock-store": "^1.2.3", diff --git a/web/yarn.lock b/web/yarn.lock index a2efcc5dc..602b49169 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1860,7 +1860,7 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" -fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9: +fbjs@^0.8.4, fbjs@^0.8.9: version "0.8.9" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14" dependencies: @@ -4064,7 +4064,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.0: +prop-types@^15.5.0, prop-types@~15.5.7: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" dependencies: @@ -4156,12 +4156,13 @@ react-codemirror@^0.3.0: lodash.debounce "^4.0.8" react-dom@^15.4.2: - version "15.4.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f" + version "15.5.4" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da" dependencies: - fbjs "^0.8.1" + fbjs "^0.8.9" loose-envify "^1.1.0" object-assign "^4.1.0" + prop-types "~15.5.7" react-redux@^5.0.2: version "5.0.2" @@ -4173,6 +4174,13 @@ react-redux@^5.0.2: lodash-es "^4.2.0" loose-envify "^1.1.0" +react-test-renderer@^15.5.4: + version "15.5.4" + resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.5.4.tgz#d4ebb23f613d685ea8f5390109c2d20fbf7c83bc" + dependencies: + fbjs "^0.8.9" + object-assign "^4.1.0" + react@^15.4.2: version "15.4.2" resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef" From ce15501c54a30122d2ec0877e214c6a264ba6cd3 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Thu, 11 May 2017 08:43:50 +0800 Subject: [PATCH 03/11] [web] Add tests for js/components/common/Dropdown.jsx --- .../components/common/DropdownSpec.js | 38 ++++ .../common/__snapshots__/DropdownSpec.js.snap | 162 ++++++++++++++++++ 2 files changed, 200 insertions(+) create mode 100644 web/src/js/__tests__/components/common/DropdownSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap diff --git a/web/src/js/__tests__/components/common/DropdownSpec.js b/web/src/js/__tests__/components/common/DropdownSpec.js new file mode 100644 index 000000000..c8c57ea6d --- /dev/null +++ b/web/src/js/__tests__/components/common/DropdownSpec.js @@ -0,0 +1,38 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import Dropdown, { Divider } from '../../../components/common/Dropdown' + +describe('Dropdown Component', () => { + let dropup = renderer.create( + 1 + + 2 + ), + dropdown = renderer.create( + 1 + 2 + ) + + it('should render correctly', () => { + let tree = dropup.toJSON() + expect(tree).toMatchSnapshot() + + tree = dropdown.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle open/close action', () => { + document.body.addEventListener('click', ()=>{}) + let tree = dropup.toJSON(), + e = { preventDefault: jest.fn() } + tree.children[0].props.onClick(e) + expect(tree).toMatchSnapshot() + + // click action when the state is open + tree.children[0].props.onClick(e) + + // close + document.body.click() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap new file mode 100644 index 000000000..57d4968d3 --- /dev/null +++ b/web/src/js/__tests__/components/common/__snapshots__/DropdownSpec.js.snap @@ -0,0 +1,162 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dropdown Component should handle open/close action 1`] = ` +
+ + +
+`; + +exports[`Dropdown Component should handle open/close action 2`] = ` +
+ + +
+`; + +exports[`Dropdown Component should render correctly 1`] = ` +
+ + +
+`; + +exports[`Dropdown Component should render correctly 2`] = ` + +`; From 9a7ac146540c5e8ac52b51b77de4f80f9431754c Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Thu, 11 May 2017 10:25:45 +0800 Subject: [PATCH 04/11] [web] Add tests for js/components/common/DocsLink.jsx --- .../components/common/DocsLinkSpec.js | 17 +++++++++++++++ .../common/__snapshots__/DocsLinkSpec.js.snap | 21 +++++++++++++++++++ web/src/js/components/common/DocsLink.jsx | 1 + 3 files changed, 39 insertions(+) create mode 100644 web/src/js/__tests__/components/common/DocsLinkSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap diff --git a/web/src/js/__tests__/components/common/DocsLinkSpec.js b/web/src/js/__tests__/components/common/DocsLinkSpec.js new file mode 100644 index 000000000..effed1b7a --- /dev/null +++ b/web/src/js/__tests__/components/common/DocsLinkSpec.js @@ -0,0 +1,17 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import DocsLink from '../../../components/common/DocsLink' + +describe('DocsLink Component', () => { + it('should be able to be rendered with children nodes', () => { + let docsLink = renderer.create(), + tree = docsLink.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should be able to be rendered without children nodes', () => { + let docsLink = renderer.create(), + tree = docsLink.toJSON() + expect(tree).toMatchSnapshot() + }) +}) diff --git a/web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap new file mode 100644 index 000000000..d91b77f7c --- /dev/null +++ b/web/src/js/__tests__/components/common/__snapshots__/DocsLinkSpec.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DocsLink Component should be able to be rendered with children nodes 1`] = ` + + foo + +`; + +exports[`DocsLink Component should be able to be rendered without children nodes 1`] = ` + + + +`; diff --git a/web/src/js/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx index 53c7aca84..709741331 100644 --- a/web/src/js/components/common/DocsLink.jsx +++ b/web/src/js/components/common/DocsLink.jsx @@ -1,3 +1,4 @@ +import React from "react" import PropTypes from "prop-types" DocsLink.propTypes = { From 782d564e7608fe8c208876ca4c7bc0f89cfc938a Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 12 May 2017 08:58:37 +0800 Subject: [PATCH 05/11] [web] Add tests for js/components/common/FileChooser.jsx & minor fix. --- .../components/common/FileChooserSpec.js | 38 +++++++++++++++++++ .../__snapshots__/FileChooserSpec.js.snap | 19 ++++++++++ web/src/js/components/common/FileChooser.jsx | 2 +- 3 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 web/src/js/__tests__/components/common/FileChooserSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap diff --git a/web/src/js/__tests__/components/common/FileChooserSpec.js b/web/src/js/__tests__/components/common/FileChooserSpec.js new file mode 100644 index 000000000..7d031a38e --- /dev/null +++ b/web/src/js/__tests__/components/common/FileChooserSpec.js @@ -0,0 +1,38 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import FileChooser from '../../../components/common/FileChooser' + +describe('FileChooser Component', () => { + let openFileFunc = jest.fn(), + createNodeMock = () => { return { click: jest.fn() } }, + fileChooser = renderer.create( + + , { createNodeMock }) + //[test refs with react-test-renderer](https://github.com/facebook/react/issues/7371) + + it('should render correctly', () => { + let tree = fileChooser.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle click action', () => { + let tree = fileChooser.toJSON(), + mockEvent = { + preventDefault: jest.fn(), + target: { + files: [ "foo", "bar" ] + } + } + tree.children[1].props.onChange(mockEvent) + expect(openFileFunc).toBeCalledWith("foo") + tree.props.onClick() + // without files + mockEvent = { + ...mockEvent, + target: { files: [ ]} + } + openFileFunc.mockClear() + tree.children[1].props.onChange(mockEvent) + expect(openFileFunc).not.toBeCalled() + }) +}) diff --git a/web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap new file mode 100644 index 000000000..5f0b3cf30 --- /dev/null +++ b/web/src/js/__tests__/components/common/__snapshots__/FileChooserSpec.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FileChooser Component should render correctly 1`] = ` + + + + +`; diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx index f4607c8b5..b0bf4d8d3 100644 --- a/web/src/js/components/common/FileChooser.jsx +++ b/web/src/js/components/common/FileChooser.jsx @@ -21,7 +21,7 @@ export default function FileChooser({ icon, text, className, title, onOpenFile } ref={ref => fileInput = ref} className="hidden" type="file" - onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput = "";}} + onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0])}} /> ) From 2b5a300284b3b15c08f51f0aa3948c1f6465929f Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 12 May 2017 09:05:06 +0800 Subject: [PATCH 06/11] [web] Add tests for js/components/common/ToggleButton.jsx --- .../components/common/ToggleButtonSpec.js | 26 +++++++++++++++++++ .../__snapshots__/ToggleButtonSpec.js.snap | 14 ++++++++++ 2 files changed, 40 insertions(+) create mode 100644 web/src/js/__tests__/components/common/ToggleButtonSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap diff --git a/web/src/js/__tests__/components/common/ToggleButtonSpec.js b/web/src/js/__tests__/components/common/ToggleButtonSpec.js new file mode 100644 index 000000000..2188da823 --- /dev/null +++ b/web/src/js/__tests__/components/common/ToggleButtonSpec.js @@ -0,0 +1,26 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import ToggleButton from '../../../components/common/ToggleButton' + +describe('ToggleButton Component', () => { + let mockFunc = jest.fn() + + it('should render correctly', () => { + let checkedButton = renderer.create( + + text + ), + tree = checkedButton.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle click action', () => { + let uncheckButton = renderer.create( + + text + ), + tree = uncheckButton.toJSON() + tree.props.onClick() + expect(mockFunc).toBeCalled() + }) +}) diff --git a/web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap new file mode 100644 index 000000000..f468d39fa --- /dev/null +++ b/web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToggleButton Component should render correctly 1`] = ` +
+ +   + foo +
+`; From ace67b5a870e57cee51bd677a3573453c2181470 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Fri, 12 May 2017 09:07:28 +0800 Subject: [PATCH 07/11] [web] Add tests for js/components/common/ToggleInputButton.jsx --- .../common/ToggleInputButtonSpec.js | 43 +++++++++++++++++++ .../ToggleInputButtonSpec.js.snap | 31 +++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 web/src/js/__tests__/components/common/ToggleInputButtonSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap diff --git a/web/src/js/__tests__/components/common/ToggleInputButtonSpec.js b/web/src/js/__tests__/components/common/ToggleInputButtonSpec.js new file mode 100644 index 000000000..39e555cdb --- /dev/null +++ b/web/src/js/__tests__/components/common/ToggleInputButtonSpec.js @@ -0,0 +1,43 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import ToggleInputButton from '../../../components/common/ToggleInputButton' +import { Key } from '../../../utils' + +describe('ToggleInputButton Component', () => { + let mockFunc = jest.fn(), + toggleInputButton = undefined, + tree = undefined + + it('should render correctly', () => { + toggleInputButton = renderer.create( + text) + tree = toggleInputButton.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle keydown and click action', () => { + toggleInputButton = renderer.create( + text) + tree = toggleInputButton.toJSON() + let mockEvent = { + keyCode: Key.ENTER, + stopPropagation: jest.fn() + } + + tree.children[1].props.onKeyDown(mockEvent) + expect(mockFunc).toBeCalledWith("txt") + + tree.children[0].props.onClick() + expect(mockFunc).toBeCalledWith("txt") + }) + + it('should update state onChange', () => { + // trigger onChange + tree.children[1].props.onChange({ target: { value: "foo" }}) + // update the tree + tree = toggleInputButton.toJSON() + expect(tree.children[1].props.value).toEqual("foo") + }) +}) diff --git a/web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap new file mode 100644 index 000000000..b8d801772 --- /dev/null +++ b/web/src/js/__tests__/components/common/__snapshots__/ToggleInputButtonSpec.js.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToggleInputButton Component should render correctly 1`] = ` +
+ +
+ +   + foo +
+ + +
+`; From 5c5f308a24f9d936f095277aff565e0806151778 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Sat, 13 May 2017 21:01:59 +0800 Subject: [PATCH 08/11] [web] Minor fix for FileChooser.jsx --- web/src/js/components/common/FileChooser.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx index b0bf4d8d3..0b14a87e8 100644 --- a/web/src/js/components/common/FileChooser.jsx +++ b/web/src/js/components/common/FileChooser.jsx @@ -21,7 +21,7 @@ export default function FileChooser({ icon, text, className, title, onOpenFile } ref={ref => fileInput = ref} className="hidden" type="file" - onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0])}} + onChange={e => { e.preventDefault(); if(e.target.files.length > 0) onOpenFile(e.target.files[0]); fileInput.value="";}} /> ) From 801f78f3ed68ba53364383e2bc8cc2ffa3b2f24d Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 15 May 2017 10:08:48 +0800 Subject: [PATCH 09/11] [web] Add tests for js/components/common/Splitter.jsx --- .../components/common/SplitterSpec.js | 84 +++++++++++++++++++ .../common/__snapshots__/SplitterSpec.js.snap | 12 +++ 2 files changed, 96 insertions(+) create mode 100644 web/src/js/__tests__/components/common/SplitterSpec.js create mode 100644 web/src/js/__tests__/components/common/__snapshots__/SplitterSpec.js.snap 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 000000000..9ec483504 --- /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(), + tree = splitter.toJSON() + expect(tree).toMatchSnapshot() + }) + + let splitter = TestUtils.renderIntoDocument(), + 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() + 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 000000000..dd70ed7a7 --- /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`] = ` +
+
+
+`; From 6757eda23a8a927d8ad2228fe64e300298d5d57e Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 15 May 2017 16:44:02 +0800 Subject: [PATCH 10/11] [web] Add tests for js/components/helpers/VirtualScroll.js --- .../components/helpers/VirtualScrollSpec.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 web/src/js/__tests__/components/helpers/VirtualScrollSpec.js diff --git a/web/src/js/__tests__/components/helpers/VirtualScrollSpec.js b/web/src/js/__tests__/components/helpers/VirtualScrollSpec.js new file mode 100644 index 000000000..8081e90da --- /dev/null +++ b/web/src/js/__tests__/components/helpers/VirtualScrollSpec.js @@ -0,0 +1,21 @@ +import { calcVScroll } from '../../../components/helpers/VirtualScroll' + +describe('VirtualScroll', () => { + + it('should return default state without options', () => { + expect(calcVScroll()).toEqual({start: 0, end: 0, paddingTop: 0, paddingBottom: 0}) + }) + + it('should calculate position without itemHeights', () => { + expect(calcVScroll({itemCount: 0, rowHeight: 32, viewportHeight: 400, viewportTop: 0})).toEqual({ + start: 0, end: 0, paddingTop: 0, paddingBottom: 0 + }) + }) + + it('should calculate position with itemHeights', () => { + expect(calcVScroll({itemCount: 5, itemHeights: [100, 100, 100, 100, 100], + viewportHeight: 300, viewportTop: 0})).toEqual({ + start: 0, end: 4, paddingTop: 0, paddingBottom: 100 + }) + }) +}) From c327ae853c8e33c50f575fe3589aa1bdda64ba19 Mon Sep 17 00:00:00 2001 From: Matthew Shao Date: Mon, 15 May 2017 17:55:06 +0800 Subject: [PATCH 11/11] [web] Add tests for js/components/helpers/AutoScroll.js --- .../components/helpers/AutoScrollSpec.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 web/src/js/__tests__/components/helpers/AutoScrollSpec.js diff --git a/web/src/js/__tests__/components/helpers/AutoScrollSpec.js b/web/src/js/__tests__/components/helpers/AutoScrollSpec.js new file mode 100644 index 000000000..18a3d669e --- /dev/null +++ b/web/src/js/__tests__/components/helpers/AutoScrollSpec.js @@ -0,0 +1,41 @@ +import React from "react" +import ReactDOM from "react-dom" +import AutoScroll from '../../../components/helpers/AutoScroll' +import { calcVScroll } from '../../../components/helpers/VirtualScroll' +import TestUtils from 'react-dom/test-utils' + +describe('Autoscroll', () => { + let mockFn = jest.fn() + class tComponent extends React.Component { + constructor(props, context){ + super(props, context) + this.state = { vScroll: calcVScroll() } + } + + componentWillUpdate() { + mockFn("foo") + } + + componentDidUpdate() { + mockFn("bar") + } + + render() { + return (

foo

) + } + } + + it('should update component', () => { + let Foo = AutoScroll(tComponent), + autoScroll = TestUtils.renderIntoDocument(), + viewport = ReactDOM.findDOMNode(autoScroll) + viewport.scrollTop = 10 + Object.defineProperty(viewport, "scrollHeight", { value: 10, writable: true }) + autoScroll.componentWillUpdate() + expect(mockFn).toBeCalledWith("foo") + + Object.defineProperty(viewport, "scrollHeight", { value: 0, writable: true }) + autoScroll.componentDidUpdate() + expect(mockFn).toBeCalledWith("bar") + }) +})