From 154b56ce57cfbb49f7e1d5bf8755891b5196d8ba Mon Sep 17 00:00:00 2001
From: Hannes Heine <hannes.heine@gmail.com>
Date: Fri, 6 Aug 2021 20:00:27 +0200
Subject: [PATCH 1/6] Test that if the saveLocale Method is called the mocked
 apollo call is send.

---
 .../src/components/LanguageSwitch.spec.js     | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/frontend/src/components/LanguageSwitch.spec.js b/frontend/src/components/LanguageSwitch.spec.js
index 14dc978ac..3fa8e51f9 100644
--- a/frontend/src/components/LanguageSwitch.spec.js
+++ b/frontend/src/components/LanguageSwitch.spec.js
@@ -3,6 +3,16 @@ import LanguageSwitch from './LanguageSwitch'
 
 const localVue = global.localVue
 
+const updateUserInfosQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    updateUserInfos: {
+      sessionId: 1234,
+      email: 'he@ho.he',
+      locale: 'de',
+    },
+  },
+})
+
 describe('LanguageSwitch', () => {
   let wrapper
 
@@ -20,6 +30,9 @@ describe('LanguageSwitch', () => {
     $i18n: {
       locale: 'en',
     },
+    $apollo: {
+      query: updateUserInfosQueryMock,
+    },
   }
 
   const Wrapper = () => {
@@ -91,5 +104,33 @@ describe('LanguageSwitch', () => {
         })
       })
     })
+
+    describe('calls the API', () => {
+      it("with locale 'en'", () => {
+        wrapper.vm.saveLocale('en')
+        expect(updateUserInfosQueryMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              sessionId: 1234,
+              email: 'he@ho.he',
+              locale: 'en',
+            },
+          }),
+        )
+      })
+
+      it("with locale 'de'", () => {
+        wrapper.vm.saveLocale('de')
+        expect(updateUserInfosQueryMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: {
+              sessionId: 1234,
+              email: 'he@ho.he',
+              locale: 'de',
+            },
+          }),
+        )
+      })
+    })
   })
 })

From 259b7547d49eca43ae1259378e5a093785871725 Mon Sep 17 00:00:00 2001
From: Hannes Heine <hannes.heine@gmail.com>
Date: Fri, 6 Aug 2021 20:01:04 +0200
Subject: [PATCH 2/6] Implementing the updateUserInfos for language.

---
 frontend/src/components/LanguageSwitch.vue | 28 ++++++++------
 frontend/src/graphql/queries.js            | 44 ++++++++++++++++++++++
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/LanguageSwitch.vue b/frontend/src/components/LanguageSwitch.vue
index 2b160b3e3..cedcf2555 100644
--- a/frontend/src/components/LanguageSwitch.vue
+++ b/frontend/src/components/LanguageSwitch.vue
@@ -14,7 +14,7 @@
 <script>
 import { localeChanged } from 'vee-validate'
 import locales from '../locales/'
