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 { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router' import { createRouter, createMemoryHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue' import HomePage from '@/pages/HomePage.vue'
import ComposePage from '@/pages/ComposePage.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() { function createTestRouter() {
return createRouter({ return createRouter({
history: createMemoryHistory(), history: createMemoryHistory(),
@ -34,6 +41,8 @@ describe('HomePage', () => {
}) })
it('does not show CTA while loading', async () => { it('does not show CTA while loading', async () => {
mockLookupVehicle.mockImplementation(() => new Promise(() => {}))
const router = createTestRouter() const router = createTestRouter()
const wrapper = mountHome(router) const wrapper = mountHome(router)
const plateInput = wrapper.findComponent({ name: 'PlateInput' }) const plateInput = wrapper.findComponent({ name: 'PlateInput' })
@ -45,24 +54,34 @@ describe('HomePage', () => {
}) })
it('does not show CTA after not-found', async () => { it('does not show CTA after not-found', async () => {
mockLookupVehicle.mockRejectedValue(new Error('Inget fordon hittades'))
const router = createTestRouter() const router = createTestRouter()
const wrapper = mountHome(router) const wrapper = mountHome(router)
const plateInput = wrapper.findComponent({ name: 'PlateInput' }) const plateInput = wrapper.findComponent({ name: 'PlateInput' })
await plateInput.vm.$emit('lookup', 'UNKNOWN') 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) expect(wrapper.find('.btn--primary').exists()).toBe(false)
}) })
it('shows CTA button when vehicle data present', async () => { 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 router = createTestRouter()
const wrapper = mountHome(router) const wrapper = mountHome(router)
const plateInput = wrapper.findComponent({ name: 'PlateInput' }) const plateInput = wrapper.findComponent({ name: 'PlateInput' })
await plateInput.vm.$emit('update:modelValue', 'ABC123') await plateInput.vm.$emit('update:modelValue', 'ABC123')
await plateInput.vm.$emit('lookup', '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 cta = wrapper.find('.btn--primary')
expect(cta.exists()).toBe(true) expect(cta.exists()).toBe(true)
@ -70,13 +89,21 @@ describe('HomePage', () => {
}) })
it('CTA links to compose page with plate query param', async () => { 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 router = createTestRouter()
const wrapper = mountHome(router) const wrapper = mountHome(router)
const plateInput = wrapper.findComponent({ name: 'PlateInput' }) const plateInput = wrapper.findComponent({ name: 'PlateInput' })
await plateInput.vm.$emit('update:modelValue', 'ABC123') await plateInput.vm.$emit('update:modelValue', 'ABC123')
await plateInput.vm.$emit('lookup', '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 cta = wrapper.find('.btn--primary')
const href = cta.attributes('href') const href = cta.attributes('href')

View file

@ -8,6 +8,7 @@ const mockVehicle: VehicleData = {
model: 'V70', model: 'V70',
year: 2009, year: 2009,
color: 'Silver', color: 'Silver',
fuel: 'Bensin',
} }
function createWrapper(props: Record<string, unknown> = {}) { function createWrapper(props: Record<string, unknown> = {}) {
@ -28,12 +29,13 @@ describe('VehicleInfo', () => {
expect(wrapper.text()).toContain('Söker...') 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 }) const wrapper = createWrapper({ vehicle: mockVehicle })
expect(wrapper.text()).toContain('Volvo') expect(wrapper.text()).toContain('Volvo')
expect(wrapper.text()).toContain('V70') expect(wrapper.text()).toContain('V70')
expect(wrapper.text()).toContain('2009') expect(wrapper.text()).toContain('2009')
expect(wrapper.text()).toContain('Silver') expect(wrapper.text()).toContain('Silver')
expect(wrapper.text()).toContain('Bensin')
}) })
it('shows not-found message when notFound is true', () => { it('shows not-found message when notFound is true', () => {