PropType testing for pages

After wrestling with an issue inside React that suppresses repeat missing propType warnings see facebook/react#6293 Jana and I have concluded that we can test the propType validation effectively as long as we first test the rendering of the component with all props specified and then test for warnings when no props specified, second.

app/pages/emailverification/emailverification.js

@@ -33,7 +33,6 @@ export var EmailVerification = React.createClass({
  sent: React.PropTypes.bool,
  onSubmitResend: React.PropTypes.func.isRequired,
  trackMetric: React.PropTypes.func.isRequired,
- api: React.PropTypes.object.isRequired,
  working: React.PropTypes.bool.isRequired,
  notification: React.PropTypes.object
  },
@@ -188,8 +187,7 @@ let mergeProps = (stateProps, dispatchProps, ownProps) => {
  var api = ownProps.routes[0].api;
  return Object.assign({}, stateProps, dispatchProps, {
  onSubmitResend: dispatchProps.submitResend.bind(null, api),
- trackMetric: ownProps.routes[0].trackMetric,
- api: api,
+ trackMetric: ownProps.routes[0].trackMetric
  });
 };
 

app/pages/patient/patient.js

@@ -29,20 +29,20 @@ import PatientTeam from './patientteam';
 
 const Patient = React.createClass({
  propTypes: {
- user: React.PropTypes.object,
+ user: React.PropTypes.object.isRequired,
  shareOnly: React.PropTypes.bool,
- fetchingUser: React.PropTypes.bool,
- patient: React.PropTypes.object,
- fetchingPatient: React.PropTypes.bool,
- onUpdatePatient: React.PropTypes.func,
- pendingSentInvites: React.PropTypes.array,
- onChangeMemberPermissions: React.PropTypes.func,
+ fetchingUser: React.PropTypes.bool.isRequired,
+ patient: React.PropTypes.object.isRequired,
+ fetchingPatient: React.PropTypes.bool.isRequired,
+ onUpdatePatient: React.PropTypes.func.isRequired,
+ pendingSentInvites: React.PropTypes.array.isRequired,
+ onChangeMemberPermissions: React.PropTypes.func.isRequired,
  changingMemberPermissions: React.PropTypes.object.isRequired,
- onRemoveMember: React.PropTypes.func,
+ onRemoveMember: React.PropTypes.func.isRequired,
  removingMember: React.PropTypes.object.isRequired,
- onInviteMember: React.PropTypes.func,
+ onInviteMember: React.PropTypes.func.isRequired,
  invitingMember: React.PropTypes.object.isRequired,
- onCancelInvite: React.PropTypes.func,
+ onCancelInvite: React.PropTypes.func.isRequired,
  cancellingInvite: React.PropTypes.object.isRequired,
  trackMetric: React.PropTypes.func.isRequired
  },

app/pages/patientdata/patientdata.js

@@ -43,21 +43,21 @@ import Messages from '../../components/messages';
 export let PatientData = React.createClass({
  propTypes: {
  currentPatientInViewId: React.PropTypes.string.isRequired,
- patientDataMap: React.PropTypes.object,
- patientNotesMap: React.PropTypes.object,
- patient: React.PropTypes.object,
+ patientDataMap: React.PropTypes.object.isRequired,
+ patientNotesMap: React.PropTypes.object.isRequired,
+ patient: React.PropTypes.object.isRequired,
  messageThread: React.PropTypes.array,
  fetchingPatient: React.PropTypes.bool.isRequired,
  fetchingPatientData: React.PropTypes.bool.isRequired,
- isUserPatient: React.PropTypes.bool,
+ isUserPatient: React.PropTypes.bool.isRequired,
  queryParams: React.PropTypes.object.isRequired,
  uploadUrl: React.PropTypes.string,
  onRefresh: React.PropTypes.func,
- onFetchMessageThread: React.PropTypes.func,
- onSaveComment: React.PropTypes.func,
- onEditMessage: React.PropTypes.func,
- onCreateMessage: React.PropTypes.func,
- user: React.PropTypes.object,
+ onFetchMessageThread: React.PropTypes.func.isRequired,
+ onSaveComment: React.PropTypes.func.isRequired,
+ onEditMessage: React.PropTypes.func.isRequired,
+ onCreateMessage: React.PropTypes.func.isRequired,
+ user: React.PropTypes.object.isRequired,
  trackMetric: React.PropTypes.func.isRequired
  },
 

app/pages/patientnew/patientnew.js

@@ -32,9 +32,9 @@ var MODEL_DATE_FORMAT = 'YYYY-MM-DD';
 
 export let PatientNew = React.createClass({
  propTypes: {
- user: React.PropTypes.object,
- fetchingUser: React.PropTypes.bool,
- working: React.PropTypes.bool,
+ user: React.PropTypes.object.isRequired,
+ fetchingUser: React.PropTypes.bool.isRequired,
+ working: React.PropTypes.bool.isRequired,
  notification: React.PropTypes.object,
  onSubmit: React.PropTypes.func.isRequired,
  trackMetric: React.PropTypes.func.isRequired

app/pages/patients/patients.js

@@ -33,17 +33,17 @@ import Invitation from '../../components/invitation';
 
 export let Patients = React.createClass({
  propTypes: {
- user: React.PropTypes.object,
- patients: React.PropTypes.array,
- invites: React.PropTypes.array,
- loading: React.PropTypes.bool,
+ user: React.PropTypes.object.isRequired,
+ patients: React.PropTypes.array.isRequired,
+ invites: React.PropTypes.array.isRequired,
+ loading: React.PropTypes.bool.isRequired,
  loggedInUserId: React.PropTypes.string,
  showingWelcomeMessage: React.PropTypes.bool,
  onHideWelcomeSetup: React.PropTypes.func,
  trackMetric: React.PropTypes.func.isRequired,
- onAcceptInvitation: React.PropTypes.func,
- onDismissInvitation: React.PropTypes.func,
- onRemovePatient: React.PropTypes.func,
+ onAcceptInvitation: React.PropTypes.func.isRequired,
+ onDismissInvitation: React.PropTypes.func.isRequired,
+ onRemovePatient: React.PropTypes.func.isRequired,
  uploadUrl: React.PropTypes.string,
  clearPatientInView: React.PropTypes.func.isRequired
  },

app/pages/profile/profile.js

@@ -31,8 +31,8 @@ import PeopleList from '../../components/peoplelist';
 
 export var Profile = React.createClass({
  propTypes: {
- user: React.PropTypes.object,
- fetchingUser: React.PropTypes.bool,
+ user: React.PropTypes.object.isRequired,
+ fetchingUser: React.PropTypes.bool.isRequired,
  onSubmit: React.PropTypes.func.isRequired,
  trackMetric: React.PropTypes.func.isRequired
  },

test/unit/pages/emailverification.test.js

@@ -17,28 +17,26 @@ describe('EmailVerification', function () {
  });
 
  describe('render', function() {
- it('should console.error when required props are missing', function () {
- console.error = sinon.stub();
- var elem = TestUtils.renderIntoDocument(<EmailVerification />);
- expect(console.error.callCount).to.equal(4);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `onSubmitResend` was not specified in `EmailVerification`.')).to.equal(true);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `trackMetric` was not specified in `EmailVerification`.')).to.equal(true);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `api` was not specified in `EmailVerification`.')).to.equal(true);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `working` was not specified in `EmailVerification`.')).to.equal(true);
- });
-
  it('should render without problems when required props are present', function () {
  console.error = sinon.stub();
  var props = {
  trackMetric: sinon.stub(),
  onSubmitResend: sinon.stub(),
- api: {},
  working: false
  };
  var elem = React.createElement(EmailVerification, props);
  var render = TestUtils.renderIntoDocument(elem);
  expect(console.error.callCount).to.equal(0);
  });
+
+ it('should console.error when required props are missing', function () {
+ console.error = sinon.stub();
+ var elem = TestUtils.renderIntoDocument(<EmailVerification />);
+ expect(console.error.callCount).to.equal(3);
+ expect(console.error.calledWith('Warning: Failed propType: Required prop `onSubmitResend` was not specified in `EmailVerification`.')).to.equal(true);
+ expect(console.error.calledWith('Warning: Failed propType: Required prop `trackMetric` was not specified in `EmailVerification`.')).to.equal(true);
+ expect(console.error.calledWith('Warning: Failed propType: Required prop `working` was not specified in `EmailVerification`.')).to.equal(true);
+ });
  });
 
  describe('mapStateToProps', () => {

test/unit/pages/login.test.js

@@ -20,15 +20,6 @@ describe('Login', function () {
  });
 
  describe('render', function() {
- it('should console.error when required props are missing', function () {
- console.error = sinon.stub();
- var elem = TestUtils.renderIntoDocument(<Login />);
- expect(console.error.callCount).to.equal(3);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `working` was not specified in `Login`.')).to.equal(true);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `onSubmit` was not specified in `Login`.')).to.equal(true);
- expect(console.error.calledWith('Warning: Failed propType: Required prop `trackMetric` was not specified in `Login`.')).to.equal(true);
- });
-
  it('should render without problems when required props are present', function () {
  console.error = sinon.stub();
  var props = {
@@ -40,6 +31,15 @@ describe('Login', function () {
  var render = TestUtils.renderIntoDocument(elem);
  expect(console.error.callCount).to.equal(0);
  });
+
+ it('should console.error when required props are missing', function () {
+ console.error = sinon.stub();
+ var elem = TestUtils.renderIntoDocument(<Login />);
+ expect(console.error.callCount).to.equal(3);
+ expect(console.error.calledWith('Warning: Failed propType: Required prop `working` was not specified in `Login`.')).to.equal(true);
+ expect(console.error.calledWith('Warning: Failed propType: Required prop `onSubmit` was not specified in `Login`.')).to.equal(true);
+ expect(console.error.calledWith('Warning: Failed propType: Required prop `trackMetric` was not specified in `Login`.')).to.equal(true);
+ });
  });
 
  describe('mapStateToProps', () => {