1 import React from 'react'; |
1 import React from 'react'; |
2 import { shallow, mount } from 'enzyme'; |
2 import { shallow, mount } from 'enzyme'; |
3 import NoteInput from '../NoteInput'; |
3 import NoteInput from '../NoteInput'; |
|
4 import { Plain } from 'slate' |
4 |
5 |
5 const setup = (propOverrides, doMount=false) => { |
6 const setup = (propOverrides, doMount=false) => { |
6 const props = Object.assign({ |
7 const props = Object.assign({ |
7 addNote: jest.fn() |
8 addNote: jest.fn() |
8 }, propOverrides); |
9 }, propOverrides); |
9 |
10 |
10 const renderFn = doMount?mount:shallow; |
11 const renderFn = doMount?mount:shallow; |
11 const wrapper = renderFn(<NoteInput {...props} />); |
12 const wrapper = renderFn(<NoteInput {...props} />); |
12 |
13 |
13 return { |
14 return { |
14 props, |
15 props, |
15 wrapper, |
16 wrapper, |
16 } |
17 } |
17 }; |
18 }; |
18 |
19 |
|
20 // Element.focus() doesn't work |
|
21 // @see https://stackoverflow.com/questions/42213522/mocking-document-createrange-for-jest |
19 beforeAll(() => { |
22 beforeAll(() => { |
20 window.getSelection = () => { |
23 window.getSelection = () => { |
21 return { |
24 return { |
22 removeAllRanges: () => {} |
25 removeAllRanges: () => {}, |
|
26 addRange: () => {} |
|
27 }; |
|
28 }; |
|
29 |
|
30 window.Range = function Range() {}; |
|
31 |
|
32 const createContextualFragment = (html) => { |
|
33 const div = document.createElement('div'); |
|
34 div.innerHTML = html; |
|
35 return div.children[0]; // so hokey it's not even funny |
|
36 }; |
|
37 |
|
38 Range.prototype.createContextualFragment = (html) => createContextualFragment(html); |
|
39 |
|
40 // HACK: Polyfil that allows codemirror to render in a JSDOM env. |
|
41 window.document.createRange = function createRange() { |
|
42 return { |
|
43 setEnd: () => {}, |
|
44 setStart: () => {}, |
|
45 getBoundingClientRect: () => { |
|
46 return { right: 0 }; |
|
47 }, |
|
48 compareBoundaryPoints: () => { |
|
49 return 0; |
|
50 }, |
|
51 getClientRects: () => [], |
|
52 createContextualFragment, |
23 }; |
53 }; |
24 }; |
54 }; |
25 }); |
55 }); |
26 |
56 |
27 describe('Notes container Component', () => { |
57 describe('Notes container Component', () => { |
28 test('render', () => { |
58 test('render', () => { |
29 const { wrapper } = setup(); |
59 const { wrapper } = setup(); |
30 expect(wrapper.exists()).toBe(true) |
60 expect(wrapper.exists()).toBe(true) |
31 }); |
61 }); |
32 |
62 |
33 test('click button', () => { |
63 test('button is disabled when there is no text', () => { |
34 const { props, wrapper } = setup({}, true); |
64 const { props, wrapper } = setup({}, true); |
35 wrapper.find('button').simulate('click'); |
65 const button = wrapper.find('button'); |
36 expect(props.addNote.mock.calls.length).toBe(1); |
66 |
|
67 expect(button.prop('disabled')).toBe(true); |
37 }); |
68 }); |
38 |
69 |
39 test('note value on clickbutton', () => { |
70 test('button is not disabled when there is text', () => { |
40 const { props, wrapper } = setup({}, true); |
71 const { props, wrapper } = setup({}, true); |
41 // This does nothing... must find a way to make it work |
72 const button = wrapper.find('button'); |
42 wrapper.find('SlateEditor').simulate('change', {target: {value: 'note text'}}); |
73 const editor = wrapper.find('SlateEditor').find('Editor').node; |
43 wrapper.find('button').simulate('click'); |
74 |
44 expect(props.addNote.mock.calls.length).toBe(1); |
75 // FIXME simulate('change') doesn't work |
45 // cf. previous comment |
76 editor.onChange(Plain.deserialize('Hello world')); |
46 //expect(props.addNote.mock.calls[0]).toEqual(['note text']); |
77 |
|
78 expect(button.prop('disabled')).toBe(false); |
47 }); |
79 }); |
|
80 |
|
81 // test('click button', () => { |
|
82 // const { props, wrapper } = setup({}, true); |
|
83 // wrapper.find('button').simulate('click'); |
|
84 // expect(props.addNote.mock.calls.length).toBe(1); |
|
85 // }); |
|
86 |
|
87 // test('note value on clickbutton', () => { |
|
88 // const { props, wrapper } = setup({}, true); |
|
89 // // This does nothing... must find a way to make it work |
|
90 // wrapper.find('SlateEditor').simulate('change', {target: {value: 'note text'}}); |
|
91 // wrapper.find('button').simulate('click'); |
|
92 // expect(props.addNote.mock.calls.length).toBe(1); |
|
93 // // cf. previous comment |
|
94 // //expect(props.addNote.mock.calls[0]).toEqual(['note text']); |
|
95 // }); |
48 |
96 |
49 }); |
97 }); |
50 |
98 |