diff options
| -rw-r--r-- | web/src/js/__tests__/components/ValueEditor/ValueEditorSpec.js | 155 | ||||
| -rw-r--r-- | web/src/js/__tests__/components/ValueEditor/__snapshots__/ValueEditorSpec.js.snap | 21 |
2 files changed, 176 insertions, 0 deletions
diff --git a/web/src/js/__tests__/components/ValueEditor/ValueEditorSpec.js b/web/src/js/__tests__/components/ValueEditor/ValueEditorSpec.js new file mode 100644 index 00000000..9b2796cb --- /dev/null +++ b/web/src/js/__tests__/components/ValueEditor/ValueEditorSpec.js @@ -0,0 +1,155 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import TestUtils from 'react-dom/test-utils' +import ValueEditor from '../../../components/ValueEditor/ValueEditor' +import { Key } from '../../../utils' + +describe('ValueEditor Component', () => { + + let mockFn = jest.fn() + it ('should render correctly', () => { + let valueEditor = renderer.create( + <ValueEditor content="foo" onDone={mockFn}/> + ), + tree = valueEditor.toJSON() + expect(tree).toMatchSnapshot() + }) + + let valueEditor = TestUtils.renderIntoDocument( + <ValueEditor content="<script>foo</script>" onDone={mockFn}/> + ) + it('should handle this.blur', () => { + valueEditor.input.blur = jest.fn() + valueEditor.blur() + expect(valueEditor.input.blur).toHaveBeenCalled() + }) + + it('should handle reset', () => { + valueEditor.reset() + expect(valueEditor.input.innerHTML).toEqual( + _.escape("<script>foo</script>") + ) + }) + + it('should handle paste', () => { + let mockEvent = { + preventDefault: jest.fn(), + clipboardData: { getData: (t) => "foo content"} + } + document.execCommand = jest.fn() + valueEditor.onPaste(mockEvent) + expect(document.execCommand).toBeCalledWith('insertHTML', false, "foo content") + }) + + it('should handle mouseDown', () => { + window.addEventListener = jest.fn() + valueEditor.onMouseDown({}) + expect(valueEditor._mouseDown).toBeTruthy() + expect(window.addEventListener).toBeCalledWith('mouseup', valueEditor.onMouseUp) + }) + + it('should handle mouseUp', () => { + window.removeEventListener = jest.fn() + valueEditor.onMouseUp() + expect(window.removeEventListener).toBeCalledWith('mouseup', valueEditor.onMouseUp) + }) + + it('should handle focus', () => { + let mockEvent = { clientX: 1, clientY: 2 }, + mockSelection = { + rangeCount: 1, + getRangeAt: jest.fn( (index) => {return { selectNodeContents: jest.fn() }}), + removeAllRanges: jest.fn(), + addRange: jest.fn() + }, + clearState = (v) => { + v._mouseDown = false + v._ignore_events = false + v.state.editable = false + } + window.getSelection = () => mockSelection + + // return undefined when mouse down + valueEditor.onMouseDown() + expect(valueEditor.onFocus(mockEvent)).toEqual(undefined) + valueEditor.onMouseUp() + + // sel.rangeCount > 0 + valueEditor.onFocus(mockEvent) + expect(mockSelection.getRangeAt).toBeCalledWith(0) + expect(valueEditor.state.editable).toBeTruthy() + expect(mockSelection.removeAllRanges).toBeCalled() + expect(mockSelection.addRange).toBeCalled() + clearState(valueEditor) + + // document.caretPositionFromPoint + mockSelection.rangeCount = 0 + let mockRange = { setStart: jest.fn(), selectNodeContents: jest.fn() } + + document.caretPositionFromPoint = jest.fn((x, y) => { + return { offsetNode: 0, offset: x + y} + }) + document.createRange = jest.fn(() => mockRange) + valueEditor.onFocus(mockEvent) + expect(mockRange.setStart).toBeCalledWith(0, 3) + clearState(valueEditor) + document.caretPositionFromPoint = null + + //document.caretRangeFromPoint + document.caretRangeFromPoint = jest.fn(() => mockRange) + valueEditor.onFocus(mockEvent) + expect(document.caretRangeFromPoint).toBeCalledWith(1, 2) + clearState(valueEditor) + document.caretRangeFromPoint = null + + //else + valueEditor.onFocus(mockEvent) + expect(mockRange.selectNodeContents).toBeCalledWith(valueEditor.input) + clearState(valueEditor) + }) + + it('should handle click', () => { + valueEditor.onMouseUp = jest.fn() + valueEditor.onFocus = jest.fn() + valueEditor.onClick('foo') + expect(valueEditor.onMouseUp).toBeCalled() + expect(valueEditor.onFocus).toBeCalledWith('foo') + }) + + it('should handle blur', () => { + // return undefined + valueEditor._ignore_events = true + expect(valueEditor.onBlur({})).toEqual(undefined) + // else + valueEditor._ignore_events = false + valueEditor.onBlur({}) + expect(valueEditor.state.editable).toBeFalsy() + expect(valueEditor.props.onDone).toBeCalledWith(valueEditor.input.textContent) + }) + + it('should handle key down', () => { + let mockKeyEvent = (keyCode, shiftKey=false) => { + return { + keyCode: keyCode, + shiftKey: shiftKey, + stopPropagation: jest.fn(), + preventDefault: jest.fn() + } + } + valueEditor.reset = jest.fn() + valueEditor.blur = jest.fn() + valueEditor.onKeyDown(mockKeyEvent(Key.ESC)) + expect(valueEditor.reset).toBeCalled() + expect(valueEditor.blur).toBeCalled() + valueEditor.blur.mockReset() + + valueEditor.onKeyDown(mockKeyEvent(Key.ENTER)) + expect(valueEditor.blur).toBeCalled() + + valueEditor.onKeyDown(mockKeyEvent(Key.SPACE)) + }) + + it('should handle input', () => { + valueEditor.onInput() + }) +}) diff --git a/web/src/js/__tests__/components/ValueEditor/__snapshots__/ValueEditorSpec.js.snap b/web/src/js/__tests__/components/ValueEditor/__snapshots__/ValueEditorSpec.js.snap new file mode 100644 index 00000000..91e8ee84 --- /dev/null +++ b/web/src/js/__tests__/components/ValueEditor/__snapshots__/ValueEditorSpec.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ValueEditor Component should render correctly 1`] = ` +<div + className="inline-input editable" + contentEditable={undefined} + dangerouslySetInnerHTML={ + Object { + "__html": "foo", + } + } + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onInput={[Function]} + onKeyDown={[Function]} + onMouseDown={[Function]} + onPaste={[Function]} + tabIndex={0} +/> +`; |