From cea6ef6988862619d43b1c058561dd0d83a82ba4 Mon Sep 17 00:00:00 2001 From: mahula Date: Mon, 5 Sep 2022 13:51:49 +0200 Subject: [PATCH] update language switch unit tests to test for all current availlable languages --- .../src/components/LanguageSwitch.spec.js | 10 +-- .../src/components/LanguageSwitch2.spec.js | 72 ++++++++++++++++--- 2 files changed, 66 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/LanguageSwitch.spec.js b/frontend/src/components/LanguageSwitch.spec.js index 13ba979d3..7f37c535a 100644 --- a/frontend/src/components/LanguageSwitch.spec.js +++ b/frontend/src/components/LanguageSwitch.spec.js @@ -45,7 +45,7 @@ describe('LanguageSwitch', () => { expect(wrapper.find('div.language-switch').exists()).toBeTruthy() }) - describe('with locales en, de and es', () => { + describe('with locales en, de, es, fr, and nl', () => { describe('empty store', () => { describe('navigator language is "en-US"', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') @@ -162,7 +162,7 @@ describe('LanguageSwitch', () => { }) describe('dropdown menu', () => { - it('has English and German as languages to choose', () => { + it('has five languages to choose from', () => { expect(wrapper.findAll('li')).toHaveLength(5) }) @@ -174,15 +174,15 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('li').at(1).text()).toBe('Deutsch') }) - it('has Español as second language to choose', () => { + it('has Español as third language to choose', () => { expect(wrapper.findAll('li').at(2).text()).toBe('Español') }) - it('has French as second language to choose', () => { + it('has French as fourth language to choose', () => { expect(wrapper.findAll('li').at(3).text()).toBe('Français') }) - it('has Nederlands as second language to choose', () => { + it('has Nederlands as fith language to choose', () => { expect(wrapper.findAll('li').at(4).text()).toBe('Nederlands') }) }) diff --git a/frontend/src/components/LanguageSwitch2.spec.js b/frontend/src/components/LanguageSwitch2.spec.js index 23550e5d3..0d2b485ec 100644 --- a/frontend/src/components/LanguageSwitch2.spec.js +++ b/frontend/src/components/LanguageSwitch2.spec.js @@ -46,10 +46,11 @@ describe('LanguageSwitch', () => { expect(wrapper.find('div.language-switch').exists()).toBe(true) }) - describe('with locales en and de', () => { + describe('with locales en, de, es, fr, and nl', () => { describe('empty store', () => { describe('navigator language is "en-US"', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows English as default navigator langauge', async () => { languageGetter.mockReturnValue('en-US') wrapper.vm.setCurrentLanguage() @@ -57,8 +58,10 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(0).text()).toBe('English') }) }) + describe('navigator language is "de-DE"', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows Deutsch as language ', async () => { languageGetter.mockReturnValue('de-DE') wrapper.vm.setCurrentLanguage() @@ -66,8 +69,10 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(1).text()).toBe('Deutsch') }) }) + describe('navigator language is "es-ES"', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows Español as language ', async () => { languageGetter.mockReturnValue('es-ES') wrapper.vm.setCurrentLanguage() @@ -75,8 +80,10 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(2).text()).toBe('Español') }) }) + describe('navigator language is "fr-FR"', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows French as language ', async () => { languageGetter.mockReturnValue('fr-FR') wrapper.vm.setCurrentLanguage() @@ -84,8 +91,10 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(3).text()).toBe('Français') }) }) + describe('navigator language is "nl-NL"', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows Nederlands as language ', async () => { languageGetter.mockReturnValue('nl-NL') wrapper.vm.setCurrentLanguage() @@ -93,8 +102,10 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(4).text()).toBe('Nederlands') }) }) + describe('navigator language is "it-IT" (not supported)', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows English as language ', async () => { languageGetter.mockReturnValue('it-IT') wrapper.vm.setCurrentLanguage() @@ -102,8 +113,10 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(0).text()).toBe('English') }) }) + describe('no navigator langauge', () => { const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows English as language ', async () => { languageGetter.mockReturnValue(null) wrapper.vm.setCurrentLanguage() @@ -112,6 +125,7 @@ describe('LanguageSwitch', () => { }) }) }) + describe('language "de" in store', () => { it('shows Deutsch as language', async () => { wrapper.vm.$store.state.language = 'de' @@ -120,6 +134,7 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(1).text()).toBe('English') }) }) + describe('language "es" in store', () => { it('shows Español as language', async () => { wrapper.vm.$store.state.language = 'es' @@ -128,6 +143,7 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(2).text()).toBe('Deutsch') }) }) + describe('language "fr" in store', () => { it('shows French as language', async () => { wrapper.vm.$store.state.language = 'fr' @@ -136,6 +152,7 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(3).text()).toBe('Español') }) }) + describe('language "nl" in store', () => { it('shows Nederlands as language', async () => { wrapper.vm.$store.state.language = 'nl' @@ -144,35 +161,68 @@ describe('LanguageSwitch', () => { expect(wrapper.findAll('span.locales').at(4).text()).toBe('Français') }) }) + describe('language menu', () => { - it('has English, German and Español as languages to choose', () => { + beforeAll(async () => { + wrapper.vm.$store.state.language = 'en' + wrapper.vm.setCurrentLanguage() + await wrapper.vm.$nextTick() + }) + + it('has five languages to choose from', () => { expect(wrapper.findAll('span.locales')).toHaveLength(5) }) + it('has English as first language to choose', () => { - expect(wrapper.findAll('span.locales').at(0).text()).toBe('Nederlands') + expect(wrapper.findAll('span.locales').at(0).text()).toBe('English') }) - it('has German as second language to choose', () => { - expect(wrapper.findAll('span.locales').at(1).text()).toBe('English') + + it('has Deutsch as second language to choose', () => { + expect(wrapper.findAll('span.locales').at(1).text()).toBe('Deutsch') }) + it('has Español as third language to choose', () => { - expect(wrapper.findAll('span.locales').at(2).text()).toBe('Deutsch') + expect(wrapper.findAll('span.locales').at(2).text()).toBe('Español') }) - it('has French as third language to choose', () => { - expect(wrapper.findAll('span.locales').at(3).text()).toBe('Español') + + it('has Français as fourth language to choose', () => { + expect(wrapper.findAll('span.locales').at(3).text()).toBe('Français') }) - it('has Nederlands as third language to choose', () => { - expect(wrapper.findAll('span.locales').at(4).text()).toBe('Français') + + it('has Nederlands as fifth language to choose', () => { + expect(wrapper.findAll('span.locales').at(4).text()).toBe('Nederlands') }) }) }) describe('calls the API', () => { it("with locale 'de'", () => { - wrapper.findAll('span.locales').at(2).trigger('click') + wrapper.findAll('span.locales').at(1).trigger('click') expect(updateUserInfosMutationMock).toBeCalledWith( expect.objectContaining({ variables: { locale: 'de' } }), ) }) + + it("with locale 'es'", () => { + wrapper.findAll('span.locales').at(2).trigger('click') + expect(updateUserInfosMutationMock).toBeCalledWith( + expect.objectContaining({ variables: { locale: 'es' } }), + ) + }) + + it("with locale 'fr'", () => { + wrapper.findAll('span.locales').at(3).trigger('click') + expect(updateUserInfosMutationMock).toBeCalledWith( + expect.objectContaining({ variables: { locale: 'fr' } }), + ) + }) + + it("with locale 'nl'", () => { + wrapper.findAll('span.locales').at(4).trigger('click') + expect(updateUserInfosMutationMock).toBeCalledWith( + expect.objectContaining({ variables: { locale: 'nl' } }), + ) + }) }) }) })