Rebuild Fleet around attention and compact live matches

2026-10-07 18:52:26 -04:00
parent e35b84475d
commit 9999e80226
7 changed files with 614 additions and 512 deletions
@@ -0,0 +1,80 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'svelte/server';
+import { get, writable } from 'svelte/store';
+import type { ComponentProps } from 'svelte';
+import ServerCard from '../../src/lib/ui/components/ServerCard.svelte';
+import { telemetryByServer, uiNow } from '../../src/lib/ui/stores/servers.js';
+import { gameEvent } from '../helpers/telemetry.js';
+
+vi.mock('$app/stores', () => ({ page: writable({ url: new URL('http://localhost/?filter=occupied') }) }));
+const name = 't5_zombie_theater_1';
+const at = (age: number) => new Date(get(uiNow) - age).toISOString();
+const telemetry = (round = 31, age = 1000) => ({ ...gameEvent('heartbeat', round, 4, name), receivedAt: at(age) });
+function html(props: Partial<ComponentProps<typeof ServerCard>> = {}) {
+    return render(ServerCard, { props: { name, health: 'online', players: 4, capacity: 4,
+        telemetry: telemetry(), gameStartedAt: at(6_000_000), ...props } }).body.replaceAll(/<!--.*?-->/g, '');
+}
+afterEach(() => telemetryByServer.set(new Map()));
+
+describe('compact server cards', () => {
+    it('leads with identity and three labelled metrics, without healthy freshness or duplicate activity clocks', () => {
+        const body = html({ gametype: 'zom', activeSince: at(6_120_000), lastSeenAt: at(1000), longestMatch: true });
+        expect(body).toContain('Kino Der Toten');
+        expect(body).toContain('Lobby 1');
+        expect(body).toContain('BO1');
+        expect(body).toMatch(/<dt[^>]*>Players<\/dt><dd[^>]*>4<span[^>]*>\/4<\/span><\/dd>/);
+        expect(body).toMatch(/<dt[^>]*>Round<\/dt><dd[^>]*>31<\/dd>/);
+        expect(body).toMatch(/<dt[^>]*>Match time<\/dt><dd[^>]*>1h 40m<\/dd>/);
+        expect(body).toContain('Longest match');
+        expect(body).not.toMatch(/Last seen|Last reported|Zombies Classic|>Active</);
+    });
+
+    it('keeps capacity unknown when unavailable and never invents a four-player limit', () => {
+        const body = html({ players: 2, capacity: null });
+        expect(body).toContain('title="Capacity unavailable"');
+        expect(body).toMatch(/>2<span[^>]*>\/\?<\/span>/);
+        expect(body).not.toContain('/4');
+    });
+
+    it('uses the newest fresh report while respecting explicit round data and match boundaries', () => {
+        telemetryByServer.set(new Map([[name, telemetry(35, 1000)]]));
+        expect(html({ telemetry: telemetry(31, 10_000) })).toMatch(/<dt[^>]*>Round<\/dt><dd[^>]*>35<\/dd>/);
+        expect(html({ round: 40 })).toMatch(/<dt[^>]*>Round<\/dt><dd[^>]*>40<\/dd>/);
+        expect(html({ round: null })).toMatch(/<dt[^>]*>Round<\/dt><dd[^>]*>—<\/dd>/);
+        expect(html({ gameStartedAt: at(0) })).toMatch(/<dt[^>]*>Round<\/dt><dd[^>]*>—<\/dd>/);
+        telemetryByServer.set(new Map());
+        expect(html({ telemetry: telemetry(31, 100_000) })).toMatch(/<dt[^>]*>Round<\/dt><dd[^>]*>—<\/dd>/);
+        expect(html({ gameEndedAt: at(1000), round: 40 })).toContain('Match ended');
+        expect(html({ gameEndedAt: at(1000), round: 40 })).not.toMatch(/<dd[^>]*>40<\/dd>/);
+    });
+
+    it('gives the roster real column headers and formatted scores without repeating ping units', () => {
+        const body = html({ roster: [
+            { num: 0, guid: 'one', name: 'Vexx', score: 99170, ping: 36 },
+            { num: 1, guid: 'two', name: 'Connecting player', score: null, ping: 999 }
+        ] });
+        expect(body).toContain('aria-label="Current players"');
+        expect(body).toMatch(/<th[^>]*scope="col"[^>]*>Player<\/th>/);
+        expect(body).toContain('99,170');
+        expect(body).toContain('Connecting');
+        expect(body).not.toContain('36ms');
+    });
+
+    it('places Pin outside the only link and retains its pressed state and server name', () => {
+        const body = html({ pinned: true, onPin: () => {} });
+        expect(body).toMatch(/<article\b/);
+        expect(body.match(/<a\b/g)).toHaveLength(1);
+        expect(body.match(/<a\b[\s\S]*?<\/a>/)?.[0]).not.toContain('<button');
+        expect(body).toContain('aria-pressed="true"');
+        expect(body).toContain('aria-label="Unpin Kino Der Toten · Lobby 1"');
+    });
+
+    it('collapses empty healthy lobbies to readiness and empty duration', () => {
+        const body = html({ players: 0, inactiveSince: at(9 * 60_000), roster: [], compactEmpty: true });
+        expect(body).toContain('Ready');
+        expect(body).toContain('Empty for 9m 00s');
+        expect(body).not.toContain('<dl');
+        expect(body).not.toContain('<table');
+        expect(body).not.toContain('Player roster unavailable');
+    });
+});