Vue.js Test from dust to light

Image for post
Image for post

Yeah

Start

Image for post
Image for post
Image for post
Image for post
import LocaleMenu from './LocaleMenu'
export default LocaleMenu
<template>
<v-menu offset-y>
<v-btn icon slot="activator">
<img :src="currentLanguageItem.imageUrl">
</v-btn>
<v-list>
<v-list-tile v-for="(language, id) in languageItems" :key="id" @click.stop.prevent="setLanguage(id)">
<v-list-tile-action>
<img :src="language.imageUrl">
</v-list-tile-action>
<v-list-tile-title>{{language.name()}}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</template>

<script>
import supportedLocales from '@/shared/i18n/supportedLocales'

export default {

computed: {
currentLanguageItem () {
return supportedLocales[this.$i18n.locale()]
},
languageItems () {
// without current selected language
return this._.omitBy(supportedLocales, (languageItem, key) => key === this.$i18n.locale())
}
},

methods: {
setLanguage (language) {
this.$i18n.set(language)
}
}
}
</script>

<style scoped>
</style>
import Vue from 'vue'
import translationsDe from '@/assets/i18n/de.json'
import translationsEn from '@/assets/i18n/en.json'

// to support another locale simply add a translation file and an entry
const supportedLocales = {
'de-DE': {
name: () => Vue.i18n.translate('languages.german'),
translations: translationsDe,
imageUrl: 'https://countryflags.io/de/flat/24.png'
},
'en-US': {
name: () => Vue.i18n.translate('languages.english'),
translations: translationsEn,
imageUrl: 'https://countryflags.io/us/flat/24.png'
}
}

export default supportedLocales
import {expect} from 'chai'
import {shallow} from '@vue/test-utils'
import LocaleMenu from '@/shared/components/LocaleMenu'

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu)
expect(true).to.be.false
})
})
Image for post
Image for post
Image for post
Image for post
import {expect} from 'chai'
import {createLocalVue, shallow} from '@vue/test-utils'
import LocaleMenu from '@/shared/components/LocaleMenu'

const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
console.log('locale', this.currentLocale)
return this.currentLocale
}
}


localVue.use(i18nMock)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})

console.log(wrapper.html())
expect(true).to.be.false
})
})
Image for post
Image for post
import {expect} from 'chai'
import VueLodash from 'vue-lodash'
import {createLocalVue, shallow} from '@vue/test-utils'
import LocaleMenu from '@/shared/components/LocaleMenu'

const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
console.log('locale', this.currentLocale)
return this.currentLocale
}
}

localVue.use(i18nMock)
localVue.use(VueLodash)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
console.log(wrapper.html())
expect(true).to.be.false
})
})
Image for post
Image for post
Image for post
Image for post
import Vue from 'vue'
import {expect} from 'chai'
import VueLodash from 'vue-lodash'
import {createLocalVue, shallow} from '@vue/test-utils'
import LocaleMenu from '@/shared/components/LocaleMenu'

Vue.i18n = {
translate (id) {
console.log('translate', id)
return id
}
}


const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
console.log('locale', this.currentLocale)
return this.currentLocale
}
}

localVue.use(i18nMock)
localVue.use(VueLodash)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
console.log(wrapper.html())
expect(true).to.be.false
})
})
Image for post
Image for post
import Vue from 'vue'
import VueLodash from 'vue-lodash'
import Vuetify from 'vuetify'
import LocaleMenu from '@/shared/components/LocaleMenu'
import {expect} from 'chai'
import {createLocalVue, shallow} from '@vue/test-utils'

Vue.i18n = {
translate (id) {
console.log('translate', id)
return id
}
}
Vue.use(Vuetify)const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
console.log('locale', this.currentLocale)
return this.currentLocale
}
}

localVue.use(i18nMock)
localVue.use(VueLodash)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
console.log(wrapper.html())
expect(true).to.be.false
})
})
Image for post
Image for post
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueLodash from 'vue-lodash'
import LocaleMenu from '@/shared/components/LocaleMenu'
import {expect} from 'chai'
import {createLocalVue, shallow} from '@vue/test-utils'

Vue.i18n = {
translate (id) {
console.log('translate', id)
return id
}
}

Vue.use(Vuetify)

const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
console.log('locale', this.currentLocale)
return this.currentLocale
}
}

localVue.use(i18nMock)
localVue.use(VueLodash)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
// console.log('html', wrapper.html())
const menuEntry = wrapper.find('a img')
expect(menuEntry.attributes().src).to.include('/us/')

})
})
Image for post
Image for post
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueLodash from 'vue-lodash'
import LocaleMenu from '@/shared/components/LocaleMenu'
import {expect} from 'chai'
import {createLocalVue, shallow} from '@vue/test-utils'

const app = document.createElement('div')
app.setAttribute('data-app', true)
document.body.append(app)


Vue.i18n = {
translate (id) {
// console.log('translate', id)
return id
}
}

Vue.use(Vuetify)

const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
// console.log('locale', this.currentLocale)
return this.currentLocale
}
}

localVue.use(i18nMock)
localVue.use(VueLodash)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
// console.log('html', wrapper.html())
const menuEntry = wrapper.find('a img')
expect(menuEntry.attributes().src).to.include('/us/')
})
})
Image for post
Image for post
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueLodash from 'vue-lodash'
import LocaleMenu from '@/shared/components/LocaleMenu'
import {expect} from 'chai'
import {createLocalVue, shallow} from '@vue/test-utils'

const app = document.createElement('div')
app.setAttribute('data-app', true)
document.body.append(app)

Vue.i18n = {
translate (id) {
// console.log('translate', id)
return id
}
}

Vue.use(Vuetify)

const localVue = createLocalVue()

const i18nMock = {
currentLocale: 'de-DE',

locale () {
// console.log('locale', this.currentLocale)
return this.currentLocale
},
set (locale) {
// console.log('set', locale)
this.currentLocale = locale
}

}

localVue.use(i18nMock)
localVue.use(VueLodash)

describe('LocaleMenu', () => {
it('shows all available languages, current local excluded', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
// console.log('html', wrapper.html())
const menuEntry = wrapper.find('a img')
expect(menuEntry.attributes().src).to.include('/us/')
})

it('selects the english locale if we select it', () => {
const wrapper = shallow(LocaleMenu, {
localVue,
mocks: {
$i18n: i18nMock
}
})
// console.log(wrapper.html())
const menuEntry = wrapper.find('a')
menuEntry.trigger('click')
// console.log(wrapper.html())
expect(i18nMock.currentLocale).equals('en-US')
const currentLocaleButton = wrapper.find('button img')
expect(currentLocaleButton.attributes().src).to.include('/us/')
})

})
Image for post
Image for post

Developer since the 80'th, working at Forschungszentrum Jülich (http://www.fz-juelich.de) …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store