summercms/admin/tests/list/ListToolbar.test.ts

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 = {
  showSearch: true,
  search: 'blue',
  searchPrompt: 'Search widgets…',
  buttons: ['delete'],
  selectedCount: 0,
  selectedLabel: 'Selected 0',
  deleteLabel: 'Delete selected',
}

beforeEach(() => {
  resetState()
})

describe('list toolbar (D-14)', () => {
  it('has a labelled search input that emits every change', async () => {
    const wrapper = mount(ListToolbar, { props: base })
    const input = wrapper.find('[data-list-search]')
    expect(input.attributes('type')).toBe('search')
    expect(input.attributes('placeholder')).toBe('Search widgets…')
    expect((input.element as HTMLInputElement).value).toBe('blue')
    expect(wrapper.find('label .sr-only').text()).toBe('Szukaj')
    await input.setValue('red')
    expect(wrapper.emitted('update:search')).toEqual([['red']])
  })

  it('hides the search when the schema turns it off', () => {
    const wrapper = mount(ListToolbar, { props: { ...base, showSearch: false } })
    expect(wrapper.find('[data-list-search]').exists()).toBe(false)
  })

  it('disables delete without a selection and shows the pill and danger button with one', async () => {
    const wrapper = mount(ListToolbar, { props: base })
    const button = () => wrapper.find('[data-action="delete"]')
    expect(button().attributes('disabled')).toBeDefined()
    expect(button().classes()).toContain('border-border-strong')
    expect(wrapper.find('[data-selected-pill]').exists()).toBe(false)

    await wrapper.setProps({ selectedCount: 2, selectedLabel: 'Selected 2' })
    expect(button().attributes('disabled')).toBeUndefined()
    expect(button().classes()).toContain('text-danger')
    expect(button().text()).toBe('Delete selected')
    expect(wrapper.find('[data-selected-pill]').text()).toBe('Selected 2')
    await button().trigger('click')
    expect(wrapper.emitted('delete')).toHaveLength(1)
  })

  it('renders only the declared toolbar buttons', () => {
    const wrapper = mount(ListToolbar, { props: { ...base, buttons: [] } })
    expect(wrapper.find('[data-action="delete"]').exists()).toBe(false)
  })
})

describe('registered toolbar actions (D-12, UI-SPEC S4)', () => {
  const actions = [
    { name: 'archive', label: 'Archive' },
    { name: 'recount', label: 'Recount' },
  ]

  function names(wrapper: ReturnType<typeof mount>): (string | null)[] {
    return wrapper.findAll('[data-action]').map((button) => button.attributes('data-action') ?? null)
  }

  it('renders custom names after delete in declared order as outline buttons', () => {
    const wrapper = mount(ListToolbar, { props: { ...base, buttons: ['delete', 'recount', 'archive'], actions } })
    expect(names(wrapper)).toEqual(['delete', 'recount', 'archive'])
    const recount = wrapper.find('[data-action="recount"]')
    expect(recount.text()).toBe('Recount')
    expect(recount.classes()).toContain('border-border-strong')
    expect(recount.find('svg').exists()).toBe(false)
  })

  it('keeps the actions enabled without a selection and while one exists', async () => {
    const wrapper = mount(ListToolbar, { props: { ...base, buttons: ['delete', 'recount'], actions } })
    const recount = () => wrapper.find('[data-action="recount"]')
    expect(recount().attributes('disabled')).toBeUndefined()
    expect(recount().attributes('aria-busy')).toBeUndefined()
    await wrapper.setProps({ selectedCount: 3, selectedLabel: 'Selected 3' })
    expect(recount().attributes('disabled')).toBeUndefined()
    await recount().trigger('click')
    expect(wrapper.emitted('action')).toEqual([['recount']])
    expect(wrapper.emitted('delete')).toBeUndefined()
  })

  it('disables only the busy action and marks it aria-busy', async () => {
    const wrapper = mount(ListToolbar, { props: { ...base, buttons: ['recount', 'archive'], actions, busyAction: 'recount' } })
    const recount = wrapper.find('[data-action="recount"]')
    expect(recount.attributes('disabled')).toBeDefined()
    expect(recount.attributes('aria-busy')).toBe('true')
    await recount.trigger('click')
    expect(wrapper.emitted('action')).toBeUndefined()
    const archive = wrapper.find('[data-action="archive"]')
    expect(archive.attributes('disabled')).toBeUndefined()
    expect(archive.attributes('aria-busy')).toBeUndefined()
    await archive.trigger('click')
    expect(wrapper.emitted('action')).toEqual([['archive']])
  })

  it('does not render names missing from actions or the create button', () => {
    const wrapper = mount(ListToolbar, { props: { ...base, buttons: ['create', 'delete', 'launch', 'recount'], actions: [actions[1]!] } })
    expect(names(wrapper)).toEqual(['delete', 'recount'])
    const bare = mount(ListToolbar, { props: { ...base, buttons: ['recount'] } })
    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()
  })
})