test(10-05): bring every SPA module, composable and component under Vitest

- 41 unit and component suites under admin/tests/{app,state,shell,list,form,relation,views,ui}
  covering states and a11y roles; every src module is imported by a test
- typed fixture helper assigns each JSON fixture to its generated OpenAPI type
- fix: iconFor ignores inherited object members such as "constructor"
- fix: field controls import ./control instead of the registry (import cycle
  left a renderer unregistered depending on module load order)
- fix: dropdown shows the placeholder for an unknown stored value next to an emptyOption
- fix: list announces a failed schema load even when the rows arrive after it
- tailwind no longer scans admin/tests; boardwalk/dist rebuilt

admin/tests/relation/RelationPickerModal.test.ts

@@ -0,0 +1,160 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import RelationPickerModal from '../../src/components/relation/RelationPickerModal.vue'
+import { toasts } from '../../src/state/useToasts'
+import { candidatesFixture, relationSchemaFixture } from '../fixtures/typed'
+import { API, keydown, mockApi, queryOf, requestsTo, resetState, wait, type Route } from '../helpers'
+
+const source = { vendor: 'acme', plugin: 'demo', controller: 'widgets' }
+const CANDIDATES = `${API}/acme/demo/widgets/1/relations/members/candidates`
+const LINK = `${API}/acme/demo/widgets/1/relations/members/link`
+const failure = (status: number, message: string) => ({ status, body: { error: { code: 'x', message, details: {} } } })
+
+function routes(overrides: Record<string, Route> = {}): Record<string, Route> {
+  return {
+    [`GET ${CANDIDATES}`]: (request) => ({
+      body: queryOf(request).get('page') === '2' ? candidatesFixture.page2 : candidatesFixture.page1,
+    }),
+    ...overrides,
+  }
+}
+
+async function openModal(overrides: Record<string, Route> = {}) {
+  const calls = mockApi(routes(overrides))
+  const wrapper = mount(RelationPickerModal, {
+    props: { open: true, source, recordId: 1, relation: 'members', schema: relationSchemaFixture.data },
+    attachTo: document.body,
+  })
+  await flushPromises()
+  await wait(0)
+  await flushPromises()
+  return { wrapper, calls }
+}
+
+const dialog = () => document.body.querySelector<HTMLElement>('[data-relation-picker]')
+const options = () => [...(dialog()?.querySelectorAll<HTMLElement>('[role="option"]') ?? [])]
+const confirmButton = () => dialog()!.querySelector<HTMLButtonElement>('[data-action="confirm-link"]')!
+
+async function click(element: Element | null | undefined) {
+  ;(element as HTMLElement).click()
+  await flushPromises()
+}
+
+beforeEach(() => {
+  resetState()
+})
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+enableAutoUnmount(afterEach)
+
+describe('relation picker modal', () => {
+  it('is a titled, described modal dialog with a labelled multi-select listbox', async () => {
+    await openModal()
+    const element = dialog()!
+    expect(element.getAttribute('role')).toBe('dialog')
+    expect(element.getAttribute('aria-modal')).toBe('true')
+    const title = document.getElementById(element.getAttribute('aria-labelledby')!)
+    expect(title?.textContent).toBe('Add member')
+    const description = document.getElementById(element.getAttribute('aria-describedby')!)
+    expect(description?.textContent).toContain('The owner is not listed.')
+    const listbox = element.querySelector('[role="listbox"]')!
+    expect(listbox.getAttribute('aria-multiselectable')).toBe('true')
+    expect(listbox.getAttribute('aria-label')).toBe('Add member')
+    expect(element.querySelector('[data-candidate-search]')!.getAttribute('aria-controls')).toBe(listbox.id)
+    expect(element.querySelector('[data-action="close"]')!.getAttribute('aria-label')).toBe('Zamknij')
+    expect(options().every((option) => option.getAttribute('tabindex') === '0')).toBe(true)
+  })
+
+  it('shows initials and both columns for each candidate as served', async () => {
+    await openModal()
+    const first = options()[0]!
+    expect(first.querySelector('[aria-hidden="true"]')!.textContent).toBe('AT')
+    expect(first.textContent).toContain('alan.turing@example.test')
+  })
+
+  it('disables prev on the first page and next on the last', async () => {
+    await openModal()
+    expect(dialog()!.querySelector<HTMLButtonElement>('[data-page="prev"]')!.disabled).toBe(true)
+    await click(dialog()!.querySelector('[data-page="next"]'))
+    expect(dialog()!.querySelector<HTMLButtonElement>('[data-page="next"]')!.disabled).toBe(true)
+  })
+
+  it('toggles with Enter and moves between options with the arrow keys', async () => {
+    await openModal()
+    const [first, second] = options()
+    first!.focus()
+    expect(keydown(first!, 'Enter').defaultPrevented).toBe(true)
+    await flushPromises()
+    expect(options()[0]!.getAttribute('aria-selected')).toBe('true')
+    keydown(first!, 'ArrowDown')
+    expect(document.activeElement).toBe(second)
+    keydown(second!, 'ArrowUp')
+    expect(document.activeElement).toBe(first)
+    keydown(first!, 'ArrowUp')
+    expect(document.activeElement).toBe(first)
+    keydown(first!, 'Enter')
+    await flushPromises()
+    expect(options()[0]!.getAttribute('aria-selected')).toBe('false')
+    expect(keydown(first!, 'x').defaultPrevented).toBe(false)
+  })
+
+  it('says so when no candidate is left', async () => {
+    await openModal({ [`GET ${CANDIDATES}`]: { body: candidatesFixture.empty } })
+    expect(dialog()!.querySelector('[data-candidates-empty]')!.textContent?.trim()).toBe('Brak rekordów do dodania.')
+    expect(dialog()!.querySelector('nav')).toBeNull()
+  })
+
+  it('treats a failed candidates load as empty', async () => {
+    await openModal({ [`GET ${CANDIDATES}`]: failure(500, 'Boom') })
+    expect(options()).toHaveLength(0)
+    expect(dialog()!.querySelector('[data-candidates-empty]')).not.toBeNull()
+  })
+
+  it('toasts the server message when the link is refused and stays open', async () => {
+    const { wrapper, calls } = await openModal({ [`POST ${LINK}`]: failure(422, 'Already a member') })
+    await click(options()[0])
+    await click(confirmButton())
+    expect(requestsTo(calls, 'POST', LINK)).toHaveLength(1)
+    expect(toasts.value[0]).toMatchObject({ text: 'Already a member', tone: 'danger' })
+    expect(dialog()).not.toBeNull()
+    expect(wrapper.emitted('linked')).toBeUndefined()
+  })
+
+  it('toasts the generic error when the link cannot reach the server', async () => {
+    await openModal({
+      [`POST ${LINK}`]: () => {
+        throw new TypeError('offline')
+      },
+    })
+    await click(options()[1])
+    await click(confirmButton())
+    expect(toasts.value[0]).toMatchObject({ text: 'Nie udało się zapisać zmian. Spróbuj ponownie.', tone: 'danger' })
+    expect(confirmButton().disabled).toBe(false)
+  })
+
+  it('emits the linked count and closes after a successful link', async () => {
+    const { wrapper } = await openModal({ [`POST ${LINK}`]: { body: { data: {}, meta: {} } } })
+    await click(options()[0])
+    await click(options()[2])
+    await click(confirmButton())
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+    // Without a server count the selection size is reported.
+    expect(wrapper.emitted('linked')).toEqual([[2]])
+  })
+
+  it('clears the search, page and selection when it closes', async () => {
+    const { wrapper, calls } = await openModal()
+    await click(options()[0])
+    await wrapper.setProps({ open: false })
+    await flushPromises()
+    await wrapper.setProps({ open: true })
+    await flushPromises()
+    await wait(0)
+    await flushPromises()
+    expect(confirmButton().textContent?.trim()).toBe('Dodaj (0)')
+    expect(queryOf(requestsTo(calls, 'GET', CANDIDATES).at(-1)!).get('page')).toBe('1')
+  })
+})