100% test of Reset Password, better naming of variables

frontend/src/pages/ResetPassword.spec.js

@@ -54,25 +54,27 @@ describe('ResetPassword', () => {
 
   describe('mount', () => {
     beforeEach(() => {
+      jest.clearAllMocks()
       wrapper = Wrapper()
     })
 
-    describe('No valid optin', () => {
+    describe('no valid optin', () => {
-      it.skip('does not render the Reset Password form when not authenticated', () => {
+      beforeEach(() => {
-        expect(wrapper.find('form').exists()).toBeFalsy()
+        jest.clearAllMocks()
+        apolloQueryMock.mockRejectedValue({ message: 'Your time is up!' })
+        wrapper = Wrapper()
       })
 
-      it.skip('toasts an error when no valid optin is given', () => {
+      it('toasts an error when no valid optin is given', () => {
-        expect(toastErrorSpy).toHaveBeenCalledWith('error')
+        expect(toastErrorSpy).toHaveBeenCalledWith('Your time is up!')
       })
 
-      it.skip('has a message suggesting to contact the support', () => {
+      it('redirects to /forgot-password/resetPassword', () => {
-        expect(wrapper.find('div.header').text()).toContain('settings.password.reset')
+        expect(routerPushMock).toBeCalledWith('/forgot-password/resetPassword')
-        expect(wrapper.find('div.header').text()).toContain('settings.password.not-authenticated')
       })
     })
 
-    describe('is authenticated', () => {
+    describe('valid optin', () => {
       it('renders the Reset Password form when authenticated', () => {
         expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
       })
@@ -148,7 +150,6 @@ describe('ResetPassword', () => {
 
         describe('server response with error code > 10min', () => {
           beforeEach(async () => {
-            jest.clearAllMocks()
             apolloMutationMock.mockRejectedValue({ message: '...Code is older than 10 minutes' })
             await wrapper.find('form').trigger('submit')
             await flushPromises()
@@ -163,7 +164,7 @@ describe('ResetPassword', () => {
           })
         })
 
-        describe('server response with error code > 10min', () => {
+        describe('server response with error', () => {
           beforeEach(async () => {
             jest.clearAllMocks()
             apolloMutationMock.mockRejectedValueOnce({ message: 'Error' })
@@ -178,6 +179,7 @@ describe('ResetPassword', () => {
 
         describe('server response with success on /checkEmail', () => {
           beforeEach(async () => {
+            jest.clearAllMocks()
             mocks.$route.path.mock = 'checkEmail'
             apolloMutationMock.mockResolvedValue({
               data: {
@@ -204,6 +206,28 @@ describe('ResetPassword', () => {
           it('redirects to "/thx/checkEmail"', () => {
             expect(routerPushMock).toHaveBeenCalledWith('/thx/checkEmail')
           })
+
+          describe('with param code', () => {
+            beforeEach(async () => {
+              mocks.$route.params.code = 'the-most-secret-code-ever'
+              apolloMutationMock.mockResolvedValue({
+                data: {
+                  resetPassword: 'success',
+                },
+              })
+              wrapper = Wrapper()
+              await wrapper.findAll('input').at(0).setValue('Aa123456_')
+              await wrapper.findAll('input').at(1).setValue('Aa123456_')
+              await wrapper.find('form').trigger('submit')
+              await flushPromises()
+            })
+
+            it('redirects to "/thx/checkEmail/the-most-secret-code-ever"', () => {
+              expect(routerPushMock).toHaveBeenCalledWith(
+                '/thx/checkEmail/the-most-secret-code-ever',
+              )
+            })
+          })
         })
 
         describe('server response with success on /reset-password', () => {

frontend/src/pages/ResetPassword.vue

@@ -6,11 +6,11 @@
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
               <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-              <h1>{{ $t(displaySetup.authenticated) }}</h1>
+              <h1>{{ $t(displaySetup.title) }}</h1>
               <div class="pb-4">
                 <span>
                   <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-                  {{ $t(displaySetup.notAuthenticated) }}
+                  {{ $t(displaySetup.text) }}
                 </span>
               </div>
             </b-col>
@@ -53,14 +53,14 @@ import { queryOptIn } from '@/graphql/queries'
 
 const textFields = {
   reset: {
-    authenticated: 'settings.password.change-password',
+    title: 'settings.password.change-password',
-    notAuthenticated: 'settings.password.reset-password.text',
+    text: 'settings.password.reset-password.text',
     button: 'settings.password.change-password',
     linkTo: '/login',
   },
   checkEmail: {
-    authenticated: 'settings.password.set',
+    title: 'settings.password.set',
-    notAuthenticated: 'settings.password.set-password.text',
+    text: 'settings.password.set-password.text',
     button: 'settings.password.set',
     linkTo: '/login',
   },