initial commit

test/nuxt/NavDrawer.spec.js

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+import NavDrawer from '../../app/components/NavDrawer.vue'
+
+const withAuth = () => {
+  registerEndpoint('/api/me', () => ({ id: '1', identifier: 'user', role: 'member' }), { method: 'GET' })
+}
+
+describe('NavDrawer', () => {
+  it('renders navigation links with correct paths', async () => {
+    withAuth()
+    await mountSuspended(NavDrawer, {
+      props: { modelValue: true },
+      attachTo: document.body,
+    })
+    const links = document.body.querySelectorAll('aside nav a[href]')
+    const hrefs = [...links].map(a => a.getAttribute('href'))
+    expect(hrefs).toContain('/')
+    expect(hrefs).toContain('/account')
+    expect(hrefs).toContain('/cameras')
+    expect(hrefs).toContain('/poi')
+    expect(hrefs).toContain('/members')
+    expect(hrefs).toContain('/settings')
+    expect(links.length).toBeGreaterThanOrEqual(6)
+  })
+
+  it('renders Map and Settings labels', async () => {
+    withAuth()
+    await mountSuspended(NavDrawer, {
+      props: { modelValue: true },
+      attachTo: document.body,
+    })
+    expect(document.body.textContent).toContain('Map')
+    expect(document.body.textContent).toContain('Settings')
+    expect(document.body.textContent).toContain('Navigation')
+  })
+
+  it('emits update:modelValue when close is triggered', async () => {
+    withAuth()
+    const wrapper = await mountSuspended(NavDrawer, {
+      props: { modelValue: true },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('aside button[aria-label="Close navigation"]')).toBeTruthy()
+    await wrapper.vm.close()
+    expect(wrapper.emitted('update:modelValue')).toEqual([[false]])
+  })
+
+  it('applies active styling for current route', async () => {
+    withAuth()
+    await mountSuspended(NavDrawer, {
+      props: { modelValue: true },
+      attachTo: document.body,
+    })
+    const mapLink = document.body.querySelector('aside nav a[href="/"]')
+    expect(mapLink).toBeTruthy()
+    expect(mapLink.className).toMatch(/kestrel-accent|border-kestrel-accent/)
+  })
+})