feat: add frontend tests, E2E tests, UI polish, and media stats

- vitest: 39 unit tests for app.config, app.ui, app.peers, app.media
- Playwright: 4 E2E scenarios (join/leave/empty room/two-tab)
- UI: status dot indicator with pulse animation, mobile responsive layout,
  auto-fit video grid, larger touch targets, aria-labels
- Media stats: real-time bitrate/resolution/loss/RTT/codec per peer

Author: shijiashuai

e2e/package-lock.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "test": "playwright test",
+    "test:headed": "playwright test --headed"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0"
+  }
+}

e2e/package.json

@@ -0,0 +1,12 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: '.',
+  fullyParallel: false,
+  retries: 0,
+  timeout: 30000,
+  use: {
+    baseURL: 'http://localhost:8080',
+    headless: true
+  }
+});

e2e/playwright.config.js

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Room lifecycle', function () {
+  test('join room → shows joined status and own ID', async function ({ page }) {
+    await page.goto('/');
+    await page.fill('#room', 'test-room');
+    await page.click('#join');
+
+    await expect(page.locator('#status')).toHaveText(/已加入|joined/i, { timeout: 5000 });
+    await expect(page.locator('#myId')).not.toBeEmpty();
+    await expect(page.locator('#join')).toHaveText('Leave');
+  });
+
+  test('join with empty room name shows error', async function ({ page }) {
+    await page.goto('/');
+    await page.click('#join');
+
+    await expect(page.locator('#error')).toHaveText(/房间名/i, { timeout: 3000 });
+  });
+
+  test('leave room → returns to idle state', async function ({ page }) {
+    await page.goto('/');
+    await page.fill('#room', 'test-room');
+    await page.click('#join');
+
+    await expect(page.locator('#status')).toHaveText(/已加入|joined/i, { timeout: 5000 });
+
+    await page.click('#join'); // Leave button
+    await expect(page.locator('#status')).toHaveText(/未连接|idle/i, { timeout: 5000 });
+    await expect(page.locator('#join')).toHaveText('Join');
+    await expect(page.locator('#members')).toHaveText(/暂无成员/);
+  });
+
+  test('two tabs see each other in members list', async function ({ browser }) {
+    var context = await browser.newContext();
+    var pageA = await context.newPage();
+    var pageB = await context.newPage();
+
+    await pageA.goto('/');
+    await pageA.fill('#room', 'shared-room');
+    await pageA.click('#join');
+    await expect(pageA.locator('#status')).toHaveText(/已加入|joined/i, { timeout: 5000 });
+    var idA = await pageA.locator('#myId').textContent();
+
+    await pageB.goto('/');
+    await pageB.fill('#room', 'shared-room');
+    await pageB.click('#join');
+    await expect(pageB.locator('#status')).toHaveText(/已加入|joined/i, { timeout: 5000 });
+
+    // Both tabs should see each other
+    await expect(pageA.locator('.members__list')).toContainText(idA, { timeout: 5000 });
+    await expect(pageB.locator('.members__list')).toContainText(idA, { timeout: 5000 });
+
+    await context.close();
+  });
+});

e2e/room.spec.js

