feat(e2e): implement LiveKit mocking layer by bryanchriswhite · Pull Request #5 · Episk-pos/censer-web

bryanchriswhite · 2026-02-19T09:40:08Z

Implements a client-side mocking layer for LiveKit to enable deterministic E2E testing of voice/video features. Includes a dedicated /e2e route and initial tests for auto-spotlight.

github-actions · 2026-02-19T09:40:19Z

staging - ⚠️ No PR associated with branch
- feat(e2e): implement LiveKit mocking layer #5 👈

greptile-apps · 2026-02-19T09:43:18Z

Greptile Summary

Implements a comprehensive client-side mocking layer for LiveKit to enable deterministic E2E testing of voice/video features. The implementation creates mock versions of LiveKit's core classes (MockRoom, MockParticipant, MockTrack) that replicate the real SDK's API surface. A global __STOAT_TEST_CONTROLLER__ provides test control over participant management and active speaker simulation.

The previous review identified several critical issues that have been addressed in subsequent commits:

Listener leak in MockRoom.on/off has been fixed with proper wrapper tracking
Missing activeSpeakers array and removeAllListeners() method have been added
/e2e route is now properly registered in the router
E2E page now renders VoiceCallCardActiveRoom component for actual UI testing
Remote participants are created with default camera tracks for proper tile rendering

Minor improvements include fixing touch event handler casing in Draggable.tsx for Solid.js compatibility and code formatting in VoiceCallCardActiveRoom.tsx.

Confidence Score: 5/5

This PR is safe to merge with minimal risk
All critical issues from previous review rounds have been addressed. The mocking layer is well-designed with proper event handling, the E2E infrastructure is correctly wired up, and tests are properly structured. The changes are isolated to testing infrastructure and don't affect production code paths.
No files require special attention

Important Files Changed

Filename	Overview
packages/client/components/rtc/mock.ts	New file implementing LiveKit mocking layer with `MockRoom`, `MockParticipant`, and `MockTrack` classes. Previous issues with listener leaks and missing properties have been fixed.
packages/client/components/rtc/state.tsx	Conditionally instantiates `MockRoom` when `VITE_MOCK_RTC=true` and sets up `__STOAT_TEST_CONTROLLER__.room` reference for E2E tests. Implementation looks solid.
packages/client/src/interface/E2E.tsx	E2E test page that renders `VoiceCallCardActiveRoom` with mock channel stub. Connects to mock RTC on mount.
packages/client/e2e/voice-mock.spec.ts	Playwright tests for auto-spotlight and screenshare priority. Tests use `__STOAT_TEST_CONTROLLER__` to manipulate mock room state.

Sequence Diagram

sequenceDiagram
    participant Test as Playwright Test
    participant Page as E2E Page
    participant Voice as Voice State
    participant MockRoom as MockRoom
    participant Controller as __STOAT_TEST_CONTROLLER__
    participant UI as VoiceCallCardActiveRoom

    Test->>Page: navigate to /e2e
    Page->>Voice: voice.connect(mockChannel)
    Voice->>MockRoom: new MockRoom()
    Voice->>Controller: set room reference
    MockRoom->>MockRoom: setState(Connected)
    MockRoom->>UI: emit Connected event
    UI->>UI: render local participant

    Test->>Controller: addRemoteParticipant("user-1")
    Controller->>MockRoom: addRemoteParticipant()
    MockRoom->>MockRoom: create MockParticipant with camera track
    MockRoom->>UI: emit ParticipantConnected event
    UI->>UI: render Remote User 1 tile

    Test->>Controller: simulateActiveSpeakers(["user-1"])
    Controller->>MockRoom: simulateActiveSpeakers()
    MockRoom->>MockRoom: update activeSpeakers array
    MockRoom->>UI: emit ActiveSpeakersChanged event
    UI->>UI: set data-spotlighted="true"

    Test->>UI: verify spotlighted attribute

_{Last reviewed commit: 83ae098}

greptile-apps

_{5 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

bryanchriswhite · 2026-02-19T10:09:54Z

@greptile addressed: 1) Fixed audio track creation in MockRoom. 2) Registered /e2e route. 3) Corrected data-spotlighted attribute in tests. 4) Verified mock integration in state.tsx.

greptile-apps

_{8 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

bryanchriswhite · 2026-02-19T10:15:38Z

@greptile added removeAllListeners() to MockRoom.

greptile-apps

_{8 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

…ed attribute

bryanchriswhite · 2026-02-19T12:14:56Z

@greptile Addressed all feedback: 1) Added default camera track to remote participants in MockRoom. 2) Fixed all linting errors (unused vars, explicit any). 3) Verified reactive chain. PR is now clean and targeting staging.

greptile-apps

_{6 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

Take staging's cleanup of SpotlightControlsState and createMemo parameter fix over the PR branch's stale versions.

bryanchriswhite · 2026-02-19T23:24:52Z

@greptile Addressed all feedback: 1) Added missing E2EPage component (fixes build). 2) Added activeSpeakers property to MockRoom and updated simulateActiveSpeakers() to set it. 3) Resolved merge conflict with staging. Please re-review.

