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') }) })