test(ui): add tests for mobile menu default closed state

[howwohmm]

🔗 Linked issue

Closes#1505

🧭 Context

The mobile menu had no tests verifying its default state or basic open/close behavior.

📚 Description

Adds a test suite for MobileMenu.client.vue covering:

• Closed by default — dialog element is not in DOM when open is false
• Opens on request — dialog with role="dialog" and aria-modal="true" appears when open is true
• Closes on prop change — dialog removed when open goes from true to false
• Backdrop click — emits update:open with false
• Close button click — emits update:open with false

Mocks useConnector, useAtproto, and useFocusTrap to isolate the menu logic. Follows existing patterns from HeaderConnectorModal.spec.ts and Tooltip.spec.ts (Teleport + cleanup).

What it doesn't change

• No changes to the component itself
• No changes to existing tests

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 0:00am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 0:00am
npmx-lunaria	Ignored		Mar 22, 2026 0:00am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b13b18e3-5b7b-4066-9dfe-a91f5977667f

📥 Commits

Reviewing files that changed from the base of the PR and between 87dad03 and dd44bf8.

📒 Files selected for processing (1)

• test/nuxt/components/Header/MobileMenu.spec.ts

✅ Files skipped from review due to trivial changes (1)

• test/nuxt/components/Header/MobileMenu.spec.ts

---

📝 Walkthrough

Walkthrough

A new Vitest test suite for the Nuxt HeaderMobileMenu component was added at test/nuxt/components/Header/MobileMenu.spec.ts. The suite mocks Nuxt composables useConnector and useAtproto, stubs useFocusTrap, and provides an async mountMenu(open) helper that mounts HeaderMobileMenu with an open prop and sample links. Tests assert: no dialog when open is false; dialog appears with aria-modal="true" when open is true; dialog is removed after changing open from true to false; clicking the backdrop emits update:open with [false]; clicking the close button emits update:open with [false]. Lines changed: +118/-0.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the addition of a test suite for MobileMenu.client.vue with specific test cases covering default closed state, opening on request, closing on prop change, and user interaction events.
Linked Issues check	✅ Passed	The pull request successfully addresses all requirements from issue #1505: verifies default closed state, tests opening with proper accessibility attributes, confirms closing on prop change, and validates user interactions emit correct events.
Out of Scope Changes check	✅ Passed	The pull request contains only additions to the test file (MobileMenu.spec.ts) with no modifications to component code or existing tests, remaining entirely within scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit 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 and usage tips.}

[coderabbitai]

Actionable comments posted: 3

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 24804db7-68df-4724-9496-6879bbe8aa62

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 400ad78.

📒 Files selected for processing (1)

• test/nuxt/components/Header/MobileMenu.spec.ts

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

test/nuxt/components/Header/MobileMenu.spec.ts (1)

88-89: Consider a more type-safe pattern for array access.

Lines 89 and 105 use the non-null assertion operator ! to access wrapper.emitted('update:open')![0]. Whilst the preceding .toBeTruthy() check ensures the array exists, it doesn't explicitly verify that index [0] exists.

♻️ Suggested refactor for stricter type safety

For lines 88-89:

- expect(wrapper.emitted('update:open')).toBeTruthy()- expect(wrapper.emitted('update:open')![0]).toEqual([false])+ const emitted = wrapper.emitted('update:open')+ expect(emitted).toBeTruthy()+ expect(emitted?.[0]).toEqual([false])

For lines 104-105:

- expect(wrapper.emitted('update:open')).toBeTruthy()- expect(wrapper.emitted('update:open')![0]).toEqual([false])+ const emitted = wrapper.emitted('update:open')+ expect(emitted).toBeTruthy()+ expect(emitted?.[0]).toEqual([false])

As per coding guidelines, strictly type-safe code should check when accessing an array value by index.

Also applies to: 104-105

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1fe96943-99c4-4330-9b64-7f0e9f132fb1

📥 Commits

Reviewing files that changed from the base of the PR and between 400ad78 and 87dad03.

📒 Files selected for processing (1)

• test/nuxt/components/Header/MobileMenu.spec.ts

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!