Prompt file imported from leechy/le-kit (
.github/prompts/plan-stencilTestingStrategy.prompt.md). Copyright stays with the author.
Sprint Board: Stencil Component Testing
Scope and Priority
- le-button (added as phase accelerator)
- le-string-input
- le-code-input
- le-select
- le-bar
- le-side-panel
Current Status
Last updated: April 23, 2026.
Sprint status summary:
- Sprint 0 complete.
- Sprint 1 spec complete.
- Sprint 1 keyboard e2e complete and verified for le-button and le-string-input.
- Sprint 1 visual suites verified green after baseline refresh.
- Sprint 2 complete: le-code-input and le-select spec/e2e/visual slices all green locally.
- Sprint 3 skipped: le-bar deferred for full refactor.
- Sprint 4 complete: le-side-panel spec/e2e/visual slices all green locally.
Completed files:
- packages/core/src/utils/test-helpers.ts — shared helpers (mockMutationObserver, mockResizeObserver, shadowQuery, shadowQueryAll, captureEvent, eventDetail)
- packages/core/src/components/le-button/le-button.spec.tsx — 7 passing spec tests
- packages/core/src/components/le-string-input/le-string-input.spec.tsx — 7 passing spec tests
Total: 21 tests passing (incl. utils.spec.ts), 0 failing.
- packages/core/src/components/le-button/le-button.e2e.ts — keyboard hardening coverage complete
- packages/core/src/components/le-string-input/le-string-input.e2e.ts — keyboard hardening coverage complete
- packages/core/src/components/le-button/le-button.screenshot.e2e.ts — visual matrix authored
- packages/core/src/components/le-string-input/le-string-input.screenshot.e2e.ts — visual matrix authored
Last green functional run: April 23, 2026. Sprint 0 + Sprint 1 functional (spec + e2e) complete.
Last green visual run: April 23, 2026. Week 1 screenshot suites pass after baseline update.
Latest visual verification (April 23, 2026):
- Commands:
npx stencil test --e2e --screenshot --updateScreenshot --testPathPattern="le-button.screenshot.e2e.ts|le-string-input.screenshot.e2e.ts"npx stencil test --e2e --screenshot --testPathPattern="le-button.screenshot.e2e.ts|le-string-input.screenshot.e2e.ts"npx stencil test --e2e --screenshot --updateScreenshot --testPathPattern="le-code-input.screenshot.e2e.ts"npx stencil test --e2e --screenshot --updateScreenshot --testPathPattern="le-select.screenshot.e2e.ts"npx stencil test --e2e --screenshot --updateScreenshot --testPathPattern="le-side-panel.screenshot.e2e.ts"
- Result: pass; 41 screenshots compared. Sprint 4 complete.
E2E notes (carry forward to all suites):
- Keyboard tests must target shadow-DOM native elements via
>>>selector, not the host element. toHaveReceivedEventDetailrequires exact objects;undefinedprops are dropped during Puppeteer JSON serialization — omit them from expected detail objects.- In headless Chromium, Enter on a text input fires native
change(different from real desktop browser behavior).
Sprint 0 (Kickoff, 1-2 days) ✅
Goal: establish deterministic test foundation and start component coverage immediately.
- Create shared testing helpers for shadow queries, event capture, and mode setup.
- Add reusable observer mocks (MutationObserver, ResizeObserver) for spec reliability.
- Start le-button spec tests and validate deterministic local run.
- Define timing and viewport policy for e2e and visual tests.
Exit criteria
- At least one component has stable spec coverage with repeated local passes.
Sprint 1 (Week 1) ✅
Goal: lock down foundational interactions and admin-related regressions.
le-button
- Spec: host classes (variant/color/size), icon-only mode, anchor mode, click emission, disabled guard.
- E2E: keyboard activation (Enter/Space via inner shadow button), disabled click block, anchor mode, Tab focus and disabled skip.
- Keyboard matrix (Week 1 target): Enter, Space, Tab focus order, disabled tab-skip.
- Visual suite authored: baseline matrix for variants/colors/sizes, selected, disabled, icon states, full-width.
- Visual suite verified green in local env.
le-string-input
- Spec: leInput vs leChange timing, clearable behavior, slot presence logic.
- Spec: admin-mode integration regression checks.
- E2E: leInput on keystrokes, leChange on Tab-blur and Enter, focus delegation to inner input, disabled/readonly forwarding.
- Keyboard matrix (Week 1 target): keystroke input events, Enter commit, Tab-blur commit, focus delegation.
- Visual suite authored: label/description, value, clearable, disabled/readonly, icon states.
- Visual suite verified green in local env.
Exit criteria
- le-button + le-string-input specs are stable and green.
- e2e keyboard and interaction paths are stable for both components.
- visual baselines execute and compare successfully in local and CI-targeted runs.
Week 1 Hardening Backlog (Keyboard + Visual)
Goal: close the remaining Week 1 quality gates with deterministic keyboard and visual coverage.
- le-button keyboard: add explicit disabled keyboard activation guard (Enter/Space on inner native button).
- le-button keyboard: add anchor keyboard activation assertion (Enter on shadow anchor emits host click).
- le-string-input keyboard: add disabled Tab skip assertion in tab order.
- le-string-input keyboard: add keyboard clear action coverage for clearable mode.
- visual policy: lock viewport presets (
sm=320x100,md=400x120,lg=800x240) and document them in screenshot suites. - visual policy: keep one matrix-style screenshot per component plus targeted single-state snapshots.
- tooling unblock: install/configure Puppeteer Chrome headless shell for local screenshot execution.
- rerun Week 1 screenshot suites and update baselines only when intentional visual changes occur.
Definition of done (Week 1 hardening)
- keyboard matrix for le-button and le-string-input includes negative paths (disabled/readonly).
- screenshot suites run locally and in CI-targeted runs without infra-related failures.
- baseline image updates are reviewed and attributable to intentional UI changes.
Sprint 2 (Week 2)
Goal: advanced text editing and keyboard workflows.
le-code-input
- Spec: paste distribution across boxes.
- Spec: selection behavior and cursor movement.
- Spec: auto-advance/backspace-like cursor navigation and value truncation.
- E2E: realistic typing and paste sequences.
- Visual: focus/error states.
le-select
- Spec: value synchronization and disabled handling.
- Spec: declarative vs prop-driven option source behavior.
- E2E: keyboard matrix (ArrowUp, ArrowDown, Home, End, Enter, Escape).
- E2E: popover dependency behavior.
- Visual: trigger/menu hover/selected/disabled states.
Exit criteria
- keyboard-heavy components pass repeatedly without flake.
Sprint 3 (Week 3)
Goal: observer-driven overflow behavior.
le-bar
- Spec: overflow modes (more, scroll, hamburger, wrap).
- Spec: overflow event payload assertions.
- Spec: mutation-triggered recalculation behavior.
- E2E: deterministic resize transitions and submenu behavior.
- Visual: wrapped vs overflow layouts at breakpoints.
Exit criteria
- resize-driven behavior is deterministic on repeated runs.
Sprint 4 (Week 4)
Goal: persistence and responsive panel behavior.
le-side-panel
- Spec: default props, collapsed visibility, event emission.
- Spec: leSidePanelRequestToggle document event toggles collapsed state.
- E2E: wide mode visible panel, toggle-collapse via event, event emission.
- E2E: persistKey saves collapsed state to localStorage.
- E2E: narrow overlay mode — open, Escape close, backdrop click close.
- Visual: wide-open / wide-collapsed / end-side / narrow-overlay / state matrix.
Exit criteria
- persistence and resizing behavior pass reliably locally and in CI.
Parallel Stabilization Track
- Keep CI non-blocking while suite stabilizes.
- Publish artifacts for failing e2e/visual jobs.
- Track flaky tests weekly by failure category.
- Define promotion criteria to required checks (pass streak + low flake threshold).
Immediate Next Steps
Sprint 3 skipped (le-bar deferred for refactor). Sprint 4 complete.
All planned sprints done. Next actions depend on new component additions or le-bar refactor completion.
