Skip to content

Commit 44b4f3f

Browse files
bra-i-ambra-i-am
committed
test: update TinyMceWidget tests to use Redux store and improve snapshot coverage
1 parent 9141644 commit 44b4f3f

2 files changed

Lines changed: 91 additions & 175 deletions

File tree

‎src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap‎

Lines changed: 73 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +1,107 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
4-
<Fragment>
5-
<SourceCodeModal
6-
close={[MockFunction modal.closeModal]}
7-
editorRef={
8-
{
9-
"current": {
10-
"value": "something",
11-
},
12-
}
4+
<[object Object]
5+
value={
6+
{
7+
"store": {
8+
"dispatch": [Function],
9+
"getState": [Function],
10+
"replaceReducer": [Function],
11+
"subscribe": [Function],
12+
Symbol(Symbol.observable): [Function],
13+
},
14+
"subscription": {
15+
"addNestedSub": [Function],
16+
"getListeners": [Function],
17+
"handleChangeWrapper": [Function],
18+
"isSubscribed": [Function],
19+
"notifyNestedSubs": [Function],
20+
"trySubscribe": [Function],
21+
"tryUnsubscribe": [Function],
22+
},
1323
}
14-
isOpen={false}
15-
/>
16-
<Editor
24+
}
25+
>
26+
<TinyMceWidget
1727
disabled={false}
18-
editorConfig={
19-
{
20-
"clearSelection": [MockFunction hooks.selectedImage.clearSelection],
21-
"content": undefined,
22-
"editorContentHtml": undefined,
23-
"editorRef": {
24-
"current": {
25-
"value": "something",
26-
},
27-
},
28-
"editorType": "text",
29-
"enableImageUpload": false,
30-
"images": {
31-
"current": [
32-
{
33-
"externalUrl": "/assets/sOmEaSsET",
34-
},
35-
],
36-
},
37-
"initializeEditor": undefined,
38-
"learningContextId": "course+org+run",
39-
"lmsEndpointUrl": "sOmEvaLue.cOm",
40-
"minHeight": undefined,
41-
"openImgModal": [MockFunction modal.openModal],
42-
"openSourceCodeModal": [MockFunction modal.openModal],
43-
"placeholder": undefined,
44-
"selection": "hooks.selectedImage.selection",
45-
"setEditorRef": undefined,
46-
"setSelection": [MockFunction hooks.selectedImage.setSelection],
47-
"staticRootUrl": undefined,
48-
"studioEndpointUrl": "sOmEoThERvaLue.cOm",
49-
"updateContent": [Function],
50-
}
51-
}
52-
id="sOMeiD"
53-
onEditorChange={[Function]}
54-
/>
55-
</Fragment>
56-
`;
57-
58-
exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
59-
<Fragment>
60-
<ImageUploadModal
61-
clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
62-
close={[MockFunction modal.closeModal]}
6328
editorRef={
6429
{
6530
"current": {
6631
"value": "something",
6732
},
6833
}
6934
}
70-
editorType="problem"
35+
editorType="text"
36+
enableImageUpload={false}
37+
id="sOMeiD"
7138
images={
7239
{
73-
"current": [
74-
{
75-
"externalUrl": "/assets/sOmEaSsET",
76-
},
77-
],
78-
}
79-
}
80-
isLibrary={true}
81-
isOpen={false}
82-
lmsEndpointUrl="http://localhost:18000"
83-
selection="hooks.selectedImage.selection"
84-
setSelection={[MockFunction hooks.selectedImage.setSelection]}
85-
/>
86-
<Editor
87-
disabled={false}
88-
editorConfig={
89-
{
90-
"clearSelection": [MockFunction hooks.selectedImage.clearSelection],
91-
"content": undefined,
92-
"editorContentHtml": undefined,
93-
"editorRef": {
94-
"current": {
95-
"value": "something",
96-
},
40+
"sOmEaSsET": {
41+
"staTICUrl": "/assets/sOmEaSsET",
9742
},
98-
"editorType": "problem",
99-
"enableImageUpload": true,
100-
"images": {
101-
"current": [
102-
{
103-
"externalUrl": "/assets/sOmEaSsET",
104-
},
105-
],
106-
},
107-
"initializeEditor": undefined,
108-
"learningContextId": "course+org+run",
109-
"lmsEndpointUrl": "sOmEvaLue.cOm",
110-
"minHeight": undefined,
111-
"openImgModal": [MockFunction modal.openModal],
112-
"openSourceCodeModal": [MockFunction modal.openModal],
113-
"placeholder": undefined,
114-
"selection": "hooks.selectedImage.selection",
115-
"setEditorRef": undefined,
116-
"setSelection": [MockFunction hooks.selectedImage.setSelection],
117-
"staticRootUrl": undefined,
118-
"studioEndpointUrl": "sOmEoThERvaLue.cOm",
119-
"updateContent": [Function],
12043
}
12144
}
122-
id="sOMeiD"
123-
onEditorChange={[Function]}
45+
isLibrary={false}
46+
learningContextId="course+org+run"
47+
lmsEndpointUrl="sOmEvaLue.cOm"
48+
onChange={[Function]}
49+
studioEndpointUrl="sOmEoThERvaLue.cOm"
50+
updateContent={[Function]}
12451
/>
125-
</Fragment>
52+
</[object Object]>
12653
`;
12754

128-
exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = `
129-
<Fragment>
130-
<ImageUploadModal
131-
clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
132-
close={[MockFunction modal.closeModal]}
133-
editorRef={
134-
{
135-
"current": {
136-
"value": "something",
137-
},
138-
}
139-
}
140-
editorType="text"
141-
images={
142-
{
143-
"current": [
144-
{
145-
"externalUrl": "/assets/sOmEaSsET",
146-
},
147-
],
148-
}
55+
exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
56+
<[object Object]
57+
value={
58+
{
59+
"store": {
60+
"dispatch": [Function],
61+
"getState": [Function],
62+
"replaceReducer": [Function],
63+
"subscribe": [Function],
64+
Symbol(Symbol.observable): [Function],
65+
},
66+
"subscription": {
67+
"addNestedSub": [Function],
68+
"getListeners": [Function],
69+
"handleChangeWrapper": [Function],
70+
"isSubscribed": [Function],
71+
"notifyNestedSubs": [Function],
72+
"trySubscribe": [Function],
73+
"tryUnsubscribe": [Function],
74+
},
14975
}
150-
isLibrary={true}
151-
isOpen={false}
152-
lmsEndpointUrl="http://localhost:18000"
153-
selection="hooks.selectedImage.selection"
154-
setSelection={[MockFunction hooks.selectedImage.setSelection]}
155-
/>
156-
<SourceCodeModal
157-
close={[MockFunction modal.closeModal]}
76+
}
77+
>
78+
<TinyMceWidget
79+
disabled={false}
15880
editorRef={
15981
{
16082
"current": {
16183
"value": "something",
16284
},
16385
}
16486
}
165-
isOpen={false}
166-
/>
167-
<Editor
168-
disabled={false}
169-
editorConfig={
87+
editorType="problem"
88+
enableImageUpload={true}
89+
id="sOMeiD"
90+
images={
17091
{
171-
"clearSelection": [MockFunction hooks.selectedImage.clearSelection],
172-
"content": undefined,
173-
"editorContentHtml": undefined,
174-
"editorRef": {
175-
"current": {
176-
"value": "something",
177-
},
92+
"sOmEaSsET": {
93+
"staTICUrl": "/assets/sOmEaSsET",
17894
},
179-
"editorType": "text",
180-
"enableImageUpload": true,
181-
"images": {
182-
"current": [
183-
{
184-
"externalUrl": "/assets/sOmEaSsET",
185-
},
186-
],
187-
},
188-
"initializeEditor": undefined,
189-
"learningContextId": "course+org+run",
190-
"lmsEndpointUrl": "sOmEvaLue.cOm",
191-
"minHeight": undefined,
192-
"openImgModal": [MockFunction modal.openModal],
193-
"openSourceCodeModal": [MockFunction modal.openModal],
194-
"placeholder": undefined,
195-
"selection": "hooks.selectedImage.selection",
196-
"setEditorRef": undefined,
197-
"setSelection": [MockFunction hooks.selectedImage.setSelection],
198-
"staticRootUrl": undefined,
199-
"studioEndpointUrl": "sOmEoThERvaLue.cOm",
200-
"updateContent": [Function],
20195
}
20296
}
203-
id="sOMeiD"
204-
onEditorChange={[Function]}
97+
isLibrary={false}
98+
learningContextId="course+org+run"
99+
lmsEndpointUrl="sOmEvaLue.cOm"
100+
onChange={[Function]}
101+
studioEndpointUrl="sOmEoThERvaLue.cOm"
102+
updateContent={[Function]}
205103
/>
206-
</Fragment>
104+
</[object Object]>
207105
`;
106+
107+
exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = `undefined`;

‎src/editors/sharedComponents/TinyMceWidget/index.test.jsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,28 @@
11
import React from 'react';
22
import { shallow } from '@edx/react-unit-test-utils';
3+
import { Provider } from 'react-redux';
4+
import { configureStore } from '@reduxjs/toolkit';
35
import SourceCodeModal from '../SourceCodeModal';
46
import ImageUploadModal from '../ImageUploadModal';
57
import { imgModalToggle, sourceCodeModalToggle } from './hooks';
68
import { TinyMceWidgetInternal as TinyMceWidget } from '.';
79

810
const staticUrl = '/assets/sOmEaSsET';
911

12+
const mockStore = configureStore({
13+
reducer: {
14+
// Add any required reducers for your tests
15+
test: (state = {}) => state,
16+
},
17+
});
18+
19+
// Helper function to create wrapped component
20+
const shallowWithStore = (component) => shallow(
21+
<Provider store={mockStore}>
22+
{component}
23+
</Provider>,
24+
);
25+
1026
// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
1127
// Consequently, mock the Editor out.
1228
jest.mock('@tinymce/tinymce-react', () => {
@@ -69,12 +85,12 @@ describe('TinyMceWidget', () => {
6985
expect(shallow(<TinyMceWidget {...props} />).snapshot).toMatchSnapshot();
7086
});
7187
test('SourcecodeModal is not rendered', () => {
72-
const wrapper = shallow(<TinyMceWidget {...props} editorType="problem" />);
88+
const wrapper = shallowWithStore(<TinyMceWidget {...props} editorType="problem" />);
7389
expect(wrapper.snapshot).toMatchSnapshot();
7490
expect(wrapper.instance.findByType(SourceCodeModal).length).toBe(0);
7591
});
7692
test('ImageUploadModal is not rendered', () => {
77-
const wrapper = shallow(<TinyMceWidget {...props} enableImageUpload={false} />);
93+
const wrapper = shallowWithStore(<TinyMceWidget {...props} enableImageUpload={false} />);
7894
expect(wrapper.snapshot).toMatchSnapshot();
7995
expect(wrapper.instance.findByType(ImageUploadModal).length).toBe(0);
8096
});

0 commit comments

Comments
 (0)