bilhej/frontend/src/__tests__/AdminDashboard.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 AdminPage from '@/pages/AdminPage.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: '/admin', name: 'admin', component: AdminPage },
      { path: '/', name: 'home', component: { template: '<div>Home</div>' } },
    ],
  })
}

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

const mockOrders = [
  {
    id: 'c1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11',
    email: 'test@bilhej.se',
    plate: 'ABC123',
    letterText: 'Hej fin bil!',
    status: 'sent',
    trackingId: 'PN123456789',
    amountPaid: 49.0,
    shippedAt: '2026-05-13T12:00:00Z',
    adminNotes: null,
    createdAt: '2026-05-11T12:00:00Z',
    allowedStatuses: ['sent', 'delivered', 'failed'],
    canRegisterShipment: true,
  },
  {
    id: 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
    email: 'user@example.com',
    plate: 'XYZ789',
    letterText: 'Vill köpa din bil.',
    status: 'processing',
    trackingId: null,
    amountPaid: null,
    shippedAt: null,
    adminNotes: null,
    createdAt: '2026-05-14T13:00:00Z',
    allowedStatuses: ['processing', 'failed'],
    canRegisterShipment: true,
  },
  {
    id: 'c3eebc99-9c0b-4ef8-bb6d-6bb9bd380a13',
    email: 'pending@example.com',
    plate: 'PND111',
    letterText: 'Väntar på betalning.',
    status: 'pending_payment',
    trackingId: null,
    amountPaid: null,
    shippedAt: null,
    adminNotes: null,
    createdAt: '2026-05-15T14:00:00Z',
    allowedStatuses: ['pending_payment', 'failed'],
    canRegisterShipment: false,
  },
]

