| 1 | import assert from "node:assert/strict"; |
| 2 | import React, { act } from "react"; |
| 3 | import { createRoot } from "react-dom/client"; |
| 4 | import { JSDOM } from "jsdom"; |
| 5 | import { DecisionFooterSlots } from "../app-shell/DecisionFooterRegion"; |
| 6 | |
| 7 | const dom = new JSDOM("<div id='root'></div>", { url: "http://localhost", pretendToBeVisual: true }); |
| 8 | Object.assign(globalThis, { window: dom.window, document: dom.window.document, IS_REACT_ACT_ENVIRONMENT: true }); |
| 9 | const root = createRoot(document.getElementById("root")!); |
| 10 | let ready = true; |
| 11 | let release!: () => void; |
| 12 | const gate = new Promise<void>(resolve => { release = resolve; }); |
| 13 | function Decision() { if (!ready) throw gate; return <button id="decision">decision</button>; } |
| 14 | const paint = () => act(async () => root.render(<DecisionFooterSlots todo={<button id="todo">todo</button>} undo={<button id="undo">undo</button>} decision={<Decision />} />)); |
| 15 | try { |
| 16 | await paint(); |
| 17 | const todo = document.getElementById("todo")!; |
| 18 | const undo = document.getElementById("undo")!; |
| 19 | undo.focus(); |
| 20 | ready = false; |
| 21 | await paint(); |
| 22 | assert.equal(document.getElementById("todo"), todo); |
| 23 | assert.equal(document.getElementById("undo"), undo); |
| 24 | assert.equal(undo.style.display, "", "a loading decision never hides the existing undo action"); |
| 25 | assert.equal(todo.style.display, "", "a loading decision never hides existing work status"); |
| 26 | assert.equal(document.activeElement, undo); |
| 27 | await act(async () => { ready = true; release(); }); |
| 28 | assert.equal(document.getElementById("undo"), undo); |
| 29 | console.log("decision slots: independent Suspense preserves visible siblings and focus"); |
| 30 | } finally { await act(async () => root.unmount()); dom.window.close(); } |
| 31 |