Replace ScrollToTop with useScrollToTop (#3041)

* Improve test for previous PR

* Functionalize ModulePageContent

* Functionalize SettingsContainer

* Fix broken enzyme test by migrating to RTL

* Format code

* Remove ScrollToTop

* Minor stylistic change

* Some changes

* Make requested changes for ModulePageContent

* Make requested changes for SettingsContainer

* Make requested changes to ModulePageContent test

* Fix formatting

* Fix typechecking issue

* Use Set instead of Array for checking membership

Co-authored-by: Zhang Yi Jiang <[email protected]>

Author: teikjun

website/src/test-utils/renderWithRouterMatch.tsx

@@ -13,7 +13,7 @@ export default function renderWithRouterMatch(
   children: ReactNode,
   {
     path = '/',
-    location,
+    location = '/',
   }: {
     path?: string;
     location?: Parameters<typeof createHistory>[0];

website/src/views/components/ScrollToTop.tsx

@@ -3,8 +3,7 @@ import type { MediaQuery } from 'types/views';
 import { act, render } from '@testing-library/react';
 import { breakpointUp } from 'utils/css';
 import { mockDom, mockDomReset, mockWindowMatchMedia } from 'test-utils/mockDom';
-import json2mq from 'json2mq';
-import useMediaQuery from './useMediaQuery';
+import useMediaQuery, { getMedia } from './useMediaQuery';
 
 type Props = {
   mediaQuery: MediaQuery;
@@ -59,11 +58,11 @@ describe(useMediaQuery, () => {
 
     const jsonMediaQuery = breakpointUp('md');
     make(jsonMediaQuery);
-    expect(matchMediaSpy).toHaveBeenLastCalledWith(json2mq(jsonMediaQuery));
+    expect(matchMediaSpy).toHaveBeenLastCalledWith(getMedia(jsonMediaQuery));
 
     const stringMediaQuery = '(min-width: 100px)';
     make(stringMediaQuery);
-    expect(matchMediaSpy).toHaveBeenLastCalledWith(stringMediaQuery);
+    expect(matchMediaSpy).toHaveBeenLastCalledWith(getMedia(stringMediaQuery));
 
     matchMediaSpy.mockRestore();
   });

website/src/views/hooks/useMediaQuery.test.tsx

@@ -3,14 +3,16 @@ import { useMemo } from 'react';
 import { Subscription, useSubscription } from 'use-subscription';
 import json2mq from 'json2mq';
 
+export function getMedia(mediaQuery: MediaQuery): string {
+  return typeof mediaQuery === 'string' ? mediaQuery : json2mq(mediaQuery);
+}
+
 /**
  * To be used together with utilities in css.ts.
  * @returns Whether `mediaQuery` is/are matched.
  */
 export default function useMediaQuery(mediaQuery: MediaQuery) {
-  const media = useMemo(() => (typeof mediaQuery === 'string' ? mediaQuery : json2mq(mediaQuery)), [
-    mediaQuery,
-  ]);
+  const media = useMemo(() => getMedia(mediaQuery), [mediaQuery]);
 
   const subscription = useMemo<Subscription<boolean>>(
     () => ({

website/src/views/hooks/useMediaQuery.ts

@@ -1,21 +1,46 @@
-import ScrollSpy from 'react-scrollspy';
-import { shallow } from 'enzyme';
-
 import { Module } from 'types/modules';
+import { screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
 /** @var {Module} */
 import { CS1010S } from '__mocks__/modules';
-
+import { initAction } from 'test-utils/redux';
+import { mockDom, mockDomReset } from 'test-utils/mockDom';
+import reducers from 'reducers';
+import configureStore from 'bootstrapping/configure-store';
+import renderWithRouterMatch from 'test-utils/renderWithRouterMatch';
 import ModulePageContent from './ModulePageContent';
 
-describe(ModulePageContent, () => {
+describe('ModulePageContent', () => {
   function make(module: Module = CS1010S) {
-    return shallow(<ModulePageContent module={module} />);
+    const initialState = reducers(undefined, initAction());
+    const { store } = configureStore(initialState);
+    return renderWithRouterMatch(
+      <Provider store={store}>
+        <ModulePageContent module={module} />
+      </Provider>,
+      {},
+    );
   }
 
+  beforeEach(() => {
+    mockDom();
+  });
+
+  afterEach(() => {
+    mockDomReset();
+  });
+
   test('side menu items should appear in the same order in the document', () => {
-    const component = make();
-    expect(component.find('[id]').map((ele) => ele.prop('id'))).toEqual(
-      component.find(ScrollSpy).prop('items'),
-    );
+    const { view } = make();
+    const { container } = view;
+    const sideMenuItems = screen
+      .getAllByRole('link')
+      .map((elem) => elem.textContent?.toLowerCase());
+    const sideMenuSet = new Set(sideMenuItems);
+    const documentIds = Array.from(container.querySelectorAll('[id]'))
+      .map((ele) => ele.id)
+      .filter((ele) => sideMenuSet.has(ele));
+    expect(sideMenuItems).toEqual(documentIds);
   });
 });