test forget password, remove router from test setup

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,13 +1,9 @@
 import { mount } from '@vue/test-utils'
-import VueRouter from 'vue-router'
-import routes from '../../routes/routes'
 
 import ResetPassword from './ResetPassword'
 
 const localVue = global.localVue
 
-const router = new VueRouter({ routes })
-
 describe('ResetPassword', () => {
   let wrapper
 
@@ -21,10 +17,15 @@ describe('ResetPassword', () => {
     loginAPI: {
       loginViaEmailVerificationCode: emailVerification,
     },
+    $route: {
+      params: {
+        optin: '123',
+      },
+    },
   }
 
   const Wrapper = () => {
-    return mount(ResetPassword, { localVue, mocks, router })
+    return mount(ResetPassword, { localVue, mocks })
   }
 
   describe('mount', () => {
@@ -39,7 +40,7 @@ describe('ResetPassword', () => {
     })
     */
 
-    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()
     })
 

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)