Core 1268 review portal routing and tests (#2784)

* fixed portal/adoption

* Fix coverage on vertical-list

* Port portal-page-routes; code coverage for rex-portal

* Coverage for contexts/portal

* test coverage for page-routes and portal-page-routes

* Quiet Memory Router and a couple lint issues

* Coverage for use-link-handler

* Page-loaders

* Remove piTracker test from shell

* Reorder tests to avoid flaky failure

Author: RoyEJohnson

package.json

@@ -133,6 +133,7 @@
         "setupFiles": [
             "<rootDir>/test/setupFile.js"
         ],
+        "maxWorkers": "60%",
         "modulePathIgnorePatterns": [
             "package.json"
         ],

src/app/components/shell/router-helpers/page-loaders.js

@@ -0,0 +1,46 @@
+import React, {useEffect} from 'react';
+import {useLocation} from 'react-router-dom';
+import loadable from 'react-loadable';
+import LoadingPlaceholder from '~/components/loading-placeholder/loading-placeholder';
+import useLayoutContext from '~/contexts/layout';
+
+function useAnalyticsPageView() {
+    const location = useLocation();
+    const isRedirect = location.state?.redirect;
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [isRedirect]);
+}
+
+function usePage(name: string) {
+    return React.useMemo(() => {
+        return loadable({
+            loader: () => import(`~/pages/${name}/${name}`),
+            loading: LoadingPlaceholder,
+            render(loaded, props: object) {
+                const Component = loaded.default;
+
+                return <Component {...props} />;
+            }
+        });
+    }, [name]);
+}
+
+export function ImportedPage({name}: {name: string}) {
+    const {pathname} = useLocation();
+    const Page = usePage(name);
+    const {layoutParameters, setLayoutParameters} = useLayoutContext();
+
+    if (layoutParameters.name === null) {
+        setLayoutParameters();
+    }
+
+    useAnalyticsPageView();
+
+    // Scroll to the top when the pathname changes
+    // (Avoids scrolling when going to a new tab)
+    useEffect(() => window.scrollTo(0, 0), [name, pathname]);
+
+    return <Page />;
+}

src/app/components/shell/router-helpers/page-loaders.tsx

@@ -54,7 +54,6 @@ export function DetailsRoutes() {
     );
 }
 
