Joakim Mörling
df539f7cb7
- 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
112 lines
3.4 KiB
TypeScript
112 lines
3.4 KiB
TypeScript
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(),
|
|
routes: [
|
|
{ path: '/', name: 'home', component: HomePage },
|
|
{ path: '/compose', name: 'compose', component: ComposePage },
|
|
],
|
|
})
|
|
}
|
|
|
|
function mountHome(router: ReturnType<typeof createTestRouter>) {
|
|
return mount(HomePage, {
|
|
global: { plugins: [router] },
|
|
})
|
|
}
|
|
|
|
describe('HomePage', () => {
|
|
it('renders headline', () => {
|
|
const router = createTestRouter()
|
|
const wrapper = mountHome(router)
|
|
expect(wrapper.text()).toContain('Skicka ett brev')
|
|
})
|
|
|
|
it('does not show CTA button initially', () => {
|
|
const router = createTestRouter()
|
|
const wrapper = mountHome(router)
|
|
expect(wrapper.find('.btn--primary').exists()).toBe(false)
|
|
})
|
|
|
|
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' })
|
|
|
|
await plateInput.vm.$emit('lookup', 'ABC123')
|
|
await wrapper.vm.$nextTick()
|
|
|
|
expect(wrapper.find('.btn--primary').exists()).toBe(false)
|
|
})
|
|
|
|
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, 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, 100))
|
|
|
|
const cta = wrapper.find('.btn--primary')
|
|
expect(cta.exists()).toBe(true)
|
|
expect(cta.text()).toBe('Fortsätt till brevet')
|
|
})
|
|
|
|
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, 100))
|
|
|
|
const cta = wrapper.find('.btn--primary')
|
|
const href = cta.attributes('href')
|
|
expect(href).toBe('/compose?plate=ABC123')
|
|
})
|
|
})
|