test(10-08): promote admin skeleton stubs to real RED tests — 8 failing tests

- AdminAuditView.skeleton.test.js: 5 real assertions (skeleton rows, cell count, no loading text, EmptyState, CTA)
- AdminUsersView.skeleton.test.js: 3 real assertions (skeleton rows, 6 cells, no loading text)
- All 8 tests fail until Task 2 updates the view components

frontend/src/views/admin/__tests__/AdminAuditView.skeleton.test.js

@@ -1,12 +1,87 @@
-import { describe, it } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('../../../api/client.js', () => ({
+  adminListAuditLog: vi.fn().mockResolvedValue({ items: [], total: 0 }),
+  adminExportAuditLogCsv: vi.fn().mockResolvedValue({}),
+  adminListDailyExports: vi.fn().mockResolvedValue({ items: [] }),
+  adminDownloadDailyExport: vi.fn().mockResolvedValue({}),
+}))
+
+const stubs = {
+  BreadcrumbBar: true,
+  EmptyState: true,
+  AppIcon: true,
+}
+
+async function mountAudit(overrides = {}) {
+  const { default: AdminAuditView } = await import('../AdminAuditView.vue')
+  return mount(AdminAuditView, {
+    global: { stubs, plugins: [createPinia()] },
+    ...overrides,
+  })
+}
 
 describe('UX-04: AdminAuditView shows skeleton table rows during loading', () => {
-  it.todo('renders 5+ skeleton <tr> rows when loading=true')
+  beforeEach(() => {
-  it.todo('skeleton rows have 5 columns matching the real table header')
+    setActivePinia(createPinia())
-  it.todo('animated spinner Loading audit log… text is removed')
+    vi.resetModules()
+  })
+
+  it('renders 8 skeleton <tr> rows when loading=true', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockReturnValue(new Promise(() => {})) // never resolves => loading stays true
+    const wrapper = await mountAudit()
+    const tbody = wrapper.find('tbody')
+    expect(tbody.exists()).toBe(true)
+    const rows = tbody.findAll('tr')
+    expect(rows.length).toBeGreaterThanOrEqual(8)
+  })
+
+  it('skeleton rows have exactly 5 <td> cells matching column count', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountAudit()
+    const rows = wrapper.find('tbody').findAll('tr')
+    rows.forEach(row => {
+      expect(row.findAll('td').length).toBe(5)
+    })
+  })
+
+  it('Loading audit log text is absent when loading=true', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountAudit()
+    expect(wrapper.text()).not.toContain('Loading audit log')
+  })
 })
 
 describe('UX-01 (audit empty): EmptyState renders when entries is empty after load', () => {
-  it.todo('EmptyState icon=clipboardList headline="No entries found" appears when entries.length===0 and not loading')
+  beforeEach(() => {
-  it.todo('clear-filters button rendered in #cta slot')
+    setActivePinia(createPinia())
+    vi.resetModules()
+  })
+
+  it('renders <EmptyState icon="clipboardList" headline="No entries found"> when entries empty and not loading', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockResolvedValue({ items: [], total: 0 })
+    const wrapper = await mountAudit()
+    await new Promise(r => setTimeout(r, 50))
+    await wrapper.vm.$nextTick()
+    const emptyState = wrapper.findComponent({ name: 'EmptyState' })
+    expect(emptyState.exists()).toBe(true)
+    expect(emptyState.attributes('icon') ?? emptyState.props('icon')).toBe('clipboardList')
+    const headline = emptyState.attributes('headline') ?? emptyState.props('headline')
+    expect(headline).toBe('No entries found')
+  })
+
+  it('EmptyState includes a Clear filters CTA button', async () => {
+    const { adminListAuditLog } = await import('../../../api/client.js')
+    adminListAuditLog.mockResolvedValue({ items: [], total: 0 })
+    const wrapper = await mountAudit()
+    await new Promise(r => setTimeout(r, 50))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('Clear filters')
+  })
 })

frontend/src/views/admin/__tests__/AdminUsersView.skeleton.test.js

@@ -1,7 +1,60 @@
-import { describe, it } from 'vitest'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+
+vi.mock('../../../api/client.js', () => ({
+  adminListUsers: vi.fn().mockResolvedValue({ items: [] }),
+  adminCreateUser: vi.fn().mockResolvedValue({}),
+  adminDeactivateUser: vi.fn().mockResolvedValue({}),
+  adminReactivateUser: vi.fn().mockResolvedValue({}),
+  adminDeleteUser: vi.fn().mockResolvedValue({}),
+  adminResetUserPassword: vi.fn().mockResolvedValue({}),
+}))
+
+const stubs = {
+  BreadcrumbBar: true,
+  EmptyState: true,
+  AppIcon: true,
+}
+
+async function mountUsers(overrides = {}) {
+  const { default: AdminUsersView } = await import('../AdminUsersView.vue')
+  return mount(AdminUsersView, {
+    global: { stubs, plugins: [createPinia()] },
+    ...overrides,
+  })
+}
 
 describe('UX-04: AdminUsersView shows skeleton table rows during loading', () => {
-  it.todo('renders 5+ skeleton <tr> rows when loading=true')
+  beforeEach(() => {
-  it.todo('skeleton rows have 6 columns matching the real table header')
+    setActivePinia(createPinia())
-  it.todo('animated spinner Loading users… text is removed')
+    vi.resetModules()
+  })
+
+  it('renders 5 skeleton <tr> rows when loading=true', async () => {
+    const { adminListUsers } = await import('../../../api/client.js')
+    adminListUsers.mockReturnValue(new Promise(() => {})) // never resolves => loading stays true
+    const wrapper = await mountUsers()
+    const tbody = wrapper.find('tbody')
+    expect(tbody.exists()).toBe(true)
+    const rows = tbody.findAll('tr')
+    expect(rows.length).toBeGreaterThanOrEqual(5)
+  })
+
+  it('skeleton rows have exactly 6 <td> cells', async () => {
+    const { adminListUsers } = await import('../../../api/client.js')
+    adminListUsers.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountUsers()
+    const rows = wrapper.find('tbody').findAll('tr')
+    rows.forEach(row => {
+      expect(row.findAll('td').length).toBe(6)
+    })
+  })
+
+  it('Loading users text is absent when loading=true', async () => {
+    const { adminListUsers } = await import('../../../api/client.js')
+    adminListUsers.mockReturnValue(new Promise(() => {}))
+    const wrapper = await mountUsers()
+    expect(wrapper.text()).not.toContain('Loading users')
+  })
 })