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

frontend/src/graphql/queries.js

@@ -107,3 +107,11 @@ export const sendCoins = gql`
     sendCoins(sessionId: $sessionId, email: $email, amount: $amount, memo: $memo)
   }
 `
+
+export const sendResetPasswordEmail = gql`
+  query($email: String!) {
+    sendResetPasswordEmail(email: $email) {
+      state
+    }
+  }
+`

frontend/src/views/Pages/ForgotPassword.spec.js

@@ -1,12 +1,8 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
-import loginAPI from '../../apis/loginAPI.js'
 import ForgotPassword from './ForgotPassword'
 
-jest.mock('../../apis/loginAPI.js')
-
 const mockAPIcall = jest.fn()
-loginAPI.sendEmail = mockAPIcall
 
 const localVue = global.localVue
 
@@ -20,6 +16,9 @@ describe('ForgotPassword', () => {
     $router: {
       push: mockRouterPush,
     },
+    $apollo: {
+      query: mockAPIcall,
+    },
   }
 
   const stubs = {
@@ -92,20 +91,58 @@ describe('ForgotPassword', () => {
       })
 
       describe('valid Email', () => {
+        beforeEach(() => {
+          form.find('input').setValue('user@example.org')
+        })
+
+        describe('calls the API', () => {
+          describe('sends back error', () => {
             beforeEach(async () => {
-          await form.find('input').setValue('user@example.org')
+              mockAPIcall.mockRejectedValue({
+                message: 'error',
+              })
               await form.trigger('submit')
               await flushPromises()
             })
 
-        it('calls the API', () => {
+            it('pushes to "/thx/password"', () => {
-          expect(mockAPIcall).toHaveBeenCalledWith('user@example.org')
+              expect(mockAPIcall).toBeCalledWith(
+                expect.objectContaining({
+                  variables: {
+                    email: 'user@example.org',
+                  },
+                }),
+              )
+              expect(mockRouterPush).toHaveBeenCalledWith('/thx/password')
+            })
           })
 
-        it('pushes "/thx/password" to the route', () => {
+          describe('success', () => {
+            beforeEach(async () => {
+              mockAPIcall.mockResolvedValue({
+                data: {
+                  sendResetPasswordEmail: {
+                    state: 'success',
+                  },
+                },
+              })
+              await form.trigger('submit')
+              await flushPromises()
+            })
+
+            it('pushes to "/thx/password"', () => {
+              expect(mockAPIcall).toBeCalledWith(
+                expect.objectContaining({
+                  variables: {
+                    email: 'user@example.org',
+                  },
+                }),
+              )
               expect(mockRouterPush).toHaveBeenCalledWith('/thx/password')
             })
           })
         })
       })
+    })
+  })
 })

frontend/src/views/Pages/ForgotPassword.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI.js'
+import { sendResetPasswordEmail } from '../../graphql/queries'
 import InputEmail from '../../components/Inputs/InputEmail'
 
 export default {
@@ -56,9 +56,19 @@ export default {
   },
   methods: {
     async onSubmit() {
-      await loginAPI.sendEmail(this.form.email)
+      this.$apollo
-      // always give success to avoid email spying
+        .query({
+          query: sendResetPasswordEmail,
+          variables: {
+            email: this.form.email,
+          },
+        })
+        .then((result) => {
           this.$router.push('/thx/password')
+        })
+        .catch(() => {
+          this.$router.push('/thx/password')
+        })
     },
   },
 }

frontend/src/views/Pages/Register.spec.js

@@ -5,6 +5,9 @@ import Register from './Register'
 
 const localVue = global.localVue
 
