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')
	})
})