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.

معلومات المصدر

المستودع
rogie/figui3
آخر نشاط في المصدر
١ يونيو ٢٠٢٦ في ١٧:٤٣
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٦٦
التفرعات
١

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
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">`.
عرض على GitHub