diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue index 3e69b6da6..aa9a10eb3 100644 --- a/components/LocaleSwitch.vue +++ b/components/LocaleSwitch.vue @@ -68,7 +68,7 @@ export default { }, computed: { current() { - console.log('locales', this.locales) + console.log('current', this.$i18n.locale()) return find(this.locales, ['code', this.$i18n.locale()]) } }, diff --git a/cypress/integration/Internationalization.feature b/cypress/integration/Internationalization.feature index 8febcc2e8..d1c4051a7 100644 --- a/cypress/integration/Internationalization.feature +++ b/cypress/integration/Internationalization.feature @@ -10,10 +10,15 @@ Feature: Internationalization When I select "Deutsch" in the language menu Then The whole user interface appears in "Deutsch" + When I select "Français" in the language menu + Then The whole user interface appears in "Français" + When I select "English" in the language menu Then The whole user interface appears in "English" Scenario: Keep preferred language after refresh When I select "Deutsch" in the language menu + Then The whole user interface appears in "Deutsch" + And I refresh the page Then The whole user interface appears in "Deutsch" diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js index b0bae47ac..a835f1bde 100644 --- a/cypress/integration/common/steps.js +++ b/cypress/integration/common/steps.js @@ -5,6 +5,14 @@ const baseUrl = 'http://localhost:3000' const username = 'Peter Lustig' const locales = require('../../../locales') +// TODO: use the native locale files +const localeStrings = { + login: { + English: 'Login', + Deutsch: 'Einloggen', + Français: 'Connexion' + } +} const login = (email, password) => { cy.visit(`${baseUrl}/login`) @@ -91,7 +99,6 @@ Then('I am still logged in', () => { When('I select {string} in the language menu', name => { cy.get('.login-locale-switch a') .click() - .wait(50) const code = find(locales, ['name', name]).code cy.get(`.locale-menu-popover a.${code}`) .click() @@ -100,6 +107,7 @@ When('I select {string} in the language menu', name => { Then('The whole user interface appears in {string}', name => { const code = find(locales, ['name', name]).code cy.getCookie('locale').should('have.property', 'value', code) + cy.contains(localeStrings.login[name]) }) When('I navigate to the administration dashboard', () => { diff --git a/plugins/i18n.js b/plugins/i18n.js index 179f8f1f6..500d4e7a5 100644 --- a/plugins/i18n.js +++ b/plugins/i18n.js @@ -1,7 +1,7 @@ import Vue from 'vue' import Vuex from 'vuex' import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js' -import { debounce, isEmpty } from 'lodash' +import { debounce, isEmpty, find } from 'lodash' /** * TODO: Refactor and simplify browser detection @@ -63,7 +63,9 @@ export default ({ app, req, cookie, store }) => { } const availableLocales = process.env.locales.filter(lang => !!lang.enabled) - const locale = availableLocales.indexOf(userLocale) >= 0 ? userLocale : 'en' + const locale = find(availableLocales, ['code', userLocale]) + ? userLocale + : 'en' if (locale !== 'en') { Vue.i18n.add(locale, require(`~/locales/${locale}.json`))