Write a component test for an accessible profile form, including invalid submission, correction, pending state, and a successful save.

A ProfileForm accepts name and email and calls an asynchronous onSave callback. Write a component test that submits an empty form, verifies that the validation summary receives focus and the fields expose their errors, corrects both values, submits again, and proves that only one normalized payload is saved while the request is pending.

Given a blank form, Save reveals Name is required and Enter a valid email, and focus moves to the error summary. After the user enters Ada Lovelace and ada@example.com, Save changes to Saving..., remains disabled until the promise settles, and onSave receives exactly { name: "Ada Lovelace", email: "ada@example.com" } once.

• Query controls by role, label, and accessible name; do not use CSS selectors or inspect hook state.
• Use a userEvent.setup() session and await interactions and asynchronous UI.
• Assert validation through visible text, focus, and accessibility attributes.
• Keep the save promise under test control so the pending state is observable.
• Verify the external callback contract and duplicate-submit protection, not implementation details.

1. Create a controllable promise for onSave so the test decides when saving finishes.
2. Render the form and find fields by label and the command by role and accessible name.
3. Submit blank, await the validation UI, and verify both the user-visible errors and focus movement.
4. Enter valid data through userEvent, submit, and assert the exact normalized callback payload.
5. While the promise is unresolved, verify the pending command is disabled and a second click cannot create another save.
6. Resolve the promise and await the success state. This reads as one user workflow while still proving each important boundary.

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { expect, it, vi } from "vitest";
import { ProfileForm } from "./profile-form";

it("guides correction and saves once", async () => {
  const user = userEvent.setup();
  let finishSave!: () => void;
  const onSave = vi.fn(
    () => new Promise<void>((resolve) => { finishSave = resolve; }),
  );

  render(<ProfileForm onSave={onSave} />);

  await user.click(screen.getByRole("button", { name: "Save profile" }));

  const summary = await screen.findByRole("alert");
  expect(summary).toHaveFocus();
  expect(screen.getByText("Name is required")).toBeVisible();
  expect(screen.getByText("Enter a valid email")).toBeVisible();
  expect(screen.getByLabelText("Name")).toHaveAttribute("aria-invalid", "true");

  await user.type(screen.getByLabelText("Name"), "Ada Lovelace");
  await user.type(screen.getByLabelText("Email"), "ada@example.com");
  await user.click(screen.getByRole("button", { name: "Save profile" }));

  expect(onSave).toHaveBeenCalledTimes(1);
  expect(onSave).toHaveBeenCalledWith({
    name: "Ada Lovelace",
    email: "ada@example.com",
  });

  const pendingButton = screen.getByRole("button", { name: "Saving..." });
  expect(pendingButton).toBeDisabled();
  await user.click(pendingButton);
  expect(onSave).toHaveBeenCalledTimes(1);

  finishSave();
  await waitFor(() => expect(screen.getByText("Profile saved")).toBeVisible());
});

The component may use different markup, but it must preserve these accessible names and observable behaviors for the test contract to remain valid.

This test intentionally covers one meaningful component workflow, so its runtime is dominated by rendering and user-event scheduling rather than input size. Semantic queries make the test slightly stricter because inaccessible markup fails earlier, which is useful feedback. Detailed server error mapping, network retries, and persistence belong in focused component-integration or end-to-end tests instead of making this case responsible for every branch.

• onSave rejects and the form returns to an actionable error state.
• Pressing Enter submits through the same path as the button.
• Whitespace is trimmed before validation and submission.
• The error summary is absent before the first invalid attempt.
• The save promise resolves after the component unmounts.
• Accessible labels remain stable while visual layout and CSS classes change.

• Blank submission exposes every expected error and moves focus deliberately.
• Corrected input clears stale validation and sends the exact public payload.
• The pending command prevents a second invocation before completion.
• Rejection restores an enabled command and keeps entered values available.
• Queries continue to pass after harmless DOM nesting or class-name changes.
• No assertion reaches into component state, private functions, or implementation-only test ids.

• The test fires low-level events and misses real focus, keyboard, or disabled-control behavior.
• It selects classes or test ids even though roles and labels are available.
• It asserts only that onSave ran, not the normalized payload or call count.
• The mocked promise resolves immediately, so the pending state is never tested.
• Async assertions are not awaited, allowing the test to pass before the UI settles.
• A snapshot replaces targeted assertions about the behavior users depend on.