test(12.1-05): unit tests for the list, form, preview and routing behaviours of Phase 12.1 in the SPA

- list: the bulk menu in the toolbar and on the list view with its three failure rows, row states and invisible columns in the table
- form: the forbidden banner, password and preset on the form view, locked relation options, the save body of password and permission fields
- preview view: context fields, hidden tabs, the status hint, the footer with zero, one and several actions, load failures
- routing: the preview route and mapWinterUrl
- backstops: focus returns to the bulk menu trigger; preview URL mapping and the route replacement; locked relation options
- the slug preset runs on the table the user plugin's slug test uses

admin/tests/list/ListToolbar.test.ts

@@ -1,6 +1,8 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { setBundle } from '../../src/app/i18n'
 import ListToolbar from '../../src/components/list/ListToolbar.vue'
+import { langFixture } from '../fixtures/typed'
 import { resetState } from '../helpers'
 
 const base = {
@@ -108,3 +110,71 @@ describe('registered toolbar actions (D-12, UI-SPEC S4)', () => {
     expect(bare.find('[data-action]').exists()).toBe(false)
   })
 })
+
+describe('bulk actions in the toolbar (UI-SPEC S1, D-09)', () => {
+  const bulkActions = [
+    { name: 'activate', label: 'Activate' },
+    { name: 'archive', label: 'Archive' },
+  ]
+  const trigger = (wrapper: ReturnType<typeof mount>) => wrapper.find('[data-action="bulk-actions"]')
+
+  beforeEach(() => {
+    setBundle({ ...langFixture.data, 'backend::lang.list.bulk_actions': { other: 'Bulk actions' } }, 'en')
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders no menu with zero permitted actions', () => {
+    const none = mount(ListToolbar, { props: { ...base, selectedCount: 2, selectedLabel: 'Selected 2' } })
+    expect(trigger(none).exists()).toBe(false)
+    const empty = mount(ListToolbar, { props: { ...base, selectedCount: 2, selectedLabel: 'Selected 2', bulkActions: [] } })
+    expect(trigger(empty).exists()).toBe(false)
+    // The built-in delete is not a menu item: it stays the toolbar button.
+    expect(empty.find('[data-action="delete"]').exists()).toBe(true)
+  })
+
+  it('keeps the trigger labelled and disabled until rows are selected, and while a bulk action runs', async () => {
+    const wrapper = mount(ListToolbar, { props: { ...base, bulkActions } })
+    expect(trigger(wrapper).text()).toBe('Bulk actions')
+    expect(trigger(wrapper).attributes('disabled')).toBeDefined()
+    await wrapper.setProps({ selectedCount: 1, selectedLabel: 'Selected 1' })
+    expect(trigger(wrapper).attributes('disabled')).toBeUndefined()
+    await wrapper.setProps({ bulkBusy: true })
+    expect(trigger(wrapper).attributes('disabled')).toBeDefined()
+    expect(trigger(wrapper).text()).toBe('Bulk actions')
+  })
+
+  it('places the menu after the selection pill and before delete and the registered actions', () => {
+    const wrapper = mount(ListToolbar, {
+      props: { ...base, buttons: ['delete', 'recount'], actions: [{ name: 'recount', label: 'Recount' }], bulkActions, selectedCount: 1, selectedLabel: 'Selected 1' },
+    })
+    const order = wrapper.findAll('[data-selected-pill], [data-action]').map((node) => node.attributes('data-action') ?? 'pill')
+    expect(order).toEqual(['pill', 'bulk-actions', 'delete', 'recount'])
+  })
+
+  it('emits bulk with the chosen name and nothing else', async () => {
+    const wrapper = mount(ListToolbar, { props: { ...base, bulkActions, selectedCount: 2, selectedLabel: 'Selected 2' }, attachTo: document.body })
+    await trigger(wrapper).trigger('keydown', { key: 'Enter' })
+    await flushPromises()
+    const items = Array.from(document.body.querySelectorAll<HTMLElement>('[data-bulk-menu] [data-bulk-action]'))
+    expect(items.map((item) => item.dataset.bulkAction)).toEqual(['activate', 'archive'])
+    items[1]!.click()
+    await flushPromises()
+    expect(wrapper.emitted('bulk')).toEqual([['archive']])
+    expect(wrapper.emitted('action')).toBeUndefined()
+    expect(wrapper.emitted('delete')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('exposes focusBulk(), which focuses the menu trigger and is harmless without a menu', () => {
+    const wrapper = mount(ListToolbar, { props: { ...base, bulkActions, selectedCount: 1, selectedLabel: 'Selected 1' }, attachTo: document.body })
+    ;(wrapper.vm as unknown as { focusBulk: () => void }).focusBulk()
+    expect(document.activeElement).toBe(trigger(wrapper).element)
+    wrapper.unmount()
+    const bare = mount(ListToolbar, { props: base, attachTo: document.body })
+    expect(() => (bare.vm as unknown as { focusBulk: () => void }).focusBulk()).not.toThrow()
+    bare.unmount()
+  })
+})