import { mount } from '@vue/test-utils'
import { describe, expect, it } 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')
  })
})