Coverage: login menu

"hinkyQAIssue" came from years ago; the solution isn't legal.

use-navigate-by-key adjusted

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/default.test.tsx

@@ -280,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()
@@ -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');
@@ -349,21 +364,16 @@ describe('default layout', () => {
 
         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 () => {
-        // Normally dynamically loaded, so needs its own test
-        const myOpenStaxUser = {
-            contact: {
-                firstName: 'Roy',
-                lastName: 'Johnson'
-            }
-        };
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        jest.spyOn(UUC, 'default').mockReturnValue({userModel: {id: 16249}, myOpenStaxUser} as any);
         render(<MemoryRouter initialEntries={['/webinars']}>
             <LoginMenu />
         </MemoryRouter>);
@@ -381,4 +391,26 @@ describe('default layout', () => {
         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'});
+    });
 });