John O'Keefe
ace9e57d27
User report: Remove Feed still used the browser dialog. Headless-proven
root cause (tests/ui/confirm_probe.spec.ts): the htmx:confirm handler
read evt.detail.element, which htmx 2 does not provide (its detail is
{ elt, question, issueRequest, ... }) — the handler returned at
'if (!elt) return' BEFORE preventDefault, so every hx-confirm sitewide
fell through to htmx's native confirm. The acbcc61a migration only ever
worked for direct confirmDialog() callers; hx-confirm interception was
dead on arrival against htmx 2 and no test watched the JS side.
Fix: read detail.question (htmx's own closest-attribute resolution of
hx-confirm); return without preventing default when absent. Probe
spec pins: click Remove Feed → #confirm-modal opens with the message,
cancel hides it, no dialog event fires.
Companion fixes in the same user-test round (one commit, one defect
family — templ boolean attributes + confirm-modal placement):
- Add-modal Download order never revealed: #podcast-download-all was
nested in a wrapper div, so ':checked ~ .podcast-add-order' had no
sibling relationship. Input, label, and order row are now siblings.
- Order/auto-download dropdowns always DISPLAYED the last option
('Newest first'/'Newest') whatever was saved: templ selected={ bool }
emits selected="false" — presence selects, so every option was
selected and the browser honored the last. Swept to selected?={...}
across podcast_detail (14), book_detail_modals (10, incl. two
always-checked checkboxes), collection_modal (2, same). Saves were
correct all along; display only.
- Global confirm modal moved from SidebarSignIn (signed-out only!) into
Header — signed-in pages had no #confirm-modal, so confirmDialog
degraded to window.confirm even with a working interceptor.
Facet bar scale (user question): values now carry feed counts, sort
frequency-first, cap at 6 chips per group with a native <details>
'+N more' expander.
Probes: tests/ui/confirm_probe.spec.ts + add_order_probe.spec.ts
(live-server, BH_FEED-gated) — both pass against the dev instance.
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
// One-off probe: does clicking an hx-confirm button open the CUSTOM
|
|
// modal (#confirm-modal) or a native dialog? Clicks "Remove Feed" on a
|
|
// hard-coded feed, then CANCELS whichever appears (nothing is deleted).
|
|
import { test, expect } from "@playwright/test";
|
|
|
|
const BASE = process.env.BH_BASE ?? "http://localhost:8765";
|
|
const FEED = process.env.BH_FEED ?? "";
|
|
|
|
test.skip(!FEED, "set BH_FEED=<feed uuid> against a running dev server");
|
|
|
|
test("hx-confirm uses the custom modal", async ({ page }) => {
|
|
const nativeDialogs: string[] = [];
|
|
page.on("console", (m) => {
|
|
if (m.type() === "error" || m.type() === "warning") console.log("[console]", m.type(), m.text().slice(0, 300));
|
|
});
|
|
page.on("pageerror", (e) => console.log("[pageerror]", String(e).slice(0, 400)));
|
|
page.on("dialog", async (d) => {
|
|
nativeDialogs.push(d.message());
|
|
await d.dismiss(); // never accept
|
|
});
|
|
|
|
// Login via the API form (session cookie sticks to the context).
|
|
await page.request.post(`${BASE}/api/auth/login`, {
|
|
data: { login: "testuser", password: "Test@Pass123!" },
|
|
});
|
|
await page.goto(`${BASE}/podcasts/${FEED}`);
|
|
|
|
const modal = page.locator("#confirm-modal");
|
|
await expect(modal).toHaveCount(1); // the modal must exist on the page
|
|
await expect(modal).toBeHidden();
|
|
|
|
await page.getByRole("button", { name: "Remove Feed" }).click();
|
|
|
|
if (nativeDialogs.length > 0) {
|
|
throw new Error(
|
|
`NATIVE dialog opened (${nativeDialogs[0]}) — htmx:confirm interceptor did not preventDefault`,
|
|
);
|
|
}
|
|
await expect(modal).toBeVisible({ timeout: 3000 });
|
|
await expect(page.locator("#confirm-modal-message")).toContainText("remove this feed");
|
|
|
|
// Cancel — no request fires.
|
|
await page.locator("#confirm-modal-cancel").click();
|
|
await expect(modal).toBeHidden();
|
|
});
|