72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
import { expect, test } from "vitest";
|
|
import { screen, waitFor } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { http, HttpResponse } from "msw";
|
|
import { Routes, Route, useLocation } from "react-router-dom";
|
|
import { server } from "../test/server";
|
|
import { renderApp } from "../test/render";
|
|
import { ObjectNewPage } from "./object-new-page";
|
|
|
|
function EditStub() {
|
|
const location = useLocation();
|
|
const flagged = (location.state as { fieldsError?: boolean } | null)?.fieldsError === true;
|
|
return <div>edit page{flagged ? " (fields error)" : ""}</div>;
|
|
}
|
|
|
|
function tree() {
|
|
return (
|
|
<Routes>
|
|
<Route path="/objects/new" element={<ObjectNewPage />} />
|
|
<Route path="/objects/:id" element={<div>detail view</div>} />
|
|
<Route path="/objects/:id/edit" element={<EditStub />} />
|
|
</Routes>
|
|
);
|
|
}
|
|
|
|
test("create: POST then PUT fields, then navigate to the new object's detail", async () => {
|
|
let postBody: unknown;
|
|
let fieldsBody: unknown;
|
|
|
|
server.use(
|
|
http.post("/api/admin/objects", async ({ request }) => {
|
|
postBody = await request.json();
|
|
return HttpResponse.json({ id: "new-id-1" }, { status: 201 });
|
|
}),
|
|
http.put("/api/admin/objects/:id/fields", async ({ request }) => {
|
|
fieldsBody = await request.json();
|
|
return new HttpResponse(null, { status: 204 });
|
|
}),
|
|
);
|
|
|
|
renderApp(tree(), { route: "/objects/new" });
|
|
|
|
await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
|
|
await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
|
|
await userEvent.type(screen.getByLabelText(/inscription/i), "To the gods");
|
|
await userEvent.click(screen.getByRole("button", { name: /create object/i }));
|
|
|
|
await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
|
|
expect((postBody as { object_number: string }).object_number).toBe("A-9");
|
|
expect((fieldsBody as { inscription: string }).inscription).toBe("To the gods");
|
|
});
|
|
|
|
test("partial create: fields PUT fails -> navigate to edit with an error banner", async () => {
|
|
server.use(
|
|
http.post("/api/admin/objects", () =>
|
|
HttpResponse.json({ id: "new-id-2" }, { status: 201 }),
|
|
),
|
|
http.put("/api/admin/objects/:id/fields", () =>
|
|
new HttpResponse(null, { status: 422 }),
|
|
),
|
|
);
|
|
|
|
renderApp(tree(), { route: "/objects/new" });
|
|
|
|
await userEvent.type(await screen.findByLabelText(/object number/i), "A-9");
|
|
await userEvent.type(screen.getByLabelText(/^name/i), "Amphora");
|
|
await userEvent.type(screen.getByLabelText(/inscription/i), "x");
|
|
await userEvent.click(screen.getByRole("button", { name: /create object/i }));
|
|
|
|
await waitFor(() => expect(screen.getByText(/edit page \(fields error\)/i)).toBeInTheDocument());
|
|
});
|