role-select UX: tray timing delays, seat/circle state polish, 394 ITs green
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
- _animationPending set before fetch (not in .then()) — blocks WS turn advance during in-flight request
- _placeCardDelay (3s) + _postTrayDelay (3s) give gamer time to see each step; both zeroed by _testReset()
- .role-confirmed class: full-opacity chair after placeCard completes; server-rendered on reload
- Slot circles disappear in join order (slot 1 first) via count-based logic, not role-label matching
- data-active-slot on card-stack; handleTurnChanged writes it for selectRole() to read
- #id_tray_wrap not rendered during gate phase ({% if room.table_status %})
- Tray slide/arc-in slowed to 1s for diagnostics; wobble kept at 0.45s
- Obsolete test_roles_revealed_simultaneously FT removed; T8 tray FT uses ROLE_SELECT room
- Jasmine macrotask flush pattern: await new Promise(r => setTimeout(r, 0)) after fetch .then()
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -445,12 +445,14 @@ class RoleSelectTest(FunctionalTest):
|
||||
)
|
||||
|
||||
# ------------------------------------------------------------------ #
|
||||
# Test 7 — All roles revealed simultaneously after all gamers select #
|
||||
# Test 8a — Hex seats carry role labels during role select #
|
||||
# ------------------------------------------------------------------ #
|
||||
|
||||
def test_roles_revealed_simultaneously_after_all_select(self):
|
||||
def test_seats_around_hex_have_role_labels(self):
|
||||
"""During role select the 6 .table-seat elements carry data-role
|
||||
attributes matching the fixed slot→role mapping (PC at slot 1, etc.)."""
|
||||
founder, _ = User.objects.get_or_create(email="founder@test.io")
|
||||
room = Room.objects.create(name="Reveal Test", owner=founder)
|
||||
room = Room.objects.create(name="Seat Label Test", owner=founder)
|
||||
_fill_room_via_orm(room, [
|
||||
"founder@test.io", "amigo@test.io", "bud@test.io",
|
||||
"pal@test.io", "dude@test.io", "bro@test.io",
|
||||
@@ -462,38 +464,24 @@ class RoleSelectTest(FunctionalTest):
|
||||
self.create_pre_authenticated_session("founder@test.io")
|
||||
self.browser.get(room_url)
|
||||
|
||||
# Assign all roles via ORM (simulating all gamers having chosen)
|
||||
from apps.epic.models import TableSeat
|
||||
roles = ["PC", "BC", "SC", "AC", "NC", "EC"]
|
||||
for i, slot in enumerate(room.gate_slots.order_by("slot_number")):
|
||||
TableSeat.objects.create(
|
||||
room=room,
|
||||
gamer=slot.gamer,
|
||||
slot_number=slot.slot_number,
|
||||
role=roles[i],
|
||||
role_revealed=True,
|
||||
)
|
||||
room.table_status = Room.SIG_SELECT
|
||||
room.save()
|
||||
|
||||
self.browser.refresh()
|
||||
|
||||
# Sig deck is present (page has transitioned to SIG_SELECT)
|
||||
expected = {1: "PC", 2: "NC", 3: "EC", 4: "SC", 5: "AC", 6: "BC"}
|
||||
self.wait_for(
|
||||
lambda: self.browser.find_element(By.ID, "id_sig_deck")
|
||||
lambda: self.browser.find_element(By.CSS_SELECTOR, ".table-seat")
|
||||
)
|
||||
|
||||
for slot_number, role_label in expected.items():
|
||||
seat = self.browser.find_element(
|
||||
By.CSS_SELECTOR, f".table-seat[data-slot='{slot_number}']"
|
||||
)
|
||||
self.assertEqual(seat.get_attribute("data-role"), role_label)
|
||||
|
||||
# ------------------------------------------------------------------ #
|
||||
# Test 8a — Position glows while role card is being placed #
|
||||
# Test 8b — Hex seats show .fa-ban when empty #
|
||||
# ------------------------------------------------------------------ #
|
||||
|
||||
def test_position_glows_when_role_card_confirmed(self):
|
||||
"""Immediately after confirming a role pick, the matching
|
||||
.table-position should receive .active (the glow state) before
|
||||
the tray animation completes."""
|
||||
def test_seats_show_ban_icon_when_empty(self):
|
||||
"""All 6 seats carry .fa-ban before any role has been chosen."""
|
||||
founder, _ = User.objects.get_or_create(email="founder@test.io")
|
||||
room = Room.objects.create(name="Position Glow Test", owner=founder)
|
||||
room = Room.objects.create(name="Seat Ban Test", owner=founder)
|
||||
_fill_room_via_orm(room, [
|
||||
"founder@test.io", "amigo@test.io", "bud@test.io",
|
||||
"pal@test.io", "dude@test.io", "bro@test.io",
|
||||
@@ -509,32 +497,26 @@ class RoleSelectTest(FunctionalTest):
|
||||
self.create_pre_authenticated_session("founder@test.io")
|
||||
self.browser.get(room_url)
|
||||
|
||||
# Open fan, click first card (PC), confirm guard
|
||||
self.wait_for(
|
||||
lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".card-stack[data-state='eligible']"
|
||||
)
|
||||
).click()
|
||||
self.wait_for(lambda: self.browser.find_element(By.ID, "id_role_select"))
|
||||
self.browser.find_element(By.CSS_SELECTOR, "#id_role_select .card").click()
|
||||
self.confirm_guard()
|
||||
|
||||
# PC position gains .active immediately after confirmation
|
||||
self.wait_for(
|
||||
lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".table-position[data-role-label='PC'].active"
|
||||
)
|
||||
lambda: self.browser.find_element(By.CSS_SELECTOR, ".table-seat")
|
||||
)
|
||||
seats = self.browser.find_elements(By.CSS_SELECTOR, ".table-seat")
|
||||
self.assertEqual(len(seats), 6)
|
||||
for seat in seats:
|
||||
self.assertTrue(
|
||||
seat.find_elements(By.CSS_SELECTOR, ".fa-ban"),
|
||||
f"Expected .fa-ban on seat slot {seat.get_attribute('data-slot')}",
|
||||
)
|
||||
|
||||
# ------------------------------------------------------------------ #
|
||||
# Test 8b — Position shows check icon after tray sequence ends #
|
||||
# Test 8c — Hex seat gets .fa-circle-check after role selected #
|
||||
# ------------------------------------------------------------------ #
|
||||
|
||||
def test_position_gets_check_when_tray_sequence_ends(self):
|
||||
"""After the tray arc-in animation completes and the tray closes,
|
||||
the PC .table-position should show .fa-circle-check and no .fa-ban."""
|
||||
def test_seat_gets_check_after_role_selected(self):
|
||||
"""After confirming a role pick the corresponding hex seat should
|
||||
show .fa-circle-check and lose .fa-ban."""
|
||||
founder, _ = User.objects.get_or_create(email="founder@test.io")
|
||||
room = Room.objects.create(name="Position Check Test", owner=founder)
|
||||
room = Room.objects.create(name="Seat Check Test", owner=founder)
|
||||
_fill_room_via_orm(room, [
|
||||
"founder@test.io", "amigo@test.io", "bud@test.io",
|
||||
"pal@test.io", "dude@test.io", "bro@test.io",
|
||||
@@ -550,7 +532,7 @@ class RoleSelectTest(FunctionalTest):
|
||||
self.create_pre_authenticated_session("founder@test.io")
|
||||
self.browser.get(room_url)
|
||||
|
||||
# Open fan, pick PC card, confirm guard
|
||||
# Open fan, pick first card (PC), confirm guard
|
||||
self.wait_for(
|
||||
lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".card-stack[data-state='eligible']"
|
||||
@@ -560,23 +542,23 @@ class RoleSelectTest(FunctionalTest):
|
||||
self.browser.find_element(By.CSS_SELECTOR, "#id_role_select .card").click()
|
||||
self.confirm_guard()
|
||||
|
||||
# Wait for tray animation to complete (tray closes)
|
||||
# Wait for tray animation to complete
|
||||
self.wait_for(
|
||||
lambda: self.assertFalse(
|
||||
self.browser.execute_script("return Tray.isOpen()"),
|
||||
"Tray should close after arc-in sequence"
|
||||
"Tray should close after arc-in sequence",
|
||||
)
|
||||
)
|
||||
|
||||
# PC position now shows check icon, ban icon gone
|
||||
# The PC seat (slot 1) now shows check, no ban
|
||||
self.wait_for(
|
||||
lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".table-position[data-role-label='PC'] .fa-circle-check"
|
||||
By.CSS_SELECTOR, ".table-seat[data-role='PC'] .fa-circle-check"
|
||||
)
|
||||
)
|
||||
self.assertEqual(
|
||||
len(self.browser.find_elements(
|
||||
By.CSS_SELECTOR, ".table-position[data-role-label='PC'] .fa-ban"
|
||||
By.CSS_SELECTOR, ".table-seat[data-role='PC'] .fa-ban"
|
||||
)),
|
||||
0,
|
||||
)
|
||||
@@ -745,11 +727,11 @@ class RoleSelectChannelsTest(ChannelsFunctionalTest):
|
||||
)
|
||||
room_url = f"{self.live_server_url}/gameboard/room/{room.id}/gate/"
|
||||
|
||||
# 1. Watcher loads the room — slot 1 is active on initial render
|
||||
# 1. Watcher (slot 2) loads the room
|
||||
self.create_pre_authenticated_session("watcher@test.io")
|
||||
self.browser.get(room_url)
|
||||
self.wait_for(lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".table-seat.active[data-slot='1']"
|
||||
By.CSS_SELECTOR, ".card-stack[data-state='ineligible']"
|
||||
))
|
||||
|
||||
# 2. Founder picks a role in second browser
|
||||
@@ -764,16 +746,10 @@ class RoleSelectChannelsTest(ChannelsFunctionalTest):
|
||||
self.browser2.find_element(By.CSS_SELECTOR, "#id_role_select .card").click()
|
||||
self.confirm_guard(browser=self.browser2)
|
||||
|
||||
# 3. Watcher's seat arc moves to slot 2 — no page refresh
|
||||
# 3. Watcher's turn arrives via WS — card-stack becomes eligible
|
||||
self.wait_for(lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".table-seat.active[data-slot='2']"
|
||||
By.CSS_SELECTOR, ".card-stack[data-state='eligible']"
|
||||
))
|
||||
self.assertEqual(
|
||||
len(self.browser.find_elements(
|
||||
By.CSS_SELECTOR, ".table-seat.active[data-slot='1']"
|
||||
)),
|
||||
0,
|
||||
)
|
||||
finally:
|
||||
self.browser2.quit()
|
||||
|
||||
@@ -836,16 +812,11 @@ class RoleSelectChannelsTest(ChannelsFunctionalTest):
|
||||
return card !== null && card === card.parentElement.firstElementChild;
|
||||
""")))
|
||||
|
||||
# Turn advances via WS — seat 2 becomes active.
|
||||
self.wait_for(lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".table-seat.active[data-slot='2']"
|
||||
))
|
||||
|
||||
# Tray must be closed: forceClose() fires in handleTurnChanged.
|
||||
self.assertFalse(
|
||||
# Turn advances via WS — tray must close (forceClose in handleTurnChanged).
|
||||
self.wait_for(lambda: self.assertFalse(
|
||||
self.browser.execute_script("return Tray.isOpen()"),
|
||||
"Tray should be closed after turn advances"
|
||||
)
|
||||
))
|
||||
|
||||
def test_landscape_tray_closes_on_turn_advance(self):
|
||||
"""Landscape: role card at leftmost grid square; tray closes when
|
||||
@@ -869,15 +840,10 @@ class RoleSelectChannelsTest(ChannelsFunctionalTest):
|
||||
return card !== null && card === card.parentElement.firstElementChild;
|
||||
""")))
|
||||
|
||||
# Turn advances via WS — seat 2 becomes active.
|
||||
self.wait_for(lambda: self.browser.find_element(
|
||||
By.CSS_SELECTOR, ".table-seat.active[data-slot='2']"
|
||||
))
|
||||
|
||||
# Tray must be closed.
|
||||
self.assertFalse(
|
||||
# Turn advances via WS — tray must close (forceClose in handleTurnChanged).
|
||||
self.wait_for(lambda: self.assertFalse(
|
||||
self.browser.execute_script("return Tray.isOpen()"),
|
||||
"Tray should be closed after turn advances"
|
||||
)
|
||||
))
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user