Merge branch 'apollo-client' of github.com:gradido/gradido into apollo-client

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

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(
+        // eslint-disable-next-line no-console
-          this.$store.state.sessionId,
+        this.$apollo
-          this.$store.state.email,
+          .query({
-          locale,
+            query: updateUserInfos,
-        )
+            variables: {
-        if (result.success) {
+              sessionId: this.$store.state.sessionId,
+              email: this.$store.state.email,
+              locale: locale,
+            },
+          })
+          .then(() => {
             // toast success message
-        } else {
+          })
+          .catch(() => {
             // toast error message
-        }
+          })
       }
     },
     getLocaleObject(code) {

frontend/src/graphql/queries.js

@@ -15,12 +15,56 @@ 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
+    }
+  }
+`
+
 export const transactionsQuery = gql`
   query($sessionId: Float!, $firstPage: Int = 1, $items: Int = 25, $order: String = "DESC") {
     transactionList(sessionId: $sessionId, firstPage: $firstPage, items: $items, order: $order) {
@@ -51,3 +95,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)
+  }
+`

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

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,28 @@ export default {
       })
     },
     async onSubmit() {
-      const result = await loginAPI.create(
+      this.$axios
-        this.form.email,
+        .query({
-        this.form.firstname,
+          query: resgisterUserQuery,
-        this.form.lastname,
+          variables: {
-        this.form.password.password,
-      )
-      if (result.success) {
-        /* this.$store.dispatch('login', {
-          sessionId: result.result.data.session_id,
-          user: {
             email: this.form.email,
             firstName: this.form.firstname,
-            lastName: this.form.lastname
+            lastName: this.form.lastname,
-          }
+            password: this.form.password.password,
-
+          },
         })
-        */
+        .then(() => {
           this.form.email = ''
           this.form.firstname = ''
           this.form.lastname = ''
           this.form.password.password = ''
 
           this.$router.push('/thx/register')
-      } else {
+        })
+        .catch((error) => {
           this.showError = true
-        this.messageError = result.result.message
+          this.messageError = error.message
-      }
+        })
     },
     closeAlert() {
       this.showError = false

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 = {
+const apolloQueryMock = jest.fn().mockRejectedValue({ message: 'error' })
-  success: true,
-  result: {
-    data: {
-      session_id: 1,
-      user: {
-        email: 'user@example.org',
-      },
-    },
-  },
-}
 
-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,10 +53,13 @@ describe('ResetPassword', () => {
       wrapper = Wrapper()
     })
 
-    it('calls the email verification when created', () => {
+    it('calls the email verification when created', async () => {
-      expect(emailVerificationMock).toHaveBeenCalledWith('123')
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({ variables: { optin: '123' } }),
+      )
     })
 
+    describe('No valid optin', () => {
       it('does not render the Reset Password form when not authenticated', () => {
         expect(wrapper.find('form').exists()).toBeFalsy()
       })
@@ -95,35 +72,52 @@ describe('ResetPassword', () => {
         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 () => {
+    describe('is authenticated', () => {
-      await wrapper.setData({ authenticated: true })
+      beforeEach(() => {
+        apolloQueryMock.mockResolvedValue({
+          data: {
+            loginViaEmailVerificationCode: {
+              sessionId: 1,
+              email: 'user@example.org',
+            },
+          },
+        })
+      })
+
+      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()
       })
 
       describe('Register header', () => {
-      it('has a welcome message', () => {
+        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"', () => {
+        it('has a link "Back"', async () => {
           expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
         })
 
-      it('links to /login when clicking "Back"', () => {
+        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', () => {
+        it('has a register form', async () => {
           expect(wrapper.find('form').exists()).toBeTruthy()
         })
 
-      it('has 2 password input fields', () => {
+        it('has 2 password input fields', async () => {
           expect(wrapper.findAll('input[type="password"]').length).toBe(2)
         })
 
@@ -142,6 +136,8 @@ describe('ResetPassword', () => {
 
       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()
@@ -149,14 +145,32 @@ describe('ResetPassword', () => {
         })
 
         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(changePasswordMock).toHaveBeenCalledWith(1, 'user@example.org', 'Aa123456')
+            expect(apolloQueryMock).toBeCalledWith(
+              expect.objectContaining({
+                variables: {
+                  sessionId: 1,
+                  email: 'user@example.org',
+                  password: 'Aa123456',
+                },
+              }),
+            )
           })
 
           it('redirects to "/thx/reset"', () => {
@@ -166,3 +180,4 @@ describe('ResetPassword', () => {
       })
     })
   })
+})

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)
+      this.$apollo
-      if (result.success) {
+        .query({
-        this.form.password = ''
+          query: resetPassword,
-        /*
+          variables: {
-            this.$store.dispatch('login', {
+            sessionId: this.sessionId,
-            sessionId: result.result.data.session_id,
+            email: this.email,
-            email: result.result.data.user.email,
+            password: this.form.password,
+          },
         })
-          */
+        .then(() => {
+          this.form.password = ''
           this.$router.push('/thx/reset')
-      } else {
+        })
-        this.$toasted.error(result.result.message)
+        .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)
+      this.$apollo
-      if (result.success) {
+        .query({
+          query: loginViaEmailVerificationCode,
+          variables: {
+            optin: optin,
+          },
+        })
+        .then((result) => {
           this.authenticated = true
-        this.sessionId = result.result.data.session_id
+          this.sessionId = result.data.loginViaEmailVerificationCode.sessionId
-        this.email = result.result.data.user.email
+          this.email = result.data.loginViaEmailVerificationCode.email
-      } else {
+        })
-        this.$toasted.error(result.result.message)
+        .catch((error) => {
-      }
+          this.$toasted.error(error.message)
+        })
       loader.hide()
       this.pending = false
     },