another attempt to unclog pipeline; this time a slight sleep timeout used to accomodate headless browser resize flush

src/static_src/tests/RoleSelectSpec.js

@@ -242,6 +242,90 @@ describe("RoleSelect", () => {
         });
     });
 
+    // ------------------------------------------------------------------ //
+    // Tray card placement after successful role selection                  //
+    // ------------------------------------------------------------------ //
+    // The tray-role-card is created in the fetch .then() callback, so     //
+    // these tests are async — await Promise.resolve() flushes the         //
+    // microtask queue before asserting.                                    //
+    // ------------------------------------------------------------------ //
+
+    describe("tray card after successful role selection", () => {
+        let grid, guardConfirm;
+
+        beforeEach(() => {
+            // Minimal tray grid matching room.html structure
+            grid = document.createElement("div");
+            grid.id = "id_tray_grid";
+            for (let i = 0; i < 8; i++) {
+                const cell = document.createElement("div");
+                cell.className = "tray-cell";
+                grid.appendChild(cell);
+            }
+            testDiv.appendChild(grid);
+
+            spyOn(Tray, "open");
+
+            // Capturing guard spy — holds onConfirm so we can fire it per-test
+            window.showGuard = jasmine.createSpy("showGuard").and.callFake(
+                (anchor, message, onConfirm) => { guardConfirm = onConfirm; }
+            );
+
+            RoleSelect.openFan();
+            document.querySelector("#id_role_select .card").click();
+        });
+
+        it("prepends a .tray-role-card to #id_tray_grid on success", async () => {
+            guardConfirm();
+            await Promise.resolve();
+            expect(grid.querySelector(".tray-role-card")).not.toBeNull();
+        });
+
+        it("tray-role-card is the first child of #id_tray_grid", async () => {
+            guardConfirm();
+            await Promise.resolve();
+            expect(grid.firstElementChild.classList.contains("tray-role-card")).toBe(true);
+        });
+
+        it("tray-role-card carries the selected role as data-role", async () => {
+            guardConfirm();
+            await Promise.resolve();
+            const trayCard = grid.querySelector(".tray-role-card");
+            expect(trayCard.dataset.role).toBeTruthy();
+        });
+
+        it("calls Tray.open() on success", async () => {
+            guardConfirm();
+            await Promise.resolve();
+            expect(Tray.open).toHaveBeenCalled();
+        });
+
+        it("does not prepend a tray-role-card on server rejection", async () => {
+            window.fetch = jasmine.createSpy("fetch").and.returnValue(
+                Promise.resolve({ ok: false })
+            );
+            guardConfirm();
+            await Promise.resolve();
+            expect(grid.querySelector(".tray-role-card")).toBeNull();
+        });
+
+        it("does not call Tray.open() on server rejection", async () => {
+            window.fetch = jasmine.createSpy("fetch").and.returnValue(
+                Promise.resolve({ ok: false })
+            );
+            guardConfirm();
+            await Promise.resolve();
+            expect(Tray.open).not.toHaveBeenCalled();
+        });
+
+        it("grid grows by exactly 1 on success", async () => {
+            const before = grid.children.length;
+            guardConfirm();
+            await Promise.resolve();
+            expect(grid.children.length).toBe(before + 1);
+        });
+    });
+
     // ------------------------------------------------------------------ //
     // click-guard integration                                              //
     // ------------------------------------------------------------------ //