python-tdd/src/static/tests/SigSelectSpec.js

describe("SigSelect", () => {
    let testDiv, stageCard, card;

    function makeFixture({ reservations = '{}' } = {}) {
        testDiv = document.createElement("div");
        testDiv.innerHTML = `
            <div class="sig-overlay"
                 data-polarity="levity"
                 data-user-role="PC"
                 data-reserve-url="/epic/room/test/sig-reserve"
                 data-reservations="${reservations.replace(/"/g, '&quot;')}">
                <div class="sig-modal">
                    <div class="sig-stage">
                        <div class="sig-stage-card" style="display:none">
                            <span class="fan-corner-rank"></span>
                            <i class="stage-suit-icon"></i>
                            <p class="fan-card-name-group"></p>
                            <h3 class="fan-card-name"></h3>
                            <p class="fan-card-arcana"></p>
                            <p class="fan-card-correspondence"></p>
                        </div>
                    </div>
                    <div class="sig-deck-grid">
                        <div class="sig-card"
                             data-card-id="42"
                             data-corner-rank="K"
                             data-suit-icon=""
                             data-name-group="Pentacles"
                             data-name-title="King of Pentacles"
                             data-arcana="Minor Arcana"
                             data-correspondence="">
                            <div class="fan-card-corner fan-card-corner--tl">
                                <span class="fan-corner-rank">K</span>
                            </div>
                            <div class="sig-card-actions">
                                <button class="sig-ok-btn btn btn-confirm">OK</button>
                                <button class="sig-nvm-btn btn btn-cancel">NVM</button>
                            </div>
                            <div class="sig-card-cursors">
                                <span class="sig-cursor sig-cursor--left"></span>
                                <span class="sig-cursor sig-cursor--mid"></span>
                                <span class="sig-cursor sig-cursor--right"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(testDiv);
        stageCard = testDiv.querySelector(".sig-stage-card");
        card = testDiv.querySelector(".sig-card");
        window.fetch = jasmine.createSpy("fetch").and.returnValue(
            Promise.resolve({ ok: true })
        );
        window._roomSocket = { readyState: -1, send: jasmine.createSpy("send") };
        SigSelect._testInit();
    }

    afterEach(() => {
        if (testDiv) testDiv.remove();
        delete window._roomSocket;
    });

    // ── Stage reveal on mouseenter ─────────────────────────────────────── //

    describe("stage preview", () => {
        beforeEach(() => makeFixture());

        it("shows the stage card on mouseenter", () => {
            card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
            expect(stageCard.style.display).toBe("");
        });

        it("hides the stage card on mouseleave when not frozen", () => {
            card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
            card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
            expect(stageCard.style.display).toBe("none");
        });

        it("does NOT hide the stage card on mouseleave when frozen (reserved)", () => {
            card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
            SigSelect._setFrozen(true);
            card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
            expect(stageCard.style.display).toBe("");
        });
    });

    // ── Card focus (click → OK overlay) ───────────────────────────────── //

    describe("card click", () => {
        beforeEach(() => makeFixture());

        it("adds .sig-focused to the clicked card", () => {
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(card.classList.contains("sig-focused")).toBe(true);
        });

        it("shows the stage card after click", () => {
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(stageCard.style.display).toBe("");
        });

        it("does not focus a card reserved by another role", () => {
            card.dataset.reservedBy = "NC";
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(card.classList.contains("sig-focused")).toBe(false);
        });
    });

    // ── Touch: OK btn tap allows synthetic click through ──────────────── //

    describe("touch on OK button", () => {
        beforeEach(() => {
            if (typeof TouchEvent === 'undefined') { pending('TouchEvent unavailable in desktop Firefox'); return; }
            makeFixture();
        });

        it("touchstart on OK btn does not call preventDefault (allows synthetic click)", () => {
            // First tap the card body to show OK
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(card.classList.contains("sig-focused")).toBe(true);

            // Now tap the OK button — touchstart should NOT preventDefault
            var okBtn = card.querySelector(".sig-ok-btn");
            var touchEvent = new TouchEvent("touchstart", {
                bubbles: true,
                cancelable: true,
                touches: [new Touch({ identifier: 1, target: okBtn })],
            });
            okBtn.dispatchEvent(touchEvent);
            expect(touchEvent.defaultPrevented).toBe(false);
        });

        it("touchstart on card body (not OK btn) calls preventDefault", () => {
            var touchEvent = new TouchEvent("touchstart", {
                bubbles: true,
                cancelable: true,
                touches: [new Touch({ identifier: 1, target: card })],
            });
            card.dispatchEvent(touchEvent);
            expect(touchEvent.defaultPrevented).toBe(true);
        });
    });

    // ── Touch outside grid dismisses stage (mobile) ───────────────────── //

    describe("touch outside grid", () => {
        beforeEach(() => {
            if (typeof TouchEvent === 'undefined') { pending('TouchEvent unavailable in desktop Firefox'); return; }
            makeFixture();
        });

        it("dismisses stage preview when touching outside the grid (unfocused state)", () => {
            // Focus a card first
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(stageCard.style.display).toBe("");

            // Touch on the sig-stage (outside the grid)
            var stage = testDiv.querySelector(".sig-stage");
            stage.dispatchEvent(new TouchEvent("touchstart", {
                bubbles: true,
                cancelable: true,
                touches: [new Touch({ identifier: 2, target: stage })],
            }));
            expect(stageCard.style.display).toBe("none");
            expect(card.classList.contains("sig-focused")).toBe(false);
        });

        it("does NOT dismiss stage preview when frozen (card reserved)", () => {
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            SigSelect._setFrozen(true);
            // _focusedCardEl is set but frozen — use internal state trick via _setFrozen
            // We also need a focused card; simulate it by setting frozen after focus
            var stage = testDiv.querySelector(".sig-stage");
            stage.dispatchEvent(new TouchEvent("touchstart", {
                bubbles: true,
                cancelable: true,
                touches: [new Touch({ identifier: 3, target: stage })],
            }));
            expect(stageCard.style.display).toBe("");
        });
    });

    // ── Lock after reservation ─────────────────────────────────────────── //

    describe("lock after reservation", () => {
        beforeEach(() => makeFixture());

        it("does not focus another card while one is reserved", () => {
            // Simulate a reservation on some other card (not this one)
            SigSelect._setReservedCardId("99");
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(card.classList.contains("sig-focused")).toBe(false);
        });

        it("does not call fetch when OK is clicked while a different card is reserved", () => {
            SigSelect._setReservedCardId("99");
            var okBtn = card.querySelector(".sig-ok-btn");
            okBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(window.fetch).not.toHaveBeenCalled();
        });

        it("does not call preventDefault on touchstart while a card is reserved", () => {
            if (typeof TouchEvent === 'undefined') { pending('TouchEvent unavailable in desktop Firefox'); return; }
            SigSelect._setReservedCardId("99");
            var touchEvent = new TouchEvent("touchstart", {
                bubbles: true,
                cancelable: true,
                touches: [new Touch({ identifier: 1, target: card })],
            });
            card.dispatchEvent(touchEvent);
            expect(touchEvent.defaultPrevented).toBe(false);
        });

        it("allows focus again after reservation is cleared", () => {
            SigSelect._setReservedCardId("99");
            SigSelect._setReservedCardId(null);
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(card.classList.contains("sig-focused")).toBe(true);
        });
    });

    // ── WS release clears NVM in a second browser ─────────────────────── //
    // Simulates the same gamer having two tabs open: tab B must clear its
    // .sig-reserved--own when tab A presses NVM (WS release event arrives).
    // The release payload must carry the card_id so the JS can find the element.

    describe("WS release event (second-browser NVM sync)", () => {
        beforeEach(() => makeFixture({ reservations: '{"42":"PC"}' }));

        it("removes .sig-reserved and .sig-reserved--own on WS release", () => {
            // Confirm reservation was applied on init
            expect(card.classList.contains("sig-reserved--own")).toBe(true);
            expect(card.classList.contains("sig-reserved")).toBe(true);

            // Tab A presses NVM — tab B receives this WS event with the card_id
            window.dispatchEvent(new CustomEvent("room:sig_reserved", {
                detail: { card_id: 42, role: "PC", reserved: false },
            }));

            expect(card.classList.contains("sig-reserved--own")).toBe(false);
            expect(card.classList.contains("sig-reserved")).toBe(false);
        });

        it("unfreezes the stage so other cards can be focused after WS release", () => {
            window.dispatchEvent(new CustomEvent("room:sig_reserved", {
                detail: { card_id: 42, role: "PC", reserved: false },
            }));

            // Should now be able to click the card body again
            card.dispatchEvent(new MouseEvent("click", { bubbles: true }));
            expect(card.classList.contains("sig-focused")).toBe(true);
        });
    });
});