Test coverage

main-menu/dropdown
main-menu
login menu
"hinkyQAIssue" came from years ago; the solution wasn't legal.

use-navigate-by-key adjusted

Test coverage: menu-expander

Author: RoyEJohnson

src/app/layouts/default/header/menus/main-menu/dropdown/use-navigate-by-key.ts

@@ -1,20 +1,20 @@
 import useDropdownContext from '../../dropdown-context';
 import {isMobileDisplay} from '~/helpers/device';
+import { assertDefined } from '~/helpers/data';
 
 function findNext(dropdownRef: React.MutableRefObject<HTMLDivElement | null>) {
     const nextSib = document.activeElement?.nextElementSibling;
 
     if (nextSib?.matches('a')) {
         return nextSib as HTMLAnchorElement;
     }
-    const targets = Array.from(dropdownRef.current?.querySelectorAll('a') ?? []);
+    const targets = Array.from(assertDefined(dropdownRef.current?.querySelectorAll('a')));
     const idx = targets.indexOf(document.activeElement as HTMLAnchorElement);
     const nextIdx = (idx + 1) % targets.length;
 
     return targets[nextIdx];
 }
 
-// eslint-disable-next-line complexity
 function findPrev(
     topRef: React.MutableRefObject<HTMLAnchorElement | null>,
     dropdownRef: React.MutableRefObject<HTMLDivElement | null>
@@ -24,7 +24,7 @@ function findPrev(
     if (prevSib?.matches('a')) {
         return prevSib as HTMLAnchorElement;
     }
-    const targets = Array.from(dropdownRef.current?.querySelectorAll('a') ?? []);
+    const targets = Array.from(assertDefined(dropdownRef.current?.querySelectorAll('a')));
     const idx = targets.indexOf(document.activeElement as HTMLAnchorElement);
 
     if (idx === 0) {

src/app/layouts/default/header/menus/main-menu/login-menu/login-menu.tsx

@@ -7,20 +7,12 @@ import linkHelper from '~/helpers/link';
 function LoginLink() {
     // It's not used directly, but loginLink changes when it does
     useLocation();
-    const addressHinkyQAIssue = React.useCallback(
-        (e: React.MouseEvent<HTMLAnchorElement>) => {
-            if (e.defaultPrevented) {
-                e.defaultPrevented = false;
-            }
-        },
-        []
-    );
 
     return (
         <li className="login-menu nav-menu-item rightmost">
             <a
                 href={linkHelper.loginLink()} className="pardotTrackClick"
-                data-local="true" role="menuitem" onClick={addressHinkyQAIssue}
+                data-local="true" role="menuitem"
             >
                 Log in
             </a>

test/src/layouts/default/data/osmenu.json renamed to test/src/layouts/default/data/oxmenu.json

@@ -31,5 +31,8 @@
             },
             {"label": "Webinars", "partial_url": "/webinars"}
         ]
+    },
+    {
+        "oops": "Not a valid menu"
     }
 ]

test/src/layouts/default/default.test.tsx

@@ -13,10 +13,16 @@ import StickyNote from '~/layouts/default/header/sticky-note/sticky-note';
 import stickyData from './data/sticky.json';
 import fundraiserData from './data/fundraiser.json';
 import footerData from './data/footer.json';
-import oxmenuData from './data/osmenu.json';
+import oxmenuData from './data/oxmenu.json';
 import giveTodayData from './data/give-today.json';
 import giveBannerData from './data/givebanner.json';
 import * as CF from '~/helpers/cms-fetch';
+import MemoryRouter from '../../../helpers/future-memory-router';
+import {Link} from 'react-router-dom';
+import * as UUC from '~/contexts/user';
+import LoginMenu from '~/layouts/default/header/menus/main-menu/login-menu/login-menu-with-dropdown';
+import MenuExpander from '~/layouts/default/header/menus/menu-expander/menu-expander';
+import {DropdownContextProvider} from '~/layouts/default/header/menus/dropdown-context';
 import '@testing-library/jest-dom';
 
 // Mock external dependencies
@@ -35,13 +41,6 @@ jest.mock('~/contexts/window', () => ({
     default: () => ({innerWidth: 1024})
 }));
 
-// Having it defined inline caused location updates on every call
-let mockPathname = {pathname: '/test-path'};
-
-jest.mock('react-router-dom', () => ({
-    useLocation: () => mockPathname
-}));
-
 const mockUseSharedDataContext = jest
     .fn()
     .mockReturnValue({stickyFooterState: [false, () => undefined]});
@@ -281,6 +280,19 @@ describe('default layout', () => {
         });
     }
 
