From 3a50a3d93cccf4965a7d249345d3d5b0ea3a1db7 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 27 Sep 2021 15:06:02 +0200
Subject: [PATCH] feat: Test Change Language in User Profile

---
 .../UserProfile/UserCard_Language.spec.js     | 126 +++++++++++++++++-
 .../Pages/UserProfile/UserCard_Language.vue   |   2 +-
 2 files changed, 126 insertions(+), 2 deletions(-)

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