@olenbetong/appframe-ds 1.6.1 → 1.7.0

package/src/AfLookup/LookupGrid.test.tsx

@@ -1,142 +1,142 @@
-import type { LookupColumn } from "@olenbetong/appframe-react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeAll, describe, expect, it, vi } from "vitest";
-
-import { LookupGrid } from "./LookupGrid.js";
-
-type Row = { PrimKey: string; Name: string; Code: string };
-
-const COLUMNS: LookupColumn<Row>[] = [
-	{ field: "Code", headerName: "Code", width: 100 },
-	{ field: "Name", headerName: "Name" },
-];
-
-const DATA: Row[] = [
-	{ PrimKey: "1", Code: "A", Name: "Alpha" },
-	{ PrimKey: "2", Code: "B", Name: "Beta" },
-];
-
-function renderGrid(props: Partial<React.ComponentProps<typeof LookupGrid<Row>>> = {}) {
-	return render(
-		<LookupGrid<Row>
-			columns={COLUMNS}
-			data={DATA}
-			height={300}
-			currentIndex={0}
-			currentColumn={0}
-			getItemId={(item) => item?.PrimKey}
-			onSelectItem={() => undefined}
-			{...props}
-		/>,
-	);
-}
-
-function headerRow() {
-	return screen.getByRole("grid").querySelector(".ObLookupGrid-headerRow") as HTMLElement;
-}
-
-beforeAll(() => {
-	// happy-dom has no pointer capture; the handle only checks that it holds it during a drag
-	let captured = new WeakMap<Element, number>();
-	Element.prototype.setPointerCapture = function (id: number) {
-		captured.set(this, id);
-	};
-	Element.prototype.hasPointerCapture = function (id: number) {
-		return captured.get(this) === id;
-	};
-	Element.prototype.releasePointerCapture = function () {
-		captured.delete(this);
-	};
-	if (typeof ResizeObserver === "undefined") {
-		globalThis.ResizeObserver = class {
-			observe() {}
-			unobserve() {}
-			disconnect() {}
-		} as never;
-	}
-});
-
-describe("LookupGrid", () => {
-	it("lays the header out with the configured column tracks", () => {
-		renderGrid();
-
-		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
-		expect(headerRow().style.minWidth).toBe("180px");
-	});
-
-	it("moves the header sideways with the list", () => {
-		renderGrid();
-
-		let list = screen.getByRole("rowgroup");
-		list.scrollLeft = 37;
-		fireEvent.scroll(list);
-
-		expect(headerRow().style.transform).toBe("translateX(-37px)");
-	});
-
-	it("resizes a column by dragging its handle, and resets it on double click", () => {
-		renderGrid();
-
-		let [handle] = screen.getAllByRole("separator", { name: "Resize column" });
-		let cell = handle.parentElement as HTMLElement;
-		vi.spyOn(cell, "getBoundingClientRect").mockReturnValue({ width: 100 } as DOMRect);
-
-		fireEvent.pointerDown(handle, { button: 0, pointerId: 1, clientX: 200 });
-		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 250 });
-		expect(headerRow().style.gridTemplateColumns).toBe("150px minmax(80px, 1fr)");
-		expect(headerRow().style.minWidth).toBe("230px");
-
-		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 0 });
-		expect(headerRow().style.gridTemplateColumns).toBe("80px minmax(80px, 1fr)");
-
-		fireEvent.pointerUp(handle, { pointerId: 1, clientX: 0 });
-		expect(screen.getByRole("grid")).not.toHaveAttribute("data-resizing");
-
-		fireEvent.doubleClick(handle);
-		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
-	});
-
-	it("renders plain headers when there is no sort handler", () => {
-		renderGrid();
-
-		expect(screen.queryByRole("button", { name: "Code" })).toBeNull();
-		expect(screen.getByRole("columnheader", { name: /^Code/ })).not.toHaveAttribute("aria-sort");
-	});
-
-	it("sorts on a header click, marks the sorted column and keeps the focus where it is", () => {
-		let onSort = vi.fn();
-		renderGrid({ onSort, sort: { field: "Name", direction: "desc" } });
-
-		expect(screen.getByRole("columnheader", { name: /^Name/ })).toHaveAttribute("aria-sort", "descending");
-		expect(screen.getByRole("columnheader", { name: /^Code/ })).not.toHaveAttribute("aria-sort");
-
-		let button = screen.getByRole("button", { name: "Code" });
-		let mouseDown = fireEvent.mouseDown(button);
-		expect(mouseDown).toBe(false);
-
-		fireEvent.click(button);
-		expect(onSort).toHaveBeenCalledWith("Code");
-	});
-
-	it("leaves a column marked sortable: false as plain text", () => {
-		renderGrid({
-			onSort: vi.fn(),
-			columns: [
-				{ field: "Code", headerName: "Code", sortable: false },
-				{ field: "Name", headerName: "Name" },
-			],
-		});
-
-		expect(screen.queryByRole("button", { name: "Code" })).toBeNull();
-		expect(screen.getByRole("button", { name: "Name" })).toBeInTheDocument();
-	});
-
-	it("ignores moves that are not part of a drag", () => {
-		renderGrid();
-
-		let [handle] = screen.getAllByRole("separator", { name: "Resize column" });
-		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 250 });
-
-		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
-	});
-});
+import type { LookupColumn } from "@olenbetong/appframe-react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { LookupGrid } from "./LookupGrid.js";
+
+type Row = { PrimKey: string; Name: string; Code: string };
+
+const COLUMNS: LookupColumn<Row>[] = [
+	{ field: "Code", headerName: "Code", width: 100 },
+	{ field: "Name", headerName: "Name" },
+];
+
+const DATA: Row[] = [
+	{ PrimKey: "1", Code: "A", Name: "Alpha" },
+	{ PrimKey: "2", Code: "B", Name: "Beta" },
+];
+
+function renderGrid(props: Partial<React.ComponentProps<typeof LookupGrid<Row>>> = {}) {
+	return render(
+		<LookupGrid<Row>
+			columns={COLUMNS}
+			data={DATA}
+			height={300}
+			currentIndex={0}
+			currentColumn={0}
+			getItemId={(item) => item?.PrimKey}
+			onSelectItem={() => undefined}
+			{...props}
+		/>,
+	);
+}
+
+function headerRow() {
+	return screen.getByRole("grid").querySelector(".ObLookupGrid-headerRow") as HTMLElement;
+}
+
+beforeAll(() => {
+	// happy-dom has no pointer capture; the handle only checks that it holds it during a drag
+	let captured = new WeakMap<Element, number>();
+	Element.prototype.setPointerCapture = function (id: number) {
+		captured.set(this, id);
+	};
+	Element.prototype.hasPointerCapture = function (id: number) {
+		return captured.get(this) === id;
+	};
+	Element.prototype.releasePointerCapture = function () {
+		captured.delete(this);
+	};
+	if (typeof ResizeObserver === "undefined") {
+		globalThis.ResizeObserver = class {
+			observe() {}
+			unobserve() {}
+			disconnect() {}
+		} as never;
+	}
+});
+
+describe("LookupGrid", () => {
+	it("lays the header out with the configured column tracks", () => {
+		renderGrid();
+
+		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
+		expect(headerRow().style.minWidth).toBe("180px");
+	});
+
+	it("moves the header sideways with the list", () => {
+		renderGrid();
+
+		let list = screen.getByRole("rowgroup");
+		list.scrollLeft = 37;
+		fireEvent.scroll(list);
+
+		expect(headerRow().style.transform).toBe("translateX(-37px)");
+	});
+
+	it("resizes a column by dragging its handle, and resets it on double click", () => {
+		renderGrid();
+
+		let [handle] = screen.getAllByRole("separator", { name: "Resize column" });
+		let cell = handle.parentElement as HTMLElement;
+		vi.spyOn(cell, "getBoundingClientRect").mockReturnValue({ width: 100 } as DOMRect);
+
+		fireEvent.pointerDown(handle, { button: 0, pointerId: 1, clientX: 200 });
+		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 250 });
+		expect(headerRow().style.gridTemplateColumns).toBe("150px minmax(80px, 1fr)");
+		expect(headerRow().style.minWidth).toBe("230px");
+
+		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 0 });
+		expect(headerRow().style.gridTemplateColumns).toBe("80px minmax(80px, 1fr)");
+
+		fireEvent.pointerUp(handle, { pointerId: 1, clientX: 0 });
+		expect(screen.getByRole("grid")).not.toHaveAttribute("data-resizing");
+
+		fireEvent.doubleClick(handle);
+		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
+	});
+
+	it("renders plain headers when there is no sort handler", () => {
+		renderGrid();
+
+		expect(screen.queryByRole("button", { name: "Code" })).toBeNull();
+		expect(screen.getByRole("columnheader", { name: /^Code/ })).not.toHaveAttribute("aria-sort");
+	});
+
+	it("sorts on a header click, marks the sorted column and keeps the focus where it is", () => {
+		let onSort = vi.fn();
+		renderGrid({ onSort, sort: { field: "Name", direction: "desc" } });
+
+		expect(screen.getByRole("columnheader", { name: /^Name/ })).toHaveAttribute("aria-sort", "descending");
+		expect(screen.getByRole("columnheader", { name: /^Code/ })).not.toHaveAttribute("aria-sort");
+
+		let button = screen.getByRole("button", { name: "Code" });
+		let mouseDown = fireEvent.mouseDown(button);
+		expect(mouseDown).toBe(false);
+
+		fireEvent.click(button);
+		expect(onSort).toHaveBeenCalledWith("Code");
+	});
+
+	it("leaves a column marked sortable: false as plain text", () => {
+		renderGrid({
+			onSort: vi.fn(),
+			columns: [
+				{ field: "Code", headerName: "Code", sortable: false },
+				{ field: "Name", headerName: "Name" },
+			],
+		});
+
+		expect(screen.queryByRole("button", { name: "Code" })).toBeNull();
+		expect(screen.getByRole("button", { name: "Name" })).toBeInTheDocument();
+	});
+
+	it("ignores moves that are not part of a drag", () => {
+		renderGrid();
+
+		let [handle] = screen.getAllByRole("separator", { name: "Resize column" });
+		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 250 });
+
+		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
+	});
+});