test(vue): add component tests for event handling

[alexkaduk]

Testing Infrastructure Added + Radio Component Accessibility Fix

🧪 Testing Added

Why: No automated tests existed to validate event handling or prevent regressions.

What: Added Vitest testing infrastructure with Playwright browser mode:

packages/vue/ - Unit tests for wrapper library

• Configure Vitest with Playwright browser mode
• Add plugin.spec.ts - validates plugin initialization & event naming (camelCase preservation)

packages/vue-test-app/ - Component integration tests

• Configure Vitest with Playwright (chromium)
• Add global test setup (setup.ts) to initialize ixPlugin
• Add message.spec.ts - validates modal/message removal from DOM (real component)
• Add application-breakpoints.spec.ts - validates radio group event handling

Result: Tests fail with broken ce() helper, pass with fix.

---

🐛 Radio Component Fix: Make ix-radio Directly Clickable & Accessible

Problem:

1. Not Clickable in Tests: Clicking <ix-radio> host element did nothing in unit tests - required accessing shadow DOM directly (works as expected in browser)
2. Missing Accessible Name: label prop wasn't exposed to accessibility tree, breaking Testing Library queries and screen readers

Solution: packages/core/src/components/radio/radio.tsx

  <Host
    aria-checked={a11yBoolean(this.checked)}
    aria-disabled={a11yBoolean(this.disabled)}
+   aria-label={this.label}
    role="radio"
+   onClick={() => !this.disabled && this.setCheckedState(true)}
    onBlur={() => this.ixBlur.emit()}
  >

Changes:

1. aria-label={this.label} - Exposes label to accessibility tree

   • Enables screen.findByRole('radio', { name: 'Small' })
   • Screen readers can now announce the label
   • Follows WAI-ARIA best practices

2. onClick handler - Makes entire host element clickable in tests

   • Enables Testing Library queries to click the radio directly
   • Uses setCheckedState(true) (radios should only be checkable)
   • Respects disabled state

Testing:

// ❌ Before: Required shadow DOM access
const button = radio.shadowRoot.querySelector('button');
button.click();

// ✅ After: Direct click like a real user
const radio = await screen.findByRole('radio', { name: 'Small' });
radio.click();

---

🔄 Vue Component Update

packages/vue-test-app/src/preview-examples/application-breakpoints.vue

• Update to use IxRadioGroup @valueChange event (single handler)
• Correctly extract event.detail from CustomEvent<Breakpoint>

---

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6a90f3a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[alexkaduk]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive testing setup for Vue components using Vitest and Playwright, which is a great step towards ensuring component reliability. It also includes a valuable accessibility fix for the ix-radio component, making it directly clickable and providing an accessible name. The refactoring of the application-breakpoints example to use @valueChange on the IxRadioGroup is a nice improvement for code clarity. I've added one comment regarding a potential accessibility improvement for the ix-radio component's label.

stale

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud