1import { describe, expect, it } from "vite-plus/test";
2
3import { render } from "../../../test/render";
4import { FileExplorerPane } from "./FileExplorerPane";
5
6const STORAGE_KEY = "test:file-explorer-default";
7
8describe("FileExplorerPane", () => {
9 it.each([
10 { view: "Changes", defaultWidth: 256, defaultWidthFraction: 0.4, minWidth: 160, expected: 168 },
11 { view: "PR Code", defaultWidth: 320, defaultWidthFraction: 0.4, minWidth: 192, expected: 192 },
12 {
13 view: "Files",
14 defaultWidth: 256,
15 minWidth: 160,
16 expected: 164,
17 },
18 ])(
19 "preserves the $view initial width in a 420px row",
20 async ({ expected, view: _, ...sizing }) => {
21 const previous = localStorage.getItem(STORAGE_KEY);
22 localStorage.removeItem(STORAGE_KEY);
23 try {
24 // This layout has no navigation or links.
25 await using screen = await render(
26 <div style={{ display: "flex", width: 420 }}>
27 <FileExplorerPane resizable storageKey={STORAGE_KEY} {...sizing}>
28 File tree
29 </FileExplorerPane>
30 </div>,
31 { router: false },
32 );
33 await expect
34 .element(screen.getByRole("separator"))
35 .toHaveAttribute("aria-valuenow", String(expected));
36 expect(screen.container.querySelector("aside")!.getBoundingClientRect().width).toBe(
37 expected,
38 );
39 } finally {
40 if (previous === null) localStorage.removeItem(STORAGE_KEY);
41 else localStorage.setItem(STORAGE_KEY, previous);
42 }
43 },
44 );
45});