From ebaf9b7a8731db5992f26209de04f6c68b12b345 Mon Sep 17 00:00:00 2001 From: ogerly Date: Thu, 9 Sep 2021 17:28:42 +0200 Subject: [PATCH 1/6] add new components selectLanguage and Usercard_Language --- .../src/components/LanguageSwitchSelect.vue | 44 ++++++++++ frontend/src/locales/de.json | 1 + frontend/src/locales/en.json | 1 + frontend/src/views/Pages/Register.spec.js | 6 +- frontend/src/views/Pages/Register.vue | 36 ++++----- .../Pages/UserProfile/UserCard_Language.vue | 81 +++++++++++++++++++ .../src/views/Pages/UserProfileOverview.vue | 4 + 7 files changed, 152 insertions(+), 21 deletions(-) create mode 100644 frontend/src/components/LanguageSwitchSelect.vue create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_Language.vue diff --git a/frontend/src/components/LanguageSwitchSelect.vue b/frontend/src/components/LanguageSwitchSelect.vue new file mode 100644 index 000000000..e1caa601e --- /dev/null +++ b/frontend/src/components/LanguageSwitchSelect.vue @@ -0,0 +1,44 @@ + + diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index ae1822396..b4c87b8ce 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -64,6 +64,7 @@ "change": "ändern", "change-password": "Passwort ändern", "change-name": "Name ändern", + "changeLanguage": "Sprache ändern", "amount":"Betrag", "memo":"Nachricht", "message":"Nachricht", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 4bd04116d..50d22c2bd 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -64,6 +64,7 @@ "change": "change", "change-password": "Change password", "change-name": "Change name", + "changeLanguage": "Change language", "amount":"Amount", "memo":"Message", "message":"Message", diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js index 72042477c..f1a13c638 100644 --- a/frontend/src/views/Pages/Register.spec.js +++ b/frontend/src/views/Pages/Register.spec.js @@ -81,11 +81,11 @@ describe('Register', () => { expect(wrapper.find('input[name="form.passwordRepeat"]').exists()).toBeTruthy() }) it('has Language selected field', () => { - expect(wrapper.find('#selectedLanguage').exists()).toBeTruthy() + expect(wrapper.find('.selectedLanguage').exists()).toBeTruthy() }) it('selected Language value de', async () => { - wrapper.find('#selectedLanguage').findAll('option').at(1).setSelected() - expect(wrapper.find('#selectedLanguage').element.value).toBe('de') + wrapper.find('.selectedLanguage').findAll('option').at(1).setSelected() + expect(wrapper.find('.selectedLanguage').element.value).toBe('de') }) it('has 1 checkbox input fields', () => { diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue index f8e7eefd0..6b7dd9281 100755 --- a/frontend/src/views/Pages/Register.vue +++ b/frontend/src/views/Pages/Register.vue @@ -86,13 +86,14 @@ - {{ $t('language') }} - + --> + + @@ -145,10 +146,11 @@ diff --git a/frontend/src/views/Pages/UserProfileOverview.vue b/frontend/src/views/Pages/UserProfileOverview.vue index 8768086ff..d1a53307b 100644 --- a/frontend/src/views/Pages/UserProfileOverview.vue +++ b/frontend/src/views/Pages/UserProfileOverview.vue @@ -5,6 +5,8 @@

+
+

- diff --git a/frontend/src/views/Pages/UserProfileOverview.spec.js b/frontend/src/views/Pages/UserProfileOverview.spec.js index f32e6c9f6..7b75b0dd2 100644 --- a/frontend/src/views/Pages/UserProfileOverview.spec.js +++ b/frontend/src/views/Pages/UserProfileOverview.spec.js @@ -27,10 +27,6 @@ describe('UserProfileOverview', () => { expect(wrapper.findComponent({ name: 'FormUserData' }).exists()).toBeTruthy() }) - // it('has a user name form', () => { - // expect(wrapper.findComponent({ name: 'FormUsername' }).exists()).toBeTruthy() - // }) - it('has a user change password form', () => { expect(wrapper.findComponent({ name: 'FormUserPasswort' }).exists()).toBeTruthy() }) From 007c1f00d5ab06c5a2bcd0167c625cb6431d02a5 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 14 Sep 2021 16:40:19 +0200 Subject: [PATCH 6/6] register and settings add components langunage fix --- frontend/src/views/Pages/Register.spec.js | 2 +- .../UserProfile/UserCard_FormUsername.spec.js | 169 ++++++++++++++++++ .../UserProfile/UserCard_FormUsername.vue | 117 ++++++++++++ 3 files changed, 287 insertions(+), 1 deletion(-) create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js create mode 100644 frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js index 46fce35cc..a0de965d5 100644 --- a/frontend/src/views/Pages/Register.spec.js +++ b/frontend/src/views/Pages/Register.spec.js @@ -42,7 +42,7 @@ describe('Register', () => { wrapper = Wrapper() }) - it.only('renders the Register form', () => { + it('renders the Register form', () => { expect(wrapper.find('div#registerform').exists()).toBeTruthy() }) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js new file mode 100644 index 000000000..8a69ee7eb --- /dev/null +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js @@ -0,0 +1,169 @@ +import { mount } from '@vue/test-utils' +import UserCardFormUsername from './UserCard_FormUsername' +import flushPromises from 'flush-promises' +import { extend } from 'vee-validate' + +const localVue = global.localVue + +const mockAPIcall = jest.fn() + +// override this rule to avoid API call +extend('gddUsernameUnique', { + validate(value) { + return true + }, +}) + +const toastErrorMock = jest.fn() +const toastSuccessMock = jest.fn() +const storeCommitMock = jest.fn() + +describe('UserCard_FormUsername', () => { + let wrapper + + const mocks = { + $t: jest.fn((t) => t), + $store: { + state: { + email: 'user@example.org', + username: '', + }, + commit: storeCommitMock, + }, + $toasted: { + success: toastSuccessMock, + error: toastErrorMock, + }, + $apollo: { + query: mockAPIcall, + }, + } + + const Wrapper = () => { + return mount(UserCardFormUsername, { localVue, mocks }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the component', () => { + expect(wrapper.find('div#formusername').exists()).toBeTruthy() + }) + + describe('username in store is empty', () => { + it('renders an empty username', () => { + expect(wrapper.find('div.display-username').text()).toEqual('@') + }) + + it('has an edit icon', () => { + expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy() + }) + + describe('edit username', () => { + beforeEach(async () => { + await wrapper.find('svg.bi-pencil').trigger('click') + }) + + it('shows an input field for the username', () => { + expect(wrapper.find('input[placeholder="Username"]').exists()).toBeTruthy() + }) + + it('shows an cancel icon', () => { + expect(wrapper.find('svg.bi-x-circle').exists()).toBeTruthy() + }) + + it('closes the input when cancel icon is clicked', async () => { + wrapper.find('svg.bi-x-circle').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.find('input[placeholder="Username"]').exists()).toBeFalsy() + }) + + it('does not change the username when cancel is clicked', async () => { + wrapper.find('input[placeholder="Username"]').setValue('username') + wrapper.find('svg.bi-x-circle').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.find('div.display-username').text()).toEqual('@') + }) + + it('has a submit button', () => { + expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy() + }) + + describe('successfull submit', () => { + beforeEach(async () => { + mockAPIcall.mockResolvedValue({ + data: { + updateUserInfos: { + validValues: 1, + }, + }, + }) + await wrapper.find('input[placeholder="Username"]').setValue('username') + await wrapper.find('form').trigger('submit') + await flushPromises() + }) + + it('calls the API', () => { + expect(mockAPIcall).toHaveBeenCalledWith( + expect.objectContaining({ + variables: { + email: 'user@example.org', + username: 'username', + }, + }), + ) + }) + + it('displays the new username', () => { + expect(wrapper.find('div.display-username').text()).toEqual('@username') + }) + + it('commits the username to the store', () => { + expect(storeCommitMock).toBeCalledWith('username', 'username') + }) + + it('toasts an success message', () => { + expect(toastSuccessMock).toBeCalledWith('site.profil.user-data.change-success') + }) + + it('has no edit button anymore', () => { + expect(wrapper.find('svg.bi-pencil').exists()).toBeFalsy() + }) + }) + + describe('submit retruns error', () => { + beforeEach(async () => { + jest.clearAllMocks() + mockAPIcall.mockRejectedValue({ + message: 'Ouch!', + }) + await wrapper.find('input[placeholder="Username"]').setValue('username') + await wrapper.find('form').trigger('submit') + await flushPromises() + }) + + it('calls the API', () => { + expect(mockAPIcall).toHaveBeenCalledWith( + expect.objectContaining({ + variables: { + email: 'user@example.org', + username: 'username', + }, + }), + ) + }) + + it('toasts an error message', () => { + expect(toastErrorMock).toBeCalledWith('Ouch!') + }) + + it('renders an empty username', () => { + expect(wrapper.find('div.display-username').text()).toEqual('@') + }) + }) + }) + }) + }) +}) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue new file mode 100644 index 000000000..f6587b968 --- /dev/null +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue @@ -0,0 +1,117 @@ + + +