import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import { setActivePinia, createPinia } from 'pinia'
import AppHeader from '@/components/AppHeader.vue'
import { useAuthStore } from '@/stores/authStore'
function createTestRouter() {
return createRouter({
history: createMemoryHistory(),
routes: [
{ path: '/', name: 'home', component: { template: '
Home
' } },
{
path: '/logga-in',
name: 'login',
component: { template: 'Login
' },
},
{
path: '/registrera',
name: 'register',
component: { template: 'Register
' },
},
{
path: '/orders',
name: 'orders',
component: { template: 'Orders
' },
},
{
path: '/admin',
name: 'admin',
component: { template: 'Admin
' },
},
],
})
}
function makeJwt(payload: Record): string {
const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }))
const body = btoa(JSON.stringify(payload))
const signature = 'test-sig'
return `${header}.${body}.${signature}`
}
describe('AppHeader', () => {
beforeEach(() => {
setActivePinia(createPinia())
localStorage.clear()
})
it('renders the logo text', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
expect(wrapper.text()).toContain('Bilhej')
})
it('has a link to home', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
const links = wrapper.findAll('a')
const homeLink = links.find((a) => a.attributes('href') === '/')
expect(homeLink).toBeTruthy()
})
describe('when not authenticated', () => {
it('shows login link', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
const links = wrapper.findAll('a')
const loginLink = links.find((a) => a.attributes('href') === '/logga-in')
expect(loginLink).toBeTruthy()
expect(loginLink?.text()).toBe('Logga in')
})
it('shows register link', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
const links = wrapper.findAll('a')
const registerLink = links.find(
(a) => a.attributes('href') === '/registrera',
)
expect(registerLink).toBeTruthy()
expect(registerLink?.text()).toBe('Registrera')
})
it('does not show logout button', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
expect(wrapper.find('button').exists()).toBe(false)
})
it('does not show user email', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
expect(wrapper.text()).not.toContain('@bilhalsning.se')
})
it('does not show orders link', () => {
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, createPinia()] },
})
const links = wrapper.findAll('a')
const ordersLink = links.find((a) => a.attributes('href') === '/orders')
expect(ordersLink).toBeUndefined()
})
})
describe('when authenticated', () => {
function mountAuthenticated(role = 'user') {
const jwt = makeJwt({ sub: 'test@bilhej.se', role })
localStorage.setItem('auth_token', jwt)
const pinia = createPinia()
setActivePinia(pinia)
const router = createTestRouter()
const wrapper = mount(AppHeader, {
global: { plugins: [router, pinia] },
})
return { wrapper, router }
}
it('shows user email', () => {
const { wrapper } = mountAuthenticated()
expect(wrapper.text()).toContain('test@bilhej.se')
})
it('shows logout button', () => {
const { wrapper } = mountAuthenticated()
const logoutButton = wrapper.find('button')
expect(logoutButton.exists()).toBe(true)
expect(logoutButton.text()).toBe('Logga ut')
})
it('does not show login link', () => {
const { wrapper } = mountAuthenticated()
const links = wrapper.findAll('a')
const loginLink = links.find((a) => a.attributes('href') === '/logga-in')
expect(loginLink).toBeUndefined()
})
it('does not show register link', () => {
const { wrapper } = mountAuthenticated()
const links = wrapper.findAll('a')
const registerLink = links.find(
(a) => a.attributes('href') === '/registrera',
)
expect(registerLink).toBeUndefined()
})
it('shows orders link', () => {
const { wrapper } = mountAuthenticated()
const links = wrapper.findAll('a')
const ordersLink = links.find((a) => a.attributes('href') === '/orders')
expect(ordersLink).toBeTruthy()
expect(ordersLink?.text()).toBe('Mina beställningar')
})
it('does not show admin link for regular user', () => {
const { wrapper } = mountAuthenticated('user')
const links = wrapper.findAll('a')
const adminLink = links.find((a) => a.attributes('href') === '/admin')
expect(adminLink).toBeUndefined()
})
it('shows admin link for admin user', () => {
const { wrapper } = mountAuthenticated('admin')
const links = wrapper.findAll('a')
const adminLink = links.find((a) => a.attributes('href') === '/admin')
expect(adminLink).toBeTruthy()
expect(adminLink?.text()).toBe('Admin')
})
it('calls logout and redirects to home when clicking logout button', async () => {
const { wrapper, router } = mountAuthenticated()
const auth = useAuthStore()
expect(auth.isAuthenticated).toBe(true)
await router.push('/orders')
await router.isReady()
const navigationDone = new Promise((resolve) => {
const remove = router.afterEach(() => {
remove()
resolve()
})
})
await wrapper.find('button').trigger('click')
await navigationDone
expect(auth.isAuthenticated).toBe(false)
expect(router.currentRoute.value.path).toBe('/')
})
})
})