Merge pull request #2759 from studentinsights/patch/upgrading-js-deps

Maintenance: JS dependency updates

.browserlistrc

@@ -0,0 +1,10 @@
+# Our app needs to run on IE11, probably forever.
+#
+# This file is used by `eslint-plugin-compat` to enforce some checks that
+# only supported JS APIs are used (or are polyfilled).
+#
+# See also polyfill.js and .eslintrc and Webpack config to see how it
+# all fits together.
+
+defaults
+ie 11

.eslintrc

@@ -1,11 +1,11 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
     "jest": true
   },
   "globals": {
-    "$": true
+    "$": true,
+    "Promise": true
   },
   "parser": "babel-eslint",
   "plugins": [
@@ -14,6 +14,7 @@
   ],
   "extends": [
     "eslint:recommended",
+    "plugin:compat/recommended",
     "plugin:react/recommended",
     "plugin:no-unsanitized/DOM"
   ],
@@ -47,6 +48,14 @@
     }]
   },
   "settings": {
+    "polyfills": [
+      "Object",
+      "Array",
+      "Promise",
+      "Map",
+      "Set",
+      "fetch",
+    ],
     "react": {
       "version": "detect"
     }

app/assets/javascripts/components/GenericLoader.test.js

@@ -20,7 +20,7 @@ it('renders when pending', () => {
 it('renders when resolved', () => {
   const props = testProps();
   const wrapper = mount(<GenericLoader {...props} />);
-  setTimeout(() => expect(wrapper.html()).toContain('bar'), 0);
+  setTimeout(() => expect(wrapper.getDOMNode().innerHTML).toContain('bar'), 0);
 });
 
 
@@ -51,7 +51,7 @@ describe('when not GENERIC_LOADER_THROW_ON_REJECT_IN_TEST', () => {
     });
     const wrapper = mount(<GenericLoader {...props} />);
     setTimeout(() => {
-      expect(wrapper.html()).toContain('There was an error loading this data.');
+      expect(wrapper.getDOMNode().innerHTML).toContain('There was an error loading this data.');
       done();
     }, 0);
   });

app/assets/javascripts/components/SessionRenewal-Three.test.js

@@ -5,9 +5,10 @@ beforeEach(() => {
   fetchMock.reset();
   fetchMock.restore();
   fetchMock.get('/educators/reset', {});
-  fetchMock.get('/educators/probe', new Response('{}', {
-    status: 401
-  }));
+
+  // This use of Response is not supported in target browsers, but is
+  // supported in the test setup, so is fine for this smoke test.
+  fetchMock.get('/educators/probe', new Response('{}', { status: 401 })); // eslint-disable-line compat/compat
 });
 
 it('if probe fails, calls forciblyClearPage', done => {

app/assets/javascripts/my_notes/MyNotesPage.test.js

@@ -37,10 +37,11 @@ describe('integration tests', () => {
     expect(wrapper.text()).toContain('Loading...');
 
     setTimeout(() => {
-      expect(wrapper.html()).toContain('My notes');
-      expect($(wrapper.html()).find('.EventNoteCard').length).toEqual(2);
-      expect($(wrapper.html()).find('.NoteCard-substance').length).toEqual(2);
-      expect(wrapper.html()).not.toContain('redacted');
+      const html = wrapper.getDOMNode().innerHTML;
+      expect(html).toContain('My notes');
+      expect($(html).find('.EventNoteCard').length).toEqual(2);
+      expect($(html).find('.NoteCard-substance').length).toEqual(2);
+      expect(html).not.toContain('redacted');
       done();
     }, 0);
   });

app/assets/javascripts/sign_in/multifactor.test.js

@@ -14,7 +14,10 @@ function isHidden(el) {
 }
 
 function serializedForm(form) {
-  return new URLSearchParams(new FormData(form)).toString();
+  // This uses URLSearchParams, which isn't widely supported in browsers,
+  // but this is supported in test, and is good enough for the smoke test
+  // here.
+  return new URLSearchParams(new FormData(form)).toString(); // eslint-disable-line compat/compat
 }
 
 

jest.json

@@ -5,6 +5,9 @@
   "setupFiles": [
     "./ui/config/setupTests.js"
   ],
+  "transform": {
+    "^.+\\.js$": "babel-jest"
+  },
   "moduleNameMapper": {
     "\\.css$": "<rootDir>/ui/config/styleMock.js"
   }

package.json

@@ -10,98 +10,90 @@
   },
   "license": "MIT",
   "scripts": {
-    "lint": "eslint --fix --ext jsx --ext js -c .eslintrc app/assets/javascripts ui; exit 0",
-    "lint-cli": "eslint --ext jsx --ext js -c .eslintrc app/assets/javascripts ui",
-    "lockfile-lint-cli": "lockfile-lint -t yarn --path yarn.lock --allowed-hosts registry.yarnpkg.com --validate-https",
+    "start": "concurrently --kill-others \"bundle exec rails s\" \"yarn dev\"",
+    "test": "yarn jest --watch",
     "dev": "NODE_ENV=development webpack --config ui/config/webpack.dev.js --watch",
+    "storybook": "STORYBOOK_RUNNING=true start-storybook -p 6006 --config-dir ui/config/.storybook --quiet --ci",
     "build": "NODE_ENV=production webpack --config ui/config/webpack.prod.js",
-    "start": "concurrently --kill-others \"bundle exec rails s\" \"yarn dev\"",
+    "test-cli": "yarn yarn-checks-cli && yarn lint-cli && yarn jest && yarn audits && yarn storybook-cli",
     "jest": "TZ='America/New_York' jest --config jest.json",
-    "test": "yarn jest --watch",
+    "lint": "yarn lint-cli; exit 0",
+    "lint-cli": "yarn eslint --ext js -c .eslintrc app/assets/javascripts ui",
+    "lockfile-lint-cli": "lockfile-lint -t yarn --path yarn.lock --allowed-hosts registry.yarnpkg.com --validate-https",
     "audits": "yarn audit && yarn auditjs-cli",
     "auditjs-cli": "yarn auditjs --package yarn.lock",
-    "test-cli": "yarn lint-cli && yarn jest && yarn audits",
-    "storybook": "STORYBOOK_RUNNING=true start-storybook -p 6006 --config-dir ui/config/.storybook"
+    "storybook-cli": "yarn storybook --smoke-test",
+    "yarn-checks-cli": "yarn install --check-files && yarn check --integrity"
   },
   "heroku-run-build-script": true,
   "dependencies": {
-    "@babel/core": "^7.0.0",
     "@babel/runtime": "^7.0.0",
-    "array.prototype.fill": "^1.0.2",
-    "array.prototype.find": "^2.0.4",
-    "chroma-js": "^1.3.7",
+    "chroma-js": "^2.1.0",
     "csv-stringify": "^5.3.6",
     "d3": "3.5.12",
-    "es5-shim": "^4.5.9",
-    "fetch-mock": "^8.3.2",
     "highcharts": "^6.0.2",
-    "jest-fetch-mock": "^3.0.0",
     "jquery": "^3.4.0",
-    "lodash": "^4.17.14",
+    "lodash": "^4.17.15",
     "lunr": "^2.3.6",
     "moment": "2.19.3",
-    "object-assign": "^4.1.1",
-    "object-hash": "^1.3.0",
-    "object-values": "^2.0.0",
+    "npm": "^6.13.4",
+    "object-hash": "^2.0.1",
     "percentile": "^1.2.0",
-    "promise-polyfill": "^6.0.2",
-    "query-string": "^5.1.0",
-    "react": "^16.8.6",
+    "query-string": "^5",
+    "react": "~16.8.6",
+    "react-app-polyfill": "^1.0.6",
     "react-autocomplete": "^1.8.1",
     "react-beautiful-dnd": "^11.0.2",
     "react-debounce-input": "^3.2.0",
-    "react-dom": "^16.8.6",
-    "react-modal": "3.1.10",
+    "react-dom": "~16.8.6",
+    "react-modal": "^3.11.1",
     "react-router-dom": "^4.2.2",
-    "react-select": "^1.2.1",
-    "react-test-renderer": "^16.8.6",
+    "react-select": "^1.3.0",
     "react-virtualized": "9.20",
     "rollbar": "^2.14.0",
     "uuid": "^3.2.1",
-    "whatwg-fetch": "^2.0.3",
+    "whatwg-fetch": "^3.0.0",
     "wordcloud": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
     "@storybook/addon-actions": "5.1.10",
     "@storybook/react": "5.1.10",
     "auditjs": "^3.2.4",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.2",
-    "babel-jest": "^24.1.0",
+    "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.5",
-    "babel-preset-react-app": "^7.0.0",
-    "clean-webpack-plugin": "^0.1.17",
-    "compression-webpack-plugin": "^1.0.1",
+    "babel-preset-react-app": "^9.1.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "compression-webpack-plugin": "^3.1.0",
     "concurrently": "^5.0.2",
-    "css-loader": "^2.1.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.12.1",
-    "eslint": "^6",
+    "css-loader": "^3.4.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-no-unsanitized": "^3.0.2",
-    "eslint-plugin-react": "^7.14.2",
-    "jest": "^24.7.1",
-    "jest-canvas-mock": "^1.1.0",
+    "eslint-plugin-react": "^7.18.3",
+    "fetch-mock": "^8.3.2",
+    "jest": "^25.1.0",
+    "jest-canvas-mock": "^2.2.0",
+    "jest-fetch-mock": "^3.0.0",
     "lockfile-lint": "^3.0.5",
+    "react-test-renderer": "~16.8.6",
     "script-loader": "^0.7.2",
-    "style-loader": "^0.20.3",
-    "webpack": "^3.8.1",
-    "webpack-manifest-plugin": "^1.3.2",
+    "style-loader": "^1.1.3",
+    "terser-webpack-plugin": "^2.3.4",
+    "webpack": "^4",
+    "webpack-cli": "^3",
+    "webpack-manifest-plugin": "^2.1.0",
     "webpack-merge": "^4.1.0"
   },
   "resolutions": {
-    "auditjs/**/bin-links": "^1.1.5",
-    "auditjs/**/npm": "^6.13.4",
-    "eslint-utils": "^1.4.1",
-    "jest/**/handlebars": "^4.5.3",
-    "lodash": "^4.17.14",
-    "lodash.mergewith": "^4.6.2",
-    "lodash-es": "^4.17.14",
-    "mixin-deep": "^1.3.2",
-    "set-value": "^3.0.1",
+    "auditjs/**/bin-links": "^1.1.7",
+    "jest/**/mixin-deep": "^2.0.1",
+    "jest/**/set-value": "^3.0.1",
+    "mem": "^4.3.0",
     "serialize-javascript": "^2.1.1",
-    "webpack/**/mem": "^4.0.0",
-    "webpack/**/os-locale": "^3.1.0"
+    "@storybook/react/**/lodash-es": "^4.17.15"
   }
 }