1import type { PreviewViewportSetting } from "@t3tools/contracts";
2import { useState } from "react";
3import { expect, it } from "vite-plus/test";
4import { userEvent } from "vite-plus/test/browser";
5
6import { render } from "../../test/render";
7import { BrowserDeviceToolbar } from "./BrowserDeviceToolbar";
8
9function Viewport({ width = 1920, height = 1080 }: { width?: number; height?: number }) {
10 const [setting, setSetting] = useState<PreviewViewportSetting>({
11 _tag: "freeform",
12 width,
13 height,
14 });
15 const [aspectRatio, setAspectRatio] = useState<number | null>(width / height);
16 if (setting._tag === "fill") throw new Error("Expected fixed viewport");
17 return (
18 <>
19 <BrowserDeviceToolbar
20 setting={setting}
21 width={800}
22 aspectRatio={aspectRatio}
23 onAspectRatioChange={setAspectRatio}
24 onChange={async (next) => setSetting(next)}
25 />
26 <output aria-label="Saved viewport">
27 {setting.width} × {setting.height}
28 </output>
29 <button type="button">Leave toolbar</button>
30 </>
31 );
32}
33
34it.each([
35 { width: 1920, height: 1080, axis: "width", typed: "2560", expected: "2560 × 1440" },
36 { width: 390, height: 844, axis: "height", typed: "2532", expected: "1170 × 2532" },
37])("keeps each typed $axis digit until the locked size is committed", async (testCase) => {
38 await using screen = await render(<Viewport {...testCase} />);
39 const input = screen.getByRole("spinbutton", { name: `Viewport ${testCase.axis}` });
40 await userEvent.clear(input);
41 await userEvent.type(input, testCase.typed);
42 await expect.element(input).toHaveValue(Number(testCase.typed));
43 await screen.getByRole("button", { name: "Leave toolbar" }).click();
44 await expect
45 .element(screen.getByRole("status", { name: "Saved viewport" }))
46 .toHaveTextContent(testCase.expected);
47});
48
49it("clamps a completed width below the locked minimum when leaving the toolbar", async () => {
50 await using screen = await render(<Viewport />);
51 const input = screen.getByRole("spinbutton", { name: "Viewport width" });
52 await userEvent.clear(input);
53 await userEvent.type(input, "256");
54 await expect.element(input).toHaveValue(256);
55 await screen.getByRole("button", { name: "Leave toolbar" }).click();
56 await expect
57 .element(screen.getByRole("status", { name: "Saved viewport" }))
58 .toHaveTextContent("427 × 240");
59});
60
61it("still limits a completed locked size to the viewport area cap", async () => {
62 await using screen = await render(<Viewport width={1920} height={1920} />);
63 const input = screen.getByRole("spinbutton", { name: "Viewport width" });
64 await userEvent.clear(input);
65 await userEvent.type(input, "3840");
66 await expect.element(input).toHaveValue(3840);
67 await screen.getByRole("button", { name: "Leave toolbar" }).click();
68 await expect
69 .element(screen.getByRole("status", { name: "Saved viewport" }))
70 .toHaveTextContent("2880 × 2880");
71});