cleanup two spec files that pollute the DOM

Change-Id: Id18b3552962644d802add6776feea15e8e5170cd
Reviewed-on: https://gerrit.instructure.com/107245
Tested-by: Jenkins
Reviewed-by: Shahbaz Javeed <sjaveed@instructure.com>
Reviewed-by: Josh Simpson <jsimpson@instructure.com>
QA-Review: Derek Bender <djbender@instructure.com>
Product-Review: Keith T. Garner <kgarner@instructure.com>

app/jsx/add_people/components/add_people.js

@@ -51,7 +51,7 @@ import APIError from './api_error'
       validateUsers: React.PropTypes.func.isRequired,
       enrollUsers: React.PropTypes.func.isRequired,
       onClose: React.PropTypes.func,
-      // these props are generate from store state
+      // these props are generated from store state
       courseParams: React.PropTypes.shape(courseParamsShape),
       apiState: React.PropTypes.shape(apiStateShape),
       inputParams: React.PropTypes.shape(inputParamsShape),
@@ -270,15 +270,16 @@ import APIError from './api_error'
 
       return (
         <Modal
+          closeButtonLabel={cancelLabel}
           id="add_people_modal"
           isOpen={this.props.isOpen}
           label={I18n.t('Modal Dialog: Add People')}
-          closeButtonLabel={cancelLabel}
+          onRequestClose={this.close}
+          ref={(node) => { this.node = node; }}
           shouldCloseOnOverlayClick={false}
           size="medium"
-          zIndex="9999"
-          onRequestClose={this.close}
           tabindex="-1"
+          zIndex="9999"
         >
           <ModalHeader>
             <Heading tabIndex="-1">{I18n.t('Add People')}</Heading>

app/jsx/assignments/IndexMenu.js

@@ -81,7 +81,10 @@ export default React.createClass({
 
     render () {
       return (
-        <div className="inline-block">
+        <div
+          className="inline-block"
+          ref={(node) => { this.node = node; }}
+        >
           <a
             className="al-trigger btn"
             id="course_assignment_settings_link"

spec/javascripts/jsx/add_people/components/addPeopleSpec.js

@@ -4,135 +4,34 @@ define([
   'react-addons-test-utils',
   'jsx/add_people/components/add_people',
 ], (React, ReactDOM, TestUtils, AddPeople) => {
-  QUnit.module('AddPeople')
+  QUnit.module('AddPeople');
 
   const props = {
     isOpen: true,
     courseParams: {
-      courseId: '1',
-      defaultInstitutionName: "Ed's House",
-      inviteUsersURL: '/courses/#/invite_users',
-      roles: [
-        {
-          base_role_name: 'StudentEnrollment',
-          name: 'StudentEnrollment',
-          label: 'Student',
-          plural_label: 'Students',
-          id: '3',
-          count: 7,
-          manageable_by_user: true
-        },
-        {
-          base_role_name: 'TeacherEnrollment',
-          name: 'TeacherEnrollment',
-          label: 'Teacher',
-          plural_label: 'Teachers',
-          id: '4',
-          count: 1,
-          manageable_by_user: true
-        },
-        {
-          base_role_name: 'TaEnrollment',
-          name: 'TaEnrollment',
-          label: 'TA',
-          plural_label: 'TAs',
-          id: '5',
-          count: 0,
-          manageable_by_user: true
-        },
-        {
-          base_role_name: 'DesignerEnrollment',
-          name: 'DesignerEnrollment',
-          label: 'Designer',
-          plural_label: 'Designers',
-          id: '6',
-          count: 0,
-          manageable_by_user: true
-        },
-        {
-          base_role_name: 'ObserverEnrollment',
-          name: 'ObserverEnrollment',
-          label: 'Observer',
-          plural_label: 'Observers',
-          id: '7',
-          count: 0,
-          manageable_by_user: true
-        }
-      ],
-      sections: [
-        {
-          id: '8',
-          name: 'Section'
-        },
-        {
-          id: '5',
-          name: 'Section 0'
-        },
-        {
-          id: '6',
-          name: 'Section 1'
-        },
-        {
-          id: '7',
-          name: 'Section 2'
-        },
-        {
-          id: '9',
-          name: 'Section 10'
-        },
-        {
-          id: '10',
-          name: 'Section 20'
-        },
-        {
-          id: '11',
-          name: 'Section 21'
-        },
-        {
-          id: '12',
-          name: 'Section 22'
-        },
-        {
-          id: '2',
-          name: 'Section A'
-        },
-        {
-          id: '3',
-          name: 'Section b'
-        },
-        {
-          id: '4',
-          name: 'Section c'
-        },
-        {
-          id: '1',
-          name: 'work 101'
-        }
-      ]
+      roles: [],
+      sections: []
     },
     apiState: {
       isPending: 0
     },
     inputParams: {
-      searchType: 'cc_path',
-      nameList: [],
-      role: '',
-      section: ''
-    },
-    userValidationResult: {
-      validUsers: [],
-      duplicates: {},
-      missing: {}
-    },
-    usersToBeEnrolled: [],
-    usersEnrolled: false
+      nameList: '',
+    }
   };
-  const noop = function () {};
 
   test('renders the component', () => {
-    TestUtils.renderIntoDocument(<AddPeople {...props} validateUsers={noop} enrollUsers={noop} onClose={noop} />);
-    // can't use TestUtils.findRenderedDOMComponentWithClass, because it's a Modal and actually gets rendered elsewhere in the DOM
+    const component = TestUtils.renderIntoDocument(
+      <AddPeople
+        validateUsers={() => {}}
+        enrollUsers={() => {}}
+        reset={() => {}}
+        {...props}
+      />
+    );
     const addPeople = document.querySelectorAll('.addpeople');
     equal(addPeople.length, 1, 'AddPeople component rendered.');
+    component.close();
+    ReactDOM.unmountComponentAtNode(component.node._overlay.parentElement);
   });
 });

spec/javascripts/jsx/assignments/IndexMenuSpec.js

@@ -1,11 +1,12 @@
 define([
   'react',
+  'react-dom',
   'react-addons-test-utils',
   'react-modal',
   'jsx/assignments/IndexMenu',
   'jsx/assignments/actions/IndexMenuActions',
   './createFakeStore',
-], (React, TestUtils, Modal, IndexMenu, Actions, createFakeStore) => {
+], (React, ReactDOM, TestUtils, Modal, IndexMenu, Actions, createFakeStore) => {
   QUnit.module('AssignmentsIndexMenu')
 
   const generateProps = (overrides, initialState = {}) => {
@@ -24,11 +25,10 @@ define([
     };
   };
 
-  const renderComponent = (props) => {
-    return TestUtils.renderIntoDocument(
+  const renderComponent = props =>
+    TestUtils.renderIntoDocument(
       <IndexMenu {...props} />
     );
-  };
 
   const context = {};
 
@@ -57,6 +57,8 @@ define([
 
     const options = TestUtils.scryRenderedDOMComponentsWithClass(component, 'al-options');
     equal(options.length, 1);
+    component.closeModal();
+    ReactDOM.unmountComponentAtNode(component.node.parentElement);
   });
 
   testCase('renders a LTI tool modal', () => {
@@ -64,6 +66,8 @@ define([
 
     const modals = TestUtils.scryRenderedComponentsWithType(component, Modal);
     equal(modals.length, 1);
+    component.closeModal();
+    ReactDOM.unmountComponentAtNode(component.node.parentElement);
   });
 
   testCase('Modal visibility agrees with state modalIsOpen', () => {
@@ -74,12 +78,18 @@ define([
     const component2 = renderComponent(generateProps({}, { modalIsOpen: false }));
     const modal2 = TestUtils.findRenderedComponentWithType(component2, Modal);
     equal(modal2.props.isOpen, false);
+    component1.closeModal();
+    component2.closeModal();
+    ReactDOM.unmountComponentAtNode(component1.node.parentElement);
+    ReactDOM.unmountComponentAtNode(component2.node.parentElement);
   });
 
   testCase('renders no iframe when there is no selectedTool in state', () => {
     const component = renderComponent(generateProps({}, { selectedTool: null }));
     const iframes = TestUtils.scryRenderedDOMComponentsWithTag(component, 'iframe');
     equal(iframes.length, 0);
+    component.closeModal();
+    ReactDOM.unmountComponentAtNode(component.node.parentElement);
   });
 
   testCase('renders iframe when there is a selectedTool in state', () => {
@@ -98,6 +108,8 @@ define([
 
     const iframes = TestUtils.scryRenderedDOMComponentsWithTag(modalPortal, 'iframe');
     equal(iframes.length, 1);
+    component.closeModal();
+    ReactDOM.unmountComponentAtNode(component.node.parentElement);
   });
 
   testCase('onWeightedToggle dispatches expected actions', () => {
@@ -115,5 +127,7 @@ define([
     equal(store.dispatchedActions.length, actionsCount + 2);
     equal(store.dispatchedActions[actionsCount + 1].type, Actions.SET_WEIGHTED);
     equal(store.dispatchedActions[actionsCount + 1].payload, false);
+    component.closeModal();
+    ReactDOM.unmountComponentAtNode(component.node.parentElement);
   });
 });