222 lines
13 KiB
TypeScript
222 lines
13 KiB
TypeScript
// @vitest-environment happy-dom
|
|
import { act, createElement } from "react";
|
|
import { createRoot, type Root } from "react-dom/client";
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
|
|
import { SaveStatus } from "./save-status";
|
|
import { SAVE_LAYOUT_KEY, clampSaveLayout, parseSaveLayout } from "./floating-save-panel";
|
|
|
|
let root: Root;
|
|
let container: HTMLDivElement;
|
|
const onSave = vi.fn();
|
|
let startingWidth = 250;
|
|
let startingHeight = 200;
|
|
function button(name: string) {
|
|
const result = Array.from(container.querySelectorAll("button")).find((item) => (item.getAttribute("aria-label") ?? item.textContent?.trim()) === name);
|
|
if (!result) throw new Error(`Missing button: ${name}`);
|
|
return result;
|
|
}
|
|
beforeEach(() => {
|
|
vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
|
|
vi.clearAllMocks();
|
|
startingWidth = 250;
|
|
startingHeight = 200;
|
|
window.localStorage.clear();
|
|
vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(800);
|
|
vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(600);
|
|
vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (this: HTMLElement) {
|
|
const isPanel = this.hasAttribute("data-save-panel");
|
|
const x = isPanel ? Number.parseFloat(this.style.left || "550") : 0;
|
|
const y = isPanel ? Number.parseFloat(this.style.top || "400") : 0;
|
|
const width = isPanel ? Number.parseFloat(this.style.width || String(startingWidth)) : 800;
|
|
const height = isPanel ? Number.parseFloat(this.style.height || String(startingHeight)) : 600;
|
|
return { x, y, left: x, top: y, right: x + width, bottom: y + height, width, height, toJSON: () => ({}) };
|
|
});
|
|
container = document.createElement("div");
|
|
document.body.append(container);
|
|
root = createRoot(container);
|
|
});
|
|
afterEach(async () => {
|
|
await act(async () => root.unmount());
|
|
container.remove();
|
|
vi.unstubAllGlobals();
|
|
vi.restoreAllMocks();
|
|
});
|
|
async function render(props: Partial<Parameters<typeof SaveStatus>[0]> = {}) {
|
|
await act(async () => root.render(createElement(SaveStatus, { state: "saved", canSave: false, onSave, ...props })));
|
|
}
|
|
|
|
describe("floating SaveStatus", () => {
|
|
it("can grow and shrink back to the measured starting size", async () => {
|
|
startingWidth = 160;
|
|
startingHeight = 96;
|
|
await render();
|
|
const panel = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
panel.setPointerCapture = vi.fn();
|
|
panel.releasePointerCapture = vi.fn();
|
|
const resize = async (fromX: number, fromY: number, toX: number, toY: number) => {
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, button: 0, clientX: fromX, clientY: fromY })));
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: toX, clientY: toY })));
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 })));
|
|
};
|
|
await resize(710, 496, 790, 580);
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 550, y: 400, width: 240, height: 180 });
|
|
await resize(790, 580, 550, 400);
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 550, y: 400, width: 160, height: 96 });
|
|
});
|
|
|
|
it("uses the original minimum after restoring a larger layout and resizing the top-left corner", async () => {
|
|
startingWidth = 160;
|
|
startingHeight = 96;
|
|
window.localStorage.setItem(SAVE_LAYOUT_KEY, JSON.stringify({ version: 1, x: 40, y: 60, width: 350, height: 280 }));
|
|
await render();
|
|
const panel = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
panel.setPointerCapture = vi.fn();
|
|
panel.releasePointerCapture = vi.fn();
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, button: 0, clientX: 40, clientY: 60 })));
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: 500, clientY: 500 })));
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 })));
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 230, y: 244, width: 160, height: 96 });
|
|
});
|
|
|
|
it("restores a saved layout", async () => {
|
|
window.localStorage.setItem(SAVE_LAYOUT_KEY, JSON.stringify({ version: 1, x: 40, y: 60, width: 300, height: 220 }));
|
|
await render();
|
|
const panel = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
expect(panel.style.left).toBe("40px");
|
|
expect(panel.style.height).toBe("220px");
|
|
});
|
|
|
|
it("clamps a restored layout without overwriting the preference", async () => {
|
|
const stored = JSON.stringify({ version: 1, x: 900, y: 700, width: 300, height: 220 });
|
|
window.localStorage.setItem(SAVE_LAYOUT_KEY, stored);
|
|
await render();
|
|
const panel = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
expect(panel.style.left).toBe("500px");
|
|
expect(panel.style.top).toBe("380px");
|
|
expect(window.localStorage.getItem(SAVE_LAYOUT_KEY)).toBe(stored);
|
|
});
|
|
|
|
it("resizes with the keyboard and persists without saving editor data", async () => {
|
|
await render({ state: "unsaved", canSave: true });
|
|
await act(async () => container.querySelector<HTMLElement>("[data-save-panel]")!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", altKey: true, bubbles: true })));
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 550, y: 400, width: 250, height: 200 });
|
|
expect(onSave).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("persists pointer resizing only after releasing the handle", async () => {
|
|
await render();
|
|
const handle = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
handle.setPointerCapture = vi.fn();
|
|
handle.releasePointerCapture = vi.fn();
|
|
await act(async () => handle.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, button: 0, clientX: 800, clientY: 600 })));
|
|
await act(async () => handle.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: 750, clientY: 580 })));
|
|
expect(container.querySelector<HTMLElement>("[data-save-panel]")!.style.width).toBe("250px");
|
|
expect(window.localStorage.getItem(SAVE_LAYOUT_KEY)).toBeNull();
|
|
await act(async () => handle.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 })));
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 550, y: 400, width: 250, height: 200 });
|
|
});
|
|
|
|
it.each([
|
|
[550, 500, 570, 500, { x: 550, y: 400, width: 250, height: 200 }],
|
|
[800, 500, 780, 500, { x: 550, y: 400, width: 250, height: 200 }],
|
|
[650, 400, 650, 420, { x: 550, y: 400, width: 250, height: 200 }],
|
|
[650, 600, 650, 580, { x: 550, y: 400, width: 250, height: 200 }],
|
|
])("resizes from the edge at %i, %i", async (x, y, endX, endY, expected) => {
|
|
await render();
|
|
const panel = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
panel.setPointerCapture = vi.fn();
|
|
panel.releasePointerCapture = vi.fn();
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, button: 0, clientX: x, clientY: y })));
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: endX, clientY: endY })));
|
|
await act(async () => panel.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 })));
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual(expected);
|
|
});
|
|
|
|
it("moves by dragging the status content without a move icon", async () => {
|
|
await render();
|
|
const status = container.querySelector('[role="status"]')!;
|
|
await act(async () => status.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, isPrimary: true, pointerId: 1, button: 0, clientX: 650, clientY: 450 })));
|
|
await act(async () => document.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: 630, clientY: 430 })));
|
|
await act(async () => document.dispatchEvent(new PointerEvent("pointermove", { bubbles: true, pointerId: 1, clientX: 630, clientY: 430 })));
|
|
await act(async () => document.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 })));
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 530, y: 380, width: 250, height: 200 });
|
|
expect(container.querySelectorAll("button")).toHaveLength(1);
|
|
expect(onSave).not.toHaveBeenCalled();
|
|
// dnd-kit briefly retains its click blocker after a pointer drag ends.
|
|
await act(async () => { await new Promise((resolve) => setTimeout(resolve, 60)); });
|
|
});
|
|
|
|
it("keeps a normal Save click working without moving the panel", async () => {
|
|
await render({ state: "unsaved", canSave: true });
|
|
await act(async () => button("บันทึก").dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, isPrimary: true, pointerId: 1, button: 0, clientX: 650, clientY: 500 })));
|
|
await act(async () => button("บันทึก").dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1, button: 0, clientX: 650, clientY: 500 })));
|
|
await act(async () => button("บันทึก").click());
|
|
expect(onSave).toHaveBeenCalledTimes(1);
|
|
expect(window.localStorage.getItem(SAVE_LAYOUT_KEY)).toBeNull();
|
|
});
|
|
|
|
it("moves with the keyboard and persists the position", async () => {
|
|
await render();
|
|
const handle = container.querySelector<HTMLElement>("[data-save-panel]")!;
|
|
await act(async () => {
|
|
handle.focus();
|
|
handle.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: " ", code: "Space" }));
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
});
|
|
await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "ArrowLeft", code: "ArrowLeft" })));
|
|
await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: " ", code: "Space" })));
|
|
expect(parseSaveLayout(window.localStorage.getItem(SAVE_LAYOUT_KEY))).toEqual({ x: 525, y: 400, width: 250, height: 200 });
|
|
expect(onSave).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("continues to resize when storage is unavailable", async () => {
|
|
vi.spyOn(window.localStorage, "getItem").mockImplementation(() => { throw new Error("blocked"); });
|
|
vi.spyOn(window.localStorage, "setItem").mockImplementation(() => { throw new Error("blocked"); });
|
|
await render();
|
|
await act(async () => container.querySelector<HTMLElement>("[data-save-panel]")!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", altKey: true, bubbles: true })));
|
|
expect(container.querySelector<HTMLElement>("[data-save-panel]")!.style.width).toBe("250px");
|
|
});
|
|
|
|
it("rejects malformed storage and keeps minimum sizes within tiny viewports", () => {
|
|
expect(parseSaveLayout("not json")).toBeNull();
|
|
expect(parseSaveLayout(JSON.stringify({ version: 1, x: "40", y: 0, width: 200, height: 144 }))).toBeNull();
|
|
expect(clampSaveLayout({ x: -10, y: 500, width: 50, height: 50 }, 180, 120, { width: 250, height: 200 })).toEqual({ x: 0, y: 0, width: 180, height: 120 });
|
|
});
|
|
|
|
it("keeps Save visible when saved and enables it for unsaved changes", async () => {
|
|
await render();
|
|
expect(button("บันทึก").textContent).toContain("บันทึก");
|
|
expect(button("บันทึก").disabled).toBe(true);
|
|
expect(container.querySelector(".fixed")).not.toBeNull();
|
|
await render({ state: "unsaved", canSave: true });
|
|
await act(async () => button("บันทึก").click());
|
|
expect(onSave).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("shows saving feedback and blocks more save requests", async () => {
|
|
await render({ state: "saving", canSave: false });
|
|
expect(button("กำลังบันทึก…").textContent).toContain("กำลังบันทึก");
|
|
await act(async () => button("กำลังบันทึก…").click());
|
|
expect(onSave).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("shows validation issues while keeping Save disabled", async () => {
|
|
await render({ state: "incomplete", issues: ["Missing title"] });
|
|
expect(button("บันทึก").disabled).toBe(true);
|
|
await act(async () => button("ตรวจสอบข้อมูลที่ยังไม่ครบ").click());
|
|
expect(container.textContent).toContain("Missing title");
|
|
expect(button("ซ่อนรายการ").getAttribute("aria-expanded")).toBe("true");
|
|
});
|
|
|
|
it("keeps conflict actions available and blocks ordinary Save", async () => {
|
|
const onReloadLatest = vi.fn();
|
|
const onOverwrite = vi.fn();
|
|
await render({ state: "conflict", conflictVersion: 8, canOverwrite: true, onReloadLatest, onOverwrite });
|
|
await act(async () => { button("โหลดข้อมูลล่าสุด").click(); button("เขียนทับด้วย Draft นี้").click(); });
|
|
expect(onReloadLatest).toHaveBeenCalledTimes(1);
|
|
expect(onOverwrite).toHaveBeenCalledTimes(1);
|
|
expect(button("บันทึก").disabled).toBe(true);
|
|
});
|
|
});
|