+    const myOpenStaxUser = {
+        contact: {
+            firstName: 'Roy',
+            lastName: 'Johnson'
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const loggedInUser = {userModel: {id: 16249}, myOpenStaxUser} as any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const loggedOutUser = {} as any;
+
+    const spyUseUserContext = jest.spyOn(UUC, 'default').mockReturnValue(loggedOutUser);
+
     beforeAll(() => {
         global.fetch = jest
             .fn()
@@ -307,10 +319,11 @@ describe('default layout', () => {
             });
     });
     it('renders; menu opens and closes', async () => {
-        render(<DefaultLayout />);
-        expect(await screen.findAllByText('JIT Load Component')).toHaveLength(
-            2
-        );
+        render(<MemoryRouter initialEntries={['/webinars']}>
+            <DefaultLayout />
+            <Link to="/kinetic">Change route</Link>
+        </MemoryRouter>);
+        expect(await screen.findAllByText('JIT Load Component')).toHaveLength(2);
         const toggle = screen.getByRole('button', {
             name: 'Toggle Meta Navigation Menu'
         });
@@ -328,6 +341,8 @@ describe('default layout', () => {
         await user.click(overlay as Element);
         expect(toggle.getAttribute('aria-expanded')).toBe('false');
 
+        spyUseUserContext.mockReturnValue(loggedInUser);
+
         // close on Escape (but not on other keypress)
         await user.click(toggle);
         expect(toggle.getAttribute('aria-expanded')).toBe('true');
@@ -336,9 +351,66 @@ describe('default layout', () => {
         fireEvent.keyDown(menuContainer, {key: 'Escape'});
         expect(toggle.getAttribute('aria-expanded')).toBe('false');
 
-        // close on location change (the open is immediately reversed because the path has changed)
-        mockPathname = {pathname: '/test-path'};
-        await user.click(toggle);
+        // close on location change
+        fireEvent.click(screen.getByText('Change route'));
         expect(toggle.getAttribute('aria-expanded')).toBe('false');
+
+        const techMenu = screen.getAllByRole('button', {name: 'Technology'})[0];
+
+        await user.click(techMenu);
+        expect(techMenu.getAttribute('aria-expanded')).toBe('false');
+        await user.click(techMenu);
+        expect(techMenu.getAttribute('aria-expanded')).toBe('true');
+
+        fireEvent.focus(techMenu);
+        fireEvent.keyDown(techMenu, {key: 'ArrowDown'});
+        expect(document.activeElement?.textContent).toBe('OpenStax Assignable');
+        fireEvent.keyDown(techMenu, {key: 'ArrowUp'});
+        expect(document.activeElement?.textContent).toBe('Technology arrow');
+        fireEvent.keyDown(techMenu, {key: 'ArrowRight'});
+        expect(document.activeElement?.textContent).toBe('What we do arrow');
+        fireEvent.keyDown(techMenu, {key: 'ArrowLeft'});
+        expect(document.activeElement?.textContent).toBe('What we do arrow');
+        expect(techMenu.getAttribute('aria-expanded')).toBe('false');
+    });
+    it('renders login menu', async () => {
+        render(<MemoryRouter initialEntries={['/webinars']}>
+            <LoginMenu />
+        </MemoryRouter>);
+        await screen.findByText('Account Dashboard');
+    });
+    it('closes mobile menu on location change', () => {
+        const toggleActive = jest.fn();
+
+        render(<DropdownContextProvider>
+            <MemoryRouter initialEntries={['/webinars']}>
+                <MenuExpander active={true} toggleActive={toggleActive} />
+                <Link to="/kinetic">Change route</Link>
+            </MemoryRouter>
+        </DropdownContextProvider>);
+        fireEvent.click(screen.getByText('Change route'));
+        expect(toggleActive).toHaveBeenCalledWith(false);
+    });
+    it('renders login-menu options based on userModel', async () => {
+        spyUseUserContext.mockReturnValue({
+            myOpenStaxUser: {
+                error: 'true'
+            },
+            // @ts-expect-error userModel missssing properties
+            userModel: {
+                instructorEligible: true,
+                incompleteSignup: true,
+                pendingInstructorAccess: true,
+                emailUnverified: true
+            }
+        });
+        render(<MemoryRouter initialEntries={['/webinars']}>
+            <LoginMenu />
+        </MemoryRouter>);
+        screen.getByRole('link', {name: 'Account Profile'});
+        screen.getByRole('link', {name: 'Request instructor access'});
+        screen.getByRole('link', {name: 'Complete your profile'});
+        screen.getByRole('link', {name: 'Pending instructor access'});
+        screen.getByRole('link', {name: 'Verify your email address'});
     });
 });

test/src/layouts/default/main-menu.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import ShellContextProvider from '../../../helpers/shell-context';
+import MainMenu from '~/layouts/default/header/menus/main-menu/main-menu';
+import MemoryRouter from '../../../helpers/future-memory-router';
+import * as ULC from '~/contexts/language';
+
+jest.mock('~/models/give-today', () => jest.fn().mockReturnValue({}));
+
+function Component({path = '/'}) {
+    return <ShellContextProvider>
+        <MemoryRouter initialEntries={[path]}>
+            <MainMenu />
+        </MemoryRouter>
+    </ShellContextProvider>;
+}
+
+describe('main-menu', () => {
+    it('shows subjects menu when there are subjects', async () => {
+        render(<Component />);
+
+        await screen.findByRole('link', {name: 'Math'});
+        screen.getByRole('link', {name: 'Spanish'});
+        screen.getByRole('link', {name: '🍎 For K12 Teachers'});
+    });
+    it('hides language options in /details/books paths', async () => {
+        render(<Component path='/details/books/a-book' />);
+
+        await screen.findByRole('link', {name: 'Math'});
+        expect(screen.queryByRole('link', {name: 'Spanish'})).toBeNull();
+    });
+    it('hides k12 item in Spanish', async () => {
+        const spyLang = jest.spyOn(ULC, 'default').mockReturnValue({language: 'es', setLanguage: jest.fn()});
+
+        render(<Component />);
+
+        await screen.findByRole('link', {name: 'Math'});
+        expect(screen.queryByRole('link', {name: '🍎 For K12 Teachers'})).toBeNull();
+        spyLang.mockReset();
+    });
+});