Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0155S2Ye8BRUakV7GHAsmYWu
57 lines
2.7 KiB
JavaScript
57 lines
2.7 KiB
JavaScript
import test from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import { setupDom, teardownDom } from "../../composer/tests/_dom.js";
|
|
|
|
let createPeek;
|
|
test.before(async () => { setupDom(); ({ createPeek } = await import("../peek.js")); });
|
|
test.after(() => teardownDom());
|
|
|
|
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
|
|
const point = (node) => node.dispatchEvent(new window.Event("pointerover", { bubbles: true }));
|
|
const frame = () => {
|
|
document.body.innerHTML = `<div class="fp-main"><div class="fp-row"></div><section><header class="cx-panel-head"><button id="gen">Generate</button><span id="status"></span></header><div class="cx-panel-body"><div id="lane"></div></div></section></div>`;
|
|
document.documentElement.className = "";
|
|
};
|
|
|
|
test("auto-hide: the title bar (Generate, Rate) never opens the timeline; resting on the strip does", async () => {
|
|
frame();
|
|
const root = document.documentElement, isOpen = () => root.classList.contains("fp-peek-open");
|
|
const peek = createPeek();
|
|
peek.set(true);
|
|
const strip = document.querySelector(".fp-peek-strip");
|
|
assert.ok(strip && strip.nextElementSibling.classList.contains("cx-panel-body"), "the strip sits between title bar and timeline");
|
|
|
|
point(document.getElementById("gen")); await wait(300);
|
|
assert.equal(isOpen(), false, "reaching for Generate keeps it shut");
|
|
|
|
point(strip); point(document.querySelector(".fp-row")); await wait(300);
|
|
assert.equal(isOpen(), false, "passing over the strip does not flash it open");
|
|
|
|
point(strip); await wait(300);
|
|
assert.equal(isOpen(), true, "resting on the strip opens it");
|
|
point(document.getElementById("lane")); await wait(10);
|
|
assert.equal(isOpen(), true, "the timeline itself keeps it open");
|
|
point(document.getElementById("gen"));
|
|
assert.equal(isOpen(), false, "back on the title bar, it shuts");
|
|
|
|
peek.set(false);
|
|
assert.equal(root.classList.contains("fp-peek"), false);
|
|
assert.equal(document.querySelector(".fp-peek-strip"), null, "switched off, the strip is gone");
|
|
});
|
|
|
|
test("a drag opens it at once and holds it open until the drop; switched off, nothing listens", async () => {
|
|
frame();
|
|
const root = document.documentElement, isOpen = () => root.classList.contains("fp-peek-open");
|
|
const peek = createPeek();
|
|
peek.set(true);
|
|
document.body.dispatchEvent(new window.Event("dragenter", { bubbles: true }));
|
|
assert.equal(isOpen(), true);
|
|
point(document.getElementById("gen"));
|
|
assert.equal(isOpen(), true, "held open while dragging");
|
|
document.body.dispatchEvent(new window.Event("drop", { bubbles: true }));
|
|
assert.equal(isOpen(), false);
|
|
peek.destroy();
|
|
document.body.dispatchEvent(new window.Event("dragenter", { bubbles: true }));
|
|
assert.equal(isOpen(), false, "off means off");
|
|
});
|