-// eslint-disable-next-line complexity
 export function OtherPageRoutes() {
     const dir = assertDefined(useParams().dir);
     const {'*': path} = useParams();
@@ -79,25 +78,27 @@ export function OtherPageRoutes() {
     }
 
     // Some pages have no page data in the CMS!
-    if (
-        [
-            'adopters',
-            'adoption',
-            'blog',
-            'campaign',
-            'confirmation',
-            'institutional-partnership-application',
-            'interest',
-            'renewal-form',
-            'separatemap'
-        ].includes(dir)
-    ) {
+    if (isNoDataPage(dir)) {
         return <ImportedPage name={dir} />;
     }
 
     return <RouteAsPortalOrNot />;
 }
 
+export function isNoDataPage(dir: string) {
+    return [
+        'adopters',
+        'adoption',
+        'blog',
+        'campaign',
+        'confirmation',
+        'institutional-partnership-application',
+        'interest',
+        'renewal-form',
+        'separatemap'
+    ].includes(dir);
+}
+
 // There are a couple of pages whose names in the CMS don't match their osweb urls
 const mismatch: Record<string, string> = {
     press: 'news',

src/app/components/shell/router-helpers/page-routes.tsx

@@ -11,7 +11,8 @@ import {
     usePageDataFromRoute,
     FlexPageUsingItsOwnLayout,
     NonFlexPageUsingDefaultLayout,
-    DetailsRoutes
+    DetailsRoutes,
+    isNoDataPage
 } from './page-routes';
 import {assertDefined} from '~/helpers/data';
 import {ImportedPage} from './page-loaders';
@@ -30,16 +31,26 @@ export function RouteAsPortalOrNot() {
     }
 
     const isFlex = !hasError && isFlexPage(data);
-    const isPortal = isFlex && data.layout[0].type === 'landing';
+    const isPortal = isFlex && data.layout[0]?.type === 'landing';
 
     if (isPortal) {
         if (portalPrefix !== `/${name}`) {
             setPortal(assertDefined(name));
             return null;
         }
+
         if (!other) {
             return <FlexPageUsingItsOwnLayout data={data} />;
         }
+
+        if (isNoDataPage(other)) {
+            return (
+                <LayoutUsingData data={data}>
+                    <ImportedPage name={other} />
+                </LayoutUsingData>
+            );
+        }
+
         return (
             <LayoutUsingData data={data}>
                 <Routes>
@@ -61,29 +72,20 @@ export function RouteAsPortalOrNot() {
     return <NonFlexPageUsingDefaultLayout data={data} />;
 }
 
-// eslint-disable-next-line complexity
-export function PortalSubRoute() {
+function PortalSubRoute() {
     const {name, data, hasError} = usePageDataFromRoute();
 
-    if (!data) {
-        return null;
-    }
-
     if (hasError) {
         return <Error404 />;
     }
 
-    const isFlex = !hasError && isFlexPage(data);
+    if (isFlexPage(data)) {
+        return <FlexPage data={assertDefined(data)} />;
+    }
 
-    if (isFlex) {
-        return <FlexPage data={data} />;
+    if (data?.body) {
+        return <GeneralPageFromSlug slug={`spike/${data?.meta.slug}`} />;
     }
-    const isGeneral = Boolean(data?.body);
 
-    return isGeneral ? (
-        <GeneralPageFromSlug slug={`spike/${data?.meta.slug}`} />
-    ) : (
-        <ImportedPage name={name} />
-    );
+    return <ImportedPage name={assertDefined(name)} />;
 }
-

src/app/components/shell/router-helpers/portal-page-routes.js renamed to src/app/components/shell/router-helpers/portal-page-routes.tsx

@@ -1,5 +1,7 @@
 import usePortalContext from '~/contexts/portal';
 
+// This is about making TOC links to Rex work with a portal there.
+// Will probably need to be revisited.
 export function useRexPortalLinkOrNot(link: string) {
     const {portalPrefix} = usePortalContext();
 

src/app/helpers/rex-portal.ts

@@ -5,7 +5,7 @@ import BookSelector, {
     useSelectedBooks
 } from '~/components/book-selector/book-selector';
 import {useAfterSubmit} from '~/components/book-selector/after-form-submit';
-import {MemoryRouter} from 'react-router-dom';
+import MemoryRouter from '~/../../test/helpers/future-memory-router';
 import {describe, it, expect} from '@jest/globals';
 import {LanguageContextProvider} from '~/contexts/language';
 

test/src/components/book-selector.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {render, screen} from '@testing-library/preact';
 import { LoadedPage } from '~/components/jsx-helpers/loader-page';
-import {MemoryRouter} from 'react-router-dom';
+import MemoryRouter from '~/../../test/helpers/future-memory-router';
 
 describe('loader-page', () => {
     // The rest of the code is exercised in other tests.

test/src/components/loader-page.test.tsx

@@ -47,11 +47,20 @@ describe('role-selector', () => {
         expect(options[0].getAttribute('aria-selected')).toBe('false');
         await user.keyboard('{Enter}');
         expect(options[0].getAttribute('aria-selected')).toBe('true');
+        listbox.focus();
         await user.keyboard('{Escape}');
         // Select by space
+        listbox.focus();
         await user.keyboard('{ArrowDown} ');
-        const i = options.findIndex((o) => o.getAttribute('aria-selected') === 'true');
+        const i = options.findIndex(
+            (o) => o.getAttribute('aria-selected') === 'true'
+        );
 
         expect(i).toBe(1);
+        // Select by mouse
+        listbox.focus();
+        // fireEvent.mouseEnter(options[1]);
+        await user.click(options[1]);
+        expect(options[1].getAttribute('aria-selected')).toBe('true');
     });
 });

test/src/components/role-selector.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {describe, it, expect} from '@jest/globals';
 import {render, screen, fireEvent} from '@testing-library/preact';
-import {MemoryRouter} from 'react-router-dom';
+import MemoryRouter from '~/../../test/helpers/future-memory-router';
 import SearchBar from '~/components/search-bar/search-bar';
 
 describe('search-bar', () => {