| 1 | import assert from "node:assert/strict"; |
| 2 | import { JSDOM } from "jsdom"; |
| 3 | import type { WireAsk } from "../lib/types"; |
| 4 | |
| 5 | const dom = new JSDOM('<div id="root"></div>', { url: "http://localhost/", pretendToBeVisual: true }); |
| 6 | Object.assign(globalThis, { |
| 7 | window: dom.window, document: dom.window.document, Element: dom.window.Element, |
| 8 | HTMLElement: dom.window.HTMLElement, Node: dom.window.Node, localStorage: dom.window.localStorage, |
| 9 | IS_REACT_ACT_ENVIRONMENT: true, |
| 10 | }); |
| 11 | Object.defineProperty(globalThis, "navigator", { configurable: true, value: dom.window.navigator }); |
| 12 | const { default: React, act } = await import("react"); |
| 13 | const { createRoot } = await import("react-dom/client"); |
| 14 | const { AskCard } = await import("../components/AskCard"); |
| 15 | const { LocaleProvider } = await import("../lib/i18n"); |
| 16 | |
| 17 | const root = createRoot(document.getElementById("root")!); |
| 18 | const ask: WireAsk = { |
| 19 | id: "1", runtimeEpoch: "runtime-a", turnId: "turn-a", |
| 20 | questions: [{ id: "q1", prompt: "Choose", options: [{ label: "Option A" }, { label: "Option B" }] }], |
| 21 | }; |
| 22 | await act(async () => root.render(<LocaleProvider><AskCard ask={ask} draftScope="tab-a" onAnswer={() => {}} onStop={() => {}} /></LocaleProvider>)); |
| 23 | |
| 24 | const card = () => document.querySelector<HTMLElement>(".prompt-shelf__card")!; |
| 25 | const collapsed = () => card().classList.contains("prompt-shelf__card--collapsed"); |
| 26 | const click = async (element: Element) => { |
| 27 | await act(async () => { element.dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true })); }); |
| 28 | }; |
| 29 | |
| 30 | assert.equal(collapsed(), false, "a delivered Ask starts expanded"); |
| 31 | await click(document.querySelector(".ask-shelf__custom-indicator")!); |
| 32 | assert.equal(collapsed(), false, "clicking the custom-answer row outside its input keeps the card open"); |
| 33 | assert.equal(document.activeElement, document.querySelector(".ask-shelf__custom"), "the row click focuses the custom input"); |
| 34 | await click(document.querySelector(".ask-shelf__custom-row")!); |
| 35 | assert.equal(collapsed(), false, "clicking the row's own padding keeps the card open"); |
| 36 | console.log(" PASS the custom-answer row never toggles the card's collapse"); |
| 37 | |
| 38 | await click(document.querySelector(".prompt-shelf__heading")!); |
| 39 | assert.equal(collapsed(), true, "the card's own chrome still collapses it"); |
| 40 | console.log(" PASS non-interactive card chrome still collapses the Ask"); |
| 41 | |
| 42 | await act(async () => root.unmount()); |
| 43 | dom.window.close(); |
| 44 |