test(docs): cross-framework smoke tests for the live examples

[mathuo]

Description

Two recent docs regressions shipped because nothing exercised the generated live examples end to end:

1. fix(docs): repoint live-example SystemJS mappings at the shipped bundles + resolution guard #1468 — a SystemJS boilerplate pointed at a build output the packages no longer ship, so every example would have 404'd its dockview import in production.
2. fix(dockview-vue): forward fallthrough attributes onto the host element #1470 — a dockview-vue change made the component render two root nodes, so the theme/layout class stopped reaching the dock and it painted blank.

Neither is caught by unit tests. Crucially, neither is caught by a naive "did the root mount" check either: in case 2 the root sits in the DOM with a non-zero bounding box but is clipped to zero height by a collapsed parent (I measured .dv-dockview at 884×100 unclipped while its clipped visible height was 0).

What it does

A Playwright suite (packages/docs/tests-smoke/) loads every generated static/templates/**/index.html across react, typescript, vue and angular and, per example, asserts:

• the component root (.dv-dockview / .dv-split-view-container / .dv-grid-view / .dv-pane-container) mounts;
• it paints with non-zero size after ancestor clipping — the element rect intersected with every clipping ancestor. This is the check that catches the blank/collapsed render; I verified it fails on the pre-fix vue bundle (clipped size 884x0) and passes after;
• there are no module-resolution errors — a >= 400 on a package/app module, or is not a function / Cannot find module / is not defined / failed to fetch dynamically imported in the console. This catches a stale boilerplate mapping.

Design notes

• Self-contained servers. The run starts the ESM package server (:1111) and a static server over static/ itself (via Playwright webServer), mirroring npm start. test:smoke regenerates the templates against the local bundles first (build-templates:local), so the boilerplate resolution guard from fix(docs): repoint live-example SystemJS mappings at the shipped bundles + resolution guard #1468 also runs.
• CDN mirror. The external framework libraries (SystemJS, TypeScript, React, Vue, Angular) are fetched through Node with an on-disk cache, so each asset downloads once per run rather than once per page, and the suite works behind an HTTPS proxy where the browser cannot reach the CDN directly. Pin the cache with DOCKVIEW_SMOKE_CDN_CACHE.
• Honest skips. Three pre-existing example-source issues (a namespace React import that breaks the UMD interop ×2; an Angular NG0202 decorator-metadata loss) are skipped with a documented reason rather than silently excluded, and demo-dockview is out of scope. See KNOWN_ISSUES in smoke.spec.ts.

Result

cd packages/docs && npm run test:smoke → 149 passed, 3 skipped (~4 min). Added as a smoke CI job that reuses the existing build-output artifact, runs build:bundle, installs Chromium, and runs the suite.

Type of change

• Build / CI / tooling
• Documentation

Affected packages

• docs

How to test

yarn nx run-many -t build,build:bundle \
    -p dockview-core dockview dockview-react dockview-vue dockview-angular dockview-enterprise
cd packages/docs && npm run test:smoke

Checklist

• test:smoke passes (149 passed, 3 skipped) and is verified to fail on the pre-fix vue bundle
• yarn lint:fix / yarn format — n/a, files live under packages/docs, excluded from lint/format and not checked by CI

Related / follow-ups

• fix(docs): Vue examples now follow the site light/dark theme #1475 fixes the Vue examples that rendered dark in light mode. Once both this and fix(docs): Vue examples now follow the site light/dark theme #1475 land, a matching theme assertion (dock nearest theme must equal the requested mode) can be added to this suite as a small follow-up — it needs the Vue fix present to stay green.
• dockview/full-width-tab and dockview/iframe React examples use import * as React, which breaks createElement under the SystemJS UMD interop.
• The splitview/gridview/paneview basic examples pin dockview-theme-abyss regardless of site mode.
• The Angular NG0202 decorator-metadata loss affects several angular examples.

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud