Remove withRouter (1/n)

renovate.json

@@ -42,7 +42,7 @@
     },
     {
       "extends": "monorepo:jest",
-      "packagePatterns": ["(jest|enzyme|mock)"],
+      "packagePatterns": ["(jest|enzyme|mock)", "^@testing-library/*"],
       "packageNames": ["identity-obj-proxy"],
       "groupName": "test"
     },

website/jest.common.config.js

@@ -2,7 +2,7 @@ module.exports = {
   roots: ['<rootDir>/src'],
   moduleDirectories: ['node_modules', '<rootDir>/src'],
   moduleFileExtensions: ['jsx', 'js', 'ts', 'tsx'],
-  setupFiles: ['<rootDir>/scripts/test.js'],
+  setupFilesAfterEnv: ['<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)$':
@@ -16,7 +16,8 @@ module.exports = {
   // Mimic the globals we set with Webpack's DefinePlugin
   globals: {
     // Default to development
-    __DEV__: process.env.NODE_ENV !== 'production',
+    __DEV__: process.env.NODE_ENV === 'development',
+    __TEST__: process.env.NODE_ENV === 'test',
     DATA_API_BASE_URL: '',
     VERSION_STR: '',
     DISPLAY_COMMIT_HASH: '',

website/package.json

@@ -37,6 +37,9 @@
     "@packtracker/webpack-plugin": "2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@svgr/webpack": "5.5.0",
+    "@testing-library/jest-dom": "5.11.6",
+    "@testing-library/react": "11.2.2",
+    "@testing-library/user-event": "12.3.0",
     "@types/classnames": "2.2.11",
     "@types/enzyme": "3.10.8",
     "@types/jest": "26.0.15",
@@ -57,6 +60,7 @@
     "@types/react-router-dom": "5.1.6",
     "@types/react-scrollspy": "3.3.3",
     "@types/redux-mock-store": "1.0.2",
+    "@types/use-subscription": "1.0.0",
     "@types/webpack-env": "1.16.0",
     "@typescript-eslint/eslint-plugin": "4.8.2",
     "@typescript-eslint/parser": "4.8.2",
@@ -165,7 +169,8 @@
     "redux-persist": "6.0.0",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
-    "searchkit": "2.4.1-alpha.5"
+    "searchkit": "2.4.1-alpha.5",
+    "use-subscription": "1.5.1"
   },
   "browserslist": [
     "extends browserslist-config-nusmods"

website/scripts/test.js

@@ -1,6 +1,7 @@
 const { configure } = require('enzyme');
 const { setAutoFreeze } = require('immer');
 const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+require('@testing-library/jest-dom');
 
 configure({ adapter: new Adapter() });
 

website/src/.eslintrc.js

@@ -105,6 +105,7 @@ module.exports = {
   // Mimic the globals we set with Webpack's DefinePlugin
   globals: {
     __DEV__: 'readonly',
+    __TEST__: 'readonly',
     DATA_API_BASE_URL: 'readonly',
     VERSION_STR: 'readonly',
     DISPLAY_COMMIT_HASH: 'readonly',

website/src/actions/venueBank.ts

@@ -1,8 +1,8 @@
 import { requestAction } from 'actions/requests';
 import NUSModsApi from 'apis/nusmods';
 import config from 'config';
-import { RequestActions } from 'middlewares/requests-middleware';
-import { VenueList } from 'types/venues';
+import type { RequestActions } from 'middlewares/requests-middleware';
+import type { VenueList } from 'types/venues';
 
 export const FETCH_VENUE_LIST = 'FETCH_VENUE_LIST';
 export function fetchVenueList() {

website/src/bootstrapping/configure-store.ts

@@ -8,9 +8,9 @@ import requestsMiddleware from 'middlewares/requests-middleware';
 import ravenMiddleware from 'middlewares/raven-middleware';
 import getLocalStorage from 'storage/localStorage';
 
-import { GetState } from 'types/redux';
-import { State } from 'types/state';
-import { Actions } from 'types/actions';
+import type { GetState } from 'types/redux';
+import type { State } from 'types/state';
+import type { Actions } from 'types/actions';
 
 // For redux-devtools-extensions - see
 // https://github.com/zalmoxisus/redux-devtools-extension
@@ -36,7 +36,7 @@ export default function configureStore(defaultState?: State) {
       duration: true,
       diff: true,
       // Avoid diffing actions that insert a lot of stuff into the state to prevent console from lagging
-      diffPredicate: (getState: GetState, action: Actions) =>
+      diffPredicate: (_getState: GetState, action: Actions) =>
         !action.type.startsWith('FETCH_MODULE_LIST') && !action.type.startsWith('persist/'),
     });
     middlewares.push(logger);

website/src/bootstrapping/sentry.ts

@@ -4,7 +4,7 @@ import * as Sentry from '@sentry/browser';
 import { isBrowserSupported } from './browser';
 
 // Configure Raven - the client for Sentry, which we use to handle errors
-const loadRaven = !__DEV__;
+const loadRaven = !__DEV__ && !__TEST__;
 if (loadRaven) {
   Sentry.init({
     dsn: 'https://4b4fe71954424fd39ac88a4f889ffe20@sentry.io/213986',

website/src/entry/main.tsx

@@ -28,13 +28,16 @@ ReactModal.setAppElement('#app');
 ReactDOM.render(<App store={store} persistor={persistor} />, document.getElementById('app'));
 
 if (
-  (!__DEV__ && 'serviceWorker' in navigator && window.location.protocol === 'https:') ||
+  (!__DEV__ &&
+    !__TEST__ &&
+    'serviceWorker' in navigator &&
+    window.location.protocol === 'https:') ||
   // Allow us to force service worker to be enabled for debugging
   DEBUG_SERVICE_WORKER
 ) {
   registerServiceWorker(store);
 }
 
-if (!__DEV__) {
+if (!__DEV__ && !__TEST__) {
   initializeMamoto();
 }

website/src/test-utils/mockDom.ts

@@ -1,17 +1,49 @@
-export default function mockDom() {
+const nativeScrollTo = window.scrollTo;
+const nativePerformance = window.performance;
+const nativeMatchMedia = window.matchMedia;
+const nativeScrollIntoView = Element.prototype.scrollIntoView;
+
+export function mockDom() {
   // Mock some of the DOM environment functions that are missing from JSDom
   window.scrollTo = jest.fn();
 
   if (!window.performance) {
-    (window as any).performance = { now: jest.fn() };
+    // @ts-expect-error We insist
+    window.performance = { now: jest.fn() };
   }
 
   if (!window.matchMedia) {
-    (window as any).matchMedia = jest.fn(() => ({ matches: jest.fn(), addListener: jest.fn() }));
+    mockWindowMatchMedia();
   }
 
   // JSDom does not stub scrollIntoView - https://github.com/jsdom/jsdom/issues/1695
   if (!Element.prototype.scrollIntoView) {
     Element.prototype.scrollIntoView = jest.fn();
   }
 }
+
+export function mockDomReset() {
+  window.scrollTo = nativeScrollTo;
+
+  // @ts-expect-error We insist
+  window.performance = nativePerformance;
+
+  window.matchMedia = nativeMatchMedia;
+
+  Element.prototype.scrollIntoView = nativeScrollIntoView;
+}
+
+export function mockWindowMatchMedia(overrides: Partial<typeof window.matchMedia> = {}) {
+  // Source: https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+  window.matchMedia = jest.fn((query) => ({
+    matches: true,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    ...overrides,
+  }));
+}

website/src/types/global.d.ts

@@ -1,10 +1,12 @@
 // Globals injected by Webpack DefinePlugin
-// eslint-disable-next-line no-underscore-dangle
+/* eslint-disable no-underscore-dangle */
 declare const __DEV__: boolean;
+declare const __TEST__: boolean;
 declare const DATA_API_BASE_URL: string | undefined;
 declare const VERSION_STR: string | undefined;
 declare const DISPLAY_COMMIT_HASH: string | undefined;
 declare const DEBUG_SERVICE_WORKER: boolean;
+/* eslint-enable no-underscore-dangle */
 
 /**
  * The declarations below let us use Webpack loaders to load non-JS files

website/src/utils/css.ts

@@ -1,19 +1,18 @@
-// Define media breakpoints
-import json2mq, { QueryObject } from 'json2mq';
-import { entries } from 'lodash';
+import type { QueryObject } from 'json2mq';
 
-export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-const breakpoints: { [breakpoint: string]: number } = {
+// NOTE: Keep in sync with Bootstrap's breakpoints.
+// Breakpoints at time of writing: https://getbootstrap.com/docs/4.5/layout/overview/
+const breakpoints = Object.freeze({
   xs: 0,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
-};
+});
+type Breakpoint = keyof typeof breakpoints;
 
-function nextBreakpoint(size: Breakpoint): number | null | undefined {
-  const breakpointEntries = entries(breakpoints);
+function nextBreakpoint(size: Breakpoint): number | null {
+  const breakpointEntries = Object.entries(breakpoints);
   const nextBreakpointIndex =
     breakpointEntries.findIndex(([breakpoint]) => breakpoint === size) + 1;
   if (nextBreakpointIndex >= breakpointEntries.length) return null;
@@ -22,7 +21,7 @@ function nextBreakpoint(size: Breakpoint): number | null | undefined {
 
 export function breakpointDown(size: Breakpoint): QueryObject {
   const nextSize = nextBreakpoint(size);
-  if (nextSize == null) return { all: true };
+  if (nextSize === null) return { all: true };
   return { maxWidth: nextSize - 1 };
 }
 
@@ -34,10 +33,6 @@ export function touchScreenOnly(): QueryObject {
   return { pointer: 'coarse' };
 }
 
-export function queryMatch(query: QueryObject) {
-  return window.matchMedia(json2mq(query));
-}
-
 export function supportsCSSVariables() {
   // Safari does not support supports('--var', 'red')
   return CSS.supports && CSS.supports('(--var: red)');