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 { 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')
|
||||||
|
|
|
||||||
|
|
@ -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', () => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue