diff options
Diffstat (limited to 'web/src/js')
18 files changed, 625 insertions, 1 deletions
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 00000000..ea05ee6e --- /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( + <Button className="classname" onClick={() => "onclick"} title="title" icon="icon"> + <a>foo</a> + </Button> + ), + tree = button.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should be able to be disabled', () => { + let button = renderer.create( + <Button className="classname" onClick={() => "onclick"} disabled="true" children="children"> + <a>foo</a> + </Button> + ), + tree = button.toJSON() + expect(tree).toMatchSnapshot() + }) +}) 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 00000000..effed1b7 --- /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(<DocsLink children="foo" resource="bar"></DocsLink>), + tree = docsLink.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should be able to be rendered without children nodes', () => { + let docsLink = renderer.create(<DocsLink resource="bar"></DocsLink>), + tree = docsLink.toJSON() + expect(tree).toMatchSnapshot() + }) +}) 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 00000000..c8c57ea6 --- /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(<Dropdown dropup btnClass="foo"> + <a href="#">1</a> + <Divider/> + <a href="#">2</a> + </Dropdown>), + dropdown = renderer.create(<Dropdown btnClass="foo"> + <a href="#">1</a> + <a href="#">2</a> + </Dropdown>) + + 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/FileChooserSpec.js b/web/src/js/__tests__/components/common/FileChooserSpec.js new file mode 100644 index 00000000..7d031a38 --- /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( + <FileChooser className="foo" title="bar" onOpenFile={ openFileFunc }/> + , { 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/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/ToggleButtonSpec.js b/web/src/js/__tests__/components/common/ToggleButtonSpec.js new file mode 100644 index 00000000..2188da82 --- /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( + <ToggleButton checked={true} onToggle={mockFunc} text="foo"> + text + </ToggleButton>), + tree = checkedButton.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle click action', () => { + let uncheckButton = renderer.create( + <ToggleButton checked={false} onToggle={mockFunc} text="foo"> + text + </ToggleButton>), + tree = uncheckButton.toJSON() + tree.props.onClick() + expect(mockFunc).toBeCalled() + }) +}) 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 00000000..39e555cd --- /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( + <ToggleInputButton checked={true} name="foo" onToggleChanged={mockFunc} + placeholder="bar">text</ToggleInputButton>) + tree = toggleInputButton.toJSON() + expect(tree).toMatchSnapshot() + }) + + it('should handle keydown and click action', () => { + toggleInputButton = renderer.create( + <ToggleInputButton checked={false} name="foo" onToggleChanged={mockFunc} + placeholder="bar" txt="txt">text</ToggleInputButton>) + 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__/ButtonSpec.js.snap b/web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap new file mode 100644 index 00000000..1d403b2d --- /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`] = ` +<div + className="classname btn btn-default" + disabled="true" + onClick={false} + title={undefined} +> + <a> + foo + </a> +</div> +`; + +exports[`Button Component should render correctly 1`] = ` +<div + className="classname btn btn-default" + disabled={undefined} + onClick={[Function]} + title="title" +> + <i + className="fa fa-fw icon" + /> + <a> + foo + </a> +</div> +`; 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 00000000..d91b77f7 --- /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`] = ` +<a + href="http://docs.mitmproxy.org/en/stable/bar" + target="_blank" +> + foo +</a> +`; + +exports[`DocsLink Component should be able to be rendered without children nodes 1`] = ` +<a + href="http://docs.mitmproxy.org/en/stable/bar" + target="_blank" +> + <i + className="fa fa-question-circle" + /> +</a> +`; 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 00000000..57d4968d --- /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`] = ` +<div + className="dropup" +> + <a + className="foo" + href="#" + onClick={[Function]} + /> + <ul + className="dropdown-menu" + role="menu" + > + <li> + + <a + href="#" + > + 1 + </a> + + </li> + <li> + + <hr + className="divider" + /> + + </li> + <li> + + <a + href="#" + > + 2 + </a> + + </li> + </ul> +</div> +`; + +exports[`Dropdown Component should handle open/close action 2`] = ` +<div + className="dropup" +> + <a + className="foo" + href="#" + onClick={[Function]} + /> + <ul + className="dropdown-menu" + role="menu" + > + <li> + + <a + href="#" + > + 1 + </a> + + </li> + <li> + + <hr + className="divider" + /> + + </li> + <li> + + <a + href="#" + > + 2 + </a> + + </li> + </ul> +</div> +`; + +exports[`Dropdown Component should render correctly 1`] = ` +<div + className="dropup" +> + <a + className="foo" + href="#" + onClick={[Function]} + /> + <ul + className="dropdown-menu" + role="menu" + > + <li> + + <a + href="#" + > + 1 + </a> + + </li> + <li> + + <hr + className="divider" + /> + + </li> + <li> + + <a + href="#" + > + 2 + </a> + + </li> + </ul> +</div> +`; + +exports[`Dropdown Component should render correctly 2`] = ` +<div + className="dropdown" +> + <a + className="foo" + href="#" + onClick={[Function]} + /> + <ul + className="dropdown-menu" + role="menu" + > + <li> + + <a + href="#" + > + 1 + </a> + + </li> + <li> + + <a + href="#" + > + 2 + </a> + + </li> + </ul> +</div> +`; 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 00000000..5f0b3cf3 --- /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`] = ` +<a + className="foo" + href="#" + onClick={[Function]} + title="bar" +> + <i + className="fa fa-fw undefined" + /> + <input + className="hidden" + onChange={[Function]} + type="file" + /> +</a> +`; 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> +`; 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 00000000..f468d39f --- /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`] = ` +<div + className="btn btn-toggle btn-primary" + onClick={[Function]} +> + <i + className="fa fa-fw fa-check-square-o" + /> + + foo +</div> +`; 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 00000000..b8d80177 --- /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`] = ` +<div + className="input-group toggle-input-btn" +> + <span + className="input-group-btn" + onClick={[Function]} + > + <div + className="btn btn-primary" + > + <span + className="fa fa-check-square-o" + /> + + foo + </div> + </span> + <input + className="form-control" + disabled={true} + onChange={[Function]} + onKeyDown={[Function]} + placeholder="bar" + type="text" + value="" + /> +</div> +`; 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 00000000..18a3d669 --- /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 (<p>foo</p>) + } + } + + it('should update component', () => { + let Foo = AutoScroll(tComponent), + autoScroll = TestUtils.renderIntoDocument(<Foo></Foo>), + 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") + }) +}) 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 00000000..8081e90d --- /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 + }) + }) +}) diff --git a/web/src/js/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx index 53c7aca8..70974133 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 = { diff --git a/web/src/js/components/common/FileChooser.jsx b/web/src/js/components/common/FileChooser.jsx index f4607c8b..0b14a87e 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]); fileInput.value="";}} /> </a> ) |