club.spec.js

import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

import { test, expect } from '@playwright/test';

const __dirname = dirname(fileURLToPath(import.meta.url));
const VENUE_GLB_FIXTURE = resolve(__dirname, '../_fixtures/club-venue.glb');
const VENUE_HDR_FIXTURE = resolve(__dirname, '../_fixtures/club-hdri.hdr');

// Route the authored club venue + HDRI to deterministic fixture files
// (built by scripts/build-club-venue-fixture.mjs). The production assets
// are 10+ MB Blender-authored / Polyhaven-sourced binaries that don't
// live in git — the fixtures are node-only GLB / 4×4 HDR stand-ins with
// every named empty the runtime contract requires.
function stubVenueAssets(page) {
	return Promise.all([
		page.route('**/club/venue/club-venue.glb', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'model/gltf-binary',
				path: VENUE_GLB_FIXTURE,
			}),
		),
		page.route('**/club/venue/club-hdri.hdr', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'image/vnd.radiance',
				path: VENUE_HDR_FIXTURE,
			}),
		),
	]);
}

// /club end-to-end smoke. Drives real Chromium against `npm run dev`, stubs
// the on-chain settle endpoint (signing a real mainnet tx in CI is unsafe)
// plus the auxiliary side-panel routes, and asserts visible behavior — not
// pixel diffs.
test.describe('/club', () => {
	test('venue loads + tip settles + dancer performs', async ({ page }) => {
		// QUARANTINE(A08): env-dependent — the .club-tip-row leaderboard requires
		// Redis (feed:events bus) and live dance-tip API data that aren't available
		// in dev/CI without a running multiplayer + Redis stack.
		test.skip(true, 'QUARANTINE(A08): needs Redis/multiplayer stack for dance tips');
		// First /club hit through a cold Vite dev server transforms the whole
		// three.js module graph (~30–60s on a CI box). The actual test work
		// after that is sub-second.
		test.setTimeout(180_000);

		const consoleErrors = [];
		page.on('console', (m) => {
			if (m.type() === 'error') consoleErrors.push(m.text());
		});

		await stubVenueAssets(page);

		// Replace the public x402 widget with a no-modal stub. Doing this via
		// route() instead of addInitScript() guarantees our stub wins the
		// race against the real `window.X402 = Object.freeze(...)` in
		// /public/x402.js, since the real script is never delivered.
		await page.route('**/x402.js', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'application/javascript',
				body: `window.X402 = {
					pay: async ({ endpoint }) => {
						const r = await fetch(endpoint);
						return { result: await r.json() };
					},
					init: () => {},
					version: 'e2e-stub',
				};`,
			}),
		);

		// Stub the settle endpoint. Returns the same JSON shape the real
		// /api/x402/dance-tip endpoint produces on success.
		await page.route('**/api/x402/dance-tip*', (route) => {
			const u = new URL(route.request().url());
			const dancer = u.searchParams.get('dancer') ?? '1';
			const dance = u.searchParams.get('dance') ?? 'rumba';
			return route.fulfill({
				status: 200,
				contentType: 'application/json',
				body: JSON.stringify({
					ok: true,
					ticketId: 'e2e-ticket-1',
					dancer,
					dance,
					clip: dance,
					label: dance.charAt(0).toUpperCase() + dance.slice(1),
					loop: true,
					durationSec: 6,
					startsAt: new Date().toISOString(),
					endsAt: new Date(Date.now() + 6000).toISOString(),
					payer: 'e2e-test-payer',
					network: 'solana',
					amountAtomics: '1000',
					asset: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
				}),
			});
		});

		// Stub the side endpoints so a missing dev DB / SSE channel doesn't
		// pollute the console-error count this test asserts on.
		await page.route('**/api/club/leaderboard*', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'application/json',
				body: JSON.stringify({ window: 'day', rows: [] }),
			}),
		);
		await page.route('**/api/club/tips?**', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'application/json',
				body: JSON.stringify({ tips: [] }),
			}),
		);
		await page.route('**/api/club/tips/stream', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'text/event-stream',
				body: 'event: hello\ndata: ok\n\n',
			}),
		);

		await page.goto('/club');

		// Venue must finish loading (status pill flips to 'ok'). The pill
		// auto-hides on a timer but the data-kind attribute persists.
		await expect(page.locator('#club-status')).toHaveAttribute('data-kind', 'ok', { timeout: 30_000 });

		await page.locator('.club-tip-btn[data-dancer="1"]').click();

		// Tip-feed row appears for dancer 1 (rendered as "tipped dancer 1 → …").
		await expect(page.locator('.club-tip-row').first()).toContainText('dancer 1');

		expect(consoleErrors, consoleErrors.join('\n')).toHaveLength(0);
	});

	test('keyboard VIP cam shortcuts work', async ({ page }) => {
		await stubVenueAssets(page);
		await page.goto('/club');

		// data-cam-mode is written by the ClubCamera onModeChange callback in
		// src/club.js. The state machine only emits on transitions, so we
		// assert after a key press (free → vip) and after Escape (vip → free).
		await page.keyboard.press('2');
		await expect(page.locator('#club-stage')).toHaveAttribute('data-cam-mode', 'vip');

		await page.keyboard.press('Escape');
		await expect(page.locator('#club-stage')).toHaveAttribute('data-cam-mode', 'free');
	});

	test('leaderboard renders + tab switching', async ({ page }) => {
		await stubVenueAssets(page);
		await page.route('**/api/club/leaderboard*', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'application/json',
				body: JSON.stringify({
					window: 'day',
					rows: [
						{ dancer: '1', display_name: 'Nyx',    total_atomics: '4000', tip_count: 4, unpaid_atomics: '4000' },
						{ dancer: '2', display_name: 'Ari',    total_atomics: '3000', tip_count: 3, unpaid_atomics: '0'    },
						{ dancer: '3', display_name: 'Sable',  total_atomics: '1000', tip_count: 1, unpaid_atomics: '0'    },
						{ dancer: '4', display_name: 'Vesper', total_atomics: '0',    tip_count: 0, unpaid_atomics: '0'    },
					],
				}),
			}),
		);
		// ?demo is the platform's own express entry (src/shared/club-express.js):
		// it skips the cover charge AND the walk-in, dropping straight onto the pole
		// stage. Without it the visitor is still outside, and #club-door-canvas (the
		// full-screen z-index-9400 walk-in canvas) plus the #club-door cover dialog
		// both sit over the side panel and swallow the tab click below. The board
		// itself renders either way, which is why the row assertions passed while
		// the click timed out.
		await page.goto('/club?demo');

		const rows = page.locator('#club-lb-rows .club-lb-row');
		// The board names each dancer the way her pole card does. club_dancer_wallets
		// is a payout registry, and its display_name ("Nyx") is not what the visitor
		// sees on stage ("Dylan"): showing it made the top of the leaderboard read as
		// a dancer who is not in the room.
		await expect(rows.first()).toContainText('Dylan');
		await expect(page.locator('#club-lb-rows')).not.toContainText('Nyx');
		// Dancer 4 is in the registry but has no pole here and has never been tipped,
		// so she is not someone this visitor can rank or reach.
		await expect(page.locator('#club-lb-rows')).not.toContainText('Vesper');
		await expect(rows).toHaveCount(3);

		// Tab switching: the picked window becomes the selected tab and the board
		// re-renders under it. The board lives in a <details> that src/club.js opens
		// at desktop widths; open it here rather than racing that boot step, so this
		// assertion is about the tabs and not about when the disclosure flips.
		await page.locator('#club-lb-details').evaluate((d) => { d.open = true; });
		await page.locator('.club-lb-tab[data-window="all"]').click();
		await expect(page.locator('.club-lb-tab[data-window="all"]')).toHaveAttribute('aria-selected', 'true');
		await expect(page.locator('.club-lb-tab[data-window="day"]')).toHaveAttribute('aria-selected', 'false');
		await expect(rows.first()).toContainText('Dylan');
	});

	test('leaderboard with no tips in the window shows that window empty state', async ({ page }) => {
		await stubVenueAssets(page);
		// The registry always returns a row per registered dancer, so a quiet window
		// arrives as a full set of zeroes. That is an empty board, not a ranking of
		// dancers tied at nothing, and the copy has to name the window it describes:
		// "no tips yet" is only true of the all-time board.
		await page.route('**/api/club/leaderboard*', (route) =>
			route.fulfill({
				status: 200,
				contentType: 'application/json',
				body: JSON.stringify({
					window: 'day',
					rows: [
						{ dancer: '1', display_name: 'Nyx',   total_atomics: '0', tip_count: 0, unpaid_atomics: '0' },
						{ dancer: '2', display_name: 'Ari',   total_atomics: '0', tip_count: 0, unpaid_atomics: '0' },
						{ dancer: '3', display_name: 'Sable', total_atomics: '0', tip_count: 0, unpaid_atomics: '0' },
					],
				}),
			}),
		);
		await page.goto('/club');

		await expect(page.locator('#club-lb-rows .club-lb-empty')).toContainText('No tips in the last 24 hours');
		await expect(page.locator('#club-lb-rows .club-lb-row')).toHaveCount(0);
	});
});