Test coverage

Author: RoyEJohnson

src/app/pages/details/common/resource-box/resource-box-utils.tsx

@@ -18,8 +18,8 @@ function encodeLocation(search: string) {
 }
 
 export type ResourceData = {
-    linkExternal: string;
-    linkDocumentUrl: string;
+    linkExternal?: string;
+    linkDocumentUrl?: string;
     linkDocument?: {
         file: string;
     };
@@ -29,18 +29,18 @@ export type ResourceData = {
         heading: string;
         resourceCategory: string;
         resourceUnlocked: boolean;
-        creatorFestResource: boolean;
+        creatorFestResource?: boolean;
         description: string;
         comingSoonText?: string;
     };
     comingSoonText: string | null;
     videoReferenceNumber?: number | null;
     k12?: boolean;
     printLink: string | null;
-    resourceUnlocked: boolean;
+    resourceUnlocked?: boolean;
     lockedText?: string;
-    resourceHeading: string;
-    resourceDescription: string;
+    resourceHeading?: string;
+    resourceDescription?: string;
     featured?: boolean;
 };
 

src/app/pages/details/desktop-view/instructor-resource-tab/partners/partners.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import {useNavigate} from 'react-router-dom';
+import {NavigateOptions, useNavigate} from 'react-router-dom';
 import PartnerCard from '~/components/partner-card/partner-card';
