Use a different way to test Material UI dialog contents

Coursemology · Jan 15, 2018 · e6e4488 · e6e4488
1 parent edbaca9
commit e6e4488
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 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
@@ -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/...p/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx b/...p/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('<NewEventButton />', () => {
       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/...ndles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx b/...ndles/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('<NewMilestoneButton />', () => {
       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/...undles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminMenu.test.jsx b/...undles/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('<AdminMenu />', () => {
     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('<AdminMenu />', () => {
     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/...app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanMilestone.test.jsx b/...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('<LessonPlanMilestone />', () => {
     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('<LessonPlanMilestone />', () => {
     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
@@ -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('<AdminMenu />', () => {
     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('<AdminMenu />', () => {
     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
@@ -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('<NewSurveyButton />', () => {
     };
 
     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/...nt/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx b/...nt/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 />', () => {
     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/...nt/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx b/...nt/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('<NewQuestionButton />', () => {
     // 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
@@ -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('<NewSectionButton />', () => {
 
     // 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 } });