From e583486143f208690abb3084e44cce76c8630b27 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Sat, 15 Jun 2019 15:23:51 -0300 Subject: [PATCH 01/14] Set up editor placeholder to use Vuex MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - to make reactive - safer than using global event buses ($root.$emit) Co-authored-by: Wolfgang Huß Co-authored-by: Mike Aono --- webapp/components/Editor/index.vue | 26 +++++++++++++------------- webapp/components/Editor/spec.js | 20 ++++++++++++++++++++ webapp/components/LocaleSwitch.vue | 4 +++- webapp/store/editor.js | 17 +++++++++++++++++ webapp/store/editor.spec.js | 20 ++++++++++++++++++++ 5 files changed, 73 insertions(+), 14 deletions(-) create mode 100644 webapp/store/editor.js create mode 100644 webapp/store/editor.spec.js 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.vue b/webapp/components/LocaleSwitch.vue index f6f1a9727..aeee580b5 100644 --- a/webapp/components/LocaleSwitch.vue +++ b/webapp/components/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/store/editor.js b/webapp/store/editor.js new file mode 100644 index 000000000..9c5f665a0 --- /dev/null +++ b/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 + }, +} diff --git a/webapp/store/editor.spec.js b/webapp/store/editor.spec.js new file mode 100644 index 000000000..90477ea20 --- /dev/null +++ b/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') + }) +}) From 4adc450f439c06c645ea7bc46f16b8cccfffe953 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Sat, 15 Jun 2019 15:53:30 -0300 Subject: [PATCH 02/14] Fix failing test - add Vuex, with editor/placeholder getter --- .../ContributionForm/ContributionForm.spec.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) 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(() => { From 01eb25eca67311526e9377a83cf3f4198a787d7b Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Sat, 15 Jun 2019 16:15:49 -0300 Subject: [PATCH 03/14] Update CommentForm with vuex --- webapp/components/comments/CommentForm/spec.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) 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(() => { From 35428fbaaad0b061bb5466b9b3e781d59107d332 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 17 Jun 2019 10:07:53 -0300 Subject: [PATCH 04/14] Add test for LocaleSwitch --- .../LocaleSwitch/LocaleSwitch.spec.js | 68 +++++++++++++++++++ .../{ => LocaleSwitch}/LocaleSwitch.vue | 0 webapp/layouts/default.vue | 2 +- webapp/pages/login.vue | 2 +- 4 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 webapp/components/LocaleSwitch/LocaleSwitch.spec.js rename webapp/components/{ => LocaleSwitch}/LocaleSwitch.vue (100%) 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 100% rename from webapp/components/LocaleSwitch.vue rename to webapp/components/LocaleSwitch/LocaleSwitch.vue 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 @@