From df539f7cb763a56e36a43ddb3ad4d01ce522acc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20M=C3=B6rling?= <jcamorling@gmail.com>
Date: Tue, 19 May 2026 15:16:52 +0200
Subject: [PATCH] test: update unit tests for real vehicle API and fuel field

- HomePage.spec.ts: replace setTimeout fake data with mocked lookupVehicle()
  API call, mock resolved/rejected/pending states, add fuel to mock responses
- VehicleInfo.spec.ts: add fuel field to mockVehicle data,
  update assertion to include Bensin in rendered text
---
 frontend/src/__tests__/HomePage.spec.ts    | 35 +++++++++++++++++++---
 frontend/src/__tests__/VehicleInfo.spec.ts |  4 ++-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/frontend/src/__tests__/HomePage.spec.ts b/frontend/src/__tests__/HomePage.spec.ts
index 2c3feb7..4ba77df 100644
--- a/frontend/src/__tests__/HomePage.spec.ts
+++ b/frontend/src/__tests__/HomePage.spec.ts
@@ -1,9 +1,16 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createMemoryHistory } from 'vue-router'
 import HomePage from '@/pages/HomePage.vue'
 import ComposePage from '@/pages/ComposePage.vue'
 
+vi.mock('@/api/vehicles', () => ({
+  lookupVehicle: vi.fn(),
+}))
+
+import { lookupVehicle } from '@/api/vehicles'
+const mockLookupVehicle = vi.mocked(lookupVehicle)
+
 function createTestRouter() {
   return createRouter({
     history: createMemoryHistory(),
@@ -34,6 +41,8 @@ describe('HomePage', () => {
   })
 
   it('does not show CTA while loading', async () => {
+    mockLookupVehicle.mockImplementation(() => new Promise(() => {}))
+
     const router = createTestRouter()
     const wrapper = mountHome(router)
     const plateInput = wrapper.findComponent({ name: 'PlateInput' })
@@ -45,24 +54,34 @@ describe('HomePage', () => {
   })
 
   it('does not show CTA after not-found', async () => {
+    mockLookupVehicle.mockRejectedValue(new Error('Inget fordon hittades'))
+
     const router = createTestRouter()
     const wrapper = mountHome(router)
     const plateInput = wrapper.findComponent({ name: 'PlateInput' })
 
     await plateInput.vm.$emit('lookup', 'UNKNOWN')
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     expect(wrapper.find('.btn--primary').exists()).toBe(false)
   })
 
   it('shows CTA button when vehicle data present', async () => {
+    mockLookupVehicle.mockResolvedValue({
+      make: 'Volvo',
+      model: 'V70',
+      year: 2009,
+      color: 'Silver',
+      fuel: 'Bensin',
+    })
+
     const router = createTestRouter()
     const wrapper = mountHome(router)
     const plateInput = wrapper.findComponent({ name: 'PlateInput' })
 
     await plateInput.vm.$emit('update:modelValue', 'ABC123')
     await plateInput.vm.$emit('lookup', 'ABC123')
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     const cta = wrapper.find('.btn--primary')
     expect(cta.exists()).toBe(true)
@@ -70,13 +89,21 @@ describe('HomePage', () => {
   })
 
   it('CTA links to compose page with plate query param', async () => {
+    mockLookupVehicle.mockResolvedValue({
+      make: 'Volvo',
+      model: 'V70',
+      year: 2009,
+      color: 'Silver',
+      fuel: 'Bensin',
+    })
+
     const router = createTestRouter()
     const wrapper = mountHome(router)
     const plateInput = wrapper.findComponent({ name: 'PlateInput' })
 
     await plateInput.vm.$emit('update:modelValue', 'ABC123')
     await plateInput.vm.$emit('lookup', 'ABC123')
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    await new Promise((resolve) => setTimeout(resolve, 100))
 
     const cta = wrapper.find('.btn--primary')
     const href = cta.attributes('href')
diff --git a/frontend/src/__tests__/VehicleInfo.spec.ts b/frontend/src/__tests__/VehicleInfo.spec.ts
index 467c8a5..d750238 100644
--- a/frontend/src/__tests__/VehicleInfo.spec.ts
+++ b/frontend/src/__tests__/VehicleInfo.spec.ts
@@ -8,6 +8,7 @@ const mockVehicle: VehicleData = {
   model: 'V70',
   year: 2009,
   color: 'Silver',
+  fuel: 'Bensin',
 }
 
 function createWrapper(props: Record<string, unknown> = {}) {
@@ -28,12 +29,13 @@ describe('VehicleInfo', () => {
     expect(wrapper.text()).toContain('Söker...')
   })
 
-  it('shows vehicle card with make, model, year, and color', () => {
+  it('shows vehicle card with make, model, year, color, and fuel', () => {
     const wrapper = createWrapper({ vehicle: mockVehicle })
     expect(wrapper.text()).toContain('Volvo')
     expect(wrapper.text()).toContain('V70')
     expect(wrapper.text()).toContain('2009')
     expect(wrapper.text()).toContain('Silver')
+    expect(wrapper.text()).toContain('Bensin')
   })
 
   it('shows not-found message when notFound is true', () => {