Skip to main content

web-component-testing

Guides real-browser tests for FigUI3 custom elements. Use when adding or debugging tests for fig-* web components, attribute/property contracts, value synchronization, event payloads, disabled behavior, or custom element registration.

Informations de source

Dépôt
rogie/figui3
Dernière activité de la source
1 juin 2026 à 17:43
Langue détectée de SKILL.md
anglais
Étoiles
71
Forks
2

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Affichage de SKILL.md

SKILL.md
Instructions source · Aperçu en lecture seule
name
web-component-testing
description
Guides real-browser tests for FigUI3 custom elements. Use when adding or debugging tests for fig-* web components, attribute/property contracts, value synchronization, event payloads, disabled behavior, or custom element registration.
# Web Component Testing Use Playwright in a real browser for `fig-*` components. Avoid jsdom for component behavior because this repo depends on Custom Elements, layout, focus, dialogs, pointer events, media elements, and CSS. ## Contract Priorities 1. Assert registration with `customElements.get(tag)` or customized built-in upgrade. 2. Mount representative markup and wait for `customElements.whenDefined(tag)`. 3. Fail on page errors and unexpected console errors. 4. Test both attribute writes and property writes for value-like APIs. 5. Capture `input`, `change`, and component-specific events from real interactions. 6. Assert `event.detail` shape for data controls. 7. Verify disabled controls do not emit normal interaction changes where applicable. ## Interaction Pattern - Prefer user-like interactions: `click`, `keyboard`, pointer drag, native input dispatch. - Use host properties for public APIs: `el.value`, `el.checked`, `el.selected`, `el.open`. - Use internal DOM only when no public interaction exists. - Keep each failure tagged with component name and scenario id. ## Fixture Guidance - Keep fixtures minimal and deterministic. - Include required children for compound controls. - Avoid network-dependent assertions; external media URLs are acceptable for smoke fixtures but not for pass/fail timing. - For customized built-ins, create with markup such as `<dialog is="fig-dialog">`.
Voir sur GitHub