import { flushPromises, mount } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import OrderReferenceText from './OrderReferenceText.vue'

describe('OrderReferenceText', () => {
  it.each([
    ['desktop-1920', '170px'],
    ['narrow', '88px'],
  ])('keeps the complete server order number in %s layouts', (_viewport, width) => {
    const orderNo = 'LEGACY-LAST-MILE-ORDER-202608270000000001'
    const wrapper = mount({
      components: { OrderReferenceText },
      template: `<div style="width:${width}"><OrderReferenceText value="${orderNo}" /></div>`,
    })

    const reference = wrapper.get('.order-reference-text')
    expect(reference.text()).toBe(orderNo)
    expect(reference.attributes('title')).toBe(orderNo)
  })

  it('renders the new short number in full and does not guess from another identifier', () => {
    const wrapper = mount(OrderReferenceText, { props: { value: 'LMO-260827-0001' } })
    expect(wrapper.text()).toBe('LMO-260827-0001')
    expect(wrapper.attributes('title')).toBe('LMO-260827-0001')
  })

  it('copies the exact server short number without frontend formatting', async () => {
    const writeText = vi.fn().mockResolvedValue(undefined)
    vi.stubGlobal('navigator', { clipboard: { writeText } })
    const wrapper = mount(OrderReferenceText, { props: { value: 'LMO-9A7', copyable: true } })
    await wrapper.get('el-button').trigger('click')
    await flushPromises()
    expect(writeText).toHaveBeenCalledWith('LMO-9A7')
    expect(wrapper.attributes('title')).toBe('LMO-9A7')
    vi.unstubAllGlobals()
  })
})