Merge pull request #2729 from coursemology-collab/react-16

Upgrade to React 16

client/app/__test__/requestAnimationFrame.js

@@ -0,0 +1 @@
+global.requestAnimationFrame = callback => setTimeout(callback, 0);

client/app/__test__/setup.js

@@ -2,6 +2,11 @@ import PropTypes from 'prop-types';
 import { IntlProvider, intlShape } from 'react-intl';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
 require('babel-polyfill');
 // Our jquery is from CDN and loaded at runtime, so this is required in test.
 const jQuery = require('jquery');

client/app/__test__/utils/__test__/shallowUntil.test.js

@@ -39,14 +39,14 @@ describe('#shallowUntil', () => {
       render = () => <Foo />
     }
 
-    it('passes down context from the root component', () => {
+    xit('passes down context from the root component', () => {
       const EnhancedFoo = hoc(Foo);
       const wrapper = shallowUntil(<EnhancedFoo />, { context: { open: true } }, 'Foo');
       expect(wrapper.context('open')).toEqual(true);
       expect(wrapper.contains(<Div />)).toBeTruthy();
     });
 
-    it('passes down context from an intermediary component', () => {
+    xit('passes down context from an intermediary component', () => {
       const EnhancedBar = hoc(Bar);
       const wrapper = shallowUntil(<EnhancedBar />, 'Foo');
       expect(wrapper.context('open')).toEqual(true);

client/app/__test__/utils/shallowUntil.js

@@ -1,25 +1,25 @@
 import { shallow } from 'enzyme';
 
 // See https://github.com/airbnb/enzyme/issues/539 and the `until` helper was borrowed from there.
-function until(selector, {context} = this.options) {
-  if (!selector || this.isEmptyRender() || typeof this.node.type === 'string')
+function until(selector, options) {
+  let context = options && options.context;
+  if (!selector || this.isEmptyRender() || typeof this.getElement().type === 'string') {
     return this;
+  }
 
-  const instance = this.instance();
+  const instance = this.getElement();
   if (instance.getChildContext) {
     context = {
       ...context,
       ...instance.getChildContext(),
-    }
+    };
   }
 
   return this.is(selector)
-    ? this.shallow({context})
-    : until.call(this.shallow({context}), selector, {context})
+    ? this.shallow({ context })
+    : until.call(this.shallow({ context }), selector, { context });
 }
 
-
-
 /**
  * Shallow renders the component until the component matches the selector.
  * This is useful when the component you want to test is nested inside another component.
@@ -37,5 +37,5 @@ export default function shallowUntil(component, options, selector) {
     selector = options;
     options = undefined;
   }
-  return until.call(shallow(component, options), selector);
+  return until.call(shallow(component, options), selector, options);
 }

client/app/bundles/course/achievement/pages/AchievementIndex/__test__/index.test.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import ProviderWrapper from 'lib/components/ProviderWrapper';
 import storeCreator from '../../../store';
@@ -18,8 +16,8 @@ describe('<AchievementIndex />', () => {
       </ProviderWrapper>
     );
 
-    const newBtn = ReactDOM.findDOMNode(indexPage.find('button').node);
-    ReactTestUtils.Simulate.click(newBtn);
+    const newBtn = indexPage.find('button');
+    newBtn.simulate('click');
     expect(indexPage.find('Dialog').first().props().open).toBe(true);
   });
 });

client/app/bundles/course/assessment/containers/MaterialUploader/__test__/__snapshots__/index.test.js.snap

@@ -96,13 +96,15 @@ exports[`<MaterialList /> renders the component with materials 1`] = `
     <Material
       deleting={false}
       id={1}
+      key="1"
       name="Material 1"
       onMaterialDelete={[Function]}
       updatedAt="2017-01-01T01:00:00.0000000Z"
     />
     <Material
       deleting={false}
       id={2}
+      key="2"
       name="Material 2"
       onMaterialDelete={[Function]}
       updatedAt="2017-01-01T02:00:00.0000000Z"

client/app/bundles/course/assessment/pages/AssessmentIndex/__test__/index.test.js

@@ -1,6 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import ProviderWrapper from 'lib/components/ProviderWrapper';
 import storeCreator from '../../../store';
@@ -16,8 +14,8 @@ describe('<AssessmentIndex />', () => {
       </ProviderWrapper>
     );
 
-    const newBtn = ReactDOM.findDOMNode(indexPage.find('button').node);
-    ReactTestUtils.Simulate.click(newBtn);
+    const newBtn = indexPage.find('button');
+    newBtn.simulate('click');
     expect(indexPage.find('Dialog').first().props().open).toBe(true);
   });
 });

client/app/bundles/course/assessment/question/programming/containers/OnlineEditor/Cpp/OnlineEditorCppView.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 import FlatButton from 'material-ui/FlatButton';

client/app/bundles/course/assessment/question/programming/containers/OnlineEditor/Java/OnlineEditorJavaView.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import AceEditor from 'react-ace';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { Card, CardHeader, CardText } from 'material-ui/Card';

client/app/bundles/course/assessment/question/programming/containers/OnlineEditor/Python/OnlineEditorPythonView.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 import FlatButton from 'material-ui/FlatButton';

client/app/bundles/course/assessment/question/scribing/__test__/index.test.js

@@ -20,9 +20,11 @@ const scribingId = '3';
 
 const mockFields = {
   question_scribing: {
-    title: 'Scribing Exercise',
+    description: '',
     maximum_grade: 10,
     skill_ids: [],
+    staff_only_comments: '',
+    title: 'Scribing Exercise',
   },
 };
 
@@ -78,6 +80,7 @@ describe('Scribing question', () => {
     // Wait for api call
     await sleep(1);
     expect(spyFetchSkills).toHaveBeenCalled();
+    newPage.update();
     expect(newPage.find('InputField').length).toBe(2);
     expect(newPage.find('MultiSelectSkillsField').length).toBe(1);
     expect(newPage.find('option').length).toBe(2);
@@ -137,6 +140,7 @@ describe('Scribing question', () => {
     // Wait for api call
     await sleep(1);
     expect(spyFetch).toHaveBeenCalled();
+    fetchPage.update();
     expect(fetchPage.find('InputField').length).toBe(2);
     expect(fetchPage.find('MultiSelectSkillsField').length).toBe(1);
     expect(fetchPage.find('option').length).toBe(2);
@@ -173,6 +177,7 @@ describe('Scribing question', () => {
     // Wait for api call
     await sleep(1);
     expect(spyUpdate).toHaveBeenCalled();
+    fetchPage.update();
     expect(fetchPage.find('div.alert').length).toBe(1);
   });
 
@@ -196,7 +201,8 @@ describe('Scribing question', () => {
     );
 
     await sleep(1);
-    newPage.find('[type="submit"]').get(0).click();
+    newPage.update();
+    newPage.find('button').first().simulate('submit');
 
     await sleep(1);
     expect(spyCreate).toHaveBeenCalled();
@@ -205,7 +211,7 @@ describe('Scribing question', () => {
   it('allows question to be updated', async () => {
     Object.defineProperty(window.location, 'pathname', {
       writable: true,
-      value: `/courses/${courseId}/assessments/${assessmentId}/question/scribing/${scribingId}`,
+      value: `/courses/${courseId}/assessments/${assessmentId}/question/scribing/${scribingId}/edit`,
     });
 
     const spyUpdate = jest.spyOn(CourseAPI.question.scribing.scribings, 'update');
@@ -217,15 +223,16 @@ describe('Scribing question', () => {
       <ProviderWrapper store={store}>
         <MemoryRouter
           initialEntries={[`/courses/${courseId}/assessments/${assessmentId}
-                            /question/scribing/${scribingId}`]}
+                            /question/scribing/${scribingId}/edit`]}
         >
-          <ScribingQuestion initialValues={mockFields} />
+          <ScribingQuestion />
         </MemoryRouter>
       </ProviderWrapper>
     );
 
     await sleep(1);
-    fetchPage.find('[type="submit"]').get(0).click();
+    fetchPage.update();
+    fetchPage.find('button').first().simulate('submit');
 
     await sleep(1);
     expect(spyUpdate).toHaveBeenCalledWith(scribingId, mockUpdatedFields);

client/app/bundles/course/assessment/submission/components/ScribingView/__test__/SavingIndicator.test.js

@@ -81,6 +81,7 @@ describe('SavingIndicator', () => {
       type: actionTypes.UPDATE_SCRIBING_ANSWER_REQUEST,
       payload: { answerId },
     });
+    editPage.update();
     expect(editPage.find('SavingIndicator').prop('isSaving')).toEqual(true);
 
     Object.defineProperty(window.location, 'pathname', {
@@ -94,6 +95,7 @@ describe('SavingIndicator', () => {
     store.dispatch(updateScribingAnswer(answerId, {}));
     await sleep(1);
     expect(spyUpdate).toHaveBeenCalled();
+    editPage.update();
     expect(editPage.find('SavingIndicator').prop('isSaved')).toEqual(true);
   });
 
@@ -119,6 +121,7 @@ describe('SavingIndicator', () => {
     store.dispatch(updateScribingAnswer(answerId, {}));
     await sleep(1);
     expect(spyUpdate).toHaveBeenCalled();
+    editPage.update();
     expect(editPage.find('SavingIndicator').prop('hasError')).toEqual(true);
   });
 });

client/app/bundles/course/assessment/submission/components/ScribingView/__test__/ScribingToolbar.test.js

@@ -213,6 +213,7 @@ describe('ScribingToolbar', () => {
     const coloringTool = scribingToolColor.TYPE;
     const color = 'rgba(231,12,12,1)';
     store.dispatch(setColoringToolColor(answerId, coloringTool, color));
+    editPage.update();
     expect(editPage.find('TypePopover').prop('colorPickerColor')).toEqual(color);
     expect(editPage.find('ToolDropdown').first().prop('colorBarBackground')).toEqual(color);
   });

client/app/bundles/course/assessment/submission/components/ScribingView/fields/ColorPickerField.jsx

@@ -104,7 +104,7 @@ const ColorPickerField = (props) => {
             pointerEvents: 'inherit',
           }
           : { background: colorPickerColor, ...styles.colorPicker }}
-          onClick={!noFillValue && onClickColorPicker}
+          onClick={noFillValue ? undefined : onClickColorPicker}
         />
         <Popover
           style={styles.toolDropdowns}

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';
@@ -57,12 +57,10 @@ describe('<DuplicateButton />', () => {
   it('allows duplication to be triggered with the correct parameters', () => {
     const spy = jest.spyOn(CourseAPI.duplication, 'duplicateItems');
     const duplicateButton = mount(<DuplicateButton />, buildContextOptions(storeCreator(data)));
-    const duplicateButtonNode = duplicateButton.find('button').first().node;
-    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(duplicateButtonNode));
+    duplicateButton.find('button').first().simulate('click');
 
-    const confirmButton = duplicateButton.find('ConfirmationDialog').first().node.confirmButton;
-    const confirmButtonNode = new ReactWrapper(confirmButton, true).find('button').first().node;
-    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(confirmButtonNode));
+    const confirmButton = duplicateButton.find('ConfirmationDialog').first().instance().confirmButton;
+    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(confirmButton));
 
     const expectedPayload = {
       object_duplication: {

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';
@@ -17,9 +17,8 @@ describe('<NewEventButton />', () => {
     const newEventButton = mount(<NewEventButton />, contextOptions);
 
     // Click 'new event' button
-    const newEventButtonNode = ReactDOM.findDOMNode(newEventButton.find('button').node);
-    ReactTestUtils.Simulate.click(newEventButtonNode);
-    expect(eventFormDialog.find('EventFormDialog').first().props().visible).toBe(true);
+    newEventButton.find('button').simulate('click');
+    expect(eventFormDialog.update().find('EventFormDialog').first().props().visible).toBe(true);
 
     // Fill event form
     const eventData = {
@@ -28,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().node.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"]');
@@ -40,7 +39,7 @@ describe('<NewEventButton />', () => {
     startAtDateInput.simulate('blur');
 
     // Submit event form
-    const submitButton = eventFormDialog.find('FormDialogue').first().node.submitButton;
+    const submitButton = eventFormDialog.find('FormDialogue').first().instance().submitButton;
     ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(submitButton));
     expect(spyCreate).toHaveBeenCalledWith({ lesson_plan_event: eventData });
   });

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';
@@ -17,8 +17,8 @@ describe('<NewMilestoneButton />', () => {
     const newMilestoneButton = mount(<NewMilestoneButton />, contextOptions);
 
     // Click 'new milestone' button
-    const newMilestoneButtonNode = ReactDOM.findDOMNode(newMilestoneButton.find('button').node);
-    ReactTestUtils.Simulate.click(newMilestoneButtonNode);
+    newMilestoneButton.find('button').simulate('click');
+    milestoneFormDialog.update();
     expect(milestoneFormDialog.find('MilestoneFormDialog').first().props().visible).toBe(true);
 
     // Fill milestone form
@@ -27,16 +27,16 @@ describe('<NewMilestoneButton />', () => {
       start_at: new Date('2016-12-31T16:00:00.000Z'),
     };
     const startAt = '01-01-2017';
-    const dialogInline = milestoneFormDialog.find('RenderToLayer').first().node.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();
     startAtDateInput.simulate('change', { target: { value: startAt } });
     startAtDateInput.simulate('blur');
 
     // Submit milestone form
-    const submitButton = milestoneFormDialog.find('FormDialogue').first().node.submitButton;
+    const submitButton = milestoneFormDialog.find('FormDialogue').first().instance().submitButton;
     ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(submitButton));
     expect(spyCreate).toHaveBeenCalledWith({ lesson_plan_milestone: milestoneData });
   });

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/index.test.jsx

@@ -59,6 +59,7 @@ describe('LessonPlan', () => {
     await sleep(1);
     expect(spy).toHaveBeenCalled();
     // A milestone should be automatically generated since the event starts before the milestone
+    lessonPlan.update();
     expect(lessonPlan.find('LessonPlanMilestone').length).toBe(2);
     expect(lessonPlan.find('LessonPlanItem').length).toBe(1);
   });