sig-select sprint: SigReservation model + sig_reserve view (OK/NVM hold); full sig-select.js rewrite with stage preview, WS hover cursors, reservation lock (must NVM before OK-ing another card — enforced server-side 409 + JS guard); sizeSigModal() + sizeSigCard() in room.js (JS-based card sizing avoids libsass cqw/cqh limitation); stat block hidden until OK pressed; mobile touch: dismiss stage on outside-grid tap when unfocused; 17 IT + Jasmine specs
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
215
src/static_src/tests/SigSelectSpec.js
Normal file
215
src/static_src/tests/SigSelectSpec.js
Normal file
@@ -0,0 +1,215 @@
|
||||
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, '"')}">
|
||||
<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(() => 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(() => 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", () => {
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user