-import loginAPI from '../apis/loginAPI'
+import { updateUserInfos } from '../graphql/queries'
 
 export default {
   name: 'LanguageSwitch',
@@ -34,16 +34,22 @@ export default {
     async saveLocale(locale) {
       this.setLocale(locale)
       if (this.$store.state.sessionId && this.$store.state.email) {
-        const result = await loginAPI.updateLanguage(
-          this.$store.state.sessionId,
-          this.$store.state.email,
-          locale,
-        )
-        if (result.success) {
-          // toast success message
-        } else {
-          // toast error message
-        }
+        // eslint-disable-next-line no-console
+        this.$apollo
+          .query({
+            query: updateUserInfos,
+            variables: {
+              sessionId: this.$store.state.sessionId,
+              email: this.$store.state.email,
+              locale: locale,
+            },
+          })
+          .then((result) => {
+            // toast success message
+          })
+          .catch(() => {
+            // toast error message
+          })
       }
     },
     getLocaleObject(code) {
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index e02e7fcdf..320ba3008 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -15,8 +15,52 @@ export const login = gql`
     }
   }
 `
+
 export const logout = gql`
   query($sessionId: Float!) {
     logout(sessionId: $sessionId)
   }
 `
+
+export const resetPassword = gql`
+  query($sessionId: Float!, $email: String!, $password: String!) {
+    resetPassword(sessionId: $sessionId, email: $email, password: $password)
+  }
+`
+
+export const loginViaEmailVerificationCode = gql`
+  query($optin: String!) {
+    loginViaEmailVerificationCode(optin: $optin) {
+      sessionId
+      email
+    }
+  }
+`
+
+export const updateUserInfos = gql`
+  query(
+    $sessionId: Float!
+    $email: String!
+    $firstName: String
+    $lastName: String
+    $description: String
+    $username: String
+    $password: String
+    $passwordNew: String
+    $locale: String
+  ) {
+    updateUserInfos(
+      sessionId: $sessionId
+      email: $email
+      firstName: $firstName
+      lastName: $lastName
+      description: $description
+      username: $username
+      password: $password
+      passwordNew: $passwordNew
+      language: $locale
+    ) {
+      validValues
+    }
+  }
+`

From af6ab4d470fe8916135de19efa228d609b9d00ba Mon Sep 17 00:00:00 2001
From: Hannes Heine <hannes.heine@gmail.com>
Date: Mon, 9 Aug 2021 10:19:03 +0200
Subject: [PATCH 3/6] GraphQL Query to create a new user.

---
 frontend/src/graphql/queries.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index 2eaa7eb56..5ecb1ad09 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -94,3 +94,9 @@ export const transactionsQuery = gql`
     }
   }
 `
+
+export const resgisterUserQuery = gql`
+  query($firstName: String!, $lastName: String!, $email: String!, $password: String!) {
+    create(email: $email, firstName: $firstName, lastName: $lastName, password: $password)
+  }
+`

From 06549f66cd07e4568a9f29465c53e1e7574fada1 Mon Sep 17 00:00:00 2001
From: Hannes Heine <hannes.heine@gmail.com>
Date: Mon, 9 Aug 2021 10:22:23 +0200
Subject: [PATCH 4/6] Withdrew the loginAPI call and replaced it with the
 Apollo query.

---
 frontend/src/views/Pages/Register.vue | 47 +++++++++++++--------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index b0b2e4cd6..570bd83db 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -128,9 +128,9 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI'
 import InputEmail from '../../components/Inputs/InputEmail.vue'
 import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
+import { resgisterUserQuery } from '../../graphql/queries'
 
 export default {
   components: { InputPasswordConfirmation, InputEmail },
@@ -173,33 +173,32 @@ export default {
       })
     },
     async onSubmit() {
-      const result = await loginAPI.create(
-        this.form.email,
-        this.form.firstname,
-        this.form.lastname,
-        this.form.password.password,
-      )
-      if (result.success) {
-        /* this.$store.dispatch('login', {
-          sessionId: result.result.data.session_id,
-          user: {
+      this.$axios
+        .query({
+          query: resgisterUserQuery,
+          variables: {
             email: this.form.email,
             firstName: this.form.firstname,
-            lastName: this.form.lastname
-          }
-
+            lastName: this.form.lastname,
+            password: this.form.password.password,
+          },
         })
-        */
-        this.form.email = ''
-        this.form.firstname = ''
-        this.form.lastname = ''
-        this.form.password.password = ''
+        .then((result) => {
+          if (result.success) {
+            this.form.email = ''
+            this.form.firstname = ''
+            this.form.lastname = ''
+            this.form.password.password = ''
 
-        this.$router.push('/thx/register')
-      } else {
-        this.showError = true
-        this.messageError = result.result.message
-      }
+            this.$router.push('/thx/register')
+          } else {
+            throw new Error(result.errors[0].message)
+          }
+        })
+        .catch((error) => {
+          this.showError = true
+          this.messageError = error.message
+        })
     },
     closeAlert() {
       this.showError = false

From 23bf7a7fe9b5c3b37f093a2167a0b9f9632c0941 Mon Sep 17 00:00:00 2001
From: Hannes Heine <hannes.heine@gmail.com>
Date: Mon, 9 Aug 2021 16:19:57 +0200
Subject: [PATCH 5/6] Implementation of the Apollo queries for ResetPassword.

---
 frontend/src/components/LanguageSwitch.vue    |   2 +-
 frontend/src/graphql/queries.js               |   1 +
 .../src/views/Pages/ResetPassword.spec.js     | 208 +++++++++---------
 frontend/src/views/Pages/ResetPassword.vue    |  54 +++--
 4 files changed, 143 insertions(+), 122 deletions(-)

diff --git a/frontend/src/components/LanguageSwitch.vue b/frontend/src/components/LanguageSwitch.vue
index cedcf2555..2ec1ad90d 100644
--- a/frontend/src/components/LanguageSwitch.vue
+++ b/frontend/src/components/LanguageSwitch.vue
@@ -44,7 +44,7 @@ export default {
               locale: locale,
             },
           })
-          .then((result) => {
+          .then(() => {
             // toast success message
           })
           .catch(() => {
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index 5ecb1ad09..a941ed61e 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -62,6 +62,7 @@ export const updateUserInfos = gql`
     ) {
       validValues
     }
+  }
 `
 
 export const transactionsQuery = gql`
diff --git a/frontend/src/views/Pages/ResetPassword.spec.js b/frontend/src/views/Pages/ResetPassword.spec.js
index e7689e3e7..4595314fa 100644
--- a/frontend/src/views/Pages/ResetPassword.spec.js
+++ b/frontend/src/views/Pages/ResetPassword.spec.js
@@ -1,45 +1,16 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import loginAPI from '../../apis/loginAPI'
 import ResetPassword from './ResetPassword'
 import flushPromises from 'flush-promises'
 
 // validation is tested in src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
 
-jest.mock('../../apis/loginAPI')
-
 const localVue = global.localVue
 
-const successResponseObject = {
-  success: true,
-  result: {
-    data: {
-      session_id: 1,
-      user: {
-        email: 'user@example.org',
-      },
-    },
-  },
-}
+const apolloQueryMock = jest.fn().mockRejectedValue({ message: 'error' })
 
-const emailVerificationMock = jest.fn()
-const changePasswordMock = jest.fn()
 const toasterMock = jest.fn()
 const routerPushMock = jest.fn()
 
-emailVerificationMock
-  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
-  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
-  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
-  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
-  .mockReturnValue(successResponseObject)
-
-changePasswordMock
-  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
-  .mockReturnValue({ success: true })
-
-loginAPI.loginViaEmailVerificationCode = emailVerificationMock
-loginAPI.changePassword = changePasswordMock
-
 describe('ResetPassword', () => {
   let wrapper
 
@@ -64,6 +35,9 @@ describe('ResetPassword', () => {
         return { hide: jest.fn() }
       }),
     },
+    $apollo: {
+      query: apolloQueryMock,
+    },
   }
 
   const stubs = {
@@ -79,88 +53,124 @@ describe('ResetPassword', () => {
       wrapper = Wrapper()
     })
 
-    it('calls the email verification when created', () => {
-      expect(emailVerificationMock).toHaveBeenCalledWith('123')
+    it('calls the email verification when created', async () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({ variables: { optin: '123' } }),
+      )
     })
 
-    it('does not render the Reset Password form when not authenticated', () => {
-      expect(wrapper.find('form').exists()).toBeFalsy()
-    })
+    describe('No valid optin', () => {
+      it('does not render the Reset Password form when not authenticated', () => {
+        expect(wrapper.find('form').exists()).toBeFalsy()
+      })
 
-    it('toasts an error when no valid optin is given', () => {
-      expect(toasterMock).toHaveBeenCalledWith('error')
-    })
+      it('toasts an error when no valid optin is given', () => {
+        expect(toasterMock).toHaveBeenCalledWith('error')
+      })
 
-    it('has a message suggesting to contact the support', () => {
-      expect(wrapper.find('div.header').text()).toContain('reset-password.title')
-      expect(wrapper.find('div.header').text()).toContain('reset-password.not-authenticated')
-    })
-
-    it('renders the Reset Password form when authenticated', async () => {
-      await wrapper.setData({ authenticated: true })
-      expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
-    })
-
-    describe('Register header', () => {
-      it('has a welcome message', () => {
+      it('has a message suggesting to contact the support', () => {
         expect(wrapper.find('div.header').text()).toContain('reset-password.title')
-        expect(wrapper.find('div.header').text()).toContain('reset-password.text')
+        expect(wrapper.find('div.header').text()).toContain('reset-password.not-authenticated')
       })
     })
 
-    describe('links', () => {
-      it('has a link "Back"', () => {
-        expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
-      })
-
-      it('links to /login when clicking "Back"', () => {
-        expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/Login')
-      })
-    })
-
-    describe('reset password form', () => {
-      it('has a register form', () => {
-        expect(wrapper.find('form').exists()).toBeTruthy()
-      })
-
-      it('has 2 password input fields', () => {
-        expect(wrapper.findAll('input[type="password"]').length).toBe(2)
-      })
-
-      it('toggles the first input field to text when eye icon is clicked', async () => {
-        wrapper.findAll('button').at(0).trigger('click')
-        await wrapper.vm.$nextTick()
-        expect(wrapper.findAll('input').at(0).attributes('type')).toBe('text')
-      })
-
-      it('toggles the second input field to text when eye icon is clicked', async () => {
-        wrapper.findAll('button').at(1).trigger('click')
-        await wrapper.vm.$nextTick()
-        expect(wrapper.findAll('input').at(1).attributes('type')).toBe('text')
-      })
-    })
-
-    describe('submit form', () => {
-      beforeEach(async () => {
-        await wrapper.findAll('input').at(0).setValue('Aa123456')
-        await wrapper.findAll('input').at(1).setValue('Aa123456')
-        await flushPromises()
-        await wrapper.find('form').trigger('submit')
-      })
-
-      describe('server response with error', () => {
-        it('toasts an error message', () => {
-          expect(toasterMock).toHaveBeenCalledWith('error')
+    describe('is authenticated', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockResolvedValue({
+          data: {
+            loginViaEmailVerificationCode: {
+              sessionId: 1,
+              email: 'user@example.org',
+            },
+          },
         })
       })
 
-      describe('server response with success', () => {
-        it('calls the API', () => {
-          expect(changePasswordMock).toHaveBeenCalledWith(1, 'user@example.org', 'Aa123456')
+      it('renders the Reset Password form when authenticated', () => {
+        expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
+      })
+
+      describe('Register header', () => {
+        it('has a welcome message', async () => {
+          expect(wrapper.find('div.header').text()).toContain('reset-password.title')
+          expect(wrapper.find('div.header').text()).toContain('reset-password.text')
+        })
+      })
+
+      describe('links', () => {
+        it('has a link "Back"', async () => {
+          expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
         })
 
-        it('redirects to "/thx/reset"', () => {
-          expect(routerPushMock).toHaveBeenCalledWith('/thx/reset')
+        it('links to /login when clicking "Back"', async () => {
+          expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/Login')
+        })
+      })
+
+      describe('reset password form', () => {
+        it('has a register form', async () => {
+          expect(wrapper.find('form').exists()).toBeTruthy()
+        })
+
+        it('has 2 password input fields', async () => {
+          expect(wrapper.findAll('input[type="password"]').length).toBe(2)
+        })
+
+        it('toggles the first input field to text when eye icon is clicked', async () => {
+          wrapper.findAll('button').at(0).trigger('click')
+          await wrapper.vm.$nextTick()
+          expect(wrapper.findAll('input').at(0).attributes('type')).toBe('text')
+        })
+
+        it('toggles the second input field to text when eye icon is clicked', async () => {
+          wrapper.findAll('button').at(1).trigger('click')
+          await wrapper.vm.$nextTick()
+          expect(wrapper.findAll('input').at(1).attributes('type')).toBe('text')
+        })
+      })
+
+      describe('submit form', () => {
+        beforeEach(async () => {
+          await wrapper.setData({ authenticated: true, sessionId: 1 })
+          await wrapper.vm.$nextTick()
+          await wrapper.findAll('input').at(0).setValue('Aa123456')
+          await wrapper.findAll('input').at(1).setValue('Aa123456')
+          await flushPromises()
+          await wrapper.find('form').trigger('submit')
+        })
+
+        describe('server response with error', () => {
+          beforeEach(() => {
+            apolloQueryMock.mockRejectedValue({ message: 'error' })
+          })
+          it('toasts an error message', () => {
+            expect(toasterMock).toHaveBeenCalledWith('error')
+          })
+        })
+
+        describe('server response with success', () => {
+          beforeEach(() => {
+            apolloQueryMock.mockResolvedValue({
+              data: {
+                resetPassword: 'success',
+              },
+            })
+          })
+          it('calls the API', () => {
+            expect(apolloQueryMock).toBeCalledWith(
+              expect.objectContaining({
+                variables: {
+                  sessionId: 1,
+                  email: 'user@example.org',
+                  password: 'Aa123456',
+                },
+              }),
+            )
+          })
+
+          it('redirects to "/thx/reset"', () => {
+            expect(routerPushMock).toHaveBeenCalledWith('/thx/reset')
+          })
         })
       })
     })
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index be565333a..e93f728b1 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -47,8 +47,8 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI'
 import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation'
+import { resetPassword, loginViaEmailVerificationCode } from '../../graphql/queries'
 
 export default {
   name: 'ResetPassword',
@@ -70,33 +70,43 @@ export default {
   },
   methods: {
     async onSubmit() {
-      const result = await loginAPI.changePassword(this.sessionId, this.email, this.form.password)
-      if (result.success) {
-        this.form.password = ''
-        /*
-            this.$store.dispatch('login', {
-            sessionId: result.result.data.session_id,
-            email: result.result.data.user.email,
-            })
-          */
-        this.$router.push('/thx/reset')
-      } else {
-        this.$toasted.error(result.result.message)
-      }
+      this.$apollo
+        .query({
+          query: resetPassword,
+          variables: {
+            sessionId: this.sessionId,
+            email: this.email,
+            password: this.form.password,
+          },
+        })
+        .then(() => {
+          this.form.password = ''
+          this.$router.push('/thx/reset')
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
     },
     async authenticate() {
       const loader = this.$loading.show({
         container: this.$refs.header,
       })
       const optin = this.$route.params.optin
-      const result = await loginAPI.loginViaEmailVerificationCode(optin)
-      if (result.success) {
-        this.authenticated = true
-        this.sessionId = result.result.data.session_id
-        this.email = result.result.data.user.email
-      } else {
-        this.$toasted.error(result.result.message)
-      }
+      this.$apollo
+        .query({
+          query: loginViaEmailVerificationCode,
+          variables: {
+            optin: optin,
+          },
+        })
+        .then((result) => {
+          this.authenticated = true
+          this.sessionId = result.data.loginViaEmailVerificationCode.sessionId
+          this.email = result.data.loginViaEmailVerificationCode.email
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
       loader.hide()
       this.pending = false
     },

From d09e10f6991b2feec7bac08d1fb58d514ae8f52f Mon Sep 17 00:00:00 2001
From: Hannes Heine <hannes.heine@gmail.com>
Date: Mon, 9 Aug 2021 16:38:40 +0200
Subject: [PATCH 6/6] WIP Register.

---
 frontend/src/views/Pages/Register.spec.js      |  2 +-
 frontend/src/views/Pages/Register.vue          | 16 ++++++----------
 frontend/src/views/Pages/ResetPassword.spec.js |  5 +++++
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index b200eb397..0b41bf014 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -105,6 +105,6 @@ describe('Register', () => {
       })
     })
 
-    // To Do: Test lines 156-197,210-213
+    // To Do: Test lines 160-205,218
   })
 })
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index 570bd83db..f4f18ce52 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -183,17 +183,13 @@ export default {
             password: this.form.password.password,
           },
         })
-        .then((result) => {
-          if (result.success) {
-            this.form.email = ''
-            this.form.firstname = ''
-            this.form.lastname = ''
-            this.form.password.password = ''
+        .then(() => {
+          this.form.email = ''
+          this.form.firstname = ''
+          this.form.lastname = ''
+          this.form.password.password = ''
 
-            this.$router.push('/thx/register')
-          } else {
-            throw new Error(result.errors[0].message)
-          }
+          this.$router.push('/thx/register')
         })
         .catch((error) => {
           this.showError = true
diff --git a/frontend/src/views/Pages/ResetPassword.spec.js b/frontend/src/views/Pages/ResetPassword.spec.js
index 4595314fa..5660866a1 100644
--- a/frontend/src/views/Pages/ResetPassword.spec.js
+++ b/frontend/src/views/Pages/ResetPassword.spec.js
@@ -86,6 +86,11 @@ describe('ResetPassword', () => {
         })
       })
 
+      it('Has sessionId from API call', async () => {
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.sessionId).toBe(1)
+      })
+
       it('renders the Reset Password form when authenticated', () => {
         expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
       })