@feedmepos/mf-order-setting 0.0.91 → 0.0.93

package/src/views/display-system/legacy-ods/LegacyOdsEditorDialog.spec.ts

@@ -0,0 +1,185 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { ref } from 'vue'
+import type { OdsConfigEntry } from '@/modules/display-system/legacy-ods/interface'
+
+const access = {
+  canAccessOdsTemplateSettings: ref(true),
+  isAdvancedCustomizationEnabled: ref(false)
+}
+vi.mock('@/composables/useLegacyOdsAccess', () => ({ useLegacyOdsAccess: () => access }))
+vi.mock('@feedmepos/media-picker', () => ({
+  MediaPickerModal: {
+    name: 'MediaPickerModal',
+    props: ['open', 'businessId', 'kinds', 'zIndex'],
+    template: '<div />'
+  }
+}))
+vi.mock('@feedmepos/mf-common', () => ({
+  RestaurantSelector: { name: 'RestaurantSelector', template: '<div />' },
+  useCoreStore: () => ({ currentBusiness: ref({ _id: 'business' }), namespace: ref('dev') }),
+  useI18n: () => ({ t: (key: string) => key })
+}))
+vi.mock('./ColorOverrideDialog.vue', () => ({ default: { template: '<div />' } }))
+import Editor from './LegacyOdsEditorDialog.vue'
+
+const wrappers: VueWrapper[] = []
+beforeEach(() => {
+  access.canAccessOdsTemplateSettings.value = true
+  access.isAdvancedCustomizationEnabled.value = false
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      disconnect() {}
+    }
+  )
+})
+afterEach(() => {
+  wrappers.forEach((wrapper) => wrapper.unmount())
+  wrappers.length = 0
+  vi.unstubAllGlobals()
+})
+
+async function editor(entry: OdsConfigEntry = { isDefault: true, label: '默认 🍵' }) {
+  const wrapper = mount(Editor, {
+    props: {
+      modelValue: false,
+      entry,
+      editingIndex: 0,
+      allEntries: [entry],
+      brandkit: { colors: { primary: '#123456' } } as never,
+      colorFields: []
+    },
+    global: {
+      stubs: {
+        Teleport: true,
+        FmButton: {
+          props: ['label', 'disabled'],
+          template: '<button :disabled="disabled">{{ label }}</button>'
+        },
+        FmIcon: true,
+        FmTextField: true,
+        FmSwitch: true,
+        FmButtonGroup: true,
+        FmStepperField: true,
+        FmRadio: true
+      }
+    }
+  })
+  wrappers.push(wrapper)
+  await wrapper.setProps({ modelValue: true })
+  return wrapper
+}
+async function confirm(wrapper: VueWrapper) {
+  await wrapper
+    .findAll('button')
+    .find((button) => button.text().endsWith('.confirm'))!
+    .trigger('click')
+  // The list closes the editor only once the save has landed.
+  expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  return wrapper.emitted('save')![0][0] as OdsConfigEntry
+}
+
+function previewBrandKit(wrapper: VueWrapper) {
+  const url = new URL(wrapper.get('iframe').attributes('src'))
+  expect(url.origin).toBe('https://v2-dev.feedme-ods.pages.dev')
+  expect(url.searchParams.get('preview')).toBe('1')
+  return JSON.parse(Buffer.from(url.searchParams.get('brandKit')!, 'base64url').toString('utf8'))
+}
+
+describe('legacy ODS editor', () => {
+  it('keeps collected-order hiding across preset changes and previews the draft as default', async () => {
+    const wrapper = await editor({
+      isDefault: false,
+      label: '默认 🍵',
+      restaurantIds: ['outlet'],
+      display: { hideCompletedOrders: true } as never
+    })
+    const presets = wrapper.findAllComponents({ name: 'FmButtonGroup' })[0]
+    presets.vm.$emit('update:modelValue', { value: 'preset2' })
+    await wrapper.vm.$nextTick()
+    const preview = previewBrandKit(wrapper)
+    expect(preview.colors.primary).toBe('#123456')
+    expect(preview.ods[0]).toMatchObject({
+      isDefault: true,
+      layout: { background: null, sidePanel: { url: '/images/feedme-side.png' } },
+      display: { groupBy: 'status', hideCompletedOrders: true }
+    })
+    const saved = await confirm(wrapper)
+    expect(saved.label).toBe('默认 🍵')
+    expect(saved.restaurantIds).toEqual(['outlet'])
+    expect(saved.isDefault).toBe(false)
+    expect(saved.display?.hideCompletedOrders).toBe(true)
+  })
+
+  it('leaves metadata, outlet selection and presets editable without the template flag', async () => {
+    access.canAccessOdsTemplateSettings.value = false
+    const wrapper = await editor({ isDefault: false, label: 'Existing', restaurantIds: ['outlet'] })
+    const label = wrapper.findComponent({ name: 'FmTextField' })
+    expect(label.attributes('disabled')).toBeUndefined()
+    label.vm.$emit('update:modelValue', 'Renamed')
+    const selector = wrapper.findComponent({ name: 'RestaurantSelector' })
+    expect(selector.attributes('disabled')).toBeUndefined()
+    expect(selector.attributes('managable-only')).toBe('false')
+    selector.vm.$emit('update:modelValue', ['other-outlet'])
+    const defaultSwitch = wrapper
+      .findAllComponents({ name: 'FmSwitch' })
+      .find((item) => item.attributes('label')?.endsWith('.defaultConfiguration'))!
+    expect(defaultSwitch.attributes('disabled')).toBeUndefined()
+    defaultSwitch.vm.$emit('update:modelValue', true)
+    const presets = wrapper.findComponent({ name: 'FmButtonGroup' })
+    expect(presets.attributes('disabled')).toBeUndefined()
+    presets.vm.$emit('update:modelValue', { value: 'preset2' })
+    const hide = wrapper
+      .findAllComponents({ name: 'FmSwitch' })
+      .find((item) => item.attributes('label')?.endsWith('.hideCollectedOrders'))!
+    hide.vm.$emit('update:modelValue', true)
+    const saved = await confirm(wrapper)
+    expect(saved).toMatchObject({
+      label: 'Renamed',
+      isDefault: true,
+      restaurantIds: ['other-outlet'],
+      layout: { background: null, sidePanel: { url: '/images/feedme-side.png' } },
+      display: { groupBy: 'status', hideCompletedOrders: true }
+    })
+    expect(wrapper.text()).not.toContain('order.displaySystem.legacyOds.displaySettingsDescription')
+    expect(wrapper.text()).not.toContain('order.displaySystem.legacyOds.layoutSettingsDescription')
+  })
+
+  it('replaces a custom image with one picked from the media library', async () => {
+    const media = 'https://image.feedmedev.vip/media-image/business/asset/a1/main'
+    const wrapper = await editor({
+      isDefault: true,
+      layout: {
+        background: { url: 'https://image.feedmedev.vip/business/business/ods/background/old.png' },
+        sidePanel: null
+      }
+    })
+    const picker = () => wrapper.findComponent({ name: 'MediaPickerModal' })
+    expect(picker().props()).toMatchObject({ open: false, businessId: 'business', kinds: ['image'] })
+    await wrapper
+      .findAll('button')
+      .find((button) => button.text().endsWith('.changeImage'))!
+      .trigger('click')
+    expect(picker().props('open')).toBe(true)
+    picker().vm.$emit('select', { url: media, kind: 'image' })
+    await wrapper.vm.$nextTick()
+    expect(picker().props('open')).toBe(false)
+    const saved = await confirm(wrapper)
+    expect(saved.layout?.background).toMatchObject({
+      url: media,
+      size: 'cover',
+      position: 'center'
+    })
+  })
+
+  it('shows advanced controls only when the advanced flag is enabled', async () => {
+    const wrapper = await editor()
+    expect(wrapper.text()).not.toContain('order.displaySystem.legacyOds.footerModeDescription')
+    access.isAdvancedCustomizationEnabled.value = true
+    await wrapper.vm.$nextTick()
+    expect(wrapper.text()).toContain('order.displaySystem.legacyOds.footerModeDescription')
+  })
+})