test: basic tests for static pages [1393] (#2197)

* adds utils for mocking intl

frontend/tests/pages/not-found.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { identity } from "lodash";
+import PageNotFound from "src/app/not-found";
+import { useTranslationsMock } from "tests/utils/intlMocks";
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: () => identity,
+  unstable_setRequestLocale: identity,
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => useTranslationsMock(),
+}));
+
+describe("PageNotFound", () => {
+  it("renders alert with grants.gov link", () => {
+    render(<PageNotFound />);
+
+    const alert = screen.queryByTestId("alert");
+
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("links back to the home page", () => {
+    render(<PageNotFound />);
+    const link = screen.getByRole("link", { name: "visit_homepage_button" });
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<PageNotFound />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});

frontend/tests/pages/page.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { identity } from "lodash";
+import Home from "src/app/[locale]/page";
+import { mockMessages, useTranslationsMock } from "tests/utils/intlMocks";
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: () => identity,
+  unstable_setRequestLocale: identity,
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => useTranslationsMock(),
+  useMessages: () => mockMessages,
+}));
+
+describe("Home", () => {
+  it("renders intro text", () => {
+    render(<Home />);
+
+    const content = screen.getByText("goal.paragraph_1");
+
+    expect(content).toBeInTheDocument();
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<Home />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});

frontend/tests/pages/process/page.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { identity } from "lodash";
+import Process from "src/app/[locale]/process/page";
+import { mockMessages, useTranslationsMock } from "tests/utils/intlMocks";
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: () => identity,
+  unstable_setRequestLocale: identity,
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => useTranslationsMock(),
+  useMessages: () => mockMessages,
+}));
+
+describe("Process", () => {
+  it("renders intro text", () => {
+    render(<Process />);
+
+    const content = screen.getByText("intro.content");
+
+    expect(content).toBeInTheDocument();
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<Process />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});

frontend/tests/pages/research/page.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { identity } from "lodash";
+import Research from "src/app/[locale]/research/page";
+import { mockMessages, useTranslationsMock } from "tests/utils/intlMocks";
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: () => identity,
+  unstable_setRequestLocale: identity,
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => useTranslationsMock(),
+  useMessages: () => mockMessages,
+}));
+
+describe("Research", () => {
+  it("renders intro text", () => {
+    render(<Research />);
+
+    const content = screen.getByText("intro.content");
+
+    expect(content).toBeInTheDocument();
+  });
+
+  it("passes accessibility scan", async () => {
+    const { container } = render(<Research />);
+    const results = await waitFor(() => axe(container));
+
+    expect(results).toHaveNoViolations();
+  });
+});

frontend/tests/utils/intlMocks.ts

@@ -0,0 +1,26 @@
+function mockUseTranslations(translationKey: string) {
+  return translationKey;
+}
+
+mockUseTranslations.rich = (translationKey: string) => translationKey;
+
+export function useTranslationsMock() {
+  return mockUseTranslations;
+}
+
+// mocking all types of messages, could split by message type in the future
+export const mockMessages = {
+  Process: {
+    intro: {
+      boxes: ["firstKey"],
+    },
+    milestones: {
+      icon_list: ["firstIcon"],
+    },
+  },
+  Research: {
+    impact: {
+      boxes: ["firstKey"],
+    },
+  },
+};