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: '
Home
' } },
],
})
}
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,
createdAt: '2026-05-11T12:00:00Z',
},
{
id: 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
email: 'user@example.com',
plate: 'XYZ789',
letterText: 'Vill köpa din bil.',
status: 'processing',
trackingId: null,
amountPaid: null,
createdAt: '2026-05-14T13:00:00Z',
},
{
id: 'c3eebc99-9c0b-4ef8-bb6d-6bb9bd380a13',
email: 'pending@example.com',
plate: 'PND111',
letterText: 'Väntar på betalning.',
status: 'pending_payment',
trackingId: null,
amountPaid: null,
createdAt: '2026-05-15T14:00:00Z',
},
]
describe('AdminDashboard', () => {
beforeEach(() => {
localStorage.clear()
globalThis.fetch = vi.fn()
vi.mocked(globalThis.fetch).mockResolvedValue(
mockFetchResponse(200, mockOrders),
)
})
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('Beställnings-ID')
expect(wrapper.text()).toContain('E-post')
expect(wrapper.text()).toContain('Regnr')
expect(wrapper.text()).toContain('Meddelande')
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__expand-btn')
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__expand-btn')
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, mockOrders))
.mockResolvedValueOnce(
mockFetchResponse(200, { ...mockOrders[0], status: 'paid' }),
)
const { wrapper } = mountPage()
await new Promise((r) => setTimeout(r, 50))
const selects = wrapper.findAll('.admin__status-select')
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":"sent"}',
}),
)
})
it('shows status error on failed update', async () => {
vi.mocked(globalThis.fetch)
.mockResolvedValueOnce(mockFetchResponse(200, mockOrders))
.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].trigger('change')
await new Promise((r) => setTimeout(r, 50))
expect(wrapper.text()).toContain('Kunde inte uppdatera status')
})
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__expand-btn')
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__expand-btn')
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__expand-btn')
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 PATCH on tracking save button click', async () => {
vi.mocked(globalThis.fetch).mockResolvedValueOnce(
mockFetchResponse(200, mockOrders),
)
const { wrapper } = mountPage()
await new Promise((r) => setTimeout(r, 50))
const expandBtns = wrapper.findAll('.admin__expand-btn')
await expandBtns[1].trigger('click')
await new Promise((r) => setTimeout(r, 50))
await wrapper.find('.btn--primary').trigger('click')
await new Promise((r) => setTimeout(r, 50))
expect(globalThis.fetch).toHaveBeenCalledWith(
'/api/admin/orders/c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a12',
expect.objectContaining({
method: 'PATCH',
}),
)
})
it('shows tracking error on failed save', async () => {
vi.mocked(globalThis.fetch)
.mockResolvedValueOnce(mockFetchResponse(200, mockOrders))
.mockResolvedValueOnce(
mockFetchResponse(500, { message: 'Server error' }),
)
const { wrapper } = mountPage()
await new Promise((r) => setTimeout(r, 50))
const expandBtns = wrapper.findAll('.admin__expand-btn')
await expandBtns[1].trigger('click')
await new Promise((r) => setTimeout(r, 50))
await wrapper.find('.btn--primary').trigger('click')
await new Promise((r) => setTimeout(r, 50))
expect(wrapper.text()).toContain('Kunde inte spara spårnings-ID')
})
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'))
expect(processingRow?.classes()).toContain('admin__row--todo')
})
})