@@ -9,6 +9,7 @@ import {
 import { createMediaController } from './app.media.js';
 import { createPeerController } from './app.peers.js';
 import { createSignalingController } from './app.signaling.js';
+import { createStatsController } from './app.stats.js';
 import { createUI, getElements } from './app.ui.js';
 
 const elements = getElements();
@@ -79,6 +80,8 @@ const signaling = createSignalingController({
   ui: ui
 });
 
+const stats = createStatsController(state);
+
 function bindEvents() {
   if (elements.joinBtn) {
     elements.joinBtn.addEventListener('click', function () {
@@ -172,6 +175,7 @@ function bindEvents() {
 }
 
 bindEvents();
+stats.start();
 ui.initCapabilityHints();
 ui.renderMembers([]);
 ui.updateControls();

web/app.js

@@ -0,0 +1,142 @@
+export function createStatsController(state) {
+  var pollInterval = null;
+  var prevStats = new Map();
+
+  function formatBitrate(bytes, deltaMs) {
+    if (deltaMs <= 0 || bytes < 0) return '--';
+    return Math.round(bytes * 8 / deltaMs) + ' kbps';
+  }
+
+  function extractOutboundVideo(report) {
+    for (var entry of report.values()) {
+      if (entry.type === 'outbound-rtp' && entry.kind === 'video') {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  function extractCandidatePair(report) {
+    for (var entry of report.values()) {
+      if (entry.type === 'candidate-pair' && entry.state === 'succeeded') {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  function extractInboundRtp(report, kind) {
+    for (var entry of report.values()) {
+      if (entry.type === 'inbound-rtp' && entry.kind === kind) {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  function extractTrack(report, kind) {
+    for (var entry of report.values()) {
+      if (entry.type === 'track' && entry.kind === kind) {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  function computeStats(pc) {
+    return pc.getStats().then(function (report) {
+      var video = extractOutboundVideo(report);
+      var audioIn = extractInboundRtp(report, 'audio');
+      var videoIn = extractTrack(report, 'video');
+      var pair = extractCandidatePair(report);
+      var now = Date.now();
+      var prev = prevStats.get(pc) || {};
+
+      var result = {
+        videoBitrate: '--',
+        audioLoss: '--',
+        rtt: '--',
+        resolution: '--',
+        codec: '--'
+      };
+
+      if (video) {
+        var delta = now - (prev.timestamp || now);
+        var bytesDelta = (video.bytesSent || 0) - (prev.bytesSent || 0);
+        if (delta > 0 && bytesDelta > 0) {
+          result.videoBitrate = formatBitrate(bytesDelta, delta);
+        }
+        if (video.frameWidth && video.frameHeight) {
+          result.resolution = video.frameWidth + 'x' + video.frameHeight;
+        }
+        if (video.codecId) {
+          for (var entry of report.values()) {
+            if (entry.id === video.codecId && entry.mimeType) {
+              result.codec = entry.mimeType.replace('video/', '');
+              break;
+            }
+          }
+        }
+      }
+
+      if (audioIn) {
+        var total = audioIn.packetsReceived || 0;
+        var lost = audioIn.packetsLost || 0;
+        if (total > 0) {
+          result.audioLoss = (lost / total * 100).toFixed(1) + '%';
+        }
+      }
+
+      if (pair && typeof pair.currentRoundTripTime === 'number') {
+        result.rtt = Math.round(pair.currentRoundTripTime * 1000) + ' ms';
+      }
+
+      prevStats.set(pc, { timestamp: now, bytesSent: video ? video.bytesSent : 0 });
+      return result;
+    });
+  }
+
+  function renderStats(peerId, stats) {
+    var peer = state.peers.get(peerId);
+    if (!peer || !peer.statsEl) {
+      return;
+    }
+    peer.statsEl.innerHTML =
+      '<span>' + stats.videoBitrate + '</span>' +
+      '<span>' + stats.resolution + '</span>' +
+      '<span>Loss ' + stats.audioLoss + '</span>' +
+      '<span>RTT ' + stats.rtt + '</span>' +
+      '<span>' + stats.codec + '</span>';
+  }
+
+  function poll() {
+    state.peers.forEach(function (peer, peerId) {
+      if (!peer.pc || peer.pc.connectionState !== 'connected') {
+        return;
+      }
+      computeStats(peer.pc).then(function (stats) {
+        renderStats(peerId, stats);
+      }).catch(function () {});
+    });
+  }
+
+  function start() {
+    if (pollInterval) {
+      return;
+    }
+    pollInterval = setInterval(poll, 2000);
+  }
+
+  function stop() {
+    if (pollInterval) {
+      clearInterval(pollInterval);
+      pollInterval = null;
+    }
+    prevStats.clear();
+  }
+
+  return {
+    start: start,
+    stop: stop
+  };
+}

web/app.stats.js

@@ -42,13 +42,27 @@ export function createUI(options) {
     return state.roomState;
   }
 
+  function statusDotClass() {
+    if (state.peers.size > 0) {
+      return 'status__dot--calling';
+    }
+    if (state.roomState === 'joined') {
+      return 'status__dot--joined';
+    }
+    if (state.roomState === 'connecting' || state.roomState === 'reconnecting') {
+      return 'status__dot--connecting';
+    }
+    return '';
+  }
+
   function updateControls() {
     const joined = state.roomState === 'joined' || state.roomState === 'reconnecting';
     const activeCall = state.peers.size > 0;
     const localReady = !!state.localStream;
 
     if (elements.statusEl) {
-      elements.statusEl.textContent = roomStateText[roomStatus()] || roomStateText.idle;
+      var dotClass = statusDotClass();
+      elements.statusEl.innerHTML = '<span class="status__dot ' + dotClass + '"></span>' + (roomStateText[roomStatus()] || roomStateText.idle);
     }
     if (elements.joinBtn) {
       elements.joinBtn.textContent = state.roomState === 'idle' ? 'Join' : 'Leave';
@@ -160,13 +174,18 @@ export function createUI(options) {
     video.autoplay = true;
     video.playsInline = true;
 
+    var statsDiv = document.createElement('div');
+    statsDiv.className = 'video-tile__stats';
+
     tile.appendChild(label);
     tile.appendChild(video);
+    tile.appendChild(statsDiv);
     elements.videosEl.appendChild(tile);
 
     peer.tileEl = tile;
     peer.labelEl = label;
     peer.videoEl = video;
+    peer.statsEl = statsDiv;
     return video;
   }
 
@@ -194,6 +213,7 @@ export function createUI(options) {
     peer.videoEl = null;
     peer.tileEl = null;
     peer.labelEl = null;
+    peer.statsEl = null;
   }
 
   function initCapabilityHints() {