admin-web/src/shared/components/QueryToolbar.test.ts

import { computed, defineComponent } from 'vue'
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { shallowMount } from '@vue/test-utils'
import { beforeEach, describe, expect, it } from 'vitest'
import QueryToolbar, { type QueryField } from './QueryToolbar.vue'
import LayoutPreferenceList from './LayoutPreferenceList.vue'
import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'

const FieldStub = defineComponent({
  inheritAttrs: false,
  props: { placeholder: String },
  template: '<input :data-placeholder="placeholder" />',
})
const ButtonStub = defineComponent({ template: '<button type="button"><slot /></button>' })
const PopoverStub = defineComponent({ template: '<div><slot name="reference" /><slot /></div>' })

const fields: QueryField[] = [
  { key: 'keyword', type: 'input', label: '关键词', placeholder: '关键词' },
  { key: 'status', type: 'select', label: '状态', placeholder: '状态' },
  { key: 'createdRange', type: 'daterange', label: '创建日期', placeholder: '创建日期' },
]

function mountToolbar() {
  return shallowMount(QueryToolbar, {
    props: {
      modelValue: { keyword: '', status: '', createdRange: [] },
      'onUpdate:modelValue': () => undefined,
      ariaLabel: '订单筛选',
      fields,
      preferenceKey: 'orders-query',
    },
    global: {
      provide: { [UI_PREFERENCE_SCOPE as symbol]: computed(() => 'user-1') },
      stubs: {
        ElInput: FieldStub,
        ElSelect: FieldStub,
        ElDatePicker: FieldStub,
        ElButton: ButtonStub,
        ElPopover: PopoverStub,
      },
    },
  })
}

describe('QueryToolbar layout preferences', () => {
  beforeEach(() => localStorage.clear())

  it('restores and updates the user field order', async () => {
    localStorage.setItem(preferenceStorageKey('query', 'user-1', 'orders-query'), JSON.stringify({
      version: 1,
      order: ['status', 'keyword', 'createdRange'],
      hidden: [],
    }))
    const wrapper = mountToolbar()
    expect(wrapper.findAll('input').map((input) => input.attributes('data-placeholder')))
      .toEqual(['状态', '关键词', '创建日期'])

    wrapper.findComponent(LayoutPreferenceList).vm.$emit('move', 'createdRange', 0)
    await wrapper.vm.$nextTick()
    expect(wrapper.findAll('input').map((input) => input.attributes('data-placeholder')))
      .toEqual(['创建日期', '状态', '关键词'])
  })

  it('keeps desktop actions grouped with the final filter when the toolbar wraps', () => {
    const wrapper = mountToolbar()
    expect(wrapper.find('.query-toolbar__tail input').attributes('data-placeholder')).toBe('创建日期')
    expect(wrapper.find('.query-toolbar__tail .query-toolbar__actions').exists()).toBe(true)

    const source = readFileSync(resolve(process.cwd(), 'src/shared/components/QueryToolbar.vue'), 'utf8')
    expect(source).toContain('.query-toolbar__tail { display: flex; align-items: flex-end; width: auto; flex: 0 0 auto; gap: 10px; }')
  })
})