greptile-apps

_{7 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

… page MockRoom.on() wrapped callbacks but off() tried to remove the original, causing a listener leak. Store wrapper references in a map so off() removes the correct listener. E2E page now renders VoiceCallCardActiveRoom directly so .voice-tile elements with data-spotlighted attributes are present for Playwright.

bryanchriswhite · 2026-02-19T23:34:59Z

@greptile Fixed both issues: 1) MockRoom on/off listener leak — now stores wrapper references in a map so off() removes the correct listener. 2) E2E page now renders VoiceCallCardActiveRoom directly so .voice-tile elements are present for Playwright tests. Please re-review.

- Fix indentation in VoiceCallCardActiveRoom createMemo (from merge) - Add runtime __STOAT_MOCK_RTC__ flag check alongside VITE_MOCK_RTC so E2E tests work without build-time env var - E2E page sets the runtime flag before connecting

The mock E2E tests require a build with VITE_MOCK_RTC=true so the MockRoom code path is activated and tree-shaking doesn't eliminate it. Skip the entire test suite in normal CI; a dedicated mock CI job can enable them by setting the env var.

* gh/staging: feat(e2e): implement LiveKit mocking layer (#5) fix(voice): fix spotlight and hide-members features fix(voice): remove incorrect prevTracks parameter from autoSpotlightId memo fix(voice): make track dependencies explicit in spotlight memo fix(voice): remove unused spotlightControls to fix linting feat(voice): implement auto-spotlight and manual pinning chore: generate i18n catalog feat(voice): add hide members toggle in call actions

* gh/main: feat(e2e): implement LiveKit mocking layer (#5) fix(voice): fix spotlight and hide-members features fix(voice): remove incorrect prevTracks parameter from autoSpotlightId memo fix(voice): make track dependencies explicit in spotlight memo fix(voice): remove unused spotlightControls to fix linting feat(voice): implement auto-spotlight and manual pinning chore: generate i18n catalog feat(voice): add hide members toggle in call actions # Conflicts: # packages/client/components/rtc/state.tsx

greptile-apps Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread packages/client/components/rtc/mock.ts Outdated

Comment thread packages/client/src/interface/E2E.tsx

Comment thread packages/client/e2e/voice-mock.spec.ts Outdated

Comment thread packages/client/src/interface/E2E.tsx

bryanchriswhite force-pushed the e2e-rtc-mocking branch from 9b039e1 to 670eae5 Compare February 19, 2026 10:09

bryanchriswhite force-pushed the e2e-rtc-mocking branch from 670eae5 to 8385a09 Compare February 19, 2026 10:11

greptile-apps Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread packages/client/components/rtc/mock.ts

greptile-apps Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread packages/client/components/rtc/mock.ts

bryanchriswhite force-pushed the e2e-rtc-mocking branch 7 times, most recently from b775334 to 4a6e71f Compare February 19, 2026 11:17

bryanchriswhite added 3 commits February 19, 2026 13:03

chore(e2e): update mocking layer and register route

f401fdf

feat(e2e): address feedback, fix audio tracks, and add data-spotlight…

6b036c0

…ed attribute

fix(rtc): add missing removeAllListeners to MockRoom

6e19010

bryanchriswhite force-pushed the e2e-rtc-mocking branch from 4a6e71f to 6e19010 Compare February 19, 2026 12:04

fix(e2e): address feedback and fix linting errors

5c2714e

greptile-apps Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread packages/client/components/rtc/mock.ts

Comment thread packages/client/src/index.tsx

Comment thread packages/client/components/rtc/mock.ts

bryanchriswhite added 2 commits February 20, 2026 00:15

fix(e2e): add missing E2EPage and MockRoom.activeSpeakers

4ffe37b

fix(e2e): resolve merge conflict with staging

42f0e35

Take staging's cleanup of SpotlightControlsState and createMemo parameter fix over the PR branch's stale versions.

greptile-apps Bot reviewed Feb 19, 2026

View reviewed changes

Comment thread packages/client/components/rtc/mock.ts

Comment thread packages/client/src/interface/E2E.tsx

bryanchriswhite self-assigned this Feb 19, 2026

bryanchriswhite added 4 commits February 20, 2026 00:39

fix(e2e): suppress no-explicit-any lint error in E2E stub

a86e0e5

fix(e2e): fix lint errors in mock.ts and E2E.tsx

3033bc2

bryanchriswhite merged commit 9151df4 into staging Feb 20, 2026
7 checks passed

bryanchriswhite deleted the e2e-rtc-mocking branch February 20, 2026 00:18

Conversation

bryanchriswhite commented Feb 19, 2026

Uh oh!

github-actions Bot commented Feb 19, 2026

Uh oh!

greptile-apps Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryanchriswhite commented Feb 19, 2026

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bryanchriswhite commented Feb 19, 2026

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bryanchriswhite commented Feb 19, 2026

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryanchriswhite commented Feb 19, 2026

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bryanchriswhite commented Feb 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

greptile-apps Bot commented Feb 19, 2026 •

edited

Loading