diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index dbf7e807e..850dbc5d9 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -344,7 +344,7 @@ jobs: report_name: Coverage Frontend type: lcov result_path: ./coverage/lcov.info - min_coverage: 67 + min_coverage: 69 token: ${{ github.token }} ############################################################################## diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js index 68d0964d3..49134ce91 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js +++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js @@ -3,7 +3,13 @@ import UserCardLanguage from './UserCard_Language' const localVue = global.localVue -const mockAPIcall = jest.fn() +const mockAPIcall = jest.fn().mockResolvedValue({ + data: { + updateUserInfos: { + validValues: 1, + }, + }, +}) const toastErrorMock = jest.fn() const toastSuccessMock = jest.fn() @@ -17,6 +23,7 @@ describe('UserCard_Language', () => { $store: { state: { language: 'de', + email: 'peter@lustig.de', }, commit: storeCommitMock, }, @@ -27,6 +34,9 @@ describe('UserCard_Language', () => { $apollo: { mutate: mockAPIcall, }, + $i18n: { + locale: 'de', + }, } const Wrapper = () => { @@ -45,5 +55,119 @@ describe('UserCard_Language', () => { it('has an edit icon', () => { expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy() }) + + it('has change language as text', () => { + expect(wrapper.find('a').text()).toBe('form.changeLanguage') + }) + + it('has no select field by default', () => { + expect(wrapper.find('select').exists()).toBeFalsy() + }) + + describe('edit button', () => { + beforeEach(() => { + wrapper.find('a').trigger('click') + }) + + it('has no edit icon anymore', () => { + expect(wrapper.find('svg.bi-pencil').exists()).toBeFalsy() + }) + + it('has x-circle icon', () => { + expect(wrapper.find('svg.bi-x-circle').exists()).toBeTruthy() + }) + + it('has a submit button', () => { + expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy() + }) + + it('has the submit button disbaled by default', () => { + expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled') + }) + + describe('change language', () => { + it('does not enable the submit button when same language is chosen', () => { + wrapper.findAll('option').at(1).setSelected() + expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled') + }) + + it('enables the submit button when other language is chosen', async () => { + await wrapper.findAll('option').at(2).setSelected() + expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe(undefined) + }) + + it('updates language data in component', async () => { + await wrapper.findAll('option').at(2).setSelected() + expect(wrapper.vm.language).toBe('en') + }) + + describe('cancel edit', () => { + beforeEach(async () => { + await wrapper.findAll('option').at(2).setSelected() + wrapper.find('a').trigger('click') + }) + + it('sets the language to initial value', () => { + expect(wrapper.vm.language).toBe('de') + }) + + it('has no select field anymore', () => { + expect(wrapper.find('select').exists()).toBeFalsy() + }) + }) + + describe('submit', () => { + beforeEach(async () => { + await wrapper.findAll('option').at(2).setSelected() + wrapper.find('form').trigger('submit') + }) + + describe('with success', () => { + it('calls the API', () => { + expect(mockAPIcall).toBeCalledWith( + expect.objectContaining({ + variables: { + email: 'peter@lustig.de', + locale: 'en', + }, + }), + ) + }) + + it('commits new language to store', () => { + expect(storeCommitMock).toBeCalledWith('language', 'en') + }) + + it('changes the i18n locale', () => { + expect(mocks.$i18n.locale).toBe('en') + }) + + it('has no select field anymore', () => { + expect(wrapper.find('select').exists()).toBeFalsy() + }) + + it('toasts a success message', () => { + expect(toastSuccessMock).toBeCalledWith('languages.success') + }) + }) + + describe('with error', () => { + beforeEach(() => { + mockAPIcall.mockRejectedValue({ + message: 'Ouch!', + }) + }) + + it('sets the language back to initial value', () => { + expect(wrapper.vm.language).toBe('de') + }) + + it('toasts an error message', () => { + expect(toastErrorMock).toBeCalledWith('Ouch!') + }) + }) + }) + }) + }) }) }) diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue index 8d05620c9..d9ec38bc1 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_Language.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_Language.vue @@ -82,6 +82,7 @@ export default { }, cancelEdit() { this.showLanguage = true + this.language = this.$store.state.language }, async onSubmit() { this.$apollo @@ -104,7 +105,6 @@ export default { this.$toasted.error(error.message) }) }, - buildTagFromLanguageString() { return 'languages.' + this.$store.state.language }, diff --git a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js index 3a70840e1..af19a8fbd 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js +++ b/frontend/src/views/Pages/UserProfile/UserCard_Newsletter.spec.js @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' import UserCardNewsletter from './UserCard_Newsletter' -import { unsubscribeNewsletter } from '../../../graphql/mutations' +import { unsubscribeNewsletter, subscribeNewsletter } from '../../../graphql/mutations' const localVue = global.localVue @@ -9,7 +9,6 @@ const mockAPIcall = jest.fn() const toastErrorMock = jest.fn() const toastSuccessMock = jest.fn() const storeCommitMock = jest.fn() -const newsletterStateMock = jest.fn().mockReturnValue(true) describe('UserCard_Newsletter', () => { let wrapper @@ -20,7 +19,7 @@ describe('UserCard_Newsletter', () => { state: { language: 'de', email: 'peter@lustig.de', - newsletterState: newsletterStateMock, + newsletterState: true, }, commit: storeCommitMock, }, @@ -50,14 +49,15 @@ describe('UserCard_Newsletter', () => { expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy() }) - describe('unsubscribe with sucess', () => { - beforeEach(() => { + describe('unsubscribe with success', () => { + beforeEach(async () => { + await wrapper.setData({ newsletterState: false }) mockAPIcall.mockResolvedValue({ data: { unsubscribeNewsletter: true, }, }) - wrapper.find('input').trigger('change') + await wrapper.find('input').trigger('change') }) it('calls the unsubscribe mutation', () => { @@ -78,6 +78,36 @@ describe('UserCard_Newsletter', () => { }) }) + describe('subscribe with success', () => { + beforeEach(async () => { + await wrapper.setData({ newsletterState: true }) + mockAPIcall.mockResolvedValue({ + data: { + subscribeNewsletter: true, + }, + }) + wrapper.find('input').trigger('change') + }) + + it('calls the subscribe mutation', () => { + expect(mockAPIcall).toBeCalledWith({ + mutation: subscribeNewsletter, + variables: { + email: 'peter@lustig.de', + language: 'de', + }, + }) + }) + + it('updates the store', () => { + expect(storeCommitMock).toBeCalledWith('newsletterState', true) + }) + + it('toasts a success message', () => { + expect(toastSuccessMock).toBeCalledWith('setting.newsletterFalse') + }) + }) + describe('unsubscribe with server error', () => { beforeEach(() => { mockAPIcall.mockRejectedValue({