Core 801 set document title for footer pages (#2715)

* Rename footer-pages -> .tsx

* Set title and description; test coverage

Also removed a couple of unused imports from latest-blog-posts

* Add lint to the build steps

* Fix Contact page, too

With associated test updates

Author: RoyEJohnson

.github/workflows/build.yml

@@ -15,6 +15,9 @@ jobs:
       -
         name: "Setup environment"
         run: ./script/setup
+      -
+        name: "Lint osweb"
+        run: yarn lint
       -
         name: "Build osweb"
         run: ./script/build production

src/app/pages/contact/contact.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import usePageData from '~/helpers/use-page-data';
+import LoaderPage from '~/components/jsx-helpers/loader-page';
+import useDocumentHead from '~/helpers/use-document-head';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import Form from './form';
 import './contact.scss';
@@ -10,22 +11,26 @@ type PageData = {
     mailingHeader: string;
     mailingAddress: string;
     customerService: string;
+    meta?: {
+        searchDescription: string;
+    }
 }
 
-export default function ContactPage() {
-    const pageData = usePageData<PageData>('pages/contact');
-
-    if (!pageData) {
-        return null;
-    }
+function ContactPage({data: pageData}: {data: PageData}) {
     const {
         title,
         tagline,
         mailingHeader,
         mailingAddress,
-        customerService
+        customerService,
+        meta
     } = pageData;
 
+    useDocumentHead({
+        title,
+        description: meta?.searchDescription
+    });
+
     return (
         <main id="maincontent" className="contact-page page">
             <div className="hero">
@@ -48,3 +53,11 @@ export default function ContactPage() {
         </main>
     );
 }
+
+export default function ContactPageLoader() {
+    return (
+        <main id="maincontent" className="contact-page page">
+            <LoaderPage slug="pages/contact" Child={ContactPage} />
+        </main>
+    );
+}

src/app/pages/footer-page/footer-page.js renamed to src/app/pages/footer-page/footer-page.tsx

@@ -2,29 +2,31 @@ import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import usePageData from '~/helpers/use-page-data';
 import {useLocation} from 'react-router-dom';
+import useDocumentHead from '~/helpers/use-document-head';
 import './footer-page.scss';
 
-const specialSlugFromPath = {
+const specialSlugFromPath: Record<string, string> = {
     '/privacy': '/privacy-policy'
 };
 
-export default function FooterPage() {
-    const {pathname} = useLocation();
-    const slugEnd = specialSlugFromPath[pathname] || pathname;
-    const slug = `pages${slugEnd}`;
-    const data = usePageData(slug);
-
-    React.useLayoutEffect(
-        () => window.scrollTo(0, 0),
-        [pathname]
-    );
+type PageData = {
+    introHeading: string;
+    title: string;
+    meta: {
+        searchDescription: string;
+    };
+} & {
+    [contentFieldName: string]: string;
+}
 
-    if (!data) {
-        return null;
-    }
+function FooterPage({data}: {data: PageData}) {
+    useDocumentHead({
+        title: data.title,
+        description: data.meta.searchDescription
+    });
 
-    const contentFieldName = Reflect.ownKeys(data)
-        .find((k) => k.match(/Content$/));
+    const contentFieldName = Object.keys(data)
+        .find((k) => k.match(/Content$/)) as string;
     const {introHeading: heading, [contentFieldName]: content} = data;
 
     return (
@@ -37,3 +39,21 @@ export default function FooterPage() {
         </div>
     );
 }
+
+export default function LoadFooterPage() {
+    const {pathname} = useLocation();
+    const slugEnd = specialSlugFromPath[pathname] ?? pathname;
+    const slug = `pages${slugEnd}`;
+    const data = usePageData<PageData>(slug);
+
+    React.useLayoutEffect(
+        () => window.scrollTo(0, 0),
+        [pathname]
+    );
+
+    if (!data) {
+        return null;
+    }
+
+    return <FooterPage data={data} />;
+}

test/src/components/shell.test.tsx

@@ -5,6 +5,9 @@ import AppElement from '~/components/shell/shell';
 import {BrowserRouter, MemoryRouter as MR} from 'react-router-dom';
 import ReactModal from 'react-modal';
 
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
 jest.mock('react-router-dom', () => {
     const actualRouterDom = jest.requireActual('react-router-dom');
 
@@ -32,8 +35,10 @@ jest.mock('react-modal', () => ({
 
 describe('shell', () => {
     it('Delivers embedded contact page', async () => {
+        console.warn = jest.fn();
+        console.debug = jest.fn();
         (BrowserRouter as jest.Mock).mockImplementationOnce(({children}) => (
-            <MR initialEntries={['/embedded/contact']}>{children}</MR>
+            <MR initialEntries={['/embedded/contact']} future={routerFuture}>{children}</MR>
         ));
 
         render(AppElement);
@@ -42,7 +47,7 @@ describe('shell', () => {
     });
     it('Delivers normal contact page', async () => {
         (BrowserRouter as jest.Mock).mockImplementationOnce(({children}) => (
-            <MR initialEntries={['/contact']}>{children}</MR>
+            <MR initialEntries={['/contact']} future={routerFuture}>{children}</MR>
         ));
 
         render(AppElement);

test/src/pages/blog/latest-blog-posts.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {render, screen} from '@testing-library/preact';
 import {describe, it, expect} from '@jest/globals';
-import {BrowserRouter, MemoryRouter, Routes, Route} from 'react-router-dom';
+import {BrowserRouter} from 'react-router-dom';
 import {BlogContextProvider} from '~/pages/blog/blog-context';
 
 import LatestBlogPosts from '~/pages/blog/latest-blog-posts/latest-blog-posts';

test/src/pages/contact.test.tsx

@@ -62,11 +62,11 @@ jest.spyOn(SFF, 'default').mockImplementation(MockSfForm);
 describe('contact page', () => {
     const user = userEvent.setup();
 
-    it('returns null until data', () => {
+    it('returns loader page until data', () => {
         spyUsePageData.mockReturnValue(undefined);
-        const {container} = render(<Component />);
+        render(<Component />);
 
-        expect(container.innerHTML).toBe('');
+        expect(document.body.textContent).toBe('');
     });
     it('displays the form', async () => {
         spyUsePageData.mockReturnValue(pageData);

test/src/pages/footer-page.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {render, screen} from '@testing-library/preact';
+import {MemoryRouter} from 'react-router-dom';
+import * as UPD from '~/helpers/use-page-data';
+import FooterPage from '~/pages/footer-page/footer-page';
+
+const mockUsePageData = jest.spyOn(UPD, 'default');
+
+// @ts-expect-error does not exist on
+const {routerFuture} = global;
+
+window.scrollTo = jest.fn();
+
+describe('footer-page', () => {
+    const saveWarn = console.warn;
+
+    it('renders', () => {
+        mockUsePageData.mockReturnValue({
+            introHeading: 'heading',
+            title: 'docTitle',
+            meta: {
+                searchDescription: 'description in head'
+            },
+            pageContent: 'the html for the page'
+        });
+        console.warn = jest.fn();
+
+        render(
+            <MemoryRouter initialEntries={['/aslug']} future={routerFuture}>
+                <FooterPage />
+            </MemoryRouter>);
+        expect((screen.getByRole('heading', {level: 1})).textContent).toBe('heading');
+        expect(document.head.querySelector('title')?.textContent).toBe('docTitle - OpenStax');
+        console.warn = saveWarn;
+    });
+    it('renders nothing until page data is received', async () => {
+        mockUsePageData.mockReturnValue(null);
+        render(
+            <MemoryRouter initialEntries={['/aslug']} future={routerFuture}>
+                <FooterPage />
+            </MemoryRouter>);
+        expect(document.body.textContent).toBe('');
+    });
+});