@rogieking/figui3 6.1.1 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: css-component-testing
|
|
3
|
+
description: Guides CSS and layout tests for FigUI3 components. Use when validating component CSS, nested selectors, tokens, interaction states, computed styles, layout boxes, or visual regressions.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# CSS Component Testing
|
|
7
|
+
|
|
8
|
+
Test public CSS behavior in a browser. Prefer computed styles and bounding boxes for stable assertions; use screenshots only for targeted visual regressions.
|
|
9
|
+
|
|
10
|
+
## What To Test
|
|
11
|
+
|
|
12
|
+
- Token-driven styles resolve through CSS custom properties.
|
|
13
|
+
- Public states work: hover, focus, selected, disabled, open, dragging.
|
|
14
|
+
- Layout dimensions and positioning stay within expected bounds.
|
|
15
|
+
- Light and dark `color-scheme` paths do not throw or hide content.
|
|
16
|
+
- Nested selectors compile through the existing build pipeline.
|
|
17
|
+
|
|
18
|
+
## Test Pattern
|
|
19
|
+
|
|
20
|
+
1. Mount the smallest fixture that exposes the CSS behavior.
|
|
21
|
+
2. Wait for custom elements and fonts/layout to settle.
|
|
22
|
+
3. Read `getComputedStyle`, `getBoundingClientRect`, or public attributes/classes.
|
|
23
|
+
4. Assert behavior, not implementation details, unless debugging a specific regression.
|
|
24
|
+
|
|
25
|
+
## Avoid
|
|
26
|
+
|
|
27
|
+
- Broad screenshot snapshots for every component.
|
|
28
|
+
- Assertions tied to browser antialiasing or exact subpixel layout unless necessary.
|
|
29
|
+
- Testing private class names when a public attribute/state can be asserted instead.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: web-component-testing
|
|
3
|
+
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.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Web Component Testing
|
|
7
|
+
|
|
8
|
+
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.
|
|
9
|
+
|
|
10
|
+
## Contract Priorities
|
|
11
|
+
|
|
12
|
+
1. Assert registration with `customElements.get(tag)` or customized built-in upgrade.
|
|
13
|
+
2. Mount representative markup and wait for `customElements.whenDefined(tag)`.
|
|
14
|
+
3. Fail on page errors and unexpected console errors.
|
|
15
|
+
4. Test both attribute writes and property writes for value-like APIs.
|
|
16
|
+
5. Capture `input`, `change`, and component-specific events from real interactions.
|
|
17
|
+
6. Assert `event.detail` shape for data controls.
|
|
18
|
+
7. Verify disabled controls do not emit normal interaction changes where applicable.
|
|
19
|
+
|
|
20
|
+
## Interaction Pattern
|
|
21
|
+
|
|
22
|
+
- Prefer user-like interactions: `click`, `keyboard`, pointer drag, native input dispatch.
|
|
23
|
+
- Use host properties for public APIs: `el.value`, `el.checked`, `el.selected`, `el.open`.
|
|
24
|
+
- Use internal DOM only when no public interaction exists.
|
|
25
|
+
- Keep each failure tagged with component name and scenario id.
|
|
26
|
+
|
|
27
|
+
## Fixture Guidance
|
|
28
|
+
|
|
29
|
+
- Keep fixtures minimal and deterministic.
|
|
30
|
+
- Include required children for compound controls.
|
|
31
|
+
- Avoid network-dependent assertions; external media URLs are acceptable for smoke fixtures but not for pass/fail timing.
|
|
32
|
+
- For customized built-ins, create with markup such as `<dialog is="fig-dialog">`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rogieking/figui3",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
|
|
5
5
|
"author": "Rogie King",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,7 +43,9 @@
|
|
|
43
43
|
"build": "bun build fig.js --minify --outdir dist && bun build fig-editor.js --minify --outdir dist --external ./fig.js && npm run build:css",
|
|
44
44
|
"build:css": "lightningcss --minify --nesting --bundle fig.css -o dist/fig.css && lightningcss --minify --nesting --bundle fig-editor.css -o dist/fig-editor.css && lightningcss --minify --nesting --bundle components.css -o dist/components.css && lightningcss --minify --nesting base.css -o dist/base.css",
|
|
45
45
|
"dev:playground": "node playground/dev.mjs",
|
|
46
|
-
"build:playground": "cd playground && npm run build"
|
|
46
|
+
"build:playground": "cd playground && npm run build",
|
|
47
|
+
"test": "npm run test:components",
|
|
48
|
+
"test:components": "playwright test"
|
|
47
49
|
},
|
|
48
50
|
"repository": {
|
|
49
51
|
"type": "git",
|
|
@@ -82,6 +84,7 @@
|
|
|
82
84
|
"a11y"
|
|
83
85
|
],
|
|
84
86
|
"devDependencies": {
|
|
87
|
+
"@playwright/test": "^1.60.0",
|
|
85
88
|
"@types/bun": "latest",
|
|
86
89
|
"clean-css-cli": "^5.6.3",
|
|
87
90
|
"lightningcss": "^1.32.0",
|