From e6e4488fb1e7264db7a2bc70c889b436865ffa6d Mon Sep 17 00:00:00 2001 From: Jeremy Yap Date: Sat, 6 Jan 2018 01:00:08 +0800 Subject: [PATCH] Use a different way to test Material UI dialog contents --- .../__test__/DuplicateButton.test.jsx | 2 +- .../__test__/NewEventButton.test.jsx | 6 +++--- .../__test__/NewMilestoneButton.test.jsx | 6 +++--- .../LessonPlanItem/__test__/AdminMenu.test.jsx | 14 +++++++------- .../__test__/LessonPlanMilestone.test.jsx | 18 +++++++++--------- .../SurveyLayout/__test__/AdminMenu.test.jsx | 18 +++++++++--------- .../__test__/NewSurveyButton.test.jsx | 6 +++--- .../__test__/EditSectionButton.test.jsx | 6 +++--- .../__test__/NewQuestionButton.test.jsx | 11 ++++++----- .../__test__/NewSectionButton.test.jsx | 6 +++--- 10 files changed, 47 insertions(+), 46 deletions(-) diff --git a/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.jsx b/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.jsx index a36a9b8d35e..27ebcd93a9a 100644 --- a/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.jsx +++ b/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import storeCreator from 'course/duplication/store'; diff --git a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx index 37657bd05c0..08269b403a7 100644 --- a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx +++ b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import storeCreator from 'course/lesson-plan/store'; @@ -27,8 +27,8 @@ describe('', () => { start_at: new Date('2016-12-31T16:00:00.000Z'), }; const startAt = '01-01-2017'; - const dialogInline = eventFormDialog.find('RenderToLayer').first().instance().layerElement; - const eventForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = eventFormDialog.find('RenderToLayer').first().instance(); + const eventForm = mount(dialogInline.props.render(), contextOptions).find('form'); const titleInput = eventForm.find('input[name="title"]'); titleInput.simulate('change', { target: { value: eventData.title } }); const eventTypeInput = eventForm.find('input[name="event_type"]'); diff --git a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx index 37728df9763..18d58ca154f 100644 --- a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx +++ b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import storeCreator from 'course/lesson-plan/store'; @@ -27,8 +27,8 @@ describe('', () => { start_at: new Date('2016-12-31T16:00:00.000Z'), }; const startAt = '01-01-2017'; - const dialogInline = milestoneFormDialog.find('RenderToLayer').first().instance().layerElement; - const milestoneForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = milestoneFormDialog.find('RenderToLayer').first().instance(); + const milestoneForm = mount(dialogInline.props.render(), contextOptions).find('form'); const titleInput = milestoneForm.find('input[name="title"]'); titleInput.simulate('change', { target: { value: milestoneData.title } }); const startAtDateInput = milestoneForm.find('input[name="start_at"]').first(); diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminMenu.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminMenu.test.jsx index 29ed6b0c94f..90cb9e8ca24 100644 --- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminMenu.test.jsx +++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminMenu.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import DeleteConfirmation from 'lib/containers/DeleteConfirmation'; @@ -36,8 +36,8 @@ describe('', () => { const iconButton = adminMenu.find('button').first(); iconButton.simulate('click'); - const menuCardNode = adminMenu.find('RenderToLayer').first().instance().layerElement; - const deleteButton = new ReactWrapper(menuCardNode, true).find('EnhancedButton').at(1); + const menuCardNode = adminMenu.find('RenderToLayer').first().instance(); + const deleteButton = mount(menuCardNode.props.render(), contextOptions).find('EnhancedButton').at(1); deleteButton.simulate('click'); const confirmDeleteButton = @@ -77,12 +77,12 @@ describe('', () => { const iconButton = adminMenu.find('button').first(); iconButton.simulate('click'); - const menuCardNode = adminMenu.find('RenderToLayer').first().instance().layerElement; - const updateButton = new ReactWrapper(menuCardNode, true).find('EnhancedButton').first(); + const menuCardNode = adminMenu.find('RenderToLayer').first().instance(); + const updateButton = mount(menuCardNode.props.render(), contextOptions).find('EnhancedButton').first(); updateButton.simulate('click'); - const dialogInline = eventFormDialog.find('RenderToLayer').first().instance().layerElement; - const eventForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = eventFormDialog.find('RenderToLayer').first().instance(); + const eventForm = mount(dialogInline.props.render(), contextOptions).find('form'); const description = 'Add nice description'; const descriptionInput = eventForm.find('textarea[name="description"]'); descriptionInput.simulate('change', { target: { value: description } }); diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanMilestone.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanMilestone.test.jsx index 6d9d4c9b25a..15c5469d41b 100644 --- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanMilestone.test.jsx +++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanMilestone.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import DeleteConfirmation from 'lib/containers/DeleteConfirmation'; @@ -53,8 +53,8 @@ describe('', () => { const iconButton = lessonPlanMilestone.find('button').first(); iconButton.simulate('click'); - const menuCardNode = lessonPlanMilestone.find('RenderToLayer').first().instance().layerElement; - const deleteButton = new ReactWrapper(menuCardNode, true).find('EnhancedButton').at(1); + const menuCardNode = lessonPlanMilestone.find('RenderToLayer').first().instance(); + const deleteButton = mount(menuCardNode.props.render(), contextOptions).find('EnhancedButton').at(1); deleteButton.simulate('click'); const confirmDeleteButton = @@ -84,18 +84,18 @@ describe('', () => { const iconButton = lessonPlanMilestone.find('button').first(); iconButton.simulate('click'); - const menuCardNode = lessonPlanMilestone.find('RenderToLayer').first().instance().layerElement; - const updateButton = new ReactWrapper(menuCardNode, true).find('EnhancedButton').first(); + const menuCardNode = lessonPlanMilestone.find('RenderToLayer').first().instance(); + const updateButton = mount(menuCardNode.props.render(), contextOptions).find('EnhancedButton').first(); updateButton.simulate('click'); - const dialogInline = milestoneFormDialog.find('RenderToLayer').first().instance().layerElement; - const milestoneForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = milestoneFormDialog.find('RenderToLayer').first().instance(); + const milestoneForm = mount(dialogInline.props.render(), contextOptions).find('form'); const description = 'Add nice description'; const descriptionInput = milestoneForm.find('textarea[name="description"]'); descriptionInput.simulate('change', { target: { value: description } }); - const submitButton = milestoneFormDialog.find('FormDialogue').first(); - submitButton.simulate('click'); + const submitButton = milestoneFormDialog.find('FormDialogue').first().instance().submitButton; + ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(submitButton)); const expectedPayload = { lesson_plan_milestone: { diff --git a/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx b/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx index d1d42616904..43ac8119faf 100644 --- a/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx +++ b/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import ReactTestUtils from 'react-dom/test-utils'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import CourseAPI from 'api/course'; import DeleteConfirmation from 'lib/containers/DeleteConfirmation'; import storeCreator from 'course/survey/store'; @@ -42,8 +42,8 @@ describe('', () => { const iconButton = adminMenu.find('button').first(); iconButton.simulate('click'); - const menuCardNode = adminMenu.find('RenderToLayer').first().instance().layerElement; - const deleteButton = new ReactWrapper(menuCardNode, true).find('EnhancedButton').first(); + const menuCardNode = adminMenu.find('RenderToLayer').first().instance(); + const deleteButton = mount(menuCardNode.props.render(), contextOptions).find('EnhancedButton').first(); deleteButton.simulate('click'); const confirmDeleteButton = deleteConfirmation.find('ConfirmationDialog').first().instance().confirmButton; @@ -81,18 +81,18 @@ describe('', () => { const iconButton = adminMenu.find('button').first(); iconButton.simulate('click'); - const menuCardNode = adminMenu.find('RenderToLayer').first().instance().layerElement; - const updateButton = new ReactWrapper(menuCardNode, true).find('EnhancedButton').first(); + const menuCardNode = adminMenu.find('RenderToLayer').first().instance(); + const updateButton = mount(menuCardNode.props.render(), contextOptions).find('EnhancedButton').first(); updateButton.simulate('click'); - const dialogInline = surveyFormDialogue.find('RenderToLayer').first().instance().layerElement; - const sectionForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = surveyFormDialogue.find('RenderToLayer').first().instance(); + const sectionForm = mount(dialogInline.props.render(), contextOptions).find('form'); const description = 'To update description'; const descriptionInput = sectionForm.find('textarea[name="description"]'); descriptionInput.simulate('change', { target: { value: description } }); - const submitButton = surveyFormDialogue.find('FormDialogue').first(); - submitButton.simulate('click'); + const submitButton = surveyFormDialogue.find('FormDialogue').first().instance().submitButton; + ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(submitButton)); const expectedPayload = { survey: { diff --git a/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx index 3c53d0ff24d..68084b3db84 100644 --- a/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx +++ b/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import storeCreator from 'course/survey/store'; @@ -32,8 +32,8 @@ describe('', () => { }; const startAt = '01-01-2017'; - const dialogInline = surveyFormDialogue.find('RenderToLayer').first().instance().layerElement; - const surveyForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = surveyFormDialogue.find('RenderToLayer').first().instance(); + const surveyForm = mount(dialogInline.props.render(), contextOptions).find('form'); const titleInput = surveyForm.find('input[name="title"]'); titleInput.simulate('change', { target: { value: survey.title } }); const startAtDateInput = surveyForm.find('input[name="start_at"]').first(); diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx index 5001b52da69..9b3ad4fde5d 100644 --- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx +++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import storeCreator from 'course/survey/store'; @@ -26,8 +26,8 @@ describe('', () => { editSectionButton.find('button').simulate('click'); const newDescription = 'Added later'; - const dialogInline = sectionFormDialogue.find('RenderToLayer').first().instance().layerElement; - const sectionForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = sectionFormDialogue.find('RenderToLayer').first().instance(); + const sectionForm = mount(dialogInline.props.render(), contextOptions).find('form'); const descriptionInput = sectionForm.find('textarea[name="description"]'); descriptionInput.simulate('change', { target: { value: newDescription } }); diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx index 830c46c0cfb..6d1c27d4f17 100644 --- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx +++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; +import ReactTestUtils from 'react-dom/test-utils'; +import { mount } from 'enzyme'; import CourseAPI from 'api/course'; import storeCreator from 'course/survey/store'; import QuestionFormDialogue from 'course/survey/containers/QuestionFormDialogue'; @@ -22,16 +23,16 @@ describe('', () => { // Fill section form with title const questionText = 'Question: Is it true?'; const optionText = 'Yes'; - const dialogInline = questionFormDialogue.find('RenderToLayer').first().instance().layerElement; - const questionForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = questionFormDialogue.find('RenderToLayer').first().instance(); + const questionForm = mount(dialogInline.props.render(), contextOptions).find('form'); const descriptionInput = questionForm.find('textarea[name="description"]'); descriptionInput.simulate('change', { target: { value: questionText } }); const optionInput = questionForm.find('QuestionFormOption').first().find('textarea').last(); optionInput.simulate('change', { target: { value: optionText } }); // Submit question form - const submitButton = questionFormDialogue.find('FormDialogue').first(); - submitButton.simulate('click'); + const submitButton = questionFormDialogue.find('FormDialogue').first().instance().submitButton; + ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(submitButton)); expect(spyCreate).toHaveBeenCalled(); const formData = spyCreate.mock.calls[0][0]; diff --git a/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx index d760ba85a39..da528b3322f 100644 --- a/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx +++ b/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { mount, ReactWrapper } from 'enzyme'; +import { mount } from 'enzyme'; import ReactTestUtils from 'react-dom/test-utils'; import CourseAPI from 'api/course'; import storeCreator from 'course/survey/store'; @@ -21,8 +21,8 @@ describe('', () => { // Fill section form with title const section = { title: 'Funky section title' }; - const dialogInline = sectionFormDialogue.find('RenderToLayer').first().instance().layerElement; - const sectionForm = new ReactWrapper(dialogInline, true).find('form'); + const dialogInline = sectionFormDialogue.find('RenderToLayer').first().instance(); + const sectionForm = mount(dialogInline.props.render(), contextOptions).find('form'); const titleInput = sectionForm.find('input[name="title"]'); titleInput.simulate('change', { target: { value: section.title } });