|
1 | | -import noop from 'lodash-es/noop'; |
| 1 | +import CodeMirror from 'codemirror'; |
| 2 | +import findLast from 'lodash-es/findLast'; |
| 3 | +import last from 'lodash-es/last'; |
2 | 4 | import React from 'react'; |
3 | 5 | import ShallowRenderer from 'react-test-renderer/shallow'; |
| 6 | +import TestRenderer, {act} from 'react-test-renderer'; |
4 | 7 |
|
5 | 8 | import CodeMirrorEditor from '../CodeMirrorEditor'; |
6 | 9 |
|
7 | | -const projectKey = '0'; |
8 | | -const source = '<!doctype html>\n<html>\n</html>'; |
| 10 | +const DEFAULT_PROPS = { |
| 11 | + errors: [], |
| 12 | + language: 'html', |
| 13 | + projectKey: '0', |
| 14 | + source: '<!doctype html>\n<html>\n</html>', |
| 15 | + onAutoFormat: jest.fn(), |
| 16 | + onInput: jest.fn(), |
| 17 | + onRequestedLineFocused: jest.fn(), |
| 18 | +}; |
9 | 19 |
|
10 | | -function renderComponent(props = {}) { |
11 | | - const renderer = new ShallowRenderer(); |
12 | | - |
13 | | - return renderer.render( |
| 20 | +function buildComponent(props = {}) { |
| 21 | + return ( |
14 | 22 | <CodeMirrorEditor |
15 | | - errors={[]} |
16 | | - language="html" |
17 | | - projectKey={projectKey} |
18 | | - source={source} |
19 | | - onAutoFormat={noop} |
20 | | - onInput={noop} |
21 | | - onRequestedLineFocused={noop} |
| 23 | + {...DEFAULT_PROPS} |
22 | 24 | {...props} |
23 | | - />, |
| 25 | + /> |
24 | 26 | ); |
25 | 27 | } |
26 | 28 |
|
27 | | -test('default', async() => { |
28 | | - const {type, props: {className}} = renderComponent(); |
| 29 | +function shallowRenderComponent(props = {}) { |
| 30 | + return new ShallowRenderer().render(buildComponent(props)); |
| 31 | +} |
| 32 | + |
| 33 | +function renderComponent(props = {}) { |
| 34 | + const container = {__stub: 'editors__codemirror-container'}; |
| 35 | + let component; |
| 36 | + act(() => { |
| 37 | + component = TestRenderer.create(buildComponent(props), { |
| 38 | + createNodeMock(element) { |
| 39 | + if ( |
| 40 | + !/\beditors__codemirror-container\b/u.test(element.props.className) |
| 41 | + ) { |
| 42 | + throw new Error(`Got unexpected ref: ${JSON.stringify(element)}`); |
| 43 | + } |
| 44 | + return container; |
| 45 | + }, |
| 46 | + }); |
| 47 | + }); |
| 48 | + return {component, container}; |
| 49 | +} |
29 | 50 |
|
30 | | - expect(type).toBe('div'); |
31 | | - expect(className).toBe('editors__codemirror-container'); |
| 51 | +describe('large text', () => { |
| 52 | + test('not on by default', () => { |
| 53 | + const {props: {className}} = shallowRenderComponent(); |
| 54 | + |
| 55 | + expect(className.split(' ')).not. |
| 56 | + toContain('editors__codemirror-container_large-text'); |
| 57 | + }); |
| 58 | + |
| 59 | + test('on if prop is true', () => { |
| 60 | + const {props: {className}} = |
| 61 | + shallowRenderComponent({textSizeIsLarge: true}); |
| 62 | + |
| 63 | + expect(className.split(' ')). |
| 64 | + toContain('editors__codemirror-container_large-text'); |
| 65 | + }); |
32 | 66 | }); |
33 | 67 |
|
34 | | -test('large text', () => { |
35 | | - const {props: {className}} = renderComponent({textSizeIsLarge: true}); |
36 | | - expect(className.split(' ')). |
37 | | - toContain('editors__codemirror-container_large-text'); |
| 68 | +describe('codemirror editor', () => { |
| 69 | + let component, container, editor; |
| 70 | + beforeEach(() => { |
| 71 | + ({container, component} = renderComponent()); |
| 72 | + editor = last(CodeMirror.mock.results).value; |
| 73 | + }); |
| 74 | + |
| 75 | + function updateComponent(props = {}) { |
| 76 | + act(() => { |
| 77 | + component.update(buildComponent(props)); |
| 78 | + }); |
| 79 | + } |
| 80 | + |
| 81 | + test('initial editor setup', () => { |
| 82 | + expect(CodeMirror).toHaveBeenLastCalledWith(container, expect.any(Object)); |
| 83 | + expect(editor.setSize).toHaveBeenLastCalledWith('100%', '100%'); |
| 84 | + |
| 85 | + expect(CodeMirror.Doc).toHaveBeenLastCalledWith('', 'htmlmixed'); |
| 86 | + expect(editor.swapDoc). |
| 87 | + toHaveBeenLastCalledWith(last(CodeMirror.Doc.mock.instances)); |
| 88 | + |
| 89 | + expect(editor.setValue). |
| 90 | + toHaveBeenLastCalledWith(DEFAULT_PROPS.source); |
| 91 | + }); |
| 92 | + |
| 93 | + test('swapping docs', () => { |
| 94 | + updateComponent({projectKey: '1'}); |
| 95 | + const [doc0, doc1] = CodeMirror.Doc.mock.instances; |
| 96 | + expect(editor.swapDoc).toHaveBeenLastCalledWith(doc1); |
| 97 | + |
| 98 | + updateComponent(); |
| 99 | + expect(editor.swapDoc).toHaveBeenLastCalledWith(doc0); |
| 100 | + |
| 101 | + editor.swapDoc.mockClear(); |
| 102 | + component.update(buildComponent()); |
| 103 | + expect(editor.swapDoc).not.toHaveBeenCalled(); |
| 104 | + }); |
| 105 | + |
| 106 | + test('updating source', () => { |
| 107 | + const newSource = |
| 108 | + DEFAULT_PROPS.source.replace('<html>', '<html><body></body>'); |
| 109 | + updateComponent({source: newSource}); |
| 110 | + expect(editor.setValue).toHaveBeenLastCalledWith(newSource); |
| 111 | + |
| 112 | + editor.setValue.mockClear(); |
| 113 | + updateComponent({source: newSource}); |
| 114 | + expect(editor.setValue).not.toHaveBeenCalled(); |
| 115 | + }); |
| 116 | + |
| 117 | + test('change listener', () => { |
| 118 | + const [, handleChanges] = findLast(editor.on.mock.calls, {0: 'changes'}); |
| 119 | + expect(DEFAULT_PROPS.onInput).not.toHaveBeenCalled(); |
| 120 | + |
| 121 | + const newSource = |
| 122 | + DEFAULT_PROPS.source.replace('<html>', '<html>d'); |
| 123 | + editor.getValue.mockReturnValueOnce(newSource); |
| 124 | + handleChanges(null, [{origin: '+input'}]); |
| 125 | + expect(DEFAULT_PROPS.onInput).toHaveBeenLastCalledWith(newSource); |
| 126 | + |
| 127 | + DEFAULT_PROPS.onInput.mockClear(); |
| 128 | + handleChanges(null, [{origin: 'setValue'}]); |
| 129 | + expect(DEFAULT_PROPS.onInput).not.toHaveBeenCalled(); |
| 130 | + }); |
38 | 131 | }); |
0 commit comments