Merge pull request #836 from Human-Connection/835-use-vuex-to-make-editor-placeholder-reactive

Set up editor placeholder to use Vuex

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'] = '<span><slot /></span>'
@@ -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(() => {

webapp/components/Editor/index.vue

@@ -12,9 +12,7 @@
           @{{ user.slug }}
         </div>
       </template>
-      <div v-else class="suggestion-list__item is-empty">
-        No users found
-      </div>
+      <div v-else class="suggestion-list__item is-empty">No users found</div>
     </div>
 
     <editor-menu-bubble :editor="editor">
@@ -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() {

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',
+        )
+      })
+    })
   })
 })

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)
+    })
+  })
+})

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()

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(() => {

webapp/layouts/default.vue

@@ -92,7 +92,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import LocaleSwitch from '~/components/LocaleSwitch'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/notifications/NotificationMenu'

webapp/pages/login.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import LocaleSwitch from '~/components/LocaleSwitch'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {

webapp/store/editor.js

@@ -0,0 +1,17 @@
+export const state = () => {
+  return {
+    placeholder: null,
+  }
+}
+
+export const getters = {
+  placeholder(state) {
+    return state.placeholder
+  },
+}
+
+export const mutations = {
+  SET_PLACEHOLDER_TEXT(state, text) {
+    state.placeholder = text
+  },
+}

webapp/store/editor.spec.js

@@ -0,0 +1,20 @@
+import { getters, mutations } from './editor.js'
+
+let state
+
+describe('getters', () => {
+  describe('placeholder', () => {
+    it('return the value in state', () => {
+      state = { placeholder: null }
+      expect(getters.placeholder(state)).toBe(null)
+    })
+  })
+})
+
+describe('mutations', () => {
+  it('SET_PLACEHOLDER_TEXT', () => {
+    state = { placeholder: null }
+    mutations.SET_PLACEHOLDER_TEXT(state, 'new placeholder')
+    expect(getters.placeholder(state)).toBe('new placeholder')
+  })
+})