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>
This commit is contained in:
Derek Bender 2017-04-02 23:08:15 -05:00
parent f87a1909e9
commit fadf1a8419
4 changed files with 42 additions and 125 deletions

View File

@ -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>

View File

@ -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"

View File

@ -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);
});
});

View File

@ -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);
});
});