jobtrackingapp/job-tracker-ui/src/app-shell-notifications.test.tsx

import React from "react";
import "@testing-library/jest-dom";
import { act, fireEvent, render, screen } from "@testing-library/react";
import { CssVarsProvider } from "@mui/material/styles";

import { I18nProvider } from "./i18n/I18nProvider";
import AppShell from "./layout/AppShell";
import { getTheme } from "./theme";

beforeEach(() => {
  localStorage.removeItem("uiLanguage");
  document.documentElement.lang = "en";
});

test("notification bell exposes its unread count and keyboard-accessible action", () => {
  const open = jest.fn();
  render(
    <CssVarsProvider theme={getTheme("light") as any} defaultMode="light">
      <I18nProvider>
        <AppShell
          pageTitle="Dashboard"
          breadcrumbs={["Home"]}
          pathname="/dashboard"
          nav={[]}
          navBottom={[]}
          onNavigate={() => undefined}
          onToggleDrawer={() => undefined}
          drawerOpen={false}
          notificationsCount={3}
          onOpenNotifications={open}
        >
          <div>Content</div>
        </AppShell>
      </I18nProvider>
    </CssVarsProvider>,
  );

  const bell = screen.getByRole("button", { name: "Notifications" });
  expect(screen.getByText("3")).toBeInTheDocument();
  expect(bell.getAttribute("aria-describedby")).toBeTruthy();
  expect(bell).toHaveAccessibleDescription("Unread notifications: 3");
  fireEvent.click(bell);
  expect(open).toHaveBeenCalledTimes(1);
  expect(open.mock.calls[0][0]).toBeInstanceOf(HTMLElement);
});

test.each([["en", "Application version 2.4.1, commit abc1234"], ["nb", "Applikasjonsversjon 2.4.1, revisjon abc1234"]])("shows localized %s build metadata only when the caller supplies the admin-only badge", (language, label) => {
  localStorage.setItem("uiLanguage", language);
  const commonProps = {
    pageTitle: "Dashboard",
    breadcrumbs: ["Home"],
    pathname: "/dashboard",
    nav: [],
    navBottom: [],
    onNavigate: () => undefined,
    onToggleDrawer: () => undefined,
    drawerOpen: false,
  };

  const { rerender } = render(
    <CssVarsProvider theme={getTheme("light") as any} defaultMode="light">
      <I18nProvider>
        <AppShell {...commonProps} buildMetadata={{ version: "2.4.1", commitSha: "abc1234" }}>
          <div>Content</div>
        </AppShell>
      </I18nProvider>
    </CssVarsProvider>,
  );

  expect(screen.getByTestId("admin-version-badge")).toHaveTextContent("v2.4.1");
  expect(screen.getByLabelText(label)).toBeInTheDocument();
  expect(screen.getByRole("img", { name: label })).toBe(screen.getByTestId("admin-version-badge"));

  rerender(
    <CssVarsProvider theme={getTheme("light") as any} defaultMode="light">
      <I18nProvider>
        <AppShell {...commonProps}>
          <div>Content</div>
        </AppShell>
      </I18nProvider>
    </CssVarsProvider>,
  );

  expect(screen.queryByTestId("admin-version-badge")).not.toBeInTheDocument();
});

test("shell icon controls expose accessible names", () => {
  render(
    <CssVarsProvider theme={getTheme("light") as any} defaultMode="light">
      <I18nProvider>
        <AppShell
          pageTitle="Dashboard"
          breadcrumbs={["Home"]}
          pathname="/dashboard"
          nav={[]}
          navBottom={[]}
          onNavigate={() => undefined}
          onToggleDrawer={() => undefined}
          drawerOpen={false}
          onOpenSettings={() => undefined}
          user={{ userName: "Ada", roleLabel: "Administrator" }}
        >
          <div>Content</div>
        </AppShell>
      </I18nProvider>
    </CssVarsProvider>,
  );

  expect(screen.getByRole("button", { name: "Collapse sidebar" })).toBeInTheDocument();
  expect(screen.getByRole("button", { name: "Notifications" })).toBeInTheDocument();
  expect(screen.getByRole("button", { name: "Settings" })).toBeInTheDocument();
  expect(screen.getByRole("button", { name: "User" })).toBeInTheDocument();
});

function renderNotificationShell(count?: number) {
  return render(<CssVarsProvider theme={getTheme("light") as any} defaultMode="light"><I18nProvider><AppShell pageTitle="Dashboard" breadcrumbs={["Home"]} pathname="/dashboard" nav={[]} navBottom={[]} onNavigate={() => undefined} onToggleDrawer={() => undefined} drawerOpen={false} notificationsCount={count}><div>Content</div></AppShell></I18nProvider></CssVarsProvider>);
}

test("[P7-08 notifications] an unavailable unread count stays unknown and its description follows the UI language", async () => {
  renderNotificationShell();
  const bell = screen.getByRole("button", { name: "Notifications" });
  expect(bell.getAttribute("aria-describedby")).toBeTruthy();
  expect(bell).toHaveAccessibleDescription("Unread notification count is unavailable.");
  expect(bell).not.toHaveAccessibleDescription("Unread notifications: 0");
  await act(async () => { window.dispatchEvent(new StorageEvent("storage", { key: "uiLanguage", newValue: "nb" })); });
  expect(screen.getByRole("button", { name: "Varsler" })).toHaveAccessibleDescription("Antall uleste varsler er utilgjengelig.");
});

test("[P7-08 notifications] a recorded zero unread count has a truthful separate description", () => {
  renderNotificationShell(0);
  const bell = screen.getByRole("button", { name: "Notifications" });
  expect(bell.getAttribute("aria-describedby")).toBeTruthy();
  expect(bell).toHaveAccessibleDescription("Unread notifications: 0");
  expect(bell).not.toHaveAccessibleDescription("Unread notification count is unavailable.");
});

test("[P7-08 notifications] the known unread count is described in Bokmål without changing the bell action's name", async () => {
  localStorage.setItem("uiLanguage", "nb");
  renderNotificationShell(3);
  const bell = screen.getByRole("button", { name: "Varsler" });
  expect(screen.getByText("3")).toBeInTheDocument();
  expect(bell.getAttribute("aria-describedby")).toBeTruthy();
  expect(bell).toHaveAccessibleDescription("Uleste varsler: 3");
  await act(async () => { window.dispatchEvent(new StorageEvent("storage", { key: "uiLanguage", newValue: "en" })); });
  expect(screen.getByRole("button", { name: "Notifications" })).toHaveAccessibleDescription("Unread notifications: 3");
});