From ddd66d4c5eae47bab313d6c5e8fdb3ae4117bf32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cintia=20S=C3=A1nchez=20Garc=C3=ADa?= Date: Thu, 7 May 2026 20:06:42 +0200 Subject: [PATCH 1/2] Fix team add member dropdown overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Cintia Sánchez García --- .../js/dashboard/community/team-add-member.js | 4 ++-- .../dashboard/community/team-add-member.test.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/ocg-server/static/js/dashboard/community/team-add-member.js b/ocg-server/static/js/dashboard/community/team-add-member.js index 0a8c3db4..ff3ca26b 100644 --- a/ocg-server/static/js/dashboard/community/team-add-member.js +++ b/ocg-server/static/js/dashboard/community/team-add-member.js @@ -242,7 +242,7 @@ export class TeamAddMember extends LitWrapper { @click=${() => this._close()} >
-
+

Add member

-
+
{ expect(focusCalls).to.equal(1); }); + it("allows the user search dropdown to overflow the modal", async () => { + const element = await mountLitComponentWithAttributes("team-add-member", { + attributes: { + "role-options": JSON.stringify([{ display_name: "Maintainer", community_role_id: "role-1" }]), + }, + }); + + element._open(); + await element.updateComplete; + + expect(element.querySelector(".modal-card").classList.contains("modal-overflow-visible")).to.equal(true); + expect(element.querySelector(".modal-body").classList.contains("modal-overflow-visible")).to.equal(true); + }); + it("enables submit only after both a user and role have been selected", async () => { const element = await mountLitComponentWithAttributes("team-add-member", { attributes: { From 30390afabe5e8a2e55ac3d424e1aace29e256aee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cintia=20S=C3=A1nchez=20Garc=C3=ADa?= Date: Thu, 7 May 2026 20:07:32 +0200 Subject: [PATCH 2/2] Keep HTMX handlers alive after body swaps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Cintia Sánchez García --- .../js/dashboard/event/cfs-submissions.js | 8 +-- .../static/js/dashboard/group/attendees.js | 8 ++- .../static/js/dashboard/group/members.js | 4 +- .../static/js/dashboard/group/sponsors.js | 8 ++- .../js/dashboard/user/session-proposals.js | 4 +- .../static/js/dashboard/user/submissions.js | 4 +- ocg-server/static/js/event/attendance.js | 15 +++--- ocg-server/static/js/event/cfs.js | 5 +- ocg-server/static/js/group/membership.js | 10 ++-- .../dashboard/event/cfs-submissions.test.js | 31 +++++++++-- tests/unit/dashboard/group/attendees.test.js | 47 ++++++++++++----- tests/unit/dashboard/group/members.test.js | 24 ++++++++- tests/unit/dashboard/group/sponsors.test.js | 51 +++++++++++++++++++ .../dashboard/user/session-proposals.test.js | 19 ++++++- tests/unit/dashboard/user/submissions.test.js | 35 ++++++++++++- tests/unit/event/attendance.test.js | 11 ++++ tests/unit/event/cfs.test.js | 25 +++++++++ tests/unit/group/membership.test.js | 11 ++++ 18 files changed, 260 insertions(+), 60 deletions(-) create mode 100644 tests/unit/dashboard/group/sponsors.test.js diff --git a/ocg-server/static/js/dashboard/event/cfs-submissions.js b/ocg-server/static/js/dashboard/event/cfs-submissions.js index 7e3da2c6..84819ee0 100644 --- a/ocg-server/static/js/dashboard/event/cfs-submissions.js +++ b/ocg-server/static/js/dashboard/event/cfs-submissions.js @@ -1147,11 +1147,11 @@ if (!customElements.get("review-submission-modal")) { } const initializeCfsSubmissions = () => { - if (!document.body || document.body.dataset[DATA_KEY] === "true") { + if (document.documentElement.dataset[DATA_KEY] === "true") { return; } - document.body.dataset[DATA_KEY] = "true"; - document.body.addEventListener("htmx:afterSwap", (event) => { + document.documentElement.dataset[DATA_KEY] = "true"; + document.addEventListener("htmx:afterSwap", (event) => { const target = event?.detail?.target || event?.detail?.elt; if (!(target instanceof Element) || target.id !== SUBMISSIONS_CONTENT_ID) { return; @@ -1165,7 +1165,7 @@ const initializeCfsSubmissions = () => { modal.syncLabelsFromFilter(); }); - document.body.addEventListener("click", (event) => { + document.addEventListener("click", (event) => { if (!(event.target instanceof Element)) { return; } diff --git a/ocg-server/static/js/dashboard/group/attendees.js b/ocg-server/static/js/dashboard/group/attendees.js index f4ae1788..5f0fbc8f 100644 --- a/ocg-server/static/js/dashboard/group/attendees.js +++ b/ocg-server/static/js/dashboard/group/attendees.js @@ -357,8 +357,6 @@ const initializeAttendeesFeatures = (root = document) => { initializeAttendeesFeatures(); -if (document.body) { - document.body.addEventListener("htmx:load", (event) => { - initializeAttendeesFeatures(event.target || document); - }); -} +document.addEventListener("htmx:load", (event) => { + initializeAttendeesFeatures(event.target || document); +}); diff --git a/ocg-server/static/js/dashboard/group/members.js b/ocg-server/static/js/dashboard/group/members.js index 87306237..7bf7eec2 100644 --- a/ocg-server/static/js/dashboard/group/members.js +++ b/ocg-server/static/js/dashboard/group/members.js @@ -20,6 +20,4 @@ const initializeMembersNotification = () => { initializeMembersNotification(); -if (document.body) { - document.body.addEventListener("htmx:load", initializeMembersNotification); -} +document.addEventListener("htmx:load", initializeMembersNotification); diff --git a/ocg-server/static/js/dashboard/group/sponsors.js b/ocg-server/static/js/dashboard/group/sponsors.js index fe78c799..0f82bd48 100644 --- a/ocg-server/static/js/dashboard/group/sponsors.js +++ b/ocg-server/static/js/dashboard/group/sponsors.js @@ -107,8 +107,6 @@ const initializeSponsorsFeatures = (root = document) => { initializeSponsorsFeatures(); -if (document.body) { - document.body.addEventListener("htmx:load", (event) => { - initializeSponsorsFeatures(event.target || document); - }); -} +document.addEventListener("htmx:load", (event) => { + initializeSponsorsFeatures(event.target || document); +}); diff --git a/ocg-server/static/js/dashboard/user/session-proposals.js b/ocg-server/static/js/dashboard/user/session-proposals.js index 2cd574dc..40b2161e 100644 --- a/ocg-server/static/js/dashboard/user/session-proposals.js +++ b/ocg-server/static/js/dashboard/user/session-proposals.js @@ -187,6 +187,4 @@ const initializeSessionProposals = () => { initializeSessionProposals(); -if (document.body) { - document.body.addEventListener("htmx:load", initializeSessionProposals); -} +document.addEventListener("htmx:load", initializeSessionProposals); diff --git a/ocg-server/static/js/dashboard/user/submissions.js b/ocg-server/static/js/dashboard/user/submissions.js index 966021e3..331ec8ec 100644 --- a/ocg-server/static/js/dashboard/user/submissions.js +++ b/ocg-server/static/js/dashboard/user/submissions.js @@ -101,6 +101,4 @@ const initializeSubmissionActions = () => { initializeSubmissionActions(); -if (document.body) { - document.body.addEventListener("htmx:load", initializeSubmissionActions); -} +document.addEventListener("htmx:load", initializeSubmissionActions); diff --git a/ocg-server/static/js/event/attendance.js b/ocg-server/static/js/event/attendance.js index 2491e592..e0823f26 100644 --- a/ocg-server/static/js/event/attendance.js +++ b/ocg-server/static/js/event/attendance.js @@ -1026,16 +1026,15 @@ const initializeAttendance = (root = document) => { } }); - if (document.body?.dataset.attendanceListenersReady === "true") { - return; + if (document.documentElement.dataset.attendanceListenersReady !== "true") { + document.documentElement.dataset.attendanceListenersReady = "true"; + document.addEventListener("htmx:configRequest", handleConfigRequest); + document.addEventListener("htmx:beforeRequest", handleBeforeRequest); + document.addEventListener("htmx:afterRequest", handleAfterRequest); + document.addEventListener("click", handleAttendanceClick); + document.addEventListener("keydown", handleAttendanceKeydown); } - document.body.dataset.attendanceListenersReady = "true"; - document.body.addEventListener("htmx:configRequest", handleConfigRequest); - document.body.addEventListener("htmx:beforeRequest", handleBeforeRequest); - document.body.addEventListener("htmx:afterRequest", handleAfterRequest); - document.body.addEventListener("click", handleAttendanceClick); - document.addEventListener("keydown", handleAttendanceKeydown); reconcilePaymentReturn(); }; diff --git a/ocg-server/static/js/event/cfs.js b/ocg-server/static/js/event/cfs.js index 6a0b1b65..a5318e5d 100644 --- a/ocg-server/static/js/event/cfs.js +++ b/ocg-server/static/js/event/cfs.js @@ -65,6 +65,7 @@ const handleModalSwap = (event) => { } }; -if (document.body) { - document.body.addEventListener("htmx:afterSwap", handleModalSwap); +if (document.documentElement.dataset.cfsModalSwapReady !== "true") { + document.documentElement.dataset.cfsModalSwapReady = "true"; + document.addEventListener("htmx:afterSwap", handleModalSwap); } diff --git a/ocg-server/static/js/group/membership.js b/ocg-server/static/js/group/membership.js index 416b8eea..31221398 100644 --- a/ocg-server/static/js/group/membership.js +++ b/ocg-server/static/js/group/membership.js @@ -266,14 +266,14 @@ const handleMembershipClick = (event) => { const initializeMembership = (root = document) => { getMembershipContainers(root).forEach(initializeMembershipContainer); - if (document.body?.dataset.membershipListenersReady === "true") { + if (document.documentElement.dataset.membershipListenersReady === "true") { return; } - document.body.dataset.membershipListenersReady = "true"; - document.body.addEventListener("htmx:beforeRequest", handleBeforeRequest); - document.body.addEventListener("htmx:afterRequest", handleAfterRequest); - document.body.addEventListener("click", handleMembershipClick); + document.documentElement.dataset.membershipListenersReady = "true"; + document.addEventListener("htmx:beforeRequest", handleBeforeRequest); + document.addEventListener("htmx:afterRequest", handleAfterRequest); + document.addEventListener("click", handleMembershipClick); }; if (document.readyState === "loading") { diff --git a/tests/unit/dashboard/event/cfs-submissions.test.js b/tests/unit/dashboard/event/cfs-submissions.test.js index 2af16cb8..f5d62a21 100644 --- a/tests/unit/dashboard/event/cfs-submissions.test.js +++ b/tests/unit/dashboard/event/cfs-submissions.test.js @@ -87,9 +87,7 @@ describe("review-submission-modal", () => { await element.updateComplete; expect(element._isOpen).to.equal(true); - expect(element.labels).to.deep.equal([ - { event_cfs_label_id: "7", name: "Backend", color: "blue" }, - ]); + expect(element.labels).to.deep.equal([{ event_cfs_label_id: "7", name: "Backend", color: "blue" }]); expect(element._message).to.equal("Please expand the abstract"); expect(element._ratingComment).to.equal("Looks promising"); expect(element._ratingStars).to.equal(4); @@ -99,6 +97,33 @@ describe("review-submission-modal", () => { expect(element.querySelector("#cfs-submission-form")).to.not.equal(null); }); + it("opens from a review trigger after the dashboard body is swapped", async () => { + const replacementBody = document.createElement("body"); + document.documentElement.replaceChild(replacementBody, document.body); + + const element = await renderModal(); + element.id = "review-submission-modal"; + const submissionPayload = JSON.stringify(buildSubmission()); + document.body.insertAdjacentHTML( + "beforeend", + ` + + `, + ); + + document.querySelector('[data-action="open-cfs-submission-modal"]')?.click(); + await element.updateComplete; + + expect(element._isOpen).to.equal(true); + expect(element._submission.cfs_submission_id).to.equal(12); + }); + it("tracks pending changes while keeping label order snapshots stable", async () => { const element = await renderModal(); diff --git a/tests/unit/dashboard/group/attendees.test.js b/tests/unit/dashboard/group/attendees.test.js index 7d977398..84652ca9 100644 --- a/tests/unit/dashboard/group/attendees.test.js +++ b/tests/unit/dashboard/group/attendees.test.js @@ -83,6 +83,35 @@ describe("dashboard group attendees", () => { expect(modal.classList.contains("hidden")).to.equal(false); }); + it("opens the attendee notification modal after the dashboard body is swapped", () => { + const replacementBody = document.createElement("body"); + replacementBody.innerHTML = ` + + + + +
+ + `; + document.documentElement.replaceChild(replacementBody, document.body); + + initializeAttendeesUi(); + document.getElementById("open-attendee-notification-modal")?.click(); + + expect(document.getElementById("attendee-notification-form")?.getAttribute("hx-post")).to.equal( + "/dashboard/group/notifications/event-99", + ); + expect(document.getElementById("attendee-notification-modal")?.classList.contains("hidden")).to.equal( + false, + ); + }); + it("opens the refund review modal with attendee payment details", () => { const originalHtmx = window.htmx; const processCalls = []; @@ -136,10 +165,7 @@ describe("dashboard group attendees", () => { expect(rejectButton.getAttribute("hx-put")).to.equal( "/dashboard/group/events/event-1/attendees/user-1/refund/reject", ); - expect(processCalls).to.deep.equal([ - "attendee-refund-approve", - "attendee-refund-reject", - ]); + expect(processCalls).to.deep.equal(["attendee-refund-approve", "attendee-refund-reject"]); window.htmx = originalHtmx; }); @@ -344,12 +370,8 @@ describe("dashboard group attendees", () => { document.querySelector("[data-refund-review-trigger]")?.click(); expect(modal.classList.contains("hidden")).to.equal(false); - expect(document.getElementById("attendee-refund-name")?.textContent).to.equal( - "Swapped Attendee", - ); - expect(document.getElementById("attendee-refund-ticket")?.textContent).to.equal( - "Swapped Ticket", - ); + expect(document.getElementById("attendee-refund-name")?.textContent).to.equal("Swapped Attendee"); + expect(document.getElementById("attendee-refund-ticket")?.textContent).to.equal("Swapped Ticket"); expect(document.getElementById("attendee-refund-amount")?.textContent).to.equal("EUR 25.00"); expect(approveButton.getAttribute("hx-put")).to.equal( "/dashboard/group/events/event-2/attendees/user-2/refund/approve", @@ -463,10 +485,7 @@ describe("dashboard group attendees", () => { document.querySelector("[data-refund-review-trigger]")?.click(); - expect(processCalls).to.deep.equal([ - "attendee-refund-approve", - "attendee-refund-reject", - ]); + expect(processCalls).to.deep.equal(["attendee-refund-approve", "attendee-refund-reject"]); window.htmx = originalHtmx; }); diff --git a/tests/unit/dashboard/group/members.test.js b/tests/unit/dashboard/group/members.test.js index ff695348..2c0c88c9 100644 --- a/tests/unit/dashboard/group/members.test.js +++ b/tests/unit/dashboard/group/members.test.js @@ -1,7 +1,8 @@ import { expect } from "@open-wc/testing"; +import "/static/js/dashboard/group/members.js"; import { useDashboardTestEnv } from "/tests/unit/test-utils/env.js"; -import { dispatchHtmxAfterRequest } from "/tests/unit/test-utils/htmx.js"; +import { dispatchHtmxAfterRequest, dispatchHtmxLoad } from "/tests/unit/test-utils/htmx.js"; describe("dashboard group members", () => { const env = useDashboardTestEnv({ @@ -22,7 +23,7 @@ describe("dashboard group members", () => { `; - await import(`/static/js/dashboard/group/members.js?test=${Date.now()}`); + dispatchHtmxLoad(); dispatchHtmxAfterRequest(document.getElementById("notification-form"), { status: 204, @@ -33,4 +34,23 @@ describe("dashboard group members", () => { icon: "success", }); }); + + it("opens the notification modal after the dashboard body is swapped", () => { + const replacementBody = document.createElement("body"); + replacementBody.innerHTML = ` + + + + +
+
+ `; + + document.documentElement.replaceChild(replacementBody, document.body); + + dispatchHtmxLoad(); + document.getElementById("open-notification-modal")?.click(); + + expect(document.getElementById("notification-modal")?.classList.contains("hidden")).to.equal(false); + }); }); diff --git a/tests/unit/dashboard/group/sponsors.test.js b/tests/unit/dashboard/group/sponsors.test.js new file mode 100644 index 00000000..2c0fc78e --- /dev/null +++ b/tests/unit/dashboard/group/sponsors.test.js @@ -0,0 +1,51 @@ +import { expect } from "@open-wc/testing"; + +import "/static/js/dashboard/group/sponsors.js"; +import { waitForMicrotask } from "/tests/unit/test-utils/async.js"; +import { useDashboardTestEnv } from "/tests/unit/test-utils/env.js"; +import { dispatchHtmxLoad } from "/tests/unit/test-utils/htmx.js"; +import { mockFetch } from "/tests/unit/test-utils/network.js"; + +describe("dashboard group sponsors", () => { + useDashboardTestEnv({ + path: "/dashboard/group/sponsors", + withScroll: true, + withSwal: true, + }); + + let fetchMock; + + beforeEach(() => { + fetchMock = mockFetch(); + }); + + afterEach(() => { + fetchMock.restore(); + }); + + it("updates sponsor featured toggles after the dashboard body is swapped", async () => { + const replacementBody = document.createElement("body"); + replacementBody.innerHTML = ` + +
+ `; + document.documentElement.replaceChild(replacementBody, document.body); + + dispatchHtmxLoad(); + const checkbox = document.querySelector(".sponsor-featured-toggle"); + checkbox.checked = true; + checkbox.dispatchEvent(new Event("change", { bubbles: true })); + + await waitForMicrotask(); + + expect(fetchMock.calls).to.have.length(1); + expect(fetchMock.calls[0][0]).to.equal("/dashboard/group/sponsors/sponsor-7/featured"); + expect(checkbox.dataset.currentChecked).to.equal("true"); + }); +}); diff --git a/tests/unit/dashboard/user/session-proposals.test.js b/tests/unit/dashboard/user/session-proposals.test.js index c502ddfd..d439789c 100644 --- a/tests/unit/dashboard/user/session-proposals.test.js +++ b/tests/unit/dashboard/user/session-proposals.test.js @@ -50,6 +50,20 @@ describe("dashboard user session proposals", () => { expect(modalComponent.dataset.sessionProposalReady).to.equal("true"); }); + it("opens the create modal after the dashboard body is swapped", () => { + const replacementBody = document.createElement("body"); + replacementBody.innerHTML = ` + + `; + replacementBody.append(modalComponent); + document.documentElement.replaceChild(replacementBody, document.body); + + initializeSessionProposalsUi(); + document.getElementById("open-session-proposal-modal")?.click(); + + expect(modalComponent.openCreateCalls).to.equal(1); + }); + it("opens edit and view modals with normalized proposal payloads", () => { const proposalPayload = JSON.stringify({ session_proposal_id: 12, @@ -132,7 +146,10 @@ describe("dashboard user session proposals", () => { text: "Are you sure you want to delete this session proposal?", confirmButtonText: "Delete", }); - expect(env.current.htmx.triggerCalls[0]).to.deep.equal(["#delete-session-proposal-proposal-7", "confirmed"]); + expect(env.current.htmx.triggerCalls[0]).to.deep.equal([ + "#delete-session-proposal-proposal-7", + "confirmed", + ]); const rejectButton = document.querySelector('[data-action="reject-co-speaker-invitation"]'); rejectButton.click(); diff --git a/tests/unit/dashboard/user/submissions.test.js b/tests/unit/dashboard/user/submissions.test.js index 108b84b7..2b2fbf15 100644 --- a/tests/unit/dashboard/user/submissions.test.js +++ b/tests/unit/dashboard/user/submissions.test.js @@ -50,6 +50,33 @@ describe("dashboard user submissions", () => { expect(document.body.style.overflow).to.equal(""); }); + it("opens the action required modal after the dashboard body is swapped", () => { + const replacementBody = document.createElement("body"); + replacementBody.innerHTML = ` + +
+ + +
+ + `; + document.documentElement.replaceChild(replacementBody, document.body); + + initializeSubmissionsUi(); + document.querySelector('[data-action="open-action-required-modal"]')?.click(); + + expect(document.getElementById("action-required-modal-message")?.textContent).to.equal( + "Please update the bio before resubmitting.", + ); + expect(document.getElementById("action-required-modal")?.classList.contains("hidden")).to.equal(false); + }); + it("opens a confirmation dialog for withdraw actions and handles request errors", async () => { document.body.innerHTML = ` +
+ + + +
+ `; + document.documentElement.replaceChild(replacementBody, document.body); + + dispatchHtmxAfterSwap(document.getElementById("cfs-modal-root")); + await waitForMicrotask(); + + expect(document.getElementById("cfs-modal")?.classList.contains("hidden")).to.equal(false); + }); }); diff --git a/tests/unit/group/membership.test.js b/tests/unit/group/membership.test.js index 5ca9393a..96bc91d7 100644 --- a/tests/unit/group/membership.test.js +++ b/tests/unit/group/membership.test.js @@ -98,6 +98,17 @@ describe("group membership", () => { expect(env.current.htmx.triggerCalls).to.deep.equal([["#leave-btn", "confirmed"]]); }); + it("handles membership clicks after the page body is swapped", () => { + const replacementBody = document.createElement("body"); + document.documentElement.replaceChild(replacementBody, document.body); + const { signinButton } = renderMembershipDom(); + + signinButton.click(); + + expect(env.current.swal.calls[0].icon).to.equal("info"); + expect(env.current.swal.calls[0].html).to.include("/log-in?next_url=/groups/test-group"); + }); + it("closes the group actions menu when clicking outside it", () => { renderMembershipDom(); document.body.insertAdjacentHTML(