70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { mount, flushPromises } from '@vue/test-utils'
|
|
import { createRouter, createWebHistory } from 'vue-router'
|
|
import ErrorView from '../ErrorView.vue'
|
|
|
|
function makeRouter() {
|
|
return createRouter({
|
|
history: createWebHistory(),
|
|
routes: [
|
|
{ path: '/', component: { template: '<div />' } },
|
|
{ path: '/home', component: { template: '<div />' } },
|
|
{ path: '/article', component: { template: '<div />' } },
|
|
],
|
|
})
|
|
}
|
|
|
|
async function mountNotFound(breadcrumb?: string) {
|
|
const router = makeRouter()
|
|
await router.push('/')
|
|
return mount(ErrorView, {
|
|
props: breadcrumb
|
|
? { kind: 'not-found', breadcrumb }
|
|
: { kind: 'not-found' },
|
|
global: {
|
|
plugins: [router],
|
|
},
|
|
})
|
|
}
|
|
|
|
describe('ErrorView not-found kind', () => {
|
|
it('renders the not-found copy with a breadcrumb, primary and secondary actions', async () => {
|
|
const wrapper = await mountNotFound('Not found')
|
|
|
|
expect(wrapper.find('nav[aria-label="Breadcrumb"]').text()).toBe(
|
|
'Not found',
|
|
)
|
|
expect(wrapper.find('h1').text()).toBe('Page not found')
|
|
expect(wrapper.text()).toContain(
|
|
'The link may be mistyped, or the page may have moved.',
|
|
)
|
|
|
|
const buttons = wrapper.findAll('button')
|
|
expect(buttons.some((button) => button.text() === 'Go to Home')).toBe(
|
|
true,
|
|
)
|
|
expect(buttons.some((button) => button.text() === 'All articles')).toBe(
|
|
true,
|
|
)
|
|
})
|
|
|
|
it('routes the primary action to /home and the secondary action to /article', async () => {
|
|
const wrapper = await mountNotFound()
|
|
const router = wrapper.vm.$router
|
|
|
|
const primary = wrapper
|
|
.findAll('button')
|
|
.find((button) => button.text() === 'Go to Home')
|
|
await primary?.trigger('click')
|
|
await flushPromises()
|
|
expect(router.currentRoute.value.path).toBe('/home')
|
|
|
|
const secondary = wrapper
|
|
.findAll('button')
|
|
.find((button) => button.text() === 'All articles')
|
|
await secondary?.trigger('click')
|
|
await flushPromises()
|
|
expect(router.currentRoute.value.path).toBe('/article')
|
|
})
|
|
})
|