Upgrade dev dependencies (#1533)

* Upgrade babel config

* Update jest config

* Improve test performance

* Align babel config with create-react-app

* Fix various config flows

www/.flowconfig

@@ -13,7 +13,7 @@ node_modules/downshift/flow-typed/npm
 esproposal.optional_chaining=enable
 module.name_mapper='^\(actions\|apis\|bootstrapping\|config\|data\|middlewares\|reducers\|selectors\|storage\|stores\|types\|utils\|views\|test-utils\)\/?\(.*\)$' -> '<PROJECT_ROOT>/src/js/\1/\2'
 module.name_mapper='^\styles\/?\(.*\)$' -> '<PROJECT_ROOT>/src/styles/\1'
-module.name_mapper='^\__mocks__\/?\(.*\)$' -> '<PROJECT_ROOT>/__mocks__/\1'
+module.name_mapper='^\__mocks__\/?\(.*\)$' -> '<PROJECT_ROOT>/src/js/__mocks__/\1'
 module.name_mapper='.*\.\(png\|jpg\|gif\)$' -> '<PROJECT_ROOT>/flow/url-loader.js'
 module.name_mapper='.*\.svg\/?\(.*\)$' -> '<PROJECT_ROOT>/flow/svg-loader.js'
 module.name_mapper='.*\.\(css\|scss\|sass\)$' -> '<PROJECT_ROOT>/flow/css-loader.js'

www/babel.config.js

@@ -0,0 +1,56 @@
+module.exports = (api) => {
+  api.cache.using(() => process.env.NODE_ENV);
+
+  const IS_PROD = api.env('production');
+  const IS_DEV = api.env('development');
+  const IS_TEST = api.env('test');
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        // eslint-disable-next-line global-require
+        targets: IS_TEST ? { node: true } : { browsers: require('./package.json').browserslist },
+        modules: IS_TEST ? 'commonjs' : false,
+        // Exclude transforms that make all code slower
+        // See https://github.com/facebook/create-react-app/pull/5278
+        exclude: ['transform-typeof-symbol'],
+      },
+    ],
+    ['@babel/preset-react', { development: !IS_PROD }],
+    '@babel/preset-flow',
+  ];
+
+  const plugins = [
+    'babel-plugin-lodash',
+    '@babel/plugin-syntax-dynamic-import',
+    // Deviate from spec, but Object.defineProperty is expensive
+    // See https://github.com/facebook/create-react-app/issues/4263
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-optional-chaining', { loose: true }],
+  ];
+
+  if (IS_DEV || IS_PROD) {
+    plugins.push(['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }]);
+  }
+  if (IS_DEV) {
+    plugins.push('react-hot-loader/babel');
+  }
+  if (IS_PROD) {
+    // React Optimize plugins
+    plugins.push(
+      '@babel/plugin-transform-react-inline-elements',
+      '@babel/plugin-transform-react-constant-elements',
+      'babel-plugin-transform-react-remove-prop-types',
+      'babel-plugin-transform-react-class-to-function',
+    );
+  }
+  if (IS_TEST) {
+    plugins.push('babel-plugin-dynamic-import-node');
+  }
+
+  return {
+    presets,
+    plugins,
+  };
+};

www/jest.config.js

@@ -1,41 +1,25 @@
 module.exports = {
-  roots: [
-    '<rootDir>/src',
-  ],
-  moduleDirectories: [
-    'node_modules',
-    'src/js',
-  ],
-  modulePaths: [
-    '<rootDir>',
-  ],
-  testPathIgnorePatterns: [
-    '<rootDir>/.eslintrc.js',
-  ],
-  collectCoverageFrom: [
-    'src/**/*.{js|jsx}',
-  ],
-  coveragePathIgnorePatterns: [
-    'src/js/test_utils',
-    'src/js/e2e',
-    // Code in this file triggers this bug - https://github.com/istanbuljs/babel-plugin-istanbul/issues/116
-    'src/js/views/modules/ModulePageContent.jsx',
-  ],
+  roots: ['<rootDir>/src/js'],
+  moduleDirectories: ['node_modules', '<rootDir>/src/js'],
+  moduleFileExtensions: ['jsx', 'js'],
+  testPathIgnorePatterns: [],
+  testRegex: 'src/js/.+\\.test\\.jsx?$',
   setupFiles: ['<rootDir>/scripts/test.js'],
   moduleNameMapper: {
     // Mock non JS files as strings
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(?:jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/src/js/__mocks__/fileMock.js',
     // Mock SVG as React component
-    '\\.svg\\?url': '<rootDir>/__mocks__/fileMock.js',
-    '\\.svg': '<rootDir>/__mocks__/svgMock.jsx',
+    '\\.svg\\?url$': '<rootDir>/src/js/__mocks__/fileMock.js',
+    '\\.svg$': '<rootDir>/src/js/__mocks__/svgMock.jsx',
     // Mock SCSS and CSS modules as objects
-    '\\.(css|scss)$': 'identity-obj-proxy',
+    '\\.(?:css|scss)$': 'identity-obj-proxy',
   },
   // Allow us to directly use enzyme wrappers for snapshotting
   // Usage: expect(enzyme.shallow(<div/>)).toMatchSnapshot();
-  snapshotSerializers: [
-    '<rootDir>/node_modules/enzyme-to-json/serializer',
-  ],
+  snapshotSerializers: ['<rootDir>/node_modules/enzyme-to-json/serializer'],
+  collectCoverageFrom: ['**/*.{js,jsx}'],
+  coveragePathIgnorePatterns: ['/node_modules/', '<rootDir>/src/js/(?:test-utils|e2e)'],
   // Only write lcov files in CIs
   coverageReporters: ['text'].concat(process.env.CI ? 'lcov' : []),
 };

www/package.json

@@ -28,19 +28,19 @@
     "@babel/plugin-proposal-object-rest-spread": "7.3.1",
     "@babel/plugin-proposal-optional-chaining": "7.2.0",
     "@babel/plugin-syntax-dynamic-import": "7.2.0",
+    "@babel/plugin-transform-react-constant-elements": "7.2.0",
     "@babel/plugin-transform-react-inline-elements": "7.2.0",
     "@babel/preset-env": "7.3.1",
     "@babel/preset-flow": "7.0.0",
     "@babel/preset-react": "7.0.0",
-    "@babel/register": "7.0.0",
     "@svgr/webpack": "4.1.0",
-    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
+    "babel-jest": "24.1.0",
     "babel-loader": "8.0.4",
     "babel-plugin-dynamic-import-node": "2.2.0",
     "babel-plugin-lodash": "3.3.4",
-    "babel-preset-react-optimize": "1.0.1",
+    "babel-plugin-transform-react-class-to-function": "1.2.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "bundlesize": "0.17.1",
     "chalk": "2.4.2",
     "cheerio": "1.0.0-rc.2",
@@ -51,9 +51,9 @@
     "cross-env": "5.2.0",
     "css-loader": "1.0.0",
     "cssnano": "4.1.8",
-    "enzyme": "3.8.0",
     "enzyme-adapter-react-16": "1.8.0",
     "enzyme-to-json": "3.3.5",
+    "enzyme": "3.8.0",
     "eslint": "4.19.1",
     "eslint-config-airbnb": "16.1.0",
     "eslint-config-prettier": "2.9.0",
@@ -76,8 +76,8 @@
     "html-webpack-plugin": "3.2.0",
     "icalendar": "0.7.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
-    "jest-junit": "5.2.0",
+    "jest": "24.1.0",
+    "jest-junit": "6.2.1",
     "js-combinatorics": "0.5.4",
     "lodash-webpack-plugin": "0.11.5",
     "mini-css-extract-plugin": "0.5.0",

www/scripts/test.js

@@ -1,4 +1,4 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+const { configure } = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
 
 configure({ adapter: new Adapter() });

www/src/js/utils/colors.test.js

@@ -31,7 +31,7 @@ describe('#getNewColor()', () => {
       );
     }
 
-    range(100).forEach(() => {
+    range(NUM_DIFFERENT_COLORS * 5).forEach(() => {
       // When there are no current colors
       expectValidIndex([], []);
       // When there are colors that have not been picked
@@ -45,31 +45,34 @@ describe('#getNewColor()', () => {
 });
 
 describe('#colorLessonsByKey()', () => {
-  const bareLesson: Lesson = {
+  const bareLesson = {
     ClassNo: '',
     DayText: '',
     EndTime: '',
     LessonType: '',
     StartTime: '',
-    Venue: '',
     WeekText: '',
     ModuleCode: '',
     ModuleTitle: '',
   };
 
   test('it should assign colors deterministically', () => {
     const lessons: Lesson[] = [];
-    range(100).forEach((i) => {
+    range(NUM_DIFFERENT_COLORS).forEach((i) => {
       // Add 2 lessons for this ith venue
       const newLesson = { ...bareLesson, Venue: `LT${i}` };
       lessons.push(newLesson);
       lessons.push(newLesson);
+    });
 
-      const coloredLessons = colorLessonsByKey(lessons, 'Venue');
-      const coloredLesson = coloredLessons[coloredLessons.length - 1];
+    const coloredLessons = colorLessonsByKey(lessons, 'Venue');
 
-      expect(coloredLesson).toMatchObject(newLesson); // Ensure that existing lesson info wasn't modified
-      expect(coloredLesson).toHaveProperty('colorIndex', i % NUM_DIFFERENT_COLORS);
+    range(NUM_DIFFERENT_COLORS * 2).forEach((i) => {
+      const coloredLesson = coloredLessons[i];
+      const index = Math.floor(i / 2);
+      expect(coloredLesson).toMatchObject(bareLesson); // Ensure that existing lesson info wasn't modified
+      expect(coloredLesson).toHaveProperty('Venue', `LT${index}`);
+      expect(coloredLesson).toHaveProperty('colorIndex', index % NUM_DIFFERENT_COLORS);
     });
   });
 });

www/src/js/views/venues/VenuesContainer.test.jsx

@@ -6,7 +6,6 @@ import qs from 'query-string';
 import type { Venue, VenueDetailList } from 'types/venues';
 import venueInfo from '__mocks__/venueInformation.json';
 import createHistory from 'test-utils/createHistory';
-import mockDom from 'test-utils/mockDom';
 import { sortVenues } from 'utils/venues';
 import { venuePage } from 'views/routes/paths';
 import VenueDetails from 'views/venues/VenueDetails';
@@ -29,10 +28,6 @@ function createComponent(selectedVenue: ?Venue, search?: string) {
 }
 
 describe(VenuesContainerComponent, () => {
-  beforeEach(() => {
-    mockDom();
-  });
-
   describe('URL handling', () => {
     test('should not select or filter if no venue is present in URL', () => {
       const { wrapper } = createComponent();

www/webpack/webpack.parts.js

@@ -30,7 +30,7 @@ const PATHS = {
   images: path.join(ROOT, SRC, 'img'),
   build: path.join(ROOT, 'dist'),
   buildTimetable: path.join(ROOT, 'dist-timetable'),
-  fixtures: path.join(ROOT, '__mocks__'),
+  fixtures: path.join(ROOT, SRC, 'js', '__mocks__'),
 };
 
 // These dependencies will be extracted out into `vendor.js` in production build.