Merge pull request #904 from gradido/test-language-change

feat: Test Change Language in User Profile

.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 }}
   
   ##############################################################################

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

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
     },

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', () => {
+    describe('unsubscribe with success', () => {
-      beforeEach(() => {
+      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({