+const resgisterUserQueryMock = jest.fn()
+const routerPushMock = jest.fn()
+
 describe('Register', () => {
   let wrapper
 
@@ -13,6 +16,12 @@ describe('Register', () => {
       locale: 'en',
     },
     $t: jest.fn((t) => t),
+    $router: {
+      push: routerPushMock,
+    },
+    $apollo: {
+      query: resgisterUserQueryMock,
+    },
   }
 
   const stubs = {
@@ -105,6 +114,93 @@ describe('Register', () => {
       })
     })
 
-    // To Do: Test lines 160-205,218
+    describe('resetForm', () => {
+      beforeEach(() => {
+        wrapper.find('#registerFirstname').setValue('Max')
+        wrapper.find('#registerLastname').setValue('Mustermann')
+        wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
+        wrapper.find('input[name="form.password"]').setValue('Aa123456')
+        wrapper.find('input[name="form.passwordRepeat"]').setValue('Aa123456')
+        wrapper.find('input[name="site.signup.agree"]').setChecked(true)
+      })
+
+      it('trigger reset button', async () => {
+        await wrapper.find('button.ml-2').trigger('click')
+        await flushPromises()
+        expect(wrapper.find('#registerFirstname').text()).toBe('')
+        expect(wrapper.find('#registerLastname').text()).toBe('')
+        expect(wrapper.find('#Email-input-field').text()).toBe('')
+        expect(wrapper.find('input[name="form.password"]').text()).toBe('')
+      })
+    })
+
+    describe('API calls', () => {
+      beforeEach(() => {
+        wrapper.find('#registerFirstname').setValue('Max')
+        wrapper.find('#registerLastname').setValue('Mustermann')
+        wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
+        wrapper.find('input[name="form.password"]').setValue('Aa123456')
+        wrapper.find('input[name="form.passwordRepeat"]').setValue('Aa123456')
+      })
+
+      describe('server sends back error', () => {
+        beforeEach(() => {
+          resgisterUserQueryMock.mockRejectedValue({ message: 'error' })
+        })
+        it('shows error message', async () => {
+          await wrapper.find('form').trigger('submit')
+          await flushPromises()
+          expect(wrapper.vm.messageError).toBe('error')
+          expect(wrapper.vm.showError).toBeTruthy()
+          expect(wrapper.find('span.alert-text').exists()).toBeTruthy()
+          expect(wrapper.find('span.alert-text').text().length !== 0).toBeTruthy()
+        })
+
+        it('dissmiss error message', async () => {
+          await wrapper.find('form').trigger('submit')
+          await flushPromises()
+          expect(wrapper.find('button.close').exists()).toBeTruthy()
+          await wrapper.find('button.close').trigger('click')
+          await flushPromises()
+          expect(wrapper.vm.showError).toBe(false)
+          expect(wrapper.vm.messageError).toBe('')
+          expect(wrapper.vm.form.email).toBe('')
+          expect(wrapper.vm.form.firstname).toBe('')
+          expect(wrapper.vm.form.lastname).toBe('')
+          expect(wrapper.vm.form.password.password).toBe('')
+        })
+      })
+
+      describe('server sends back success', () => {
+        beforeEach(() => {
+          resgisterUserQueryMock.mockResolvedValue({
+            data: {
+              create: 'success',
+            },
+          })
+        })
+
+        it('rout to "/thx/register"', async () => {
+          await wrapper.find('form').trigger('submit')
+          await flushPromises()
+          expect(resgisterUserQueryMock).toBeCalledWith(
+            expect.objectContaining({
+              variables: {
+                email: 'max.mustermann@gradido.net',
+                firstName: 'Max',
+                lastName: 'Mustermann',
+                password: 'Aa123456',
+              },
+            }),
+          )
+          expect(wrapper.vm.form.email).toBe('')
+          expect(wrapper.vm.form.firstname).toBe('')
+          expect(wrapper.vm.form.lastname).toBe('')
+          expect(wrapper.vm.form.password.password).toBe('')
+          expect(routerPushMock).toHaveBeenCalledWith('/thx/register')
+        })
+      })
+    })
+    // TODO: line 157
   })
 })

frontend/src/views/Pages/Register.vue

