Set title and description; test coverage

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

Author: RoyEJohnson

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/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/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('');
+    });
+});