diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index f7f306fc3..8b741443f 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -1,9 +1,11 @@
import { config, mount, createLocalVue } from '@vue/test-utils'
import ContributionForm from './index.vue'
import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
const localVue = createLocalVue()
+localVue.use(Vuex)
localVue.use(Styleguide)
config.stubs['no-ssr'] = ''
@@ -53,8 +55,16 @@ describe('ContributionForm.vue', () => {
})
describe('mount', () => {
+ const getters = {
+ 'editor/placeholder': () => {
+ return 'some cool placeholder'
+ },
+ }
+ const store = new Vuex.Store({
+ getters,
+ })
const Wrapper = () => {
- return mount(ContributionForm, { mocks, localVue, computed })
+ return mount(ContributionForm, { mocks, localVue, computed, store })
}
beforeEach(() => {
diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index 0690b15bd..84649f436 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -12,9 +12,7 @@
@{{ user.slug }}
-
- No users found
-
+ No users found
@@ -175,6 +173,7 @@ import {
History,
} from 'tiptap-extensions'
import Mention from './nodes/Mention.js'
+import { mapGetters } from 'vuex'
let throttleInputEvent
@@ -212,7 +211,7 @@ export default {
new ListItem(),
new Placeholder({
emptyNodeClass: 'is-empty',
- emptyNodeText: this.$t('editor.placeholder'),
+ emptyNodeText: this.placeholder || this.$t('editor.placeholder'),
}),
new History(),
new Mention({
@@ -297,6 +296,7 @@ export default {
}
},
computed: {
+ ...mapGetters({ placeholder: 'editor/placeholder' }),
hasResults() {
return this.filteredUsers.length
},
@@ -316,20 +316,20 @@ export default {
this.editor.setContent(content)
},
},
- },
- mounted() {
- this.$root.$on('changeLanguage', () => {
- this.changePlaceHolderText()
- })
+ placeholder: {
+ immediate: true,
+ handler: function(val) {
+ if (!val) {
+ return
+ }
+ this.editor.extensions.options.placeholder.emptyNodeText = val
+ },
+ },
},
beforeDestroy() {
- this.$root.$off('changeLanguage')
this.editor.destroy()
},
methods: {
- changePlaceHolderText() {
- this.editor.extensions.options.placeholder.emptyNodeText = this.$t('editor.placeholder')
- },
// navigate to the previous item
// if it's the first item, navigate to the last one
upHandler() {
diff --git a/webapp/components/Editor/spec.js b/webapp/components/Editor/spec.js
index 249192b57..b982d941d 100644
--- a/webapp/components/Editor/spec.js
+++ b/webapp/components/Editor/spec.js
@@ -1,31 +1,43 @@
import { mount, createLocalVue } from '@vue/test-utils'
import Editor from './'
+import Vuex from 'vuex'
import Styleguide from '@human-connection/styleguide'
const localVue = createLocalVue()
+localVue.use(Vuex)
localVue.use(Styleguide)
describe('Editor.vue', () => {
let wrapper
let propsData
let mocks
+ let getters
beforeEach(() => {
propsData = {}
mocks = {
$t: () => {},
}
+ getters = {
+ 'editor/placeholder': () => {
+ return 'some cool placeholder'
+ },
+ }
})
describe('mount', () => {
let Wrapper = () => {
+ const store = new Vuex.Store({
+ getters,
+ })
return (wrapper = mount(Editor, {
mocks,
propsData,
localVue,
sync: false,
stubs: { transition: false },
+ store,
}))
}
@@ -43,5 +55,13 @@ describe('Editor.vue', () => {
expect(wrapper.find('.ProseMirror').text()).toContain('I am a piece of text')
})
})
+
+ describe('uses the placeholder', () => {
+ it('from the store', () => {
+ expect(wrapper.vm.editor.extensions.options.placeholder.emptyNodeText).toEqual(
+ 'some cool placeholder',
+ )
+ })
+ })
})
})
diff --git a/webapp/components/LocaleSwitch/LocaleSwitch.spec.js b/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
new file mode 100644
index 000000000..ae81881d6
--- /dev/null
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.spec.js
@@ -0,0 +1,68 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
+import VTooltip from 'v-tooltip'
+import LocaleSwitch from './LocaleSwitch.vue'
+import { mutations } from '~/store/editor'
+
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+localVue.use(VTooltip)
+
+describe('LocaleSwitch.vue', () => {
+ let wrapper
+ let mocks
+ let computed
+ let deutschLanguageItem
+
+ beforeEach(() => {
+ mocks = {
+ $i18n: {
+ locale: () => 'de',
+ set: jest.fn(),
+ },
+ $t: jest.fn(),
+ setPlaceholderText: jest.fn(),
+ }
+ computed = {
+ current: () => {
+ return { code: 'en' }
+ },
+ routes: () => {
+ return [
+ {
+ name: 'English',
+ path: 'en',
+ },
+ {
+ name: 'Deutsch',
+ path: 'de',
+ },
+ ]
+ },
+ }
+ })
+
+ describe('mount', () => {
+ const store = new Vuex.Store({
+ mutations: {
+ 'editor/SET_PLACEHOLDER_TEXT': mutations.SET_PLACEHOLDER_TEXT,
+ },
+ })
+ const Wrapper = () => {
+ return mount(LocaleSwitch, { mocks, localVue, store, computed })
+ }
+ beforeEach(() => {
+ wrapper = Wrapper()
+ wrapper.find('.locale-menu').trigger('click')
+ deutschLanguageItem = wrapper.findAll('li').at(1)
+ deutschLanguageItem.trigger('click')
+ })
+
+ it("changes a user's locale", () => {
+ expect(mocks.$i18n.set).toHaveBeenCalledTimes(1)
+ })
+ })
+})
diff --git a/webapp/components/LocaleSwitch.vue b/webapp/components/LocaleSwitch/LocaleSwitch.vue
similarity index 92%
rename from webapp/components/LocaleSwitch.vue
rename to webapp/components/LocaleSwitch/LocaleSwitch.vue
index f6f1a9727..aeee580b5 100644
--- a/webapp/components/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@@ -36,6 +36,7 @@
import Dropdown from '~/components/Dropdown'
import find from 'lodash/find'
import orderBy from 'lodash/orderBy'
+import { mapMutations } from 'vuex'
export default {
components: {
@@ -65,10 +66,11 @@ export default {
},
},
methods: {
+ ...mapMutations({ setPlaceholderText: 'editor/SET_PLACEHOLDER_TEXT' }),
changeLanguage(locale, toggleMenu) {
this.$i18n.set(locale)
toggleMenu()
- this.$root.$emit('changeLanguage')
+ this.setPlaceholderText(this.$t('editor.placeholder'))
},
matcher(locale) {
return locale === this.$i18n.locale()
diff --git a/webapp/components/comments/CommentForm/spec.js b/webapp/components/comments/CommentForm/spec.js
index ded57348c..16a4d454d 100644
--- a/webapp/components/comments/CommentForm/spec.js
+++ b/webapp/components/comments/CommentForm/spec.js
@@ -1,9 +1,10 @@
import { mount, createLocalVue, createWrapper } from '@vue/test-utils'
import CommentForm from './index.vue'
import Styleguide from '@human-connection/styleguide'
+import Vuex from 'vuex'
const localVue = createLocalVue()
-
+localVue.use(Vuex)
localVue.use(Styleguide)
describe('CommentForm.vue', () => {
@@ -35,8 +36,16 @@ describe('CommentForm.vue', () => {
})
describe('mount', () => {
+ const getters = {
+ 'editor/placeholder': () => {
+ return 'some cool placeholder'
+ },
+ }
+ const store = new Vuex.Store({
+ getters,
+ })
const Wrapper = () => {
- return mount(CommentForm, { mocks, localVue, propsData })
+ return mount(CommentForm, { mocks, localVue, propsData, store })
}
beforeEach(() => {
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 7708d6d2e..162bae0fb 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -92,7 +92,7 @@