bilhej/frontend/src/__tests__/OrdersPage.spec.ts

import { describe, it, expect, beforeEach, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import { createPinia } from 'pinia'
import OrdersPage from '@/pages/OrdersPage.vue'

function mockFetchResponse(status: number, body: unknown) {
  return Promise.resolve({
    ok: status >= 200 && status < 300,
    status,
    json: () => Promise.resolve(body),
  })
}

function createTestRouter() {
  return createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/orders', name: 'orders', component: OrdersPage },
      { path: '/', name: 'home', component: { template: '<div>Home</div>' } },
    ],
  })
}

function mountPage() {
  const router = createTestRouter()
  const pinia = createPinia()
  router.push('/orders')
  return {
    router,
    wrapper: mount(OrdersPage, {
      global: { plugins: [router, pinia] },
    }),
  }
}

const mockOrders = [
  {
    id: 'c1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11',
    plate: 'ABC123',
    status: 'sent',
    trackingId: 'PN123456789',
    createdAt: '2026-05-11T12:00:00Z',
  },
  {
    id: 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
    plate: 'DEF456',
    status: 'pending_payment',
    trackingId: null,
    createdAt: '2026-05-14T13:00:00Z',
  },
]

describe('OrdersPage', () => {
  beforeEach(() => {
    localStorage.clear()
    globalThis.fetch = vi.fn()
    vi.mocked(globalThis.fetch).mockResolvedValue(
      mockFetchResponse(200, mockOrders),
    )
  })

  it('renders heading and subtitle', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('Mina beställningar')
    expect(wrapper.text()).toContain(
      'Här kan du se dina tidigare beställningar',
    )
  })

  it('shows loading state initially', async () => {
    globalThis.fetch = vi.fn().mockImplementation(() => new Promise(() => {}))
    const { wrapper } = mountPage()
    expect(wrapper.text()).toContain('Laddar beställningar...')
  })

  it('fetches orders from API on mount', async () => {
    mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(globalThis.fetch).toHaveBeenCalledWith(
      '/api/orders',
      expect.objectContaining({ headers: expect.any(Object) }),
    )
  })

  it('renders order cards with plate numbers', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('ABC123')
    expect(wrapper.text()).toContain('DEF456')
  })

  it('renders Swedish status labels', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('Skickat')
    expect(wrapper.text()).toContain('Väntar på betalning')
  })

  it('renders tracking link when trackingId exists', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    const link = wrapper.find('a[href*="postnord"]')
    expect(link.exists()).toBe(true)
    expect(link.text()).toContain('PN123456789')
    expect(link.attributes('target')).toBe('_blank')
  })

  it('does not render tracking link when trackingId is null', async () => {
    const ordersWithoutTracking = [
      {
        id: 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
        plate: 'DEF456',
        status: 'pending_payment',
        trackingId: null,
        createdAt: '2026-05-14T13:00:00Z',
      },
    ]
    vi.mocked(globalThis.fetch).mockResolvedValue(
      mockFetchResponse(200, ordersWithoutTracking),
    )
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    const link = wrapper.find('a[href*="postnord"]')
    expect(link.exists()).toBe(false)
  })

  it('renders formatted date', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('2026')
  })

  it('shows empty state when no orders', async () => {
    vi.mocked(globalThis.fetch).mockResolvedValue(mockFetchResponse(200, []))
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('Inga beställningar ännu')
  })

  it('shows error state on API failure', async () => {
    vi.mocked(globalThis.fetch).mockResolvedValue(
      mockFetchResponse(500, { message: 'Internal server error' }),
    )
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('Kunde inte hämta beställningar')
  })

  it('applies correct badge class for status', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    const badges = wrapper.findAll('.badge')
    expect(badges[0].classes()).toContain('badge--success')
    expect(badges[1].classes()).toContain('badge--muted')
  })
})