تست Form Submission خطوة بخطوة

import { FormEvent, useState } from "react";import { API_URL } from "../test/academicYearsMocks";type Year = { id: string; name: string };export function AcademicYearForm({  onCreated,}: {  onCreated: (year: Year) => void;}) {  const [name, setName] = useState("");  const [message, setMessage] = useState("");  const [saving, setSaving] = useState(false);  async function handleSubmit(event: FormEvent) {    event.preventDefault();    setMessage("");    if (!name.trim()) {      setMessage("اسم السنة مطلوب");      return;    }    setSaving(true);    try {      const response = await fetch(API_URL, {        method: "POST",        headers: { "Content-Type": "application/json" },        body: JSON.stringify({ name }),      });      if (!response.ok) throw new Error("save failed");      const year = (await response.json()) as Year;      onCreated(year);      setName("");      setMessage("اتحفظت السنة");    } catch {      setMessage("مقدرناش نحفظ السنة");    } finally {      setSaving(false);    }  }  return (    <form onSubmit={handleSubmit}>      <label>        اسم السنة        <input          value={name}          onChange={(event) => setName(event.target.value)}        />      </label>      <button disabled={saving}>        {saving ? "جاري الحفظ…" : "حفظ"}      </button>      {message && <p role="status">{message}</p>}    </form>  );}

import { render, screen, waitFor } from "@testing-library/react";import userEvent from "@testing-library/user-event";import { describe, expect, it, vi } from "vitest";import { AcademicYearForm } from "./AcademicYearForm";describe("AcademicYearForm", () => {  it("يبعت السنة ويعرض النجاح", async () => {    const user = userEvent.setup();    const onCreated = vi.fn();    render(<AcademicYearForm onCreated={onCreated} />);    const nameInput = screen.getByLabelText("اسم السنة");    await user.type(nameInput, "2027 / 2028");    await user.click(screen.getByRole("button", { name: "حفظ" }));    expect(      await screen.findByRole("status"),    ).toHaveTextContent("اتحفظت السنة");    expect(onCreated).toHaveBeenCalledWith({      id: "y3",      name: "2027 / 2028",    });    expect(nameInput).toHaveValue("");  });});