+import {assertNotNull} from '~/helpers/data';
 import './partners.scss';
 
 type PartnerBlurb = {
@@ -32,12 +33,10 @@ export default function Partners({
         (event: React.MouseEvent<HTMLAnchorElement>) => {
             const destUrl = event.currentTarget.getAttribute('href');
 
-            if (destUrl) {
-                navigate(destUrl, {
-                    book: bookAbbreviation,
-                    redirect: true
-                } as never);
-            }
+            navigate(assertNotNull(destUrl), {
+                book: bookAbbreviation,
+                redirect: true
+            } as NavigateOptions);
             event.preventDefault();
         },
         [navigate, bookAbbreviation]

src/app/pages/details/phone-view/instructor-resources-pane/instructor-resources-pane.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
-import {useNavigate} from 'react-router-dom';
+import {NavigateOptions, useNavigate} from 'react-router-dom';
 import {resourceBoxModel, useResources} from '../../common/resource-box/resource-box-utils';
 import FeaturedResourcesSection from '../../common/featured-resources/featured-resources';
 import ResourceBoxes from '../../common/resource-box/resource-boxes';
@@ -10,6 +10,7 @@ import useUserContext, {type UserStatus} from '~/contexts/user';
 import useWindowContext, {WindowContextProvider} from '~/contexts/window';
 import type {ContextValues} from '../../context';
 import './instructor-resources-pane.scss';
+import {assertNotNull} from '~/helpers/data';
 
 export function InstructorResourcesPane({
     model,
@@ -50,7 +51,7 @@ export function InstructorResourcesPane({
         navigate('/partners', {
             book: model.salesforceAbbreviation,
             redirect: true
-        } as never);
+        } as NavigateOptions);
     }
 
     return (
@@ -62,7 +63,7 @@ export function InstructorResourcesPane({
                     models={featuredModels}
                 />
             )}
-            <a className="card filter-for-book" onClick={goToPartners}>
+            <a className="card filter-for-book" href="/partners" onClick={goToPartners}>
                 OpenStax Partners <FontAwesomeIcon icon={faSignOutAlt} />
             </a>
             <div
@@ -92,7 +93,7 @@ function StubUnlessDisplayed({
     const {innerWidth, scrollY} = useWindowContext();
 
     React.useEffect(
-        () => setY((y || ref.current?.getBoundingClientRect().y) ?? null),
+        () => setY(y || assertNotNull(ref.current).getBoundingClientRect().y),
         [innerWidth, scrollY, y]
     );
 
@@ -112,9 +113,6 @@ export default function LoadUserStatusThenInstructorPane({
 }) {
     const {userStatus} = useUserContext();
 
-    if (!userStatus) {
-        return null;
-    }
     return (
         <WindowContextProvider>
             <StubUnlessDisplayed model={model} userStatus={userStatus} />

src/app/pages/details/phone-view/student-resources-pane/student-resources-pane.tsx

@@ -52,8 +52,5 @@ export default function LoadUserStatusThenStudentPane({
 }) {
     const {userStatus} = useUserContext();
 
-    if (!userStatus) {
-        return null;
-    }
     return <StudentResourcesPane model={model} userStatus={userStatus} />;
 }

test/src/data/details-college-algebra.js

@@ -1313,7 +1313,19 @@ const details = {
     },
     "partner_list_label": "Technology Partners",
     "partner_page_link_text": "See all partners",
-    "videos": [],
+    "videos": [
+        {
+            "type": "video",
+            "value": [
+                {
+                    "title": "Interface",
+                    "description": "<p data-block-key=\"ftocg\">As the world’s largest producer of carpet tile and other flooring materials, Interface is everywhere. Their modular products foster a great degree of creativity and innovation in interior design and function, and allow their clients to have a positive impact on the world around them. Interface’s sustainability principles and initiatives -- Mission Zero and Climate Take Back -- have led to powerful community engagement and revolutionary technological enhancements.<br/><br/>This video is part of the OpenStax Business series, which showcases entrepreneurs and businesses with a focus on purpose, principles, and best business practices. It can be used with any OpenStax business textbook.</p>",
+                    "embed": "<script src=\"https://fast.wistia.com/embed/medias/hyb2pj6nrg.jsonp\" async></script><script src=\"https://fast.wistia.com/assets/external/E-v1.js\" async></script><div class=\"wistia_embed wistia_async_hyb2pj6nrg\" style=\"height:360px;position:relative;width:640px\"><div class=\"wistia_swatch\" style=\"height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;\"><img src=\"https://fast.wistia.com/embed/medias/hyb2pj6nrg/swatch\" style=\"filter:blur(5px);height:100%;object-fit:contain;width:100%;\" alt=\"\" aria-hidden=\"true\" onload=\"this.parentNode.style.opacity=1;\" /></div></div>"
+                }
+            ],
+            "id": "28d0ee63-04e0-4128-ba2b-9239b7da5e4e"
+        }
+    ],
     "promote_image": null,
     "last_updated_pdf": null,
     "featured_resources_header": null

test/src/pages/details/details-tab.test.tsx

@@ -0,0 +1,36 @@
+// details-tab is dynamically loaded, so needs to be tested separately
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import DetailsTab from '~/pages/details/desktop-view/details-tab/details-tab';
+import {LanguageContextProvider} from '~/contexts/language';
+
+type Props = Parameters<typeof DetailsTab>[0];
+
+jest.mock('~/pages/details/common/get-this-title');
+
+const model = {
+    id: 2,
+    title: 'model-title',
+    description: 'model-description',
+    adoptions: 69,
+    slug: 'whatever'
+} as Props['model'];
+
+function Component(props: Props) {
+    return (
+        <LanguageContextProvider>
+            <DetailsTab {...props} />
+        </LanguageContextProvider>
+    );
+}
+
+describe('details-tab', () => {
+    it('renders (English)', () => {
+        render(<Component model={model} polish={false} />);
+        screen.getByRole('heading', {level: 3, name: 'Summary'});
+    });
+    it('renders (Polish)', () => {
+        render(<Component model={model} polish={true} />);
+        screen.getByRole('heading', {level: 3, name: 'Przejdź do książki'});
+    });
+});

test/src/pages/details/details.test.tsx

@@ -8,6 +8,7 @@ import ShellContextProvider from '~/../../test/helpers/shell-context';
 import * as DH from '~/helpers/use-document-head';
 import $ from '~/helpers/$';
 import * as WC from '~/contexts/window';
+import * as RBU from '~/pages/details/common/resource-box/resource-box-utils';
 
 // Tamp down meaningless errors
 jest.mock('~/models/rex-release', () =>
@@ -23,14 +24,15 @@ jest.mock('~/models/table-of-contents-html', () =>
     jest.fn().mockReturnValue(Promise.resolve({}))
 );
 
+jest.spyOn(window, 'scrollBy').mockImplementation(() => null);
 jest.spyOn(DH, 'setPageTitleAndDescriptionFromBookData').mockReturnValue();
 const spyIsPolish = jest.spyOn($, 'isPolish');
 const spyWindowContext = jest.spyOn(WC, 'default');
 
-function Component() {
+function Component({path='/details/books/college-algebra'}) {
     return (
         <ShellContextProvider>
-            <MemoryRouter initialEntries={['/details/books/college-algebra']}>
+            <MemoryRouter initialEntries={[path]}>
                 <Routes>
                     <Route
                         path="/details/books/:title"
@@ -58,27 +60,74 @@ function lengthOfView(phoneOrBigger: string) {
 }
 
 describe('Details page', () => {
+    const user = userEvent.setup();
+    const saveWarn = console.warn;
+
     beforeEach(() => {
         document.head.innerHTML = '';
         const el = document.createElement('meta');
 
         el.setAttribute('name', 'description');
         document.head.appendChild(el);
     });
+    console.debug = jest.fn();
 
-    it('renders book', async () => {
+    it('renders book with video data', async () => {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
         spyWindowContext.mockReturnValue({innerWidth: 1280} as any);
         render(<Component />);
         await finishedRendering();
         expect(lengthOfView('phone')).toBeUndefined();
-        expect(lengthOfView('bigger')).toBe(98);
+        expect(lengthOfView('bigger')).toBe(794);
 
         const jsonLdScript = document.head.querySelector('script');
 
         expect(jsonLdScript?.textContent).toEqual(
             expect.stringContaining('mainEntity')
         );
+        const tabs = screen.getAllByRole('tab');
+
+        expect(tabs).toHaveLength(4);
+        // These do not seem to update the tab state as expected, though they
+        // do exercise some code.
+        await user.click(tabs[1]);
+    });
+    it('renders with Student tab selected', async () => {
+        const mockLocation = jest.spyOn(window, 'location', 'get').mockReturnValue({
+            ...window.location,
+            search: '?Student%20resources'
+        });
+
+        render(<Component path='/details/books/biology-2e' />);
+        const tabs = await screen.findAllByRole('tab');
+
+        expect(tabs[2].getAttribute('aria-selected')).toBe('true');
+        await user.click(tabs[1]);
+        mockLocation.mockRestore();
+    });
+    it('renders with Instructor tab selected', async () => {
+        jest.spyOn(RBU, 'useResources').mockReturnValue({
+            bookVideoFacultyResources: [],
+            bookFacultyResources: []
+        });
+        const mockLocation = jest.spyOn(window, 'location', 'get').mockReturnValue({
+            ...window.location,
+            search: '?Instructor%20resources'
+        });
+
+        render(<Component />);
+        await finishedRendering();
+        const tabs = screen.getAllByRole('tab');
+
+        expect(tabs[1].getAttribute('aria-selected')).toBe('true');
+        await user.click(tabs[2]);
+
+        screen.getByRole('heading', {name: 'Technology Partners'});
+        console.warn = jest.fn();
+        await user.click(screen.getByRole('link', {name: 'MagicBox E-Reader'}));
+        expect(console.warn).toHaveBeenCalled();
+        console.warn = saveWarn;
+        mockLocation.mockRestore();
     });
     it('renders Polish book', async () => {
         spyIsPolish.mockReturnValue(true);
@@ -104,19 +153,53 @@ describe('Details page', () => {
         );
     });
     it('renders only phone-view at phone width', async () => {
+        jest.spyOn(RBU, 'useResources').mockReturnValue({
+            bookVideoFacultyResources: [],
+            bookFacultyResources: [
+                {
+                    featured: true,
+                    linkText: 'Link text',
+                    comingSoonText: '',
+                    printLink: 'print-link',
+                    videoReferenceNumber: 13
+                },
+                {
+                    featured: false,
+                    linkText: 'Link text2',
+                    comingSoonText: '',
+                    printLink: 'print-link2',
+                    videoReferenceNumber: null,
+                    resource: {
+                        id: 1,
+                        heading: 'resource-heading',
+                        resourceCategory: 'any',
+                        resourceUnlocked: true,
+                        description: 'resource-description'
+                    }
+                }
+            ]
+        });
         spyWindowContext.mockReturnValue({innerWidth: 480} as any); // eslint-disable-line
         render(<Component />);
         await finishedRendering();
         expect(lengthOfView('phone')).toBe(346);
         expect(lengthOfView('bigger')).toBeUndefined();
+
+        jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+            y: 100
+        } as any); // eslint-disable-line
+        await user.click(screen.getByRole('button', {name: 'Instructor resources updated'}));
+        console.warn = jest.fn();
+        await user.click(await screen.findByRole('link', {name: 'OpenStax Partners'}));
+        expect(console.warn).toHaveBeenCalled();
+        console.warn = saveWarn;
     });
     it('toggles authors at phone width', async () => {
         spyWindowContext.mockReturnValue({innerWidth: 480} as any); // eslint-disable-line
         render(<Component />);
         await finishedRendering();
         const authorToggle = await screen.findByText('Authors');
         const detailsEl = authorToggle.closest('details');
-        const user = userEvent.setup();
 
         await user.click(authorToggle);
         expect(detailsEl?.open).toBe(true);

test/src/pages/details/left-content.test.tsx

@@ -19,8 +19,11 @@ describe('left-content', () => {
         comingSoon: false,
         iconType: 'lock',
         heading: 'heading',
-        double: false
-    } as unknown as ModelType; // incomplete, but it's enough for testing
+        double: false,
+        bookModel: {
+            id: 1
+        }
+    } as ModelType; // incomplete, but it's enough for testing
     const link = {url: '#good-url', text: 'button-label'};
     // Setup option prevents await click from hanging when using faketimers
     const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});