test(menu): browser interaction + visual-regression testing (thin slice)

[adrianschmidt]

What this adds

A first slice of browser-based component testing for lime-elements, proven end-to-end on limel-menu. It covers two complementary things our example-tests didn't do before:

• Interaction tests — drive the real docs example (#/debug/limel-example-menu-basic) in a real browser: click the trigger, confirm the menu opens, pick an item, and verify the selection is actually emitted out to the consumer (and that the menu closes). Also covers opening via keyboard (Enter). These run anywhere, including locally on macOS.
• Visual-regression test — a pixel screenshot of the open menu, compared against a committed baseline, so an unintended visual change (layout, styling, a menu that silently stops opening) is caught automatically.

This is intentionally a thin slice on one component. The goal is to establish the reusable pattern and the CI/baseline plumbing; rolling it out to more components is follow-up work.

How the visual baselines stay reliable

Screenshots render differently on macOS vs. the Linux CI machines (fonts, anti-aliasing), which normally makes pixel comparison flaky. To avoid that, baselines are only ever generated and compared inside one pinned Docker image (mcr.microsoft.com/playwright:v1.60.0-jammy) that matches the CI environment exactly — so the same pixels are produced on a developer's Mac and in CI.

• Locally: npm run test:examples:visual:update regenerates baselines (needs Docker); npm run test:examples:visual compares.
• On a plain host run (npm run test:examples:components), the interaction tests run and the pixel test is automatically skipped rather than failing on a font mismatch.
• A new CI job runs the suite inside that same image on every PR.

See example-tests/components/README.md for the full developer workflow.

Commits

1. test(menu) — interaction tests + the per-component suite wiring
2. test(menu) — the gated visual-regression baseline + Docker/config plumbing
3. ci — the PR job that runs it all in the pinned container

Verification

• Interaction suite: deterministic locally (ran repeatedly, consistently green).
• Visual test: generated and compared cleanly inside the Docker image.
• Host run correctly skips the visual test.

The one thing only CI can confirm is the new job's Node setup inside the container — this draft PR's checks are the gate for that. Opening as a draft until those pass.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a58f4e11-5c3f-4407-b016-9abad883b5d5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch test/menu-visual-interaction-tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-4147/