@@ -173,7 +173,7 @@ export default {
       })
     },
     async onSubmit() {
-      this.$axios
+      this.$apollo
         .query({
           query: resgisterUserQuery,
           variables: {
@@ -188,7 +188,6 @@ export default {
           this.form.firstname = ''
           this.form.lastname = ''
           this.form.password.password = ''
-
           this.$router.push('/thx/register')
         })
         .catch((error) => {

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js

@@ -1,22 +1,15 @@
 import { mount } from '@vue/test-utils'
 import UserCardFormUserData from './UserCard_FormUserData'
-import loginAPI from '../../../apis/loginAPI'
 import flushPromises from 'flush-promises'
 
-jest.mock('../../../apis/loginAPI')
-
 const localVue = global.localVue
 
-const mockAPIcall = jest.fn((args) => {
+const mockAPIcall = jest.fn()
-  return { success: true }
-})
 
 const toastErrorMock = jest.fn()
 const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
-loginAPI.updateUserInfos = mockAPIcall
-
 describe('UserCard_FormUsername', () => {
   let wrapper
 
@@ -36,6 +29,9 @@ describe('UserCard_FormUsername', () => {
       success: toastSuccessMock,
       error: toastErrorMock,
     },
+    $apollo: {
+      query: mockAPIcall,
+    },
   }
 
   const Wrapper = () => {
@@ -102,6 +98,9 @@ describe('UserCard_FormUsername', () => {
 
       describe('successfull submit', () => {
         beforeEach(async () => {
+          mockAPIcall.mockResolvedValue({
+            state: 'success',
+          })
           jest.clearAllMocks()
           await wrapper.findAll('input').at(0).setValue('Petra')
           await wrapper.findAll('input').at(1).setValue('Lustiger')
@@ -111,12 +110,18 @@ describe('UserCard_FormUsername', () => {
           await flushPromises()
         })
 
-        it('calls the loginAPI', () => {
+        it('calls the API', () => {
-          expect(mockAPIcall).toBeCalledWith(1, 'user@example.org', {
+          expect(mockAPIcall).toBeCalledWith(
+            expect.objectContaining({
+              variables: {
+                sessionId: 1,
+                email: 'user@example.org',
                 firstName: 'Petra',
                 lastName: 'Lustiger',
                 description: 'Keine Nickelbrille',
-          })
+              },
+            }),
+          )
         })
 
         it('commits firstname to store', () => {
@@ -142,8 +147,10 @@ describe('UserCard_FormUsername', () => {
 
       describe('submit results in server error', () => {
         beforeEach(async () => {
+          mockAPIcall.mockRejectedValue({
+            message: 'Error',
+          })
           jest.clearAllMocks()
-          mockAPIcall.mockReturnValue({ success: false, result: { message: 'Error' } })
           await wrapper.findAll('input').at(0).setValue('Petra')
           await wrapper.findAll('input').at(1).setValue('Lustiger')
           await wrapper.find('textarea').setValue('Keine Nickelbrille')
@@ -152,12 +159,18 @@ describe('UserCard_FormUsername', () => {
           await flushPromises()
         })
 
-        it('calls the loginAPI', () => {
+        it('calls the API', () => {
-          expect(mockAPIcall).toBeCalledWith(1, 'user@example.org', {
+          expect(mockAPIcall).toBeCalledWith(
+            expect.objectContaining({
+              variables: {
+                sessionId: 1,
+                email: 'user@example.org',
                 firstName: 'Petra',
                 lastName: 'Lustiger',
                 description: 'Keine Nickelbrille',
-          })
+              },
+            }),
+          )
         })
 
         it('toasts an error message', () => {

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue

@@ -78,7 +78,7 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../../apis/loginAPI'
+import { updateUserInfos } from '../../../graphql/queries'
 
 export default {
   name: 'FormUserData',
@@ -114,24 +114,27 @@ export default {
     },
     async onSubmit(event) {
       event.preventDefault()
-      const result = await loginAPI.updateUserInfos(
+      this.$apollo
-        this.$store.state.sessionId,
+        .query({
-        this.$store.state.email,
+          query: updateUserInfos,
-        {
+          variables: {
+            sessionId: this.$store.state.sessionId,
+            email: this.$store.state.email,
             firstName: this.form.firstName,
             lastName: this.form.lastName,
             description: this.form.description,
           },
-      )
+        })
-      if (result.success) {
+        .then(() => {
           this.$store.commit('firstName', this.form.firstName)
           this.$store.commit('lastName', this.form.lastName)
           this.$store.commit('description', this.form.description)
           this.showUserData = true
           this.$toasted.success(this.$t('site.profil.user-data.change-success'))
-      } else {
+        })
-        this.$toasted.error(result.result.message)
+        .catch((error) => {
-      }
+          this.$toasted.error(error.message)
+        })
     },
   },
 }

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js

@@ -1,16 +1,11 @@
 import { mount } from '@vue/test-utils'
 import UserCardFormUsername from './UserCard_FormUsername'
-import loginAPI from '../../../apis/loginAPI'
 import flushPromises from 'flush-promises'
 import { extend } from 'vee-validate'
 
-jest.mock('../../../apis/loginAPI')
-
 const localVue = global.localVue
 
-const mockAPIcall = jest.fn((args) => {
+const mockAPIcall = jest.fn()
-  return { success: true }
-})
 
 // override this rule to avoid API call
 extend('gddUsernameUnique', {
@@ -23,8 +18,6 @@ const toastErrorMock = jest.fn()
 const toastSuccessMock = jest.fn()
 const storeCommitMock = jest.fn()
 
-loginAPI.changeUsernameProfile = mockAPIcall
-
 describe('UserCard_FormUsername', () => {
   let wrapper
 
@@ -42,6 +35,9 @@ describe('UserCard_FormUsername', () => {
       success: toastSuccessMock,
       error: toastErrorMock,
     },
+    $apollo: {
+      query: mockAPIcall,
+    },
   }
 
   const Wrapper = () => {
@@ -98,13 +94,24 @@ describe('UserCard_FormUsername', () => {
 
         describe('successfull submit', () => {
           beforeEach(async () => {
+            mockAPIcall.mockResolvedValue({
+              message: 'error',
+            })
             await wrapper.find('input[placeholder="Username"]').setValue('username')
             await wrapper.find('form').trigger('submit')
             await flushPromises()
           })
 
           it('calls the loginAPI', () => {
-            expect(mockAPIcall).toHaveBeenCalledWith(1, 'user@example.org', 'username')
+            expect(mockAPIcall).toHaveBeenCalledWith(
+              expect.objectContaining({
+                variables: {
+                  email: 'user@example.org',
+                  sessionId: 1,
+                  username: 'username',
+                },
+              }),
+            )
           })
 
           it('displays the new username', () => {
@@ -127,9 +134,8 @@ describe('UserCard_FormUsername', () => {
         describe('submit retruns error', () => {
           beforeEach(async () => {
             jest.clearAllMocks()
-            mockAPIcall.mockReturnValue({
+            mockAPIcall.mockRejectedValue({
-              success: false,
+              message: 'Error',
-              result: { message: 'Error' },
             })
             await wrapper.find('input[placeholder="Username"]').setValue('username')
             await wrapper.find('form').trigger('submit')
@@ -137,7 +143,15 @@ describe('UserCard_FormUsername', () => {
           })
 
           it('calls the loginAPI', () => {
-            expect(mockAPIcall).toHaveBeenCalledWith(1, 'user@example.org', 'username')
+            expect(mockAPIcall).toHaveBeenCalledWith(
+              expect.objectContaining({
+                variables: {
+                  email: 'user@example.org',
+                  sessionId: 1,
+                  username: 'username',
+                },
+              }),
+            )
           })
 
           it('toasts an error message', () => {

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue

@@ -67,7 +67,7 @@
   </b-card>
 </template>
 <script>
-import loginAPI from '../../../apis/loginAPI'
+import { updateUserInfos } from '../../../graphql/queries'
 
 export default {
   name: 'FormUsername',
@@ -86,22 +86,27 @@ export default {
       this.showUsername = true
     },
     async onSubmit() {
-      const result = await loginAPI.changeUsernameProfile(
+      this.$apollo
-        this.$store.state.sessionId,
+        .query({
-        this.$store.state.email,
+          query: updateUserInfos,
-        this.form.username,
+          variables: {
-      )
+            sessionId: this.$store.state.sessionId,
-      if (result.success) {
+            email: this.$store.state.email,
+            username: this.form.username,
+          },
+        })
+        .then(() => {
           this.$store.commit('username', this.form.username)
           this.username = this.form.username
           this.showUsername = true
           this.$toasted.success(this.$t('site.profil.user-data.change-success'))
-      } else {
+        })
-        this.$toasted.error(result.result.message)
+        .catch((error) => {
+          this.$toasted.error(error.message)
           this.showUsername = true
           this.username = this.$store.state.username
           this.form.username = this.$store.state.username
-      }
+        })
     },
   },
 }