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:
parent
be7775f680
commit
df539f7cb7
2 changed files with 34 additions and 5 deletions
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue