P11: packaged CLI x fresh Angular app e2e gate - #32
Merged
Merged
Conversation
… surface Converges the metadata/evidence layer built up in earlier Phase 4 work into a single component reference surface across all 52 component pages: header promotes install command/package path into the primary manifest panel with Installation/API/Recent changes jump anchors (Radio's split group/item API gets its own #api-group anchor); previewer keeps Preview/Source simultaneously visible under 01/02 labels instead of hiding either behind tabs; API reference gains a row-count header, numbering, and type code pills; recent changes becomes a 3-entry compact release strip. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Docs component-page accessibility smoke test (axe-core WCAG 2 A/AA scan + explicit keyboard assertions on installation tabs and copy controls) surfaced two real contrast/keyboard gaps: - Button `destructive` variant (error-50 on white) failed 4.5:1 text contrast in both themes. packages/ui and registry synced to error-70 bg/error-80 hover/error-60 focus ring. - The mobile code-block scroll region had no tab stop, so keyboard users couldn't reach it to scroll horizontally. Added tabindex="0" + inset focus-visible ring to the shared ComponentPageCodeBlock; installation's inactive package-manager tab and code line numbers moved off the general --docs-muted token onto dedicated --docs-code-muted/-fg so they read correctly against the fixed dark code surface. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds visual-regression.spec.ts covering home/Button-component/CLI-overview in light and dark at a fixed 1440x900 desktop viewport, backed by 6 approved baseline PNGs. Runs as its own `visual-chromium` Playwright project (testMatch/testIgnore keep it from double-running inside the existing desktop/mobile structural projects); locks theme, waits for route landmark/network-idle/document.fonts.ready, and disables animation/ caret/smooth-scroll before each screenshot. 3% diff-ratio + 0.3 color threshold tolerates cross-OS font anti-aliasing without masking real layout/token/component regressions. Baseline paths omit the host OS so local and CI runs share one approved PNG set. ci.yml gets a new `Docs E2E + visual regression` job (clean checkout, installs Chromium, runs the full `pnpm test:e2e:docs` suite, uploads the Playwright report/diff images on failure). DOCS_VISUAL_SYSTEM.md documents the automation boundary and the `--update-snapshots` update flow; ROADMAP.md moves accessibility + visual regression from outstanding quality infrastructure to Recently shipped. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
DEVLOG.md gets the two P11 entries (a11y smoke test, visual regression) matching the preceding two commits; TODOLIST.md drops the two P11 bullets they resolve (only "CLI real e2e" is left under P11) and removes the completed P29 Phase 4 section entirely (its content already lives in DEVLOG.md across the P29/Phase 4 entries and this session's PR #30). Also fleshes out P19 (blocks): splits blocks into "shell" (persistent app chrome like layout/dashboard-shell, wraps ng-content/router-outlet) vs "page" (full route content), maps 9 candidate pages to the component combinations they'd need, and picks a 3-block starting set (dashboard-shell, auth/login, data/table-page) chosen to each validate a different piece of the CLI mechanism rather than for coverage. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds packages/cli/e2e/fresh-angular.mjs (wired as `pnpm test:e2e:cli` at the root, `test:e2e` inside packages/cli, and a 15-minute step in the `Test (@sanring/cli)` CI job): builds the CLI, `pnpm pack`s it, scaffolds a brand-new Angular app in an OS temp dir with a fresh Angular CLI, installs the packed tarball, and actually runs `sanring init --yes` and `sanring add button --yes` against it. Asserts config/theme/Button/shared source, installed-version tracking, and the CDK dependency all land, then imports the installed ButtonDirective into the app's root component and runs a real production `ng build` — so an unreferenced-by-Angular-compiler false green isn't possible. Cleans up on success; keeps the temp project on failure (or always, via SANRING_E2E_KEEP_TEMP=1). Uses npm rather than pnpm for the scaffolded app: pnpm 10 rejects the Angular build toolchain's esbuild/lmdb/@parcel/watcher install scripts in a project with no onlyBuiltDependencies allowlist, which is a pnpm policy issue unrelated to the CLI itself — and matches the CLI's own `detectPackageManager -> npm install` path when installing peer deps into an npm project. First real run caught what the mocked test suite couldn't: a clean project failed to resolve `@angular/cdk/a11y` at production-build time, because every component using `shared/utils.ts`'s `uniqueId()` transitively needs CDK, but `registry.json`'s `utils` entry only declared `clsx`/`tailwind-merge` as peerDependencies — invisible in the repo itself since it already has CDK installed. Added the missing `@angular/cdk` peerDependency to `utils`, found the same gap in `collection-controller` during the sweep, and added it there too. Extended `build.test.ts`'s golden-fixture test to diff shared-entry peerDependencies (previously only compared component entries) so this class of drift fails fast next time instead of surfacing only in a real install three layers downstream. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
DEVLOG.md gets the P11 entry for the fresh-Angular CLI e2e gate (matching the preceding commit); TODOLIST.md's P11 section is now empty of items so it's removed entirely — nothing quality-related is left outstanding there. ROADMAP.md moves the item from outstanding quality infrastructure to Recently shipped. CONTRIBUTING.md documents `pnpm test:e2e:cli`, when it runs in CI, and SANRING_E2E_KEEP_TEMP for local debugging. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Stacked on #31 (branched from it, not yet merged) — this PR's diff will include #31's commits until that one lands. Closes out P11 entirely (nothing left in that section).
test(cli) — real e2e gate:
packages/cli/e2e/fresh-angular.mjs: builds +pnpm packs the CLI, scaffolds a brand-new Angular app in an OS temp dir, installs the tarball, runssanring init --yes+sanring add button --yesfor real, then imports the installedButtonDirectiveinto the app and runs a productionng build— so nothing passes on unreferenced-source false-greenpnpm test:e2e:cli(root) /test:e2e(packages/cli) / a 15-minute step in theTest (@sanring/cli)CI jobonlyBuiltDependenciesallowlist in a fresh project; this also matches the CLI's owndetectPackageManager → npm installpathReal bug the first run caught: a clean project failed to resolve
@angular/cdk/a11yat build time — every component usingshared/utils.ts'suniqueId()transitively needs CDK, butregistry.json'sutilsentry only declaredclsx/tailwind-merge. Fixed (utils+collection-controller, same gap), and extendedbuild.test.ts's golden fixture to diff shared-entry peerDependencies (previously component-only) so this class of drift fails fast going forward.docs: DEVLOG entry, TODOLIST's now-empty P11 section removed, ROADMAP moved to Recently shipped, CONTRIBUTING documents the new command +
SANRING_E2E_KEEP_TEMP.Test plan
pnpm --filter @sanring/cli test: 19 files / 240 tests passing (golden fixture included)node --check packages/cli/e2e/fresh-angular.mjs🤖 Generated with Claude Code