Layout coverage

openstax · Sep 23, 2024 · b13a17e · b13a17e
1 parent e48bf72
commit b13a17e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 23 deletions.
diff --git a/src/app/contexts/layout.tsx b/src/app/contexts/layout.tsx
@@ -18,17 +18,19 @@ type LayoutParameters = {
 const defaultLayoutParameters: LayoutParameters = {name: 'default'};
 
 function useContextValue() {
-    const [layoutParameters, setLayoutParameters] = React.useReducer(
-        (state: LayoutParameters, newState: LayoutParameters) => {
-            if (newState === undefined) {
-                return defaultLayoutParameters;
+    const [layoutParameters, setLayoutParameters] = React.useState(defaultLayoutParameters);
+    const updateIfNotEqual = React.useCallback(
+        (newValue?: LayoutParameters) => {
+            if (newValue === undefined) {
+                setLayoutParameters(defaultLayoutParameters);
+                return;
             }
-            if (deepEqual(state, newState)) {
-                return state;
+            if (deepEqual(layoutParameters, newValue)) {
+                return;
             }
-            return newState;
+            setLayoutParameters(newValue);
         },
-        defaultLayoutParameters
+        [layoutParameters]
     );
     const LoadableLayout = React.useMemo(
         () =>
@@ -45,7 +47,7 @@ function useContextValue() {
         [LoadableLayout, layoutParameters.data]
     );
 
-    return {Layout, setLayoutParameters, layoutParameters};
+    return {Layout, setLayoutParameters: updateIfNotEqual, layoutParameters};
 }
 
 const {useContext, ContextProvider} = buildContext({useContextValue});

diff --git a/test/src/contexts/layout.test.tsx b/test/src/contexts/layout.test.tsx
@@ -1,24 +1,50 @@
 import React from 'react';
 import {render, screen} from '@testing-library/preact';
 import useLayoutContext, { LayoutContextProvider } from '~/contexts/layout';
+import {MemoryRouter} from 'react-router-dom';
 
 function Component() {
     const {Layout, setLayoutParameters} = useLayoutContext();
 
     React.useEffect(
-        () => setLayoutParameters({name: 'landing', data: {title: 'title', layout: [
-            {
-                value: {
-                    navLinks: [{
-                        text: 'Landing page link',
-                        target: {
-                            type: 'href',
-                            value: 'whatever'
+        () => {
+            setLayoutParameters({
+                name: 'landing',
+                data: {
+                    title: 'title', layout: [
+                    {
+                        value: {
+                            navLinks: [{
+                                text: 'Landing page link',
+                                target: {
+                                    type: 'href',
+                                    value: 'whatever'
+                                }
+                            }]
                         }
                     }]
                 }
-            }
-        ]}}),
+            });
+            // Exercise the code that tests for equal setting
+            setTimeout(() => setLayoutParameters({
+                name: 'landing',
+                data: {
+                    title: 'title', layout: [
+                    {
+                        value: {
+                            navLinks: [{
+                                text: 'Landing page link',
+                                target: {
+                                    type: 'href',
+                                    value: 'whatever'
+                                }
+                            }]
+                        }
+                    }]
+                }
+            }), 5);
+            setTimeout(() => setLayoutParameters(undefined), 10);
+        },
         [setLayoutParameters]
     );
 
@@ -29,13 +55,24 @@ function Component() {
     );
 }
 
+jest.useFakeTimers();
+jest.mock('~/layouts/default/microsurvey-popup/microsurvey-popup', () => jest.fn());
+jest.mock('~/layouts/default/header/header', () => jest.fn());
+jest.mock('~/layouts/default/lower-sticky-note/lower-sticky-note', () => jest.fn());
+jest.mock('~/layouts/default/welcome/welcome', () => jest.fn());
+jest.mock('~/layouts/default/footer/footer', () => jest.fn());
+jest.mock('~/layouts/default/takeover-dialog/takeover-dialog', () => jest.fn());
+
 describe('layout-context', () => {
     it('renders a landing page', async () => {
         render(
-            <LayoutContextProvider>
-                <Component />
-            </LayoutContextProvider>
+            <MemoryRouter>
+                <LayoutContextProvider>
+                    <Component />
+                </LayoutContextProvider>
+            </MemoryRouter>
         );
-        await screen.findByText('Landing page link');
+        jest.runAllTimers();
+        await screen.findByText('No menus');
     });
 });