HHS · SammySteiner · Aug 25, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
@@ -1,8 +1,7 @@
 {
   "Index": {
-    "title": "Home",
-    "intro": "This is a template for a React web application using the <LinkToNextJs>Next.js framework</LinkToNextJs>.",
-    "body": "This is template includes:<ul><li>Framework for server-side rendered, static, or hybrid React applications</li><li>TypeScript and React testing tools</li><li>U.S. Web Design System for themeable styling and a set of common components</li><li>Type checking, linting, and code formatting tools</li><li>Storybook for a frontend workshop environment</li></ul>",
+    "page_title": "Home | Beta.grants.gov",
+    "meta_description": "Our mission is to increase access to grants and improve the grants experience for everyone. A one-stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
     "alert": "This website is a work in progress. To search for funding opportunities and apply, visit <LinkToGrants>www.grants.gov</LinkToGrants>.",
     "goal_title": "What's the goal?",
     "goal_paragraph_1": "We want Grants.gov to be the simplest, most inclusive, and most gratifying tool ever built for posting, finding, sharing, and applying for financial assistance. Our mission is to increase access to grants and improve the grants experience for everyone.",

@@ -0,0 +1,23 @@
+import Head from "next/head";
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+const PageSEO = ({ title, description }: Props) => {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta property="og:title" content={title} key="title" />
+      <meta
+        data-testid="meta-description"
+        name="description"
+        content={description}
+        key="description"
+      />
+    </Head>
+  );
+};
+
+export default PageSEO;
@@ -4,6 +4,7 @@ import { ExternalRoutes } from "src/constants/routes";
 import { Trans, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import PageSEO from "src/components/PageSEO";
 import WtGIContent from "src/components/WtGIContent";
 import FullWidthAlert from "../components/FullWidthAlert";
 import FundingContent from "../components/FundingContent";
@@ -15,6 +16,7 @@ const Home: NextPage = () => {
 
   return (
     <>
+      <PageSEO title={t("page_title")} description={t("meta_description")} />
       <Hero />
       <FullWidthAlert type="info">
         <Trans

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+
+import PageSEO from "src/components/PageSEO";
+
+jest.mock("next/head", () => {
+  return {
+    __esModule: true,
+    default: ({ children }: { children: Array<React.ReactElement> }) => {
+      return <>{children}</>;
+    },
+  };
+});
+
+describe("PageSEO", () => {
+  it("Renders title without errors", () => {
+    const props = { title: "test title", description: "test description" };
+    render(<PageSEO {...props} />);
+    const title = screen.getByText("test title");
+    expect(title).toBeInTheDocument();
+  });
+
+  it("Renders meta description content without errors", () => {
+    const props = { title: "test title", description: "test description" };
+    render(<PageSEO {...props} />);
+    const description = screen.getByTestId("meta-description");
+    expect(description).toBeInTheDocument();
+  });
+
+  it("Renders the correct title after rerendering", () => {
+    const initialProps = {
+      title: "test title",
+      description: "test description",
+    };
+    const updatedProps = {
+      title: "updated test title",
+      description: "updated test description",
+    };
+    const { rerender } = render(<PageSEO {...initialProps} />);
+    const title = screen.getByText("test title");
+    expect(title).toBeInTheDocument();
+    rerender(<PageSEO {...updatedProps} />);
+    const oldTitle = screen.queryByText("test title");
+    const updatedtitle = screen.getByText("updated test title");
+    expect(oldTitle).not.toBeInTheDocument();
+    expect(updatedtitle).toBeInTheDocument();
+  });
+});