Complete test for login page

frontend/src/components/Inputs/InputEmail.vue

@@ -37,7 +37,7 @@ export default {
         }
       },
     },
-    name: { type: String, default: 'email' },
+    name: { type: String, default: 'Email' },
     label: { type: String, default: 'Email' },
     placeholder: { type: String, default: 'Email' },
     value: { required: true, type: String },

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

@@ -1,10 +1,37 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
-
+import loginAPI from '../../apis/loginAPI'
 import Login from './Login'
 
+jest.mock('../../apis/loginAPI')
+
 const localVue = global.localVue
 
+const mockLoginCall = jest.fn()
+mockLoginCall.mockReturnValue({
+  success: true,
+  result: {
+    data: {
+      session_id: 1,
+      user: {
+        name: 'Peter Lustig',
+      },
+    },
+  },
+})
+
+loginAPI.login = mockLoginCall
+
+const toastErrorMock = jest.fn()
+const mockStoreDispach = jest.fn()
+const mockRouterPush = jest.fn()
+const spinnerHideMock = jest.fn()
+const spinnerMock = jest.fn(() => {
+  return {
+    hide: spinnerHideMock,
+  }
+})
+
 describe('Login', () => {
   let wrapper
 
@@ -13,6 +40,18 @@ describe('Login', () => {
       locale: 'en',
     },
     $t: jest.fn((t) => t),
+    $store: {
+      dispatch: mockStoreDispach,
+    },
+    $loading: {
+      show: spinnerMock,
+    },
+    $router: {
+      push: mockRouterPush,
+    },
+    $toast: {
+      error: toastErrorMock,
+    },
   }
 
   const stubs = {
@@ -76,16 +115,76 @@ describe('Login', () => {
       it('has a Submit button', () => {
         expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy()
       })
-
-      it('shows a warning when no valid Email is entered', async () => {
-        wrapper.find('input[placeholder="Email"]').setValue('no_valid@Email')
-        await flushPromises()
-        await expect(wrapper.find('.invalid-feedback').text()).toEqual(
-          'The Email field must be a valid email',
-        )
-      })
     })
 
-    // to do: test submit button
+    describe('submit', () => {
+      describe('no data', () => {
+        it('displays a message that Email is required', async () => {
+          await wrapper.find('form').trigger('submit')
+          await flushPromises()
+          expect(wrapper.findAll('div.invalid-feedback').at(0).text()).toBe(
+            'The Email field is required',
+          )
+        })
+
+        it('displays a message that password is required', async () => {
+          await wrapper.find('form').trigger('submit')
+          await flushPromises()
+          expect(wrapper.findAll('div.invalid-feedback').at(1).text()).toBe(
+            'The password field is required',
+          )
+        })
+      })
+
+      describe('valid data', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.find('input[placeholder="Email"]').setValue('user@example.org')
+          await wrapper.find('input[placeholder="form.password"]').setValue('1234')
+          await flushPromises()
+          await wrapper.find('form').trigger('submit')
+          await flushPromises()
+        })
+
+        it('calls the API with the given data', () => {
+          expect(mockLoginCall).toBeCalledWith('user@example.org', '1234')
+        })
+
+        it('creates a spinner', () => {
+          expect(spinnerMock).toBeCalled()
+        })
+
+        describe('login success', () => {
+          it('dispatches server response to store', () => {
+            expect(mockStoreDispach).toBeCalledWith('login', {
+              sessionId: 1,
+              user: { name: 'Peter Lustig' },
+            })
+          })
+
+          it('redirects to overview page', () => {
+            expect(mockRouterPush).toBeCalledWith('/overview')
+          })
+
+          it('hides the spinner', () => {
+            expect(spinnerHideMock).toBeCalled()
+          })
+        })
+
+        describe('login fails', () => {
+          beforeEach(() => {
+            mockLoginCall.mockReturnValue({ success: false })
+          })
+
+          it('hides the spinner', () => {
+            expect(spinnerHideMock).toBeCalled()
+          })
+
+          it('toasts an error message', () => {
+            expect(toastErrorMock).toBeCalledWith('error.no-account')
+          })
+        })
+      })
+    })
   })
 })