feat(web): field-form selects use ui/Select; rewrite select tests (#51)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-08 06:03:54 +02:00
parent 71d899cbdc
commit ede32551be
2 changed files with 57 additions and 41 deletions
+11 -6
View File
@@ -1,5 +1,5 @@
import { expect, test } from "vitest";
import { screen, waitFor } from "@testing-library/react";
import { screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw";
import { Route, Routes } from "react-router-dom";
@@ -16,6 +16,11 @@ function tree() {
);
}
async function choose(triggerName: RegExp, optionName: RegExp) {
await userEvent.click(screen.getByRole("combobox", { name: triggerName }));
await userEvent.click(await within(document.body).findByRole("option", { name: optionName }));
}
test("lists field definitions grouped, with an Other heading for ungrouped", async () => {
renderApp(tree(), { route: "/fields" });
expect(await screen.findByText("Inscription")).toBeInTheDocument();
@@ -56,9 +61,9 @@ test("selecting Authority reveals the kind picker and posts the chosen kind", as
await userEvent.type(screen.getByLabelText(/^key$/i), "maker");
await userEvent.type(screen.getByLabelText(/^label$/i), "Maker");
await userEvent.selectOptions(screen.getByLabelText(/^type$/i), "authority");
const kind = await screen.findByLabelText(/authority kind/i);
await userEvent.selectOptions(kind, "person");
await choose(/^type$/i, /^authority$/i);
await screen.findByLabelText(/authority kind/i);
await choose(/authority kind/i, /^person$/i);
await userEvent.click(screen.getByRole("button", { name: /create field/i }));
await waitFor(() => expect(body?.authority_kind).toBe("person"));
@@ -77,7 +82,7 @@ test("selecting Term reveals the vocabulary picker and blocks submit until chose
await userEvent.type(screen.getByLabelText(/^key$/i), "material");
await userEvent.type(screen.getByLabelText(/^label$/i), "Material");
await userEvent.selectOptions(screen.getByLabelText(/^type$/i), "term");
await choose(/^type$/i, /^term$/i);
const vocab = await screen.findByLabelText(/^vocabulary$/i);
@@ -87,7 +92,7 @@ test("selecting Term reveals the vocabulary picker and blocks submit until chose
expect(await screen.findByRole("alert")).toBeInTheDocument();
expect(posted).toBe(false);
await userEvent.selectOptions(vocab, "v-material");
await choose(/^vocabulary$/i, /^material$/i);
await userEvent.click(screen.getByRole("button", { name: /create field/i }));
await waitFor(() => expect(posted).toBe(true));
});