docs: Add docstrings to frontend tests

Applies the JSDoc convention to vitest test files under
frontend/tests/. Module headers state which component or page
the test file covers; per-test docstrings switch from "renders
X" / "does Y" framings to BNC-style behavioral statements that
say what's actually asserted.

Two skipped tests get fuller explanations:
- TextField.test.tsx: skipped pending rewrite for the new
  RHF-generic API.
- LandingPage.test.tsx: skipped pending rewrite against the
  ported component graph.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Nickatak

frontend/tests/components/Button.test.tsx

@@ -1,22 +1,27 @@
+/** Component tests for `Button` from `shared/components/Buttons.tsx`. */
+
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
 
 import { Button } from "@/shared/components/Buttons";
 
 describe("Button", () => {
+  /** Children text passes through to the rendered element. */
   test("renders children text", () => {
     render(<Button>Log in</Button>);
     expect(screen.getByText("Log in")).toBeInTheDocument();
     expect(screen.queryByText("Log out")).not.toBeInTheDocument();
   });
 
+  /** Without href, renders a native `<button>` (no link role). */
   test("renders as button when href is omitted", () => {
     render(<Button />);
     expect(screen.getByRole("button")).toBeInTheDocument();
     expect(screen.queryByRole("link")).not.toBeInTheDocument();
   });
 
+  /** With href, renders an `<a>` (no button role). */
   test("renders as link when href is provided", () => {
     render(<Button href="www.google.com" />);
     expect(screen.getByRole("link")).toBeInTheDocument();

frontend/tests/components/Calendar.test.tsx

@@ -1,15 +1,19 @@
+/** Component tests for `Calendar` from `shared/components/Inputs/Calendar.tsx`. */
+
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import React from "react";
 import { describe, expect, test } from "vitest";
 
 import { Calendar } from "@/shared/components/Inputs/Calendar";
 
 describe("Calendar", () => {
+  /** Calendar root mounts with the test-id wrapper. */
   test("renders the calendar root", () => {
     render(<Calendar onChange={() => {}} />);
     expect(screen.getByTestId("calendar-root")).toBeInTheDocument();
   });
 
+  /** Mouse-drag flips aria-checked across the dragged cells, both directions. */
   test("drag selects and unselects availability cells", async () => {
     render(<Calendar onChange={() => {}} />);
     const checkboxes = screen.getAllByRole("checkbox");
@@ -33,6 +37,7 @@ describe("Calendar", () => {
     });
   });
 
+  /** Each cell exposes an aria-label encoding its row and column. */
   test("applies aria-label per cell", () => {
     render(<Calendar onChange={() => {}} />);
     const cells = screen.getAllByRole("checkbox");

frontend/tests/components/Checkbox.test.tsx

@@ -1,3 +1,5 @@
+/** Component tests for `Checkbox` from `shared/components/Checkbox.tsx`. */
+
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
@@ -6,6 +8,7 @@ import { describe, expect, test } from "vitest";
 import { Checkbox } from "@/shared/components/Checkbox";
 
 describe("Checkbox", () => {
+  /** Click and Space-key both toggle the checked state. */
   test("toggles via mouse and keyboard", async () => {
     const user = userEvent.setup();
     render(<Checkbox label="Full Stack Developer" />);
@@ -23,6 +26,7 @@ describe("Checkbox", () => {
     expect(screen.queryByRole("checkbox")).toBeChecked();
   });
 
+  /** Disabled checkbox doesn't accept click toggles. */
   test("disabled cannot be toggled", async () => {
     const user = userEvent.setup();
     render(<Checkbox label="disabled checkbox" disabled />);
@@ -34,6 +38,7 @@ describe("Checkbox", () => {
     expect(screen.queryByRole("checkbox")).not.toBeChecked();
   });
 
+  /** With `defaultChecked`, initial render is checked; clicking unchecks. */
   test("defaultChecked starts checked", async () => {
     const user = userEvent.setup();
     render(<Checkbox label="defaultChecked checkbox" defaultChecked />);
@@ -45,10 +50,12 @@ describe("Checkbox", () => {
     expect(screen.queryByRole("checkbox")).not.toBeChecked();
   });
 
-  test.skip("labelHidden visually hides the label text", () => {
-    // The hiding is purely CSS (clip/position/overflow on a hashed
-    // .module.css class). jsdom doesn't apply stylesheet declarations
-    // to getComputedStyle output, so there's nothing meaningful to
-    // assert from the test runtime. Verified by hand in the browser.
-  });
+  /**
+   * `labelHidden` visually hides the label text - skipped because
+   * the hiding is purely CSS (clip/position/overflow on a hashed
+   * `.module.css` class). jsdom doesn't apply stylesheet declarations
+   * to `getComputedStyle` output, so there's nothing meaningful to
+   * assert from the test runtime. Verified by hand in the browser.
+   */
+  test.skip("labelHidden visually hides the label text", () => {});
 });

frontend/tests/components/Notification.test.tsx

@@ -1,3 +1,5 @@
+/** Component tests for `Notification` from `shared/components/Notification/`. */
+
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
@@ -6,13 +8,15 @@ import { describe, expect, test } from "vitest";
 import { Notification } from "@/shared/components/Notification/Notification";
 
 describe("Notification", () => {
+  /** Default role is "status" (polite) and children render inside the bar. */
   test("renders children with status role by default", () => {
     render(<Notification>This is a warning</Notification>);
     expect(screen.getByText("This is a warning")).toBeInTheDocument();
     expect(screen.getByRole("status")).toBeInTheDocument();
     expect(screen.queryByRole("alert")).not.toBeInTheDocument();
   });
 
+  /** Close button sets aria-hidden=true on the notification bar. */
   test("close button hides the notification", async () => {
     const user = userEvent.setup();
     render(

frontend/tests/components/TextField.test.tsx

@@ -1,11 +1,16 @@
+/**
+ * Component tests for `TextField` - currently skipped pending rewrite.
+ *
+ * The TextField component changed shape during the Next.js port:
+ * it is now generic over a react-hook-form value schema and
+ * requires `register`, `id`, and `type` props. The legacy
+ * standalone-input test no longer applies; rewriting it requires
+ * wrapping each render in a `useForm` harness, which is deferred
+ * to a future PR alongside the form-stack finalization.
+ */
+
 import { describe, test } from "vitest";
 
-// The TextField component changed shape during the Next port: it is now
-// generic over a react-hook-form value schema and requires `register`,
-// `id`, and `type` props. The legacy standalone-input test no longer
-// applies; rewriting it requires wrapping each render in a useForm
-// harness, which is deferred to the next PR alongside the form-stack
-// finalization.
 describe.skip("TextField (rewrite needed for new generic API)", () => {
   test("placeholder", () => {});
 });

frontend/tests/pages/LandingPage.test.tsx

@@ -1,10 +1,16 @@
+/**
+ * Page tests for LandingPage - currently skipped pending rewrite.
+ *
+ * The legacy `LandingPage` test relied on `MemoryRouter` and
+ * selector classes (`.landing-cop-circle-title`) that are not
+ * part of the ported feature surface. Re-authoring the assertions
+ * against the new component graph is deferred; the dialog
+ * open/close behavior should pick up coverage when the qualifier
+ * flow's e2e harness lands.
+ */
+
 import { describe, test } from "vitest";
 
-// The legacy LandingPage test relied on `MemoryRouter` and selector
-// classes (`.landing-cop-circle-title`) that are not part of the
-// ported feature surface. Re-authoring the assertions against the new
-// component graph is deferred; the dialog open/close behavior should
-// pick up coverage when the qualifier flow's e2e harness lands.
 describe.skip("LandingPage (rewrite needed post-port)", () => {
   test("placeholder", () => {});
 });