优化

2026-08-06 19:03:13 +08:00
parent 7034a40aa8
commit 8695eee8c8
28 changed files with 1100 additions and 162 deletions
@@ -0,0 +1,63 @@
+import { computed, defineComponent } from 'vue'
+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(['创建日期', '状态', '关键词'])
+  })
+})
+