Merge pull request #546 from gradido/test-forget-password

feat: Test Forget Password

.github/workflows/test.yml

@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 29
+          min_coverage: 31
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/views/Layout/DashboardLayout_gdd.spec.js

@@ -1,16 +1,12 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import flushPromises from 'flush-promises'
-import routes from '../../routes/routes'
 import DashboardLayoutGdd from './DashboardLayout_gdd'
 
 jest.useFakeTimers()
 
 const localVue = global.localVue
 
-const router = new VueRouter({ routes })
-
 const transitionStub = () => ({
   render(h) {
     return this.$options._renderChildren
@@ -26,6 +22,14 @@ describe('DashboardLayoutGdd', () => {
     },
     $t: jest.fn((t) => t),
     $n: jest.fn(),
+    $route: {
+      meta: {
+        hideFooter: false,
+      },
+    },
+    $router: {
+      push: jest.fn(),
+    },
   }
 
   const state = {
@@ -40,6 +44,7 @@ describe('DashboardLayoutGdd', () => {
   const stubs = {
     RouterLink: RouterLinkStub,
     FadeTransition: transitionStub(),
+    RouterView: transitionStub(),
   }
 
   const store = new Vuex.Store({
@@ -50,7 +55,7 @@ describe('DashboardLayoutGdd', () => {
   })
 
   const Wrapper = () => {
-    return mount(DashboardLayoutGdd, { localVue, mocks, router, store, stubs })
+    return mount(DashboardLayoutGdd, { localVue, mocks, store, stubs })
   }
 
   describe('mount', () => {

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

@@ -0,0 +1,114 @@
+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
+
+const mockRouterPush = jest.fn()
+
+describe('ForgotPassword', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $router: {
+      push: mockRouterPush,
+    },
+  }
+
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
+  const Wrapper = () => {
+    return mount(ForgotPassword, { localVue, mocks, stubs })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.forgot-password').exists()).toBeTruthy()
+    })
+
+    it('has a title', () => {
+      expect(wrapper.find('h1').text()).toEqual('site.password.title')
+    })
+
+    it('has a subtitle', () => {
+      expect(wrapper.find('p.text-lead').text()).toEqual('site.password.subtitle')
+    })
+
+    describe('back button', () => {
+      it('has a "back" button', () => {
+        expect(wrapper.findComponent(RouterLinkStub).text()).toEqual('back')
+      })
+
+      it('links to login', () => {
+        expect(wrapper.findComponent(RouterLinkStub).props().to).toEqual('/Login')
+      })
+    })
+
+    describe('input form', () => {
+      let form
+
+      beforeEach(() => {
+        form = wrapper.find('form')
+      })
+
+      it('has the label "Email"', () => {
+        expect(form.find('label').text()).toEqual('Email')
+      })
+
+      it('has the placeholder "Email"', () => {
+        expect(form.find('input').attributes('placeholder')).toEqual('Email')
+      })
+
+      it('has a submit button', () => {
+        expect(form.find('button[type="submit"]').exists()).toBeTruthy()
+      })
+
+      describe('invalid Email', () => {
+        beforeEach(async () => {
+          await form.find('input').setValue('no-email')
+          await flushPromises()
+        })
+
+        it('displays an error', () => {
+          expect(form.find('#reset-pwd--live-feedback').text()).toEqual(
+            'The Email field must be a valid email',
+          )
+        })
+
+        it('does not call the API', () => {
+          expect(mockAPIcall).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('valid Email', () => {
+        beforeEach(async () => {
+          await form.find('input').setValue('user@example.org')
+          form.trigger('submit')
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+        })
+
+        it('calls the API', () => {
+          expect(mockAPIcall).toHaveBeenCalledWith('user@example.org')
+        })
+
+        it('pushes "/thx/password" to the route', () => {
+          expect(mockRouterPush).toHaveBeenCalledWith('/thx/password')
+        })
+      })
+    })
+  })
+})

frontend/src/views/Pages/ForgotPassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="forgot-password">
     <div class="header p-4">
       <b-container class="container">
         <div class="header-body text-center mb-7">
@@ -70,7 +70,6 @@ export default {
       },
     }
   },
-  created() {},
   methods: {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null

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

@@ -1,30 +1,69 @@
-import { mount } from '@vue/test-utils'
-import VueRouter from 'vue-router'
-import routes from '../../routes/routes'
-
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import loginAPI from '../../apis/loginAPI'
 import ResetPassword from './ResetPassword'
+import flushPromises from 'flush-promises'
+
+jest.mock('../../apis/loginAPI')
 
 const localVue = global.localVue
 
-const router = new VueRouter({ routes })
+const successResponseObject = {
+  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' } })
+  .mockReturnValue(successResponseObject)
+
+changePasswordMock
+  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
+  .mockReturnValue({ success: true })
+
+loginAPI.loginViaEmailVerificationCode = emailVerificationMock
+loginAPI.changePassword = changePasswordMock
 
 describe('ResetPassword', () => {
   let wrapper
 
-  const emailVerification = jest.fn()
-
   const mocks = {
     $i18n: {
       locale: 'en',
     },
     $t: jest.fn((t) => t),
-    loginAPI: {
-      loginViaEmailVerificationCode: emailVerification,
+    $route: {
+      params: {
+        optin: '123',
+      },
+    },
+    $toast: {
+      error: toasterMock,
+    },
+    $router: {
+      push: routerPushMock,
     },
   }
 
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
   const Wrapper = () => {
-    return mount(ResetPassword, { localVue, mocks, router })
+    return mount(ResetPassword, { localVue, mocks, stubs })
   }
 
   describe('mount', () => {
@@ -32,84 +71,94 @@ describe('ResetPassword', () => {
       wrapper = Wrapper()
     })
 
-    /*
     it('calls the email verification when created', () => {
-      const spy = jest.spyOn(wrapper.vm, 'authenticate')
-      expect(spy).toBeCalled()
+      expect(emailVerificationMock).toHaveBeenCalledWith('123')
     })
-    */
 
-    it('does not render the Reset Password form when not authenticated', async () => {
+    it('does not render the Reset Password form when not authenticated', () => {
       expect(wrapper.find('div.resetpwd-form').exists()).toBeFalsy()
     })
 
-    it('renders the Reset Password form', async () => {
+    it('toasts an error when no valid optin is given', () => {
+      expect(toasterMock).toHaveBeenCalledWith('error')
+    })
+
+    it('renders the Reset Password form when authenticated', async () => {
       wrapper.setData({ authenticated: true })
       await wrapper.vm.$nextTick()
       expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
     })
 
-    // describe('Register header', () => {
-    //  it('has a welcome message', () => {
-    //    expect(wrapper.find('div.header').text()).toBe('site.signup.title site.signup.subtitle')
-    //  })
-    // })
+    describe('Register header', () => {
+      it('has a welcome message', () => {
+        expect(wrapper.find('div.header').text()).toBe('reset-password.title reset-password.text')
+      })
+    })
 
-    // describe('links', () => {
-    //  it('has a link "Back"', () => {
-    //    expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
-    //  })
+    /* there is no back button, why?
+    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')
-    //  })
-    // })
+      it('links to /login when clicking "Back"', () => {
+        expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/login')
+      })
+    })
+    */
 
-    // describe('Register form', () => {
-    //  it('has a register form', () => {
-    //    expect(wrapper.find('form').exists()).toBeTruthy()
-    //  })
+    describe('reset password form', () => {
+      it('has a register form', () => {
+        expect(wrapper.find('form').exists()).toBeTruthy()
+      })
 
-    //  it('has 3 text input fields', () => {
-    //    expect(wrapper.findAll('input[type="text"]').length).toBe(3)
-    //  })
+      it('has 2 password input fields', () => {
+        expect(wrapper.findAll('input[type="password"]').length).toBe(2)
+      })
 
-    //  it('has 2 password input fields', () => {
-    //    expect(wrapper.findAll('input[type="password"]').length).toBe(2)
-    //  })
+      it('has no submit button when not completely filled', () => {
+        expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
+      })
 
-    //  it('has 1 checkbox input fields', () => {
-    //    expect(wrapper.findAll('input[type="checkbox"]').length).toBe(1)
-    //  })
+      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('has no submit button when not completely filled', () => {
-    //    expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
-    //  })
+      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')
+      })
+    })
 
-    //  it('shows a warning when no valid Email is entered', async () => {
-    //    wrapper.findAll('input[type="text"]').at(2).setValue('no_valid@Email')
-    //    await flushPromises()
-    //    await expect(wrapper.find('.invalid-feedback').text()).toEqual(
-    //      'The Email field must be a valid email',
-    //    )
-    //  })
+    describe('submit form', () => {
+      beforeEach(async () => {
+        wrapper.findAll('input').at(0).setValue('Aa123456')
+        wrapper.findAll('input').at(1).setValue('Aa123456')
+        await wrapper.vm.$nextTick()
+        await flushPromises()
+        wrapper.find('form').trigger('submit')
+      })
 
-    //  it('shows 4 warnings when no password is set', async () => {
-    //    const passwords = wrapper.findAll('input[type="password"]')
-    //    passwords.at(0).setValue('')
-    //    passwords.at(1).setValue('')
-    //    await flushPromises()
-    //    await expect(wrapper.find('div.hints').text()).toContain(
-    //      'site.signup.lowercase',
-    //      'site.signup.uppercase',
-    //      'site.signup.minimum',
-    //      'site.signup.one_number',
-    //    )
-    //  })
+      describe('server response with error', () => {
+        it('toasts an error message', async () => {
+          expect(toasterMock).toHaveBeenCalledWith('error')
+        })
+      })
 
-    //  //TODO test different invalid password combinations
-    // })
+      describe('server response with success', () => {
+        it('calls the API', async () => {
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+          expect(changePasswordMock).toHaveBeenCalledWith(1, 'user@example.org', 'Aa123456')
+        })
 
-    // TODO test submit button
+        it('redirects to "/thx/reset"', () => {
+          expect(routerPushMock).toHaveBeenCalledWith('/thx/reset')
+        })
+      })
+    })
   })
 })

frontend/src/views/Pages/ResetPassword.vue

@@ -121,6 +121,7 @@ export default {
       },
       password: '',
       passwordVisible: false,
+      passwordVisibleRepeat: false,
       submitted: false,
       authenticated: false,
       sessionId: null,
@@ -134,6 +135,9 @@ export default {
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },
+    togglePasswordRepeatVisibility() {
+      this.passwordVisibleRepeat = !this.passwordVisibleRepeat
+    },
     async onSubmit() {
       const result = await loginAPI.changePassword(this.sessionId, this.email, this.form.password)
       if (result.success) {

frontend/test/testSetup.js

@@ -7,7 +7,6 @@ import * as rules from 'vee-validate/dist/rules'
 import { messages } from 'vee-validate/dist/locale/en.json'
 import RegeneratorRuntime from 'regenerator-runtime'
 import SideBar from '@/components/SidebarPlugin'
-import VueRouter from 'vue-router'
 import VueQrcode from 'vue-qrcode'
 
 import VueMoment from 'vue-moment'
@@ -29,7 +28,6 @@ global.localVue.use(Vuex)
 global.localVue.use(IconsPlugin)
 global.localVue.use(RegeneratorRuntime)
 global.localVue.use(SideBar)
-global.localVue.use(VueRouter)
 global.localVue.use(VueQrcode)
 global.localVue.use(VueMoment)
 global.localVue.component('validation-provider', ValidationProvider)