EpicNext-Cms/e2e/ui/studio.spec.ts

import { expect, test } from "@playwright/test";

const items = [
	{
		id: 1,
		classname: "fixture_chair",
		name: "Fixture chair",
		description: "Synthetic chair",
		type: "flooritem",
		revision: 1,
		category: "other",
		alreadyImported: true,
		nitroExists: true,
		iconUrl: "/fixture/cover.svg",
	},
	{
		id: 2,
		classname: "fixture_table",
		name: "Fixture table",
		description: "Synthetic table",
		type: "flooritem",
		revision: 1,
		category: "other",
		alreadyImported: false,
		nitroExists: false,
		iconUrl: "/fixture/cover.svg",
	},
];

test("Studio opens and dismisses detail, Nitro editor and import review", async ({
	page,
}) => {
	const errors: string[] = [];
	const mutations: string[] = [];
	let metadataRequests = 0;
	page.on("pageerror", (error) => errors.push(error.message));
	await page.route("**/api/**", async (route) => {
		const request = route.request();
		const url = new URL(request.url());
		if (url.pathname === "/api/admin/studio/inspect") {
			const { classnames } = request.postDataJSON() as { classnames: string[] };
			return route.fulfill({
				json: {
					items: classnames.map((classname) => ({
						classname,
						sql: [],
						catalog: [],
						furnidata: [],
						furnidataReadable: true,
						nitro: { exists: false, bytes: 0 },
						icon: { exists: false, bytes: 0 },
					})),
				},
			});
		}
		if (url.pathname === "/api/admin/studio/source-assets") {
			const body = request.postDataJSON() as {
				items: Array<{ classname: string }>;
			};
			return route.fulfill({
				json: {
					items: body.items.map(({ classname }) => ({
						classname,
						state: "available",
						revision: 1,
						alternatives: [],
						attempts: [],
					})),
				},
			});
		}
		if (request.method() !== "GET") {
			mutations.push(`${request.method()} ${url.pathname}`);
			return route.fulfill({
				status: 405,
				json: { error: "Fixture forbids mutations" },
			});
		}
		if (url.pathname.endsWith("/nitro-editor")) {
			metadataRequests++;
			return route.fulfill({
				json: {
					metadata: {
						name: "fixture_chair",
						logicType: "furniture_basic",
						visualizationType: "furniture_static",
					},
					flags: { canstandon: false, cansiton: false, canlayon: false },
				},
			});
		}
		if (url.pathname === "/api/admin/import/furni") {
			return route.fulfill({
				json:
					url.searchParams.get("action") === "stats"
						? { totalInDb: 1, inCatalog: 1, notInCatalog: 0, missingNitro: 0 }
						: {
								items,
								meta: { currentPage: 1, lastPage: 1, total: 2, perPage: 20 },
							},
			});
		}
		if (url.pathname === "/api/admin/import/clone")
			return route.fulfill({ json: { sources: [] } });
		if (url.pathname === "/api/admin/studio/import-jobs")
			return route.fulfill({ json: { ok: true, jobs: [], nextCursor: null } });
		return route.fulfill({
			status: 404,
			json: { error: "Unknown fixture endpoint" },
		});
	});
	await page.goto("/admin/studio-harness");
	await expect(
		page.getByRole("button", { name: "View Fixture chair", exact: true }),
	).toBeVisible();
	expect(metadataRequests).toBe(0);
	await page
		.getByRole("button", { name: "View Fixture chair", exact: true })
		.click();
	await expect(
		page.getByRole("button", { name: "Close furniture details", exact: true }),
	).toBeVisible();
	await expect(
		page.getByText("Synthetic chair", { exact: true }).first(),
	).toBeVisible();
	await page
		.getByRole("button", { name: "Close furniture details", exact: true })
		.click();
	await expect(
		page.getByRole("button", { name: "Close furniture details", exact: true }),
	).toHaveCount(0);
	await page
		.getByRole("button", { name: "Edit nitro fixture_chair", exact: true })
		.click();
	const editor = page.getByRole("dialog", { name: "Edit Nitro", exact: true });
	await expect(editor).toBeVisible();
	await expect(
		editor.getByRole("switch", { name: "Can Sit On", exact: true }),
	).toBeVisible();
	expect(metadataRequests).toBe(1);
	await editor.getByRole("button", { name: "Cancel", exact: true }).click();
	await expect(editor).toHaveCount(0);
	await page
		.getByRole("button", { name: "Import fixture_table", exact: true })
		.click();
	const review = page.getByRole("dialog", {
		name: "Review furniture import",
		exact: true,
	});
	await expect(review).toBeVisible();
	await expect(
		review.getByText("Fixture table", { exact: true }),
	).toBeVisible();
	await expect(
		review.getByRole("button", {
			name: "Continue to confirmation",
			exact: true,
		}),
	).toBeEnabled();
	await review.getByRole("button", { name: "Cancel", exact: true }).click();
	await expect(review).toHaveCount(0);
	expect(mutations).toEqual([]);
	expect(errors).toEqual([]);
});