patrickandClaude Sonnet 5
c4bb5457b7
Zwei echte a11y-Befunde aus dem Audit von web/mail-postfach behoben: Ordnerbaum-Treeitems waren per Tastatur erreichbar, aber ohne onKeyDown-Handler nicht per Enter/Leertaste aktivierbar; die scrollbare Nachrichtenliste hatte keinen tabIndex (axe: scrollable-region-focusable, serious). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
import { describe, expect, it, vi } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { I18nProvider } from "@nexarch/shl";
|
|
import { FolderTree } from "./FolderTree";
|
|
|
|
function ui(mailboxes: { name: string; messageCount: number }[], selected: string | null, onSelect = vi.fn()) {
|
|
return render(
|
|
<I18nProvider initialLocale="de">
|
|
<FolderTree mailboxes={mailboxes} selected={selected} onSelect={onSelect} />
|
|
</I18nProvider>
|
|
);
|
|
}
|
|
|
|
describe("FolderTree (Akzeptanzkriterium 1: Ordnerbaum)", () => {
|
|
it("zeigt alle übergebenen Postfächer mit Nachrichtenzahl", () => {
|
|
ui([
|
|
{ name: "posteingang", messageCount: 3 },
|
|
{ name: "archiv", messageCount: 1 },
|
|
], null);
|
|
expect(screen.getByText("posteingang (3)")).toBeTruthy();
|
|
expect(screen.getByText("archiv (1)")).toBeTruthy();
|
|
});
|
|
|
|
it("ruft onSelect mit dem Ordnernamen beim Klick auf", async () => {
|
|
const onSelect = vi.fn();
|
|
ui([{ name: "archiv", messageCount: 1 }], null, onSelect);
|
|
screen.getByText("archiv (1)").click();
|
|
expect(onSelect).toHaveBeenCalledWith("archiv");
|
|
});
|
|
|
|
it("markiert den ausgewählten Ordner als selektiert (aria-selected)", () => {
|
|
ui([{ name: "archiv", messageCount: 1 }], "archiv");
|
|
const item = screen.getByText("archiv (1)");
|
|
expect(item.getAttribute("aria-selected")).toBe("true");
|
|
});
|
|
|
|
// QA-08: div[role=treeitem] loest Enter/Space nicht wie ein nativer Button aus -- ohne
|
|
// eigenen Tastatur-Handler war der Ordnerbaum per Tab erreichbar, aber nicht aktivierbar.
|
|
it("aktiviert die Ordnerauswahl über die Enter-Taste (nicht nur per Klick)", () => {
|
|
const onSelect = vi.fn();
|
|
ui([{ name: "archiv", messageCount: 1 }], null, onSelect);
|
|
fireEvent.keyDown(screen.getByText("archiv (1)"), { key: "Enter" });
|
|
expect(onSelect).toHaveBeenCalledWith("archiv");
|
|
});
|
|
|
|
it("aktiviert die Ordnerauswahl über die Leertaste", () => {
|
|
const onSelect = vi.fn();
|
|
ui([{ name: "archiv", messageCount: 1 }], null, onSelect);
|
|
fireEvent.keyDown(screen.getByText("archiv (1)"), { key: " " });
|
|
expect(onSelect).toHaveBeenCalledWith("archiv");
|
|
});
|
|
});
|