Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TECH] Ajouter des tests sur le language switcher #442

Merged
merged 1 commit into from
Dec 22, 2022
Merged

[TECH] Ajouter des tests sur le language switcher #442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 90 additions & 53 deletions tests/components/LanguageSwitcher.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,103 @@
import { shallowMount } from '@vue/test-utils'
import { shallowMount, mount } from '@vue/test-utils'
import LanguageSwitcher from '~/components/LanguageSwitcher/LanguageSwitcher'
import LanguageSwitcherSubMenu from '~/components/LanguageSwitcher/LanguageSwitcherSubMenu.vue'

describe('Component: LanguageSwitcher', () => {
it('should render the language switcher if site is pix-pro.fr', () => {
// given
const $t = () => {}
const $i18n = { locale: 'fr-fr' }

// when
const wrapper = shallowMount(LanguageSwitcher, {
stubs: {
LanguageSwitcherSubMenu: true,
fa: true,
},
propsData: {
type: 'with-dropdown',
},
data: LanguageSwitcher.data,
computed: LanguageSwitcher.computed,
mocks: { $t, $i18n },
let oldDomainFr
let oldDomainOrg

beforeEach(() => {
oldDomainFr = process.env.DOMAIN_FR
oldDomainOrg = process.env.DOMAIN_ORG
process.env.DOMAIN_FR = 'example.fr'
process.env.DOMAIN_ORG = 'example.org'
})

afterEach(() => {
process.env.DOMAIN_FR = oldDomainFr
process.env.DOMAIN_ORG = oldDomainOrg
})

describe('when site is pix-pro', () => {
let oldSite
beforeEach(() => {
oldSite = process.env.SITE
process.env.SITE = 'pix-pro'
})

// then
expect(wrapper.find('.language-switcher__button').exists()).toBe(true)
afterEach(() => {
process.env.SITE = oldSite
})

it('should render the language switcher', () => {
// given
const $t = () => {}
const $i18n = { locale: 'fr-fr' }

// when
const wrapper = shallowMount(LanguageSwitcher, {
stubs: {
LanguageSwitcherSubMenu: true,
fa: true,
},
propsData: {
type: 'with-dropdown',
},
data: LanguageSwitcher.data,
computed: LanguageSwitcher.computed,
mocks: { $t, $i18n },
})

// then
expect(wrapper.find('.language-switcher__button').exists()).toBe(true)
})

it('should render the language switcher correctly for pix-pro', async () => {
// given
const $t = () => {}
const $i18n = { locale: 'fr-fr' }

// when
const wrapper = mount(LanguageSwitcher, {
Copy link
Member

@yannbertrand yannbertrand Dec 22, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question : pourquoi passer sur le mount plutôt que shallowMount ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mount permet d'avoir le dom des composants enfants, ce que ne fait pas shallowMount

components: { LanguageSwitcherSubMenu },
mocks: { $t, $i18n },
stubs: { fa: true },
})
await wrapper.find('button').trigger('click')
await wrapper.find('.language-switcher-sub-menu-button').trigger('click')

// then
expect(wrapper.element).toMatchSnapshot()
})
})

it('should render the language switcher if site is pix-pro.org', async () => {
// given
const $t = () => {}
const $i18n = { locale: 'fr' }

const LanguageSwitcherSubMenuStub = {
name: 'language-switcher-burger-menu',
template: '<div class="language-switcher__dropdown-menu child"/>',
}

const wrapper = shallowMount(LanguageSwitcher, {
stubs: {
LanguageSwitcherSubMenu: LanguageSwitcherSubMenuStub,
fa: true,
},
propsData: {
type: 'with-dropdown',
},
data: LanguageSwitcher.data,
computed: LanguageSwitcher.computed,
mocks: { $t, $i18n },
describe('when site is pix-site', () => {
let oldSite
beforeEach(() => {
oldSite = process.env.SITE
process.env.SITE = 'pix-site'
})

afterEach(() => {
process.env.SITE = oldSite
})

const languageSwitcher = wrapper.find('.language-switcher__button')
it('should render the language switcher correctly for pix-site', async () => {
// given
const $t = () => {}
const $i18n = { locale: 'fr-fr' }

// when
await languageSwitcher.trigger('click')
const languageChildrenSubMenuButton = wrapper.find(
'.language-switcher-sub-menu-button'
)
await languageChildrenSubMenuButton.trigger('click')
const languageChildrenSubMenu = wrapper.find(
'.language-switcher__dropdown-menu.child'
)
// when
const wrapper = mount(LanguageSwitcher, {
components: { LanguageSwitcherSubMenu },
mocks: { $t, $i18n },
stubs: { fa: true },
})
await wrapper.find('button').trigger('click')
await wrapper.find('.language-switcher-sub-menu-button').trigger('click')

// then
expect(languageChildrenSubMenu.exists()).toBe(true)
// then
expect(wrapper.element).toMatchSnapshot()
})
})
})
Loading