Implement LocaleSwitcher Component

app/package.json

@@ -57,6 +57,7 @@
     "jest-axe": "^8.0.0",
     "jest-cli": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "next-router-mock": "^0.9.10",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.1.0",
     "postcss-preset-env": "^9.0.0",

app/src/components/Header.tsx

@@ -9,6 +9,8 @@ import {
   Header as USWDSHeader,
 } from "@trussworks/react-uswds";
 
+import LocaleSwitcher from "./LocaleSwitcher";
+
 const primaryLinks = [
   {
     i18nKey: "nav_link_home",
@@ -28,11 +30,14 @@ const Header = () => {
     setIsMobileNavExpanded(!isMobileNavExpanded);
   };
 
-  const navItems = primaryLinks.map((link) => (
-    <a href={link.href} key={link.href}>
-      {t(link.i18nKey)}
-    </a>
-  ));
+  const navItems = [
+    ...primaryLinks.map((link) => (
+      <a href={link.href} key={link.href}>
+        {t(link.i18nKey)}
+      </a>
+    )),
+    <LocaleSwitcher key={"locale-switch"} />,
+  ];
 
   return (
     <>

app/src/components/LocaleSwitcher.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { usePathname, useRouter } from "src/i18n/navigation";
+
+import { useLocale } from "next-intl";
+import { CSSProperties, useTransition } from "react";
+import { LanguageDefinition, LanguageSelector } from "@trussworks/react-uswds";
+
+// Currently, the `react-uswds` component erroneously sets 'usa-language-container' class
+// on both the container and the button, which causes incorrect positioning relative to nav items
+const styleFixes: CSSProperties = {
+  display: "block",
+  top: "auto",
+  marginLeft: "auto",
+  marginTop: "auto",
+};
+
+export default function LocaleSwitcher() {
+  const locale = useLocale();
+  const router = useRouter();
+  const [, startTransition] = useTransition();
+  const pathname = usePathname();
+
+  const selectLocale = (newLocale: string) => {
+    startTransition(() => {
+      router.replace(pathname, { locale: newLocale });
+    });
+  };
+
+  // This should be modified to fit the project's language requirements
+  // If you have more than two languages, it will render as a dropdown
+  // The react-uswds component will just display the `label` for the current language;
+  // USWDS guidance is to display "Language" in the current language as the label, which isn't currently possible
+  // See https://designsystem.digital.gov/components/language-selector/
+  // We're using two languages by default here, but implementing such that it displays the language to which it will switch rather than the current language
+  const langs: LanguageDefinition[] = [
+    {
+      attr: "en-US",
+      label: "Español",
+      label_local: "Spanish",
+      on_click: () => selectLocale("es-US"),
+    },
+    {
+      attr: "es-US",
+      label: "English",
+      on_click: () => selectLocale("en-US"),
+    },
+  ];
+
+  return (
+    <LanguageSelector displayLang={locale} langs={langs} style={styleFixes} />
+  );
+}

app/src/i18n/navigation.ts

@@ -0,0 +1,8 @@
+import { createSharedPathnamesNavigation } from "next-intl/navigation";
+
+import { locales } from "./config";
+
+export const localePrefix = "always"; // Default
+
+export const { Link, redirect, usePathname, useRouter } =
+  createSharedPathnamesNavigation({ locales, localePrefix });

app/tests/components/LocaleSwitcher.test.tsx

@@ -0,0 +1,39 @@
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { mockRouter } from "tests/next-router-utils";
+import { render, screen } from "tests/react-utils";
+
+import LocaleSwitcher from "src/components/LocaleSwitcher";
+
+describe("LocaleSwitcher", () => {
+  it("renders the language selector and updates routes when switching language", async () => {
+    // Set the initial url
+    await mockRouter.push("/initial-path");
+
+    render(<LocaleSwitcher />);
+
+    // We start in English, so we see the toggle to switch to Spanish
+    await userEvent.click(screen.getByRole("button", { name: "Español" }));
+
+    // Ensure the router was updated
+    // This is the best we can do for testing given constraints listed below
+    expect(mockRouter).toMatchObject({
+      asPath: "/es-US/initial-path",
+      pathname: "/es-US/initial-path",
+    });
+
+    // This won't actually work because the NextIntlProvider relies on middleware that isn't available in tests
+    // expect(
+    //   await screen.findByRole("button", { name: "English" })
+    // ).toBeInTheDocument();
+  });
+
+  // This fails when in 2-language mode because the react-uswds component sets aria-controls
+  // w/o corresponding element in the DOM
+  it("passes accessibility scan", async () => {
+    const { container } = render(<LocaleSwitcher />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

app/tests/jest.setup.ts

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom";
+import "./next-router-utils";
 
 import { toHaveNoViolations } from "jest-axe";
 

app/tests/next-router-utils.ts

@@ -0,0 +1,40 @@
+/* eslint-disable */
+
+// Taken from https://github.com/vercel/next.js/discussions/42527#discussioncomment-7234041
+// This mocks important pieces from both next/router and next/navigation to enable testing of components
+// that use next/router and next/navigation hooks.
+
+import mockRouter from "next-router-mock";
+import { createDynamicRouteParser } from "next-router-mock/dynamic-routes";
+
+jest.mock("next/router", () => jest.requireActual("next-router-mock"));
+
+mockRouter.useParser(
+  createDynamicRouteParser([
+    // @see https://github.com/scottrippey/next-router-mock#dynamic-routes
+  ])
+);
+
+jest.mock<typeof import("next/navigation")>("next/navigation", () => {
+  const actual = jest.requireActual("next/navigation");
+  const nextRouterMock = jest.requireActual("next-router-mock");
+  const { useRouter } = nextRouterMock;
+  const usePathname = jest.fn().mockImplementation(() => {
+    const router = useRouter();
+    return router.asPath;
+  });
+
+  const useSearchParams = jest.fn().mockImplementation(() => {
+    const router = useRouter();
+    return new URLSearchParams(router.query);
+  });
+
+  return {
+    ...actual,
+    useRouter: jest.fn().mockImplementation(useRouter),
+    usePathname,
+    useSearchParams,
+  };
+});
+
+export { mockRouter };