Update packages to react 16 (#542)

* Update packages to react 16 * Upgrade Flow to v0.61.0 * Fragment ALL the things * Use ariaCurrent and refactor navlink props - See: remix-run/react-router#4708 and https://tink.uk/using-the-aria-current-attribute/ * Update more dependencies * Extract dom mock code to test utils * Remove window.requestAnimationFrame from mocks * Fix lint
nusmodifications · Dec 22, 2017 · f4eb0c0 · f4eb0c0
1 parent 6e7c3a4
commit f4eb0c0
Show file tree

Hide file tree

Showing 21 changed files with 1,005 additions and 581 deletions.
diff --git a/v3/package.json b/v3/package.json
@@ -26,7 +26,7 @@
     "autoprefixer": "^7.1.2",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.3",
     "babel-loader": "^7.1.1",
     "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-lodash": "^3.2.11",
@@ -47,7 +47,7 @@
     "css-loader": "^0.28.4",
     "cssnano": "^3.10.0",
     "enzyme": "^3.0.0",
-    "enzyme-adapter-react-15": "^1.0.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.0.1",
     "eslint": "^4.8.0",
     "eslint-config-airbnb": "^15.1.0",
@@ -59,14 +59,14 @@
     "eslint-plugin-react": "^7.4.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
-    "flow-bin": "^0.57.3",
+    "flow-bin": "^0.61.0",
     "flow-scripts": "^0.4.0",
     "flow-status-webpack-plugin": "^0.1.6",
     "graceful-fs": "^4.1.11",
     "html-webpack-plugin": "^2.30.1",
     "icalendar": "^0.7.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^21.2.1",
+    "jest": "^22.0.3",
     "js-combinatorics": "^0.5.2",
     "lodash-webpack-plugin": "^0.11.4",
     "moment": "^2.19.1",
@@ -75,10 +75,9 @@
     "optimize-css-assets-webpack-plugin": "^3.0.0",
     "postcss-custom-properties": "^6.2.0",
     "postcss-loader": "^2.0.6",
-    "react-addons-test-utils": "^15.6.0",
     "react-dev-utils": "^0.5.2",
-    "react-hot-loader": "^3.1.1",
-    "react-test-renderer": "^15.6.1",
+    "react-hot-loader": "^3.1.3",
+    "react-test-renderer": "^16.2.0",
     "redux-logger": "^3.0.6",
     "sass-loader": "^6.0.6",
     "script-ext-html-webpack-plugin": "^1.8.7",
@@ -111,17 +110,17 @@
     "query-string": "^5.0.0",
     "raven-for-redux": "^1.1.1",
     "raven-js": "^3.17.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-feather": "^1.0.7",
     "react-helmet": "^5.2.0",
     "react-loadable": "^4.0.4",
     "react-modal": "^3.1.7",
     "react-qr-svg": "^2.1.0",
     "react-redux": "^5.0.5",
-    "react-router-dom": "^4.1.2",
+    "react-router-dom": "^4.2.2",
     "react-scrollspy": "^3.3.4",
-    "react-waypoint": "^7.0.4",
+    "react-waypoint": "^7.3.4",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
     "rmwc": "^0.0.1-rc11"

diff --git a/v3/scripts/test.js b/v3/scripts/test.js
@@ -1,4 +1,4 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
diff --git a/v3/src/js/test-utils/async.js b/v3/src/js/test-utils/async.js
@@ -2,5 +2,15 @@
 
 import util from 'util';
 
-// eslint-disable-next-line import/prefer-default-export
 export const nextTick = util.promisify(process.nextTick);
+
+/**
+ * Wait for some condition to become true before continuing. Useful when testing
+ * components that have async actions, such as making network requests
+ */
+export async function waitFor(condition: () => boolean, intervalInMs: number = 5) {
+  while (!condition()) {
+    // eslint-disable-next-line no-await-in-loop
+    await new Promise(resolve => setTimeout(resolve, intervalInMs));
+  }
+}
diff --git a/v3/src/js/test-utils/mockDom.js b/v3/src/js/test-utils/mockDom.js
@@ -0,0 +1,9 @@
+// @flow
+/* eslint-env jest */
+
+export default function mockDom() {
+  // Mock some of the DOM environment functions that are missing from JSDom
+  window.scrollTo = jest.fn();
+  global.performance = { now: jest.fn() };
+  global.matchMedia = jest.fn(() => ({ matches: jest.fn() }));
+}
diff --git a/v3/src/js/views/components/ModuleFinderItem.jsx b/v3/src/js/views/components/ModuleFinderItem.jsx
@@ -1,5 +1,5 @@
 // @flow
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { connect, type MapStateToProps } from 'react-redux';
 
@@ -43,26 +43,29 @@ export class ModuleFinderItemComponent extends PureComponent<Props> {
             </header>
             {module.ModuleDescription && <p>{this.highlight(module.ModuleDescription)}</p>}
             <dl>
-              {module.Preclusion && ([
-                <dt key="preclusions-dt">Preclusions</dt>,
-                <dd key="preclusions-dd">
-                  <LinkModuleCodes>{module.Preclusion}</LinkModuleCodes>
-                </dd>,
-              ])}
+              {module.Preclusion &&
+                <Fragment>
+                  <dt>Preclusions</dt>,
+                  <dd>
+                    <LinkModuleCodes>{module.Preclusion}</LinkModuleCodes>
+                  </dd>
+                </Fragment>}
 
-              {module.Prerequisite && ([
-                <dt key="prerequisite-dt">Prerequisite</dt>,
-                <dd key="prerequisite-dd">
-                  <LinkModuleCodes>{module.Prerequisite}</LinkModuleCodes>
-                </dd>,
-              ])}
+              {module.Prerequisite &&
+                <Fragment>
+                  <dt>Prerequisite</dt>
+                  <dd>
+                    <LinkModuleCodes>{module.Prerequisite}</LinkModuleCodes>
+                  </dd>
+                </Fragment>}
 
-              {module.Corequisite && ([
-                <dt key="corequisite-dt">Corequisite</dt>,
-                <dd key="corequisite-dd">
-                  <LinkModuleCodes>{module.Corequisite}</LinkModuleCodes>
-                </dd>,
-              ])}
+              {module.Corequisite &&
+                <Fragment>
+                  <dt>Corequisite</dt>
+                  <dd>
+                    <LinkModuleCodes>{module.Corequisite}</LinkModuleCodes>
+                  </dd>
+                </Fragment>}
             </dl>
           </div>
           <div className="col-lg-4 col-md-12 col-sm-4">

diff --git a/v3/src/js/views/components/ScrollToTop.test.jsx b/v3/src/js/views/components/ScrollToTop.test.jsx
@@ -1,16 +1,13 @@
 // @flow
 import React from 'react';
 import { mount } from 'enzyme';
+import mockDom from 'test-utils/mockDom';
 
 import { ScrollToTopComponent } from './ScrollToTop';
 
 describe('ScrollToTopComponent', () => {
   beforeEach(() => {
-    jest.spyOn(window, 'scrollTo');
-  });
-
-  afterEach(() => {
-    window.scrollTo.mockRestore();
+    mockDom();
   });
 
   test('default behavior does not to anything', () => {

diff --git a/v3/src/js/views/components/SideMenu.jsx b/v3/src/js/views/components/SideMenu.jsx
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent, type Node } from 'react';
+import React, { PureComponent, type Node, Fragment } from 'react';
 import classnames from 'classnames';
 import { Menu, Close } from 'views/components/icons';
 import makeResponsive from 'views/hocs/makeResponsive';
@@ -30,7 +30,7 @@ export class SideMenuComponent extends PureComponent<Props> {
     const { isOpen, matchBreakpoint, toggleMenu, children, openIcon, closeIcon } = this.props;
 
     return (
-      <div>
+      <Fragment>
         <Fab
           className={styles.fab}
           onClick={() => toggleMenu(!isOpen)}
@@ -47,7 +47,7 @@ export class SideMenuComponent extends PureComponent<Props> {
         <div className={classnames(styles.sideMenu, { [styles.isOpen]: isOpen })}>
           {children}
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

diff --git a/v3/src/js/views/components/cors-stats/CorsRound.jsx b/v3/src/js/views/components/cors-stats/CorsRound.jsx
@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { groupBy, map, size } from 'lodash';
 
 import type { Faculty } from 'types/modules';
@@ -31,17 +31,19 @@ function renderBidTableRow(stats: GroupedBiddingStat) {
     return <td className={styles.noBids} colSpan="2">No bids</td>;
   }
 
-  return [
-    <td key="quota">
-      <CorsQuota
-        bidders={stats.Bidders}
-        quota={stats.Quota}
-      />
-    </td>,
-    <td key="bids">
-      {stats.LowestSuccessfulBid}
-    </td>,
-  ];
+  return (
+    <Fragment>
+      <td>
+        <CorsQuota
+          bidders={stats.Bidders}
+          quota={stats.Quota}
+        />
+      </td>
+      <td>
+        {stats.LowestSuccessfulBid}
+      </td>
+    </Fragment>
+  );
 }
 
 function renderBidTable(groupedStats: GroupedBiddingStat[]) {
@@ -78,27 +80,23 @@ function CorsRound(props: Props) {
     return <div className={styles.noBids}>No bidding during this round</div>;
   }
 
-  return (
-    <div>
-      {map(groupedByFaculty, (groupedStats: GroupedBiddingStat[], faculty: Faculty) => {
-        const groupedByType = groupBy(groupedStats, stats => stats.StudentType);
+  return map(groupedByFaculty, (groupedStats: GroupedBiddingStat[], faculty: Faculty) => {
+    const groupedByType = groupBy(groupedStats, stats => stats.StudentType);
 
-        return (
-          <div key={faculty} className={styles.facultyRow}>
-            {props.showFaculty && <h5 className={styles.facultyHeading}>{faculty}</h5>}
+    return (
+      <div key={faculty} className={styles.facultyRow}>
+        {props.showFaculty && <h5 className={styles.facultyHeading}>{faculty}</h5>}
 
-            {map(groupedByType, (stats: GroupedBiddingStat[], type: string) => (
-              <div key={type}>
-                {size(groupedByType) > 1 &&
-                  <h6 className={styles.typeHeading}>{STUDENT_TYPE_LABELS[type]}</h6>}
-                {renderBidTable(stats)}
-              </div>
-            ))}
+        {map(groupedByType, (stats: GroupedBiddingStat[], type: string) => (
+          <div key={type}>
+            {size(groupedByType) > 1 &&
+            <h6 className={styles.typeHeading}>{STUDENT_TYPE_LABELS[type]}</h6>}
+            {renderBidTable(stats)}
           </div>
-        );
-      })}
-    </div>
-  );
+        ))}
+      </div>
+    );
+  });
 }
 
 export default CorsRound;
diff --git a/v3/src/js/views/components/cors-stats/CorsSemester.jsx b/v3/src/js/views/components/cors-stats/CorsSemester.jsx
@@ -38,7 +38,7 @@ export default class CorsSemester extends PureComponent<Props, State> {
     const showFaculty = stats.faculties.size > 1;
 
     return (
-      <div key={semester} className={styles.semester}>
+      <div className={styles.semester}>
         <h3 className={styles.semHeading}>{semester}</h3>
 
         <div className={classnames('row', styles.summary)}>

diff --git a/v3/src/js/views/components/cors-stats/CorsSummary.jsx b/v3/src/js/views/components/cors-stats/CorsSummary.jsx
@@ -24,27 +24,23 @@ const STUDENT_TYPE_LABELS = {
 export default function (props: Props) {
   const { summary } = props;
 
-  return (
-    <div>
-      {map(summary, (facultyStats, name) => (
-        <div key={name}>
-          {size(summary) > 1 && <h5 className={styles.facultyHeading}>{name}</h5>}
+  return map(summary, (facultyStats, name) => (
+    <div key={name}>
+      {size(summary) > 1 && <h5 className={styles.facultyHeading}>{name}</h5>}
 
-          <div className="row">
-            {map(facultyStats, ({ minBid, round }, type) => (
-              <div key={type} className="col-4">
-                <h6 className={styles.typeHeading}>{STUDENT_TYPE_LABELS[type]}</h6>
-                <p>
-                  <strong className={styles.minBid}>
-                    {minBid}
-                  </strong> {minBid === 1 ? 'point' : 'points'}
-                  <span className={styles.roundInfo}>Round {round}</span>
-                </p>
-              </div>
-            ))}
+      <div className="row">
+        {map(facultyStats, ({ minBid, round }, type) => (
+          <div key={type} className="col-4">
+            <h6 className={styles.typeHeading}>{STUDENT_TYPE_LABELS[type]}</h6>
+            <p>
+              <strong className={styles.minBid}>
+                {minBid}
+              </strong> {minBid === 1 ? 'point' : 'points'}
+              <span className={styles.roundInfo}>Round {round}</span>
+            </p>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
-  );
+  ));
 }
diff --git a/v3/src/js/views/components/module-info/AddModuleDropdown.jsx b/v3/src/js/views/components/module-info/AddModuleDropdown.jsx
@@ -1,6 +1,6 @@
 // @flow
 
-import React, { PureComponent } from 'react';
+import React, { Fragment, PureComponent } from 'react';
 import Downshift from 'downshift';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
@@ -54,18 +54,18 @@ export class AddModuleDropdownComponent extends PureComponent<Props, State> {
   buttonLabel(semester: Semester) {
     if (this.state.loading === semester) {
       return (
-        <span>
+        <Fragment>
           Adding...<br />
           <strong>{config.semesterNames[semester]}</strong>
-        </span>
+        </Fragment>
       );
     }
 
     return this.moduleOnTimetable(semester, this.props.timetables)
-      ? <span>Remove from <br />
-        <strong>{config.semesterNames[semester]}</strong></span>
-      : <span>Add to <br />
-        <strong>{config.semesterNames[semester]}</strong></span>;
+      ? <Fragment>Remove from <br />
+        <strong>{config.semesterNames[semester]}</strong></Fragment>
+      : <Fragment>Add to <br />
+        <strong>{config.semesterNames[semester]}</strong></Fragment>;
   }
 
   otherSemesters(exclude: Semester): Semester[] {

diff --git a/v3/src/js/views/components/module-info/LessonTimetable.jsx b/v3/src/js/views/components/module-info/LessonTimetable.jsx
@@ -1,7 +1,7 @@
 // @flow
 import type { Node } from 'react';
 
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 
 import type { Semester, SemesterData } from 'types/modules';
 
@@ -55,7 +55,7 @@ export default class LessonTimetableControl extends PureComponent<Props, State>
     const semesters = this.props.history.map(data => data.Semester);
 
     return (
-      <div>
+      <Fragment>
         {history.length > 1 &&
           <SemesterPicker
             semesters={semesters}
@@ -66,7 +66,7 @@ export default class LessonTimetableControl extends PureComponent<Props, State>
         <div className={styles.lessonTimetable}>
           {this.renderTimetable()}
         </div>
-      </div>
+      </Fragment>
     );
   }
 }