refactor testing

test/nuxt/NavDrawer.spec.js

@@ -1,58 +1,43 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeEach } 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', avatar_url: null }), { method: 'GET' })
+const mountDrawer = (props = {}) => {
+  return mountSuspended(NavDrawer, {
+    props: { modelValue: true, ...props },
+    attachTo: document.body,
+  })
 }
 
 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)
+  beforeEach(() => {
+    registerEndpoint('/api/me', () => ({ id: '1', identifier: 'user', role: 'member', avatar_url: null }), { method: 'GET' })
   })
 
-  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')
+  it('renders navigation links with correct paths', async () => {
+    await mountDrawer()
+    const hrefs = [...document.body.querySelectorAll('aside nav a[href]')].map(a => a.getAttribute('href'))
+    expect(hrefs).toEqual(expect.arrayContaining(['/', '/account', '/cameras', '/poi', '/members', '/settings']))
+  })
+
+  it.each([
+    ['Map'],
+    ['Settings'],
+  ])('renders %s label', async (label) => {
+    await mountDrawer()
+    expect(document.body.textContent).toContain(label)
   })
 
   it('emits update:modelValue when close is triggered', async () => {
-    withAuth()
-    const wrapper = await mountSuspended(NavDrawer, {
-      props: { modelValue: true },
-      attachTo: document.body,
-    })
+    const wrapper = await mountDrawer()
     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,
-    })
+    await mountDrawer()
     const mapLink = document.body.querySelector('aside nav a[href="/"]')
-    expect(mapLink).toBeTruthy()
-    expect(mapLink.className).toMatch(/kestrel-accent|border-kestrel-accent/)
+    expect(mapLink?.className).toMatch(/kestrel-accent|border-kestrel-accent/)
   })
 })