Skip to content

Commit 24b54dd

Browse files
habibaymanhabibayman
committed
tests(texteditor): fix old tests to work with the new editor
1 parent 2362ba6 commit 24b54dd

5 files changed

Lines changed: 85 additions & 60 deletions

File tree

‎contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { AssessmentItemToolbarActions } from '../../constants';
44
import AnswersEditor from './AnswersEditor';
55
import { AssessmentItemTypes } from 'shared/constants';
66

7-
jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
8-
jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
7+
jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
98

109
const clickNewAnswerBtn = async wrapper => {
1110
await wrapper.findComponent('[data-test="newAnswerBtn"]').trigger('click');
@@ -302,33 +301,37 @@ describe('AnswersEditor', () => {
302301
});
303302
});
304303

305-
// describe('on answer text update', () => {
306-
// beforeEach(async () => {
307-
// wrapper = mount(AnswersEditor, {
308-
// propsData: {
309-
// questionKind: AssessmentItemTypes.SINGLE_SELECTION,
310-
// answers: [
311-
// { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
312-
// { answer: 'Peanut butter', correct: false, order: 2 },
313-
// ],
314-
// openAnswerIdx: 1,
315-
// },
316-
// });
317-
318-
// // only one editor is rendered at a time => "wrapper.find"
319-
// wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', 'European butter');
320-
// await wrapper.vm.$nextTick();
321-
// });
322-
323-
// it('emits update event with a payload containing updated answers', () => {
324-
// expect(wrapper.emitted().update).toBeTruthy();
325-
// expect(wrapper.emitted().update.length).toBe(1);
326-
// expect(wrapper.emitted().update[0][0]).toEqual([
327-
// { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
328-
// { answer: 'European butter', correct: false, order: 2 },
329-
// ]);
330-
// });
331-
// });
304+
describe('on answer text update', () => {
305+
beforeEach(async () => {
306+
wrapper = mount(AnswersEditor, {
307+
propsData: {
308+
questionKind: AssessmentItemTypes.SINGLE_SELECTION,
309+
answers: [
310+
{ answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
311+
{ answer: 'Peanut butter', correct: false, order: 2 },
312+
],
313+
openAnswerIdx: 1,
314+
},
315+
});
316+
317+
const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
318+
editors.at(1).vm.$emit('update', 'European butter');
319+
320+
await wrapper.vm.$nextTick();
321+
});
322+
323+
it('emits update event with a payload containing updated answers', () => {
324+
expect(wrapper.emitted().update).toBeTruthy();
325+
expect(wrapper.emitted().update.length).toBe(1);
326+
327+
const emittedAnswers = JSON.parse(JSON.stringify(wrapper.emitted().update[0][0]));
328+
329+
expect(emittedAnswers).toEqual([
330+
{ answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
331+
{ answer: 'European butter', correct: false, order: 2 },
332+
]);
333+
});
334+
});
332335

333336
describe('on correct answer change', () => {
334337
beforeEach(async () => {

‎contentcuration/contentcuration/frontend/channelEdit/components/AssessmentEditor/AssessmentEditor.spec.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { assessmentItemKey } from '../../utils';
55
import AssessmentEditor from './AssessmentEditor';
66
import { AssessmentItemTypes, ValidationErrors, DELAYED_VALIDATION } from 'shared/constants';
77

8-
jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
9-
jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
8+
jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
109

1110
const NODE_ID = 'node-id';
1211
const ITEM1 = {
@@ -184,10 +183,18 @@ describe('AssessmentEditor', () => {
184183

185184
expect(items.length).toBe(4);
186185

187-
expect(items.at(0).html()).toContain(ITEM1.question);
188-
expect(items.at(1).html()).toContain(ITEM2.question);
189-
expect(items.at(2).html()).toContain(ITEM3.question);
190-
expect(items.at(3).html()).toContain(ITEM4.question);
186+
expect(items.at(0).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
187+
ITEM1.question,
188+
);
189+
expect(items.at(1).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
190+
ITEM2.question,
191+
);
192+
expect(items.at(2).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
193+
ITEM3.question,
194+
);
195+
expect(items.at(3).findComponent({ name: 'RichTextEditor' }).props('value')).toBe(
196+
ITEM4.question,
197+
);
191198
});
192199

193200
it('renders items as closed', () => {

‎contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.spec.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { AssessmentItemTypes, ValidationErrors } from 'shared/constants';
77

88
const store = factory();
99

10-
jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
11-
jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
10+
jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
1211

1312
const listeners = {
1413
update: jest.fn(),
@@ -34,8 +33,7 @@ const openQuestion = async wrapper => {
3433
};
3534

3635
const updateQuestion = async (wrapper, newQuestionText) => {
37-
// only one editor is rendered at a time => "wrapper.find"
38-
wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', newQuestionText);
36+
wrapper.findComponent({ name: 'RichTextEditor' }).vm.$emit('update', newQuestionText);
3937
await wrapper.vm.$nextTick();
4038
};
4139

@@ -63,13 +61,16 @@ describe('AssessmentItemEditor', () => {
6361
listeners,
6462
});
6563

66-
expect(wrapper.html()).toContain('Exercise 2 - Question 2');
64+
// Find the first RichTextEditor component, which is used for the question.
65+
const questionEditor = wrapper.findComponent({ name: 'RichTextEditor' });
66+
expect(questionEditor.exists()).toBe(true);
6767

68-
// expect(wrapper.html()).toContain('Mayonnaise (I mean you can, but...)');
69-
// expect(wrapper.html()).toContain('Peanut butter');
68+
// Assert that it received the correct `value` prop.
69+
expect(questionEditor.props('value')).toBe('Exercise 2 - Question 2');
7070

71-
// expect(wrapper.html()).toContain("It's not healthy");
72-
// expect(wrapper.html()).toContain('Tasty!');
71+
// Check that the child editor components also exist.
72+
expect(wrapper.findComponent({ name: 'AnswersEditor' }).exists()).toBe(true);
73+
expect(wrapper.findComponent({ name: 'HintsEditor' }).exists()).toBe(true);
7374
});
7475

7576
describe('on question text update', () => {

‎contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.spec.js‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { mount } from '@vue/test-utils';
33
import AssessmentItemPreview from './AssessmentItemPreview';
44
import { AssessmentItemTypes } from 'shared/constants';
55

6+
jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
7+
68
describe('AssessmentItemPreview', () => {
79
let wrapper;
810

@@ -31,7 +33,9 @@ describe('AssessmentItemPreview', () => {
3133
});
3234

3335
it('renders question', () => {
34-
expect(wrapper.html()).toContain('Question');
36+
// Find the RichTextEditor for the question and check its value prop.
37+
const questionEditor = wrapper.findComponent({ name: 'RichTextEditor' });
38+
expect(questionEditor.props('value')).toBe('Question');
3539
});
3640

3741
it("doesn't render answers by default", () => {
@@ -55,9 +59,13 @@ describe('AssessmentItemPreview', () => {
5559
});
5660

5761
it('renders answers', () => {
58-
expect(wrapper.html()).toContain('Answer 1');
59-
expect(wrapper.html()).toContain('Answer 2');
60-
expect(wrapper.html()).toContain('Answer 3');
62+
const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
63+
// We expect 1 for the question + 3 for the answers = 4 total editors.
64+
expect(editors.length).toBe(4);
65+
66+
expect(editors.at(1).props('value')).toBe('Answer 1');
67+
expect(editors.at(2).props('value')).toBe('Answer 2');
68+
expect(editors.at(3).props('value')).toBe('Answer 3');
6169
});
6270

6371
it("doesn't render hints", () => {
@@ -66,14 +74,19 @@ describe('AssessmentItemPreview', () => {
6674
});
6775

6876
it('renders hints toggle', () => {
69-
expect(wrapper.findComponent('[data-test="hintsToggle"]').exists()).toBe(true);
77+
expect(wrapper.find('[data-test="hintsToggle"]').exists()).toBe(true);
7078
});
7179

7280
it('renders hints on hints toggle click', async () => {
73-
await wrapper.findComponent('[data-test="hintsToggle"]').trigger('click');
81+
await wrapper.find('[data-test="hintsToggle"]').trigger('click');
82+
83+
// After clicking, there should be more editors for the hints.
84+
// 1 (question) + 3 (answers) + 2 (hints) = 6 total editors.
85+
const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
86+
expect(editors.length).toBe(6);
7487

75-
expect(wrapper.html()).toContain('Hint 1');
76-
expect(wrapper.html()).toContain('Hint 2');
88+
expect(editors.at(4).props('value')).toBe('Hint 1');
89+
expect(editors.at(5).props('value')).toBe('Hint 2');
7790
});
7891
});
7992
});

‎contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import { AssessmentItemToolbarActions } from '../../constants';
44

55
import HintsEditor from './HintsEditor';
66

7-
jest.mock('shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor.vue');
8-
jest.mock('shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue');
7+
jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
98

109
const clickNewHintBtn = async wrapper => {
1110
await wrapper.findComponent('[data-test=newHintBtn]').find('button').trigger('click');
@@ -65,11 +64,13 @@ describe('HintsEditor', () => {
6564
},
6665
});
6766

68-
const hints = wrapper.findAll('[data-test="hint"]');
67+
// Find all instances of your new RichTextEditor component
68+
const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
69+
expect(editors.length).toBe(2);
6970

70-
expect(hints.length).toBe(2);
71-
expect(hints.at(0).html()).toContain('First hint');
72-
expect(hints.at(1).html()).toContain('Second hint');
71+
// Instead of checking the raw HTML, we check the `value` prop passed to each editor.
72+
expect(editors.at(0).props('value')).toBe('First hint');
73+
expect(editors.at(1).props('value')).toBe('Second hint');
7374
});
7475

7576
describe('on hint text update', () => {
@@ -84,8 +85,8 @@ describe('HintsEditor', () => {
8485
},
8586
});
8687

87-
// only one editor is rendered at a time => "wrapper.find"
88-
wrapper.findComponent({ name: 'MarkdownEditor' }).vm.$emit('update', 'Updated hint');
88+
const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
89+
editors.at(1).vm.$emit('update', 'Updated hint');
8990
});
9091

9192
it('emits update event with a payload containing updated hints', () => {

0 commit comments

Comments
 (0)