|
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 | +}; |
| 19 | + |
| 20 | +function buildComponent(props = {}) { |
| 21 | + return <CodeMirrorEditor {...DEFAULT_PROPS} {...props} />; |
| 22 | +} |
| 23 | + |
| 24 | +function shallowRenderComponent(props = {}) { |
| 25 | + return new ShallowRenderer().render(buildComponent(props)); |
| 26 | +} |
9 | 27 |
|
10 | 28 | function renderComponent(props = {}) { |
11 | | - const renderer = new ShallowRenderer(); |
12 | | - |
13 | | - return renderer.render( |
14 | | - <CodeMirrorEditor |
15 | | - errors={[]} |
16 | | - language="html" |
17 | | - projectKey={projectKey} |
18 | | - source={source} |
19 | | - onAutoFormat={noop} |
20 | | - onInput={noop} |
21 | | - onRequestedLineFocused={noop} |
22 | | - {...props} |
23 | | - />, |
24 | | - ); |
| 29 | + const container = {__stub: 'editors__codemirror-container'}; |
| 30 | + let component; |
| 31 | + act(() => { |
| 32 | + component = TestRenderer.create(buildComponent(props), { |
| 33 | + createNodeMock(element) { |
| 34 | + if ( |
| 35 | + !/\beditors__codemirror-container\b/u.test(element.props.className) |
| 36 | + ) { |
| 37 | + throw new Error(`Got unexpected ref: ${JSON.stringify(element)}`); |
| 38 | + } |
| 39 | + return container; |
| 40 | + }, |
| 41 | + }); |
| 42 | + }); |
| 43 | + return {component, container}; |
25 | 44 | } |
26 | 45 |
|
27 | | -test('default', async () => { |
28 | | - const { |
29 | | - type, |
30 | | - props: {className}, |
31 | | - } = renderComponent(); |
| 46 | +describe('large text', () => { |
| 47 | + test('not on by default', () => { |
| 48 | + const { |
| 49 | + props: {className}, |
| 50 | + } = shallowRenderComponent(); |
| 51 | + |
| 52 | + expect(className.split(' ')).not.toContain( |
| 53 | + 'editors__codemirror-container_large-text', |
| 54 | + ); |
| 55 | + }); |
32 | 56 |
|
33 | | - expect(type).toBe('div'); |
34 | | - expect(className).toBe('editors__codemirror-container'); |
| 57 | + test('on if prop is true', () => { |
| 58 | + const { |
| 59 | + props: {className}, |
| 60 | + } = shallowRenderComponent({textSizeIsLarge: true}); |
| 61 | + |
| 62 | + expect(className.split(' ')).toContain( |
| 63 | + 'editors__codemirror-container_large-text', |
| 64 | + ); |
| 65 | + }); |
35 | 66 | }); |
36 | 67 |
|
37 | | -test('large text', () => { |
38 | | - const { |
39 | | - props: {className}, |
40 | | - } = renderComponent({textSizeIsLarge: true}); |
41 | | - expect(className.split(' ')).toContain( |
42 | | - 'editors__codemirror-container_large-text', |
43 | | - ); |
| 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).toHaveBeenLastCalledWith( |
| 87 | + last(CodeMirror.Doc.mock.instances), |
| 88 | + ); |
| 89 | + |
| 90 | + expect(editor.setValue).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 = DEFAULT_PROPS.source.replace( |
| 108 | + '<html>', |
| 109 | + '<html><body></body>', |
| 110 | + ); |
| 111 | + updateComponent({source: newSource}); |
| 112 | + expect(editor.setValue).toHaveBeenLastCalledWith(newSource); |
| 113 | + |
| 114 | + editor.setValue.mockClear(); |
| 115 | + updateComponent({source: newSource}); |
| 116 | + expect(editor.setValue).not.toHaveBeenCalled(); |
| 117 | + }); |
| 118 | + |
| 119 | + test('change listener', () => { |
| 120 | + const [, handleChanges] = findLast(editor.on.mock.calls, {0: 'changes'}); |
| 121 | + expect(DEFAULT_PROPS.onInput).not.toHaveBeenCalled(); |
| 122 | + |
| 123 | + const newSource = DEFAULT_PROPS.source.replace('<html>', '<html>d'); |
| 124 | + editor.getValue.mockReturnValueOnce(newSource); |
| 125 | + handleChanges(null, [{origin: '+input'}]); |
| 126 | + expect(DEFAULT_PROPS.onInput).toHaveBeenLastCalledWith(newSource); |
| 127 | + |
| 128 | + DEFAULT_PROPS.onInput.mockClear(); |
| 129 | + handleChanges(null, [{origin: 'setValue'}]); |
| 130 | + expect(DEFAULT_PROPS.onInput).not.toHaveBeenCalled(); |
| 131 | + }); |
44 | 132 | }); |
0 commit comments