function freshMockOrders() {
  return mockOrders.map((order) => ({ ...order }))
}

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

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

  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/admin/orders',
      expect.objectContaining({ headers: expect.any(Object) }),
    )
  })

  it('renders table with all columns', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('Datum')
    expect(wrapper.text()).toContain('ID')
    expect(wrapper.text()).toContain('E-post')
    expect(wrapper.text()).toContain('Regnr')
    expect(wrapper.text()).toContain('Brev')
    expect(wrapper.text()).toContain('Status')
  })

  it('renders order data in rows', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.text()).toContain('test@bilhej.se')
    expect(wrapper.text()).toContain('ABC123')
    expect(wrapper.text()).toContain('user@example.com')
    expect(wrapper.text()).toContain('XYZ789')
  })

  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('opens message modal with full letter text', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const messageBtns = wrapper.findAll('.admin__message-btn')
    await messageBtns[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.find('.admin-modal').exists()).toBe(true)
    expect(wrapper.find('.admin-modal__body').text()).toBe('Hej fin bil!')
    expect(wrapper.text()).toContain('ABC123')
    expect(wrapper.text()).toContain('c1eebc99')
  })

  it('closes message modal on close button click', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    await wrapper.findAll('.admin__message-btn')[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))
    await wrapper.find('.admin-modal__close').trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.find('.admin-modal').exists()).toBe(false)
  })

  it('collapses row on second button click', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.find('.admin__expanded-row').exists()).toBe(true)

    await expandBtns[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.find('.admin__expanded-row').exists()).toBe(false)
  })

  it('only expands one row at a time', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.findAll('.admin__expanded-row')).toHaveLength(1)

    await expandBtns[1].trigger('click')
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.findAll('.admin__expanded-row')).toHaveLength(1)
    expect(wrapper.find('.admin__tracking-row').exists()).toBe(true)
  })

  it('renders status dropdowns', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const selects = wrapper.findAll('.admin__status-select')
    expect(selects.length).toBe(3)
  })

  it('fires status update API on dropdown change', async () => {
    vi.mocked(globalThis.fetch)
      .mockResolvedValueOnce(mockFetchResponse(200, freshMockOrders()))
      .mockResolvedValueOnce(
        mockFetchResponse(200, { ...mockOrders[0], status: 'delivered' }),
      )

    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const selects = wrapper.findAll('.admin__status-select')
    await selects[0].setValue('delivered')
    await selects[0].trigger('change')
    await new Promise((r) => setTimeout(r, 50))

    expect(globalThis.fetch).toHaveBeenCalledWith(
      '/api/admin/orders/c1eebc99-9c0b-4ef8-bb6d-6bb9bd380a11/status',
      expect.objectContaining({
        method: 'PATCH',
        body: '{"status":"delivered"}',
      }),
    )
  })

  it('shows status error on failed update', async () => {
    vi.mocked(globalThis.fetch)
      .mockResolvedValueOnce(mockFetchResponse(200, freshMockOrders()))
      .mockResolvedValueOnce(
        mockFetchResponse(500, { message: 'Server error' }),
      )

    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const selects = wrapper.findAll('.admin__status-select')
    await selects[0].setValue('delivered')
    await selects[0].trigger('change')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('Server error')
  })

  it('formats dates in Swedish locale', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('2026')
  })

  it('shows tracking input in expanded row', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.find('.admin__tracking-row').exists()).toBe(true)
    expect(wrapper.find('.admin__tracking-input').exists()).toBe(true)
    expect(wrapper.find('.btn--primary').exists()).toBe(true)
  })

  it('shows tracking link when trackingId is set', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[0].trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    const link = wrapper.find('.admin__tracking-link')
    expect(link.exists()).toBe(true)
    expect(link.attributes('href')).toContain('postnord')
    expect(link.attributes('target')).toBe('_blank')
  })

  it('hides tracking link when trackingId is null', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[1].trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    const link = wrapper.find('.admin__tracking-link')
    expect(link.exists()).toBe(false)
  })

  it('fires register-shipment API on register button click', async () => {
    vi.mocked(globalThis.fetch)
      .mockResolvedValueOnce(mockFetchResponse(200, freshMockOrders()))
      .mockResolvedValueOnce(
        mockFetchResponse(200, {
          ...mockOrders[1],
          status: 'sent',
          trackingId: 'PN999',
        }),
      )

    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[1].trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    await wrapper.find('.admin__tracking-input').setValue('PN999')
    const registerBtn = wrapper
      .findAll('button')
      .find((btn) => btn.text() === 'Registrera utskick')
    expect(registerBtn).toBeDefined()
    await registerBtn!.trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    expect(globalThis.fetch).toHaveBeenCalledWith(
      '/api/admin/orders/c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12/register-shipment',
      expect.objectContaining({
        method: 'PATCH',
        body: JSON.stringify({
          trackingInput: 'PN999',
          notifyCustomer: true,
        }),
      }),
    )
  })

  it('shows tracking error on failed save', async () => {
    vi.mocked(globalThis.fetch)
      .mockResolvedValueOnce(mockFetchResponse(200, freshMockOrders()))
      .mockResolvedValueOnce(
        mockFetchResponse(500, { message: 'Server error' }),
      )

    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const expandBtns = wrapper.findAll('.admin__row')
    await expandBtns[1].trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    await wrapper.find('.admin__tracking-input').setValue('PN999')
    const registerBtn = wrapper
      .findAll('button')
      .find((btn) => btn.text() === 'Registrera utskick')
    await registerBtn!.trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('Kunde inte registrera utskick')
  })

  it('shows Att göra stat for processing orders', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('Att göra')
  })

  it('shows visa meddelande button in each row', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))
    expect(wrapper.findAll('.admin__message-btn')).toHaveLength(3)
    expect(wrapper.text()).toContain('Visa meddelande')
  })

  it('filters orders when Väntar tab is clicked', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const stats = wrapper.findAll('.admin__stat')
    const waitingTab = stats.find((stat) => stat.text().includes('Väntar'))
    expect(waitingTab).toBeDefined()
    await waitingTab!.trigger('click')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('pending@example.com')
    expect(wrapper.text()).not.toContain('test@bilhej.se')
    expect(wrapper.text()).not.toContain('user@example.com')
  })

  it('filters orders by partial order id search', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    await wrapper.find('#admin-order-search').setValue('c2eebc99')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('user@example.com')
    expect(wrapper.text()).not.toContain('test@bilhej.se')
    expect(wrapper.text()).not.toContain('pending@example.com')
  })

  it('filters orders by registration number search', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    await wrapper.find('#admin-order-search').setValue('abc123')
    await new Promise((r) => setTimeout(r, 50))

    expect(wrapper.text()).toContain('test@bilhej.se')
    expect(wrapper.text()).not.toContain('user@example.com')
    expect(wrapper.text()).not.toContain('pending@example.com')
  })

  it('shows shortened order id with full id in title', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const orderIdCell = wrapper.find('.admin__order-id')
    expect(orderIdCell.text()).toBe('c1eebc99')
    expect(orderIdCell.attributes('title')).toBe(mockOrders[0].id)
  })

  it('highlights processing rows', async () => {
    const { wrapper } = mountPage()
    await new Promise((r) => setTimeout(r, 50))

    const rows = wrapper.findAll('.admin__row')
    const processingRow = rows.find(
      (row) =>
        row.text().includes('XYZ789') && row.classes().includes('admin__row'),
    )
    expect(processingRow?.classes()).toContain('admin__row--todo')
  })
})