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
This commit is contained in:
Joakim Mörling 2026-05-19 15:16:52 +02:00
parent be7775f680
commit df539f7cb7
2 changed files with 34 additions and 5 deletions

View file

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

View file

@ -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', () => {