chore: Run automated tests on example pages by spuppo-mux · Pull Request #1285 · muxinc/media-chrome

spuppo-mux · 2026-04-07T19:08:34Z

Overview

Closes #1111 - This is the epic branch for this work.

Adds an automated Playwright-based test suite that runs against the example pages (both vanilla and React) on every PR, so regressions in example wiring, component registration, and feature integration are caught in CI.

What's included

The work was split across several sub-PRs merged into this epic branch:

Test infrastructure & smoke tests
- Playwright config for the examples, plus initial smoke tests verifying custom elements are defined on each page.
Interaction tests
- Tests covering user interactions (playback controls, menus, etc.).
Feature-specific & playback specs
- Specs for themes, i18n, layout, disabled states, and playback.
- Enabled Playwright parallel mode for speed.
- Excluded JWPlayer from playback tests and switched its example to a working asset.
- Added a CDN health check for theme loading.
- Made the feature suite runnable conditionally. -> Did this because these would add a big batch of tests and were sometimes too flaky. However kept them as it seemed good to test locally or if this was ever extended. To run this use FEATURE_TESTS=true npm run test:examples
- Changed continue to skip for better visibility into what didn't run.
CI integration
- Moved test:examples into its own CI job (separate from unit tests) and named jobs clearly.
- Reorganized npm scripts: npm test is split into test:unit / test:unit:all / test:examples, with a new serve:test helper for the Playwright web server.
- Release workflows updated to the renamed unit-test command.
- Added retries and per-test timeout to absorb expected flakiness.
React examples
- Added web server configs for the Vite and Next.js examples.
- Changed the Vite React example's media-chrome dependency from link: to file: and deduped React deps to fix a broken example.
- Registered the expected hydration error for the Next.js app.

Other changes

Bumped @types/node (and undici-types)
Added test/tsconfig.json for the new TypeScript tests
Updated JWPlayer example asset URLs
Added menu import to fix <mux-video> example

Note

Medium Risk
Adds a new Playwright-based CI job that boots multiple dev servers and runs end-to-end checks across many example pages, which can introduce flakiness and lengthen pipelines. Also updates example dependencies and Node typings, which could affect build/test environments.

Overview
Adds automated Playwright coverage for the repo’s example pages and wires it into CI.

CI/CD now runs test:unit:all for unit tests, and CI gains a new test-examples job that builds the package, installs example app deps (Vite + Next), starts three web servers, and runs npm run test:examples before canary release.

Introduces a new Playwright test suite under test/examples/** (smoke, playback, and feature-focused interaction checks), plus shared helpers (HTML discovery + synthetic media streams) and a Playwright config/port setup. Updates a couple of example assets/imports (JWPlayer URL, mux-video menu import) and adjusts the Vite React example to use real React deps + Vite dedupe, along with bumping @types/node.

^{Reviewed by Cursor Bugbot for commit 19cf102. Bugbot is set up for automated code reviews on this repo. Configure here.}

vercel · 2026-04-07T19:08:40Z

@spuppo-mux is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

snyk-io · 2026-04-07T19:08:49Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

## Description This PR addresses specific edge cases in `media-controller` that were not covered in previous updates. The goal is to handle a few remaining cleanup tasks and state ownership issues identified after muxinc#1261. ### Changes: * **Shortcut Dialog Cleanup:** Fixed an issue where the shortcuts dialog was not being removed from the DOM/state on teardown. * **MediaStore stateOwners:** Added logic to ensure `stateOwners` are cleared from the `mediaStore` when the controller is disconnected. * **media-time-range Animation:** Added an explicit stop call to the animation in `disconnectedCallback()` instead of using `toggleRangeAnimation()`. > **Note:** This was added to force the stop on disconnect, but I'd appreciate a second look to see if this is actually redundant or necessary. ## Related Issues Relates to [Issue muxinc#1235](muxinc/elements#1235) Follow-up to [PR muxinc#1261](muxinc#1261) ## Testing Instructions 1. **General Regression:** Can be verified using the same environment/steps as PR muxinc#1261. 2. **Full Flow:** To test the integration from `mux-player-react`, see the example in [PR muxinc#1285](muxinc/elements#1285). 3. **Specific Scenarios:** * Trigger the shortcuts dialog and verify it's destroyed when the player/controller is unmounted. * Check that `stateOwners` are no longer present in `mediaStore` after disposal. * Confirm `media-time-range` animations cease correctly upon component disconnection.  --- > [!NOTE] > **Medium Risk** > Moderate risk because it changes `media-controller` connect/disconnect behavior and MediaStore state-owner updates, which can affect fullscreen handling and event propagation across the component tree. > > **Overview** > Reduces teardown-related memory leaks by **explicitly clearing DOM state ownership** when `media-controller` disconnects (dispatching `fullscreenelementchangerequest`/`documentelementchangerequest` with `undefined`) and by ensuring the current `fullscreenElement` is set on connect. > > Improves cleanup paths by removing the keyboard shortcuts dialog from the DOM on controller teardown, stopping `media-time-range`’s `RangeAnimation` directly on disconnect, and resetting internal pending/DOM references (`#isResizePending` in `media-container`, focus/invoker refs in `media-chrome-menu`). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 0f93c20. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

codecov · 2026-04-09T20:22:17Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.56%. Comparing base (3ea80df) to head (19cf102).
⚠️ Report is 302 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1285      +/-   ##
==========================================
- Coverage   78.55%   73.56%   -4.99%     
==========================================
  Files          59       56       -3     
  Lines       11080    13889    +2809     
  Branches        0      783     +783     
==========================================
+ Hits         8704    10218    +1514     
- Misses       2376     3638    +1262     
- Partials        0       33      +33

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

* Initial smoke testing, custom element are defined. * mux-video example was missing menu index import * Added test retries and timeout to account for possible flakiness

* Extracted logic into helper functions * Added interaction tests

* Feature specific and playback specs * Added parallel mode to run tests faster (as per playwright recommendation) * Excluded JWPlayer from playback tests * Changed continue into skip to add visibility * Changed JWPlayer src to a working asset. * Added option to run this suite conditionally

* Moved test:examples into it's own job * Added names to differentiate test jobs

* Added React Web Server configurations * Changed media-chrome dependency from link to file on vite react example and deduped react dependencies to fix broken example * Added expected hydration error for nextjs app * Moved port definition into constants module

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 9108a6c. Configure here.}

spuppo-mux added 2 commits April 6, 2026 17:04

Added playwright config for examples tests

3182fa9

Added CI step

cc10365

spuppo-mux requested review from a team and heff as code owners April 7, 2026 19:08

cursor Bot reviewed Apr 7, 2026

View reviewed changes

Comment thread package.json Outdated

Comment thread .github/workflows/ci.yml

spuppo-mux added 2 commits April 7, 2026 19:58

Fix gh workflow calls

51c7510

Merge branch 'main' into chore/test-example-pages

9220f01

R-Delfino95 assigned R-Delfino95 and unassigned R-Delfino95 Apr 17, 2026

spuppo-mux added 2 commits April 21, 2026 15:48

chore: Test custom elements are defined on examples (#1)

bef4f77

* Initial smoke testing, custom element are defined. * mux-video example was missing menu index import * Added test retries and timeout to account for possible flakiness

chore: Test Example Pages - Interaction Tests (#6)

955723d

* Extracted logic into helper functions * Added interaction tests

cursor Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread test/examples/vanilla/helpers.ts

cursor Bot reviewed Apr 21, 2026

View reviewed changes

Comment thread test/examples/vanilla/features/themes.spec.ts

Switch nonDefinedThemes counter to a cdn health check

63d0903

cursor Bot reviewed Apr 22, 2026

View reviewed changes

Comment thread test/examples/vanilla/features/themes.spec.ts Outdated

spuppo-mux added 3 commits April 22, 2026 18:21

Remove accidental only

4df4114

chore: Test Example Pages - Improve CI (#4)

347f984

* Moved test:examples into it's own job * Added names to differentiate test jobs

cursor Bot reviewed Apr 23, 2026

View reviewed changes

Comment thread test/examples/react/smoke.spec.ts

Fixed KNOWN_ERRORS path

19cf102

spuppo-mux merged commit c5e59a4 into muxinc:main Apr 24, 2026
7 of 11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Run automated tests on example pages#1285

chore: Run automated tests on example pages#1285
spuppo-mux merged 12 commits into
muxinc:mainfrom
spuppo-mux:chore/test-example-pages

spuppo-mux commented Apr 7, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 7, 2026

Uh oh!

snyk-io Bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

codecov Bot commented Apr 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

spuppo-mux commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

What's included

Other changes

Uh oh!

vercel Bot commented Apr 7, 2026

Uh oh!

snyk-io Bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

Uh oh!

Uh oh!

codecov Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

spuppo-mux commented Apr 7, 2026 •

edited

Loading

snyk-io Bot commented Apr 7, 2026 •

edited

Loading

codecov Bot commented Apr 9, 2026 •

edited

Loading