feat: cross-renderer component coverage matrix#653
feat: cross-renderer component coverage matrix#653zeroasterisk wants to merge 4 commits intogoogle:mainfrom
Conversation
Adds a zero-dependency Node.js script that introspects the v0.10 spec, Lit renderer, and Angular renderer to verify all component types are implemented across renderers. - Reads standard_catalog.json for canonical component list - Scans Lit root.ts case handlers and Angular DEFAULT_CATALOG entries - Outputs visual matrix with parity status - Exits 1 if any spec component is missing (CI-friendly) - Accounts for v0.8→v0.10 MultipleChoice→ChoicePicker rename Current result: all 18 components covered in both renderers.
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request introduces a new Node.js script to verify component coverage across Lit and Angular renderers against the v0.10 specification. This is a valuable addition for maintaining consistency and quality. The script correctly identifies component parity and handles the MultipleChoice to ChoicePicker rename. The accompanying README.md is clear and provides good usage and CI integration examples. I've identified a few areas for improvement regarding the Angular component extraction logic and the handling of the readdirSync import.
| const angularComponents = [...angularDefault.matchAll(/^\s+(\w+):/gm)] | ||
| .map(m => m[1]) | ||
| .filter(name => !['type', 'bindings', 'https', 'http', 'import', 'return', 'const', 'export'].includes(name) && /^[A-Z]/.test(name)) |
There was a problem hiding this comment.
The current regex for extracting Angular components is quite broad and includes common JavaScript keywords. While the filter step attempts to remove some, it's brittle. A more robust approach would be to refine the regex to specifically target property keys within the DEFAULT_CATALOG object, perhaps by looking for key: patterns or by parsing the TypeScript file more intelligently if possible (though that might introduce external dependencies). The current approach might miss valid component names if they happen to be in the exclusion list, or include non-component properties if they are not in the exclusion list. This could lead to incorrect coverage reporting.
const angularComponents = [...angularDefault.matchAll(/(\w+):\s*\{\s*type:/gm)]
.map(m => m[1])
.sort();| * compares against v0.10 spec, and outputs a coverage matrix. | ||
| */ | ||
|
|
||
| import { readFileSync, readdirSync } from 'fs'; |
There was a problem hiding this comment.
The readdirSync import is not used in the script. It's good practice to remove unused imports to keep the code clean and avoid potential confusion.
| import { readFileSync, readdirSync } from 'fs'; | |
| import { readFileSync } from 'fs'; |
| if (inSpec && (!inLit || !inAngular) && comp !== 'ChoicePicker') { | ||
| failures.push(comp); |
There was a problem hiding this comment.
The failures array is populated but never used after the loop. This variable can be removed to simplify the code and avoid unnecessary state.
// let failures = [];
|
Live Storybook (Lit renderer, all 18 components): https://a2ui-conformance-storybook.pages.dev/ This Storybook uses |
Update: Conformance Storybook + Generated MatrixLive Storybook: https://a2ui-conformance-storybook.pages.dev/ 81 stories covering all 18 component types:
Architecture
Versions Tested
SidebarAll 18 components organized in three sections:
|
…slation
- Fixed theme to include all nested keys (Text.all, CheckBox.container, etc.)
preventing 'Cannot convert undefined or null to object' in Styles.merge
- Added auto-translation in simpleComponent: v0.10 flat format → v0.8 nested
(e.g. {component: 'Button', child: 'txt'} → {component: {Button: {child: 'txt'}}})
- Added property renames: variant → usageHint for Text component
- String text/label/hint values auto-wrapped in {literalString: ...}
- Same translation in version-adapter.ts for generated stories
- Components now render: Button, Text, Card confirmed with content
- Theme: added all nested keys (Tabs.controls.all/selected, Modal.backdrop/element) - StringValue wrapping: name, url, src, title, placeholder, description - Component-specific: variant→usageHint (Text only), tabs→tabItems, value→selections (MultipleChoice), ChoicePicker→MultipleChoice - Auto-detect v0.10 messages (createSurface/updateComponents) in renderA2UI - Translate flat component format to nested in both simpleComponent and renderA2UI - Only Modal (2, hidden by design) and 1 generated Tabs story still fail
Rendering Fixed: 78/81 Stories Pass (96%)Automated Playwright audit confirms 78 of 81 stories render correctly with visible A2UI components. What was wrong:
3 remaining failures:
|
1 participant
Cross-Renderer Component Coverage Matrix
Adds a zero-dependency Node.js script (
testing/coverage-matrix.mjs) that verifies all A2UI component types are implemented across renderers.What it does
standard_catalog.jsonfor the canonical component list (18 types)root.tscase handlers) and Angular renderer (DEFAULT_CATALOGentries)Demo
Current result
Usage
Files
testing/coverage-matrix.mjs— the script (zero deps, Node.js builtins only)testing/README.md— documentation and CI integration example