diff --git a/frontend/src/components/LanguageSwitch2.spec.js b/frontend/src/components/LanguageSwitch2.spec.js new file mode 100644 index 000000000..600e2513e --- /dev/null +++ b/frontend/src/components/LanguageSwitch2.spec.js @@ -0,0 +1,133 @@ +import { mount } from '@vue/test-utils' +import LanguageSwitch from './LanguageSwitch2' + +const localVue = global.localVue + +const updateUserInfosMutationMock = jest.fn().mockResolvedValue({ + data: { + updateUserInfos: { + validValues: 1, + }, + }, +}) + +describe('LanguageSwitch', () => { + let wrapper + + const state = { + email: 'he@ho.he', + language: null, + } + + const mocks = { + $store: { + state, + commit: jest.fn(), + }, + $i18n: { + locale: 'en', + }, + $t: jest.fn((t) => t), + $apollo: { + mutate: updateUserInfosMutationMock, + }, + } + + const Wrapper = () => { + return mount(LanguageSwitch, { localVue, mocks }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the component', () => { + expect(wrapper.find('div.language-switch').exists()).toBe(true) + }) + + describe('with locales en and de', () => { + 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() + await wrapper.vm.$nextTick() + 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() + await wrapper.vm.$nextTick() + expect(wrapper.findAll('span.locales').at(1).text()).toBe('Deutsch') + }) + }) + describe('navigator language is "es-ES" (not supported)', () => { + const languageGetter = jest.spyOn(navigator, 'language', 'get') + it('shows English as language ', async () => { + languageGetter.mockReturnValue('es-ES') + wrapper.vm.setCurrentLanguage() + await wrapper.vm.$nextTick() + 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() + await wrapper.vm.$nextTick() + expect(wrapper.findAll('span.locales').at(0).text()).toBe('English') + }) + }) + }) + describe('language "de" in store', () => { + it('shows Deutsch as language', async () => { + wrapper.vm.$store.state.language = 'de' + wrapper.vm.setCurrentLanguage() + await wrapper.vm.$nextTick() + expect(wrapper.findAll('span.locales').at(1).text()).toBe('Deutsch') + }) + }) + describe('language menu', () => { + it('has English and German as languages to choose', () => { + expect(wrapper.findAll('span.locales')).toHaveLength(2) + }) + it('has English as first language to choose', () => { + 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('Deutsch') + }) + }) + }) + + describe('calls the API', () => { + it("with locale 'de'", () => { + wrapper.findAll('span.locales').at(1).trigger('click') + expect(updateUserInfosMutationMock).toBeCalledWith( + expect.objectContaining({ + variables: { + locale: 'de', + }, + }), + ) + }) + + // it("with locale 'en'", () => { + // wrapper.findAll('span.locales').at(0).trigger('click') + // expect(updateUserInfosMutationMock).toBeCalledWith( + // expect.objectContaining({ + // variables: { + // locale: 'en', + // }, + // }), + // ) + // }) + }) + }) +}) diff --git a/frontend/src/components/LanguageSwitch2.vue b/frontend/src/components/LanguageSwitch2.vue index 317935900..559e60a43 100644 --- a/frontend/src/components/LanguageSwitch2.vue +++ b/frontend/src/components/LanguageSwitch2.vue @@ -7,7 +7,7 @@ class="pointer pr-3" :class="$store.state.language === lang.code ? 'c-blau' : 'c-grey'" > - {{ lang.name }} + {{ lang.name }} {{ locales.length - 1 > index ? $t('math.pipe') : '' }} diff --git a/frontend/src/pages/TransactionLink.spec.js b/frontend/src/pages/TransactionLink.spec.js index 29ba7e8b4..ebe8a6407 100644 --- a/frontend/src/pages/TransactionLink.spec.js +++ b/frontend/src/pages/TransactionLink.spec.js @@ -211,10 +211,14 @@ describe('TransactionLink', () => { describe('token in store and own link', () => { beforeEach(() => { mocks.$store.state.token = 'token' + wrapper.setData({ + linkData: { + user: { firstName: 'Bibi', publisherId: 0, email: 'bibi@bloxberg.de' }, + }, + }) apolloQueryMock.mockResolvedValue({ data: { queryTransactionLink: { - __typename: 'TransactionLink', id: 92, amount: '22', memo: 'Abrakadabra drei, vier, fünf, sechs, hier steht jetzt ein Memotext! Hex hex ', @@ -229,13 +233,14 @@ describe('TransactionLink', () => { wrapper = Wrapper() }) - it.skip('has a RedeemSelfCreator component', () => { - expect(wrapper.findComponent({ name: 'RedeemSelfCreator' }).exists()).toBe(true) + it('has a RedeemValid component', () => { + // expect(wrapper.findComponent({ name: 'RedeemSelfCreator' }).exists()).toBe(true) + expect(wrapper.findComponent({ name: 'RedeemValid' }).exists()).toBe(true) }) it.skip('has a no redeem text', () => { - expect(wrapper.findComponent({ name: 'RedeemSelfCreator' }).text()).toContain( - 'gdd_per_link.no-redeem', + expect(wrapper.findComponent({ name: 'RedeemValid' }).text()).toContain( + `Bibi transaction-link.send_you + 123.45 GDD memo· gdd_per_link.redeem`, ) })