Files
geovisio-website/src/tests/unit/components/Header.spec.js
2023-05-22 15:22:29 +00:00

140 lines
3.8 KiB
JavaScript

import { vi, it, beforeEach, describe, expect } from 'vitest'
import { shallowMount } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'
import fr from '../../../locales/fr.json'
import Header from '../../../components/Header.vue'
vi.mock('vue-router')
const i18n = createI18n({
locale: 'fr',
fallbackLocale: 'fr',
globalInjection: true,
legacy: false,
messages: {
fr
}
})
describe('Template', () => {
beforeEach(async () => {
const VueRouter = await import('vue-router')
VueRouter.useRoute.mockReturnValueOnce({
path: 'my-path'
})
})
describe('When the user is not logged', () => {
it('should render the component with good wording keys', async () => {
import.meta.env.VITE_API_URL = 'api-url/'
const wrapper = shallowMount(Header, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
expect(wrapper.html()).contains('general.header.contribute_text')
expect(wrapper.html()).contains(
'general.header.contribute_text_responsive'
)
})
it('should render the component login link', async () => {
import.meta.env.VITE_API_URL = 'api-url/'
const wrapper = shallowMount(Header, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
expect(wrapper.html()).contains('path="api-url/api/auth/login')
})
})
describe('When the user is logged', () => {
beforeEach(async () => {
Object.defineProperty(document, 'cookie', {
value: 'user_id=abc123'
})
vi.resetModules()
import.meta.env.VITE_API_URL = 'api-url/'
})
it('should render the component with good wording keys', async () => {
const wrapper = shallowMount(Header, {
props: {
authEnabled: true,
userProfileUrl: 'profil'
},
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
expect(wrapper.html()).contains('general.header.contribute_text')
expect(wrapper.html()).contains(
'general.header.contribute_text_responsive'
)
expect(wrapper.html()).contains('general.header.account_text')
expect(wrapper.html()).contains('general.header.logout_text')
})
it('should render the component logout link', async () => {
const wrapper = shallowMount(Header, {
props: {
authEnabled: true,
userProfileUrl: 'profil'
},
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
expect(wrapper.html()).contains('chevron bi bi-chevron-up')
expect(wrapper.html()).contains('auth/logout')
expect(wrapper.html()).contains('path="mon-compte"')
})
})
})
describe('Methods', () => {
describe('toggleMenu', () => {
let wrapper
beforeEach(async () => {
const VueRouter = await import('vue-router')
VueRouter.useRoute.mockReturnValueOnce({
path: 'my-path'
})
})
it('Menu should be closed by default', () => {
wrapper = shallowMount(Header, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
expect(wrapper.vm.menuIsClosed).toBe(true)
})
it('Should be open and close by clicking', async () => {
wrapper = shallowMount(Header, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
await wrapper.find('.menu-burger').trigger('click')
expect(wrapper.vm.menuIsClosed).toBe(false)
await wrapper.find('.menu-burger').trigger('click')
expect(wrapper.vm.menuIsClosed).toBe(true)
})
})
})