From da28f1f364f96eb4140c3877293799330734ba73 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Jun 2021 13:40:27 +0200
Subject: [PATCH 1/5] setuo password component

---
 .../src/components/Inputs/InputPassword.vue   | 63 +++++++++++++++++++
 frontend/src/locales/de.json                  |  3 +-
 frontend/src/locales/en.json                  |  3 +-
 frontend/src/views/Pages/Login.vue            | 52 ++++-----------
 4 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/components/Inputs/InputPassword.vue

diff --git a/frontend/src/components/Inputs/InputPassword.vue b/frontend/src/components/Inputs/InputPassword.vue
new file mode 100644
index 000000000..638eb6eb3
--- /dev/null
+++ b/frontend/src/components/Inputs/InputPassword.vue
@@ -0,0 +1,63 @@
+<template>
+  <validation-provider tag="div" :rules="rules" :name="name" v-slot="{ errors, valid, validated }">
+    <b-form-group :label="label" :label-for="labelFor">
+      <b-input-group>
+        <b-form-input
+          v-model="currentValue"
+          :id="labelFor"
+          :name="name"
+          :placeholder="placeholder"
+          :type="showPassword ? 'text' : 'password'"
+          :state="validated ? valid : false"
+        ></b-form-input>
+        <b-input-group-append>
+          <b-button variant="outline-primary" @click="toggleShowPassword">
+            <b-icon :icon="showPassword ? 'eye' : 'eye-slash'" />
+          </b-button>
+        </b-input-group-append>
+        <b-form-invalid-feedback>
+          {{ errors[0] }}
+        </b-form-invalid-feedback>
+      </b-input-group>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+export default {
+  name: 'InputPassword',
+  props: {
+    rules: {
+      default: () => {
+        required: true
+      },
+    },
+    name: { default: '' },
+    label: { default: 'Password' },
+    placeholder: { default: 'Password' },
+    model: { required: true, type: String },
+  },
+  data() {
+    return {
+      currentValue: '',
+      showPassword: false,
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  methods: {
+    toggleShowPassword() {
+      console.log('toggleShowPassword', this.placeholder)
+      this.showPassword = !this.showPassword
+    },
+  },
+  watch: {
+    currentValue(val) {
+      console.log('currentValue', val)
+      this.$emit('input', val)
+    },
+  },
+}
+</script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 8554996bb..a1cdf985b 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -64,7 +64,8 @@
     "change_username_info": "Einmal gespeichert, kann der Username ncht mehr geändert werden!"
   },
   "error": {
-    "error":"Fehler"
+    "error":"Fehler",
+    "no-account": "Leider konnten wir keinen Account finden mit diesen Daten!"
   },
   "transaction":{
     "show_all":"Alle <strong>{count}</strong> Transaktionen ansehen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 7b97c2240..6e39a04b7 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -64,7 +64,8 @@
     "change_username_info": "Once saved, the username cannot be changed again!"
   },
   "error": {
-    "error":"Error"
+    "error":"Error",
+    "no-account": "Unfortunately we could not find an account to the given data!"
   },
   "transaction":{
     "show_all":"View all <strong>{count}</strong> transactions.",
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 4619dddf2..d08171c1f 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -46,52 +46,25 @@
                     </b-form-group>
                   </validation-provider>
 
-                  <validation-provider
-                    :name="$t('form.password')"
-                    :rules="{ required: true }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group
-                      class="mb-5"
-                      id="example-input-group-1"
-                      :label="$t('form.password')"
-                      label-for="example-input-1"
-                    >
-                      <b-input-group>
-                        <b-form-input
-                          id="input-pwd"
-                          name="input-pwd"
-                          v-model="form.password"
-                          :placeholder="$t('form.password')"
-                          :type="passwordVisible ? 'text' : 'password'"
-                          :state="getValidationState(validationContext)"
-                          aria-describedby="input-2-live-feedback"
-                        ></b-form-input>
-
-                        <b-input-group-append>
-                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                          </b-button>
-                        </b-input-group-append>
-                      </b-input-group>
-                      <b-form-invalid-feedback id="input-2-live-feedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
+                  <input-password
+                    name="password"
+                    :label="$t('form.password')"
+                    :placeholder="$t('form.password')"
+                    model="form.password"
+                  ></input-password>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
                     <span class="alert-text bv-example-row">
                       <b-row>
                         <b-col class="col-9 text-left text-dark">
                           <strong>
-                            Leider konnten wir keinen Account finden mit diesen Daten!
+                            {{ $t('error.no-account') }}
                           </strong>
                         </b-col>
                       </b-row>
                     </span>
                   </b-alert>
-                  <div class="text-center">
+                  <div class="text-center mt-4">
                     <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
                   </div>
                 </b-form>
@@ -118,9 +91,13 @@
 <script>
 import loginAPI from '../../apis/loginAPI'
 import CONFIG from '../../config'
+import InputPassword from '../../components/Inputs/InputPassword'
 
 export default {
   name: 'login',
+  components: {
+    InputPassword,
+  },
   data() {
     return {
       form: {
@@ -137,12 +114,9 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-
-    togglePasswordVisibility() {
-      this.passwordVisible = !this.passwordVisible
-    },
     async onSubmit() {
       // error info  ausschalten
+      console.log('submit', this.form.password)
       this.loginfail = false
       const loader = this.$loading.show({
         container: this.$refs.submitButton,

From f5966eb807476ea2429b67dac6e577ef8603c682 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 28 Jun 2021 17:02:49 +0200
Subject: [PATCH 2/5] password component is wroking and tested

---
 .../components/Inputs/InputPassword.spec.js   | 98 +++++++++++++++++++
 .../src/components/Inputs/InputPassword.vue   | 28 +++---
 frontend/src/views/Pages/Login.vue            |  8 +-
 3 files changed, 118 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/Inputs/InputPassword.spec.js

diff --git a/frontend/src/components/Inputs/InputPassword.spec.js b/frontend/src/components/Inputs/InputPassword.spec.js
new file mode 100644
index 000000000..ec446536d
--- /dev/null
+++ b/frontend/src/components/Inputs/InputPassword.spec.js
@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+
+import InputPassword from './InputPassword'
+
+const localVue = global.localVue
+
+describe('InputPassword', () => {
+  let wrapper
+
+  const propsData = {
+    name: 'input-field-name',
+    label: 'input-field-label',
+    placeholder: 'input-field-placeholder',
+    value: '',
+  }
+
+  const Wrapper = () => {
+    return mount(InputPassword, { localVue, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has an input field', () => {
+      expect(wrapper.find('input').exists()).toBeTruthy()
+    })
+
+    describe('properties', () => {
+      it('has the name "input-field-name"', () => {
+        expect(wrapper.find('input').attributes('name')).toEqual('input-field-name')
+      })
+
+      it('has the id "input-field-name-input-field"', () => {
+        expect(wrapper.find('input').attributes('id')).toEqual('input-field-name-input-field')
+      })
+
+      it('has the placeholder "input-field-placeholder"', () => {
+        expect(wrapper.find('input').attributes('placeholder')).toEqual('input-field-placeholder')
+      })
+
+      it('has the value ""', () => {
+        expect(wrapper.vm.currentValue).toEqual('')
+      })
+
+      it('has the label "input-field-label"', () => {
+        expect(wrapper.find('label').text()).toEqual('input-field-label')
+      })
+
+      it('has the label for "input-field-name-input-field"', () => {
+        expect(wrapper.find('label').attributes('for')).toEqual('input-field-name-input-field')
+      })
+    })
+
+    describe('input value changes', () => {
+      it('emits input with new value', async () => {
+        await wrapper.find('input').setValue('12')
+        expect(wrapper.emitted('input')).toBeTruthy()
+        expect(wrapper.emitted('input')).toEqual([['12']])
+      })
+    })
+
+    describe('password visibilty', () => {
+      it('has type password by default', () => {
+        expect(wrapper.find('input').attributes('type')).toEqual('password')
+      })
+
+      it('changes to type text when icon is clicked', async () => {
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('input').attributes('type')).toEqual('text')
+      })
+
+      it('changes back to type password when icon is clicked twice', async () => {
+        await wrapper.find('button').trigger('click')
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('input').attributes('type')).toEqual('password')
+      })
+    })
+
+    describe('password visibilty icon', () => {
+      it('is by default bi-eye-slash', () => {
+        expect(wrapper.find('svg').classes('bi-eye-slash')).toBe(true)
+      })
+
+      it('changes to bi-eye when clicked', async () => {
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('svg').classes('bi-eye')).toBe(true)
+      })
+
+      it('changes back to bi-eye-slash when clicked twice', async () => {
+        await wrapper.find('button').trigger('click')
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('svg').classes('bi-eye-slash')).toBe(true)
+      })
+    })
+  })
+})
diff --git a/frontend/src/components/Inputs/InputPassword.vue b/frontend/src/components/Inputs/InputPassword.vue
index 638eb6eb3..e4fdd34b4 100644
--- a/frontend/src/components/Inputs/InputPassword.vue
+++ b/frontend/src/components/Inputs/InputPassword.vue
@@ -1,9 +1,15 @@
 <template>
-  <validation-provider tag="div" :rules="rules" :name="name" v-slot="{ errors, valid, validated }">
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+  >
     <b-form-group :label="label" :label-for="labelFor">
       <b-input-group>
         <b-form-input
           v-model="currentValue"
+          v-bind="ariaInput"
           :id="labelFor"
           :name="name"
           :placeholder="placeholder"
@@ -15,7 +21,7 @@
             <b-icon :icon="showPassword ? 'eye' : 'eye-slash'" />
           </b-button>
         </b-input-group-append>
-        <b-form-invalid-feedback>
+        <b-form-invalid-feedback v-bind="ariaMsg">
           {{ errors[0] }}
         </b-form-invalid-feedback>
       </b-input-group>
@@ -28,13 +34,15 @@ export default {
   props: {
     rules: {
       default: () => {
-        required: true
+        return {
+          required: true,
+        }
       },
     },
-    name: { default: '' },
-    label: { default: 'Password' },
-    placeholder: { default: 'Password' },
-    model: { required: true, type: String },
+    name: { type: String, default: 'password' },
+    label: { type: String, default: 'Password' },
+    placeholder: { type: String, default: 'Password' },
+    value: { required: true, type: String },
   },
   data() {
     return {
@@ -49,14 +57,12 @@ export default {
   },
   methods: {
     toggleShowPassword() {
-      console.log('toggleShowPassword', this.placeholder)
       this.showPassword = !this.showPassword
     },
   },
   watch: {
-    currentValue(val) {
-      console.log('currentValue', val)
-      this.$emit('input', val)
+    currentValue() {
+      this.$emit('input', this.currentValue)
     },
   },
 }
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index d08171c1f..25c40df5a 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -23,8 +23,8 @@
                 <small>{{ $t('login') }}</small>
               </div>
 
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+              <validation-observer ref="observer" v-slot="{ passes }">
+                <b-form @submit.stop.prevent="passes(onSubmit)">
                   <validation-provider
                     name="Email"
                     :rules="{ required: true, email: true }"
@@ -47,10 +47,9 @@
                   </validation-provider>
 
                   <input-password
-                    name="password"
                     :label="$t('form.password')"
                     :placeholder="$t('form.password')"
-                    model="form.password"
+                    v-model="form.password"
                   ></input-password>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
@@ -116,7 +115,6 @@ export default {
     },
     async onSubmit() {
       // error info  ausschalten
-      console.log('submit', this.form.password)
       this.loginfail = false
       const loader = this.$loading.show({
         container: this.$refs.submitButton,

From 0bde83eb75ac2bbe276af6b918b83072900adf90 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 29 Jun 2021 11:54:38 +0200
Subject: [PATCH 3/5] email input component

---
 .../src/components/Inputs/InputEmail.spec.js  | 71 ++++++++++++++++++
 frontend/src/components/Inputs/InputEmail.vue | 73 +++++++++++++++++++
 frontend/src/views/Pages/Login.vue            | 51 ++-----------
 3 files changed, 150 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/components/Inputs/InputEmail.spec.js
 create mode 100644 frontend/src/components/Inputs/InputEmail.vue

diff --git a/frontend/src/components/Inputs/InputEmail.spec.js b/frontend/src/components/Inputs/InputEmail.spec.js
new file mode 100644
index 000000000..f8e374654
--- /dev/null
+++ b/frontend/src/components/Inputs/InputEmail.spec.js
@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils'
+
+import InputEmail from './InputEmail'
+
+const localVue = global.localVue
+
+describe('InputEmail', () => {
+  let wrapper
+
+  const propsData = {
+    name: 'input-field-name',
+    label: 'input-field-label',
+    placeholder: 'input-field-placeholder',
+    value: '',
+  }
+
+  const Wrapper = () => {
+    return mount(InputEmail, { localVue, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has an input field', () => {
+      expect(wrapper.find('input').exists()).toBeTruthy()
+    })
+
+    describe('properties', () => {
+      it('has the name "input-field-name"', () => {
+        expect(wrapper.find('input').attributes('name')).toEqual('input-field-name')
+      })
+
+      it('has the id "input-field-name-input-field"', () => {
+        expect(wrapper.find('input').attributes('id')).toEqual('input-field-name-input-field')
+      })
+
+      it('has the placeholder "input-field-placeholder"', () => {
+        expect(wrapper.find('input').attributes('placeholder')).toEqual('input-field-placeholder')
+      })
+
+      it('has the value ""', () => {
+        expect(wrapper.vm.currentValue).toEqual('')
+      })
+
+      it('has the label "input-field-label"', () => {
+        expect(wrapper.find('label').text()).toEqual('input-field-label')
+      })
+
+      it('has the label for "input-field-name-input-field"', () => {
+        expect(wrapper.find('label').attributes('for')).toEqual('input-field-name-input-field')
+      })
+    })
+
+    describe('input value changes', () => {
+      it('emits input with new value', async () => {
+        await wrapper.find('input').setValue('12')
+        expect(wrapper.emitted('input')).toBeTruthy()
+        expect(wrapper.emitted('input')).toEqual([['12']])
+      })
+    })
+
+    describe('value property changes', () => {
+      it('updates data model', async () => {
+        await wrapper.setProps({ value: 'user@example.org' })
+        expect(wrapper.vm.currentValue).toEqual('user@example.org')
+      })
+    })
+  })
+})
diff --git a/frontend/src/components/Inputs/InputEmail.vue b/frontend/src/components/Inputs/InputEmail.vue
new file mode 100644
index 000000000..adcd66345
--- /dev/null
+++ b/frontend/src/components/Inputs/InputEmail.vue
@@ -0,0 +1,73 @@
+<template>
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
+  >
+    <b-form-group :label="label" :label-for="labelFor">
+      <b-input-group>
+        <b-form-input
+          v-model="currentValue"
+          v-bind="ariaInput"
+          :id="labelFor"
+          :name="name"
+          :placeholder="placeholder"
+          type="email"
+          :state="validated ? valid : false"
+          trim
+          class="email-form-input"
+        ></b-form-input>
+        <b-form-invalid-feedback v-bind="ariaMsg">
+          {{ errors[0] }}
+        </b-form-invalid-feedback>
+      </b-input-group>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+export default {
+  name: 'InputEmail',
+  props: {
+    rules: {
+      default: () => {
+        return {
+          required: true,
+          email: true,
+        }
+      },
+    },
+    name: { type: String, default: 'email' },
+    label: { type: String, default: 'Email' },
+    placeholder: { type: String, default: 'Email' },
+    value: { required: true, type: String },
+  },
+  data() {
+    return {
+      currentValue: '',
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  watch: {
+    currentValue() {
+      this.$emit('input', this.currentValue)
+    },
+    value() {
+      if (this.value !== this.currentValue) this.currentValue = this.value
+    },
+  },
+}
+</script>
+<style>
+.email-form-input {
+  border-right-style: solid !important;
+  border-right-width: 1px !important;
+  padding-right: 12px !important;
+  border-top-right-radius: 6px !important;
+  border-bottom-right-radius: 6px !important;
+}
+</style>
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 25c40df5a..2d4ce2345 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -13,7 +13,6 @@
         </div>
       </b-container>
     </div>
-    <!-- Page content -->
     <b-container class="mt--8">
       <b-row class="justify-content-center">
         <b-col lg="5" md="7">
@@ -22,47 +21,14 @@
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('login') }}</small>
               </div>
-
-              <validation-observer ref="observer" v-slot="{ passes }">
-                <b-form @submit.stop.prevent="passes(onSubmit)">
-                  <validation-provider
-                    name="Email"
-                    :rules="{ required: true, email: true }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group class="mb-3" label="Email" label-for="login-email">
-                      <b-form-input
-                        id="login-email"
-                        name="example-input-1"
-                        v-model="form.email"
-                        placeholder="Email"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="login-email-live-feedback"
-                      ></b-form-input>
-
-                      <b-form-invalid-feedback id="login-email-live-feedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
-
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
+                <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+                  <input-email v-model="form.email"></input-email>
                   <input-password
                     :label="$t('form.password')"
                     :placeholder="$t('form.password')"
                     v-model="form.password"
                   ></input-password>
-
-                  <b-alert v-show="loginfail" show dismissible variant="warning">
-                    <span class="alert-text bv-example-row">
-                      <b-row>
-                        <b-col class="col-9 text-left text-dark">
-                          <strong>
-                            {{ $t('error.no-account') }}
-                          </strong>
-                        </b-col>
-                      </b-row>
-                    </span>
-                  </b-alert>
                   <div class="text-center mt-4">
                     <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
                   </div>
@@ -91,31 +57,26 @@
 import loginAPI from '../../apis/loginAPI'
 import CONFIG from '../../config'
 import InputPassword from '../../components/Inputs/InputPassword'
+import InputEmail from '../../components/Inputs/InputEmail'
 
 export default {
   name: 'login',
   components: {
     InputPassword,
+    InputEmail,
   },
   data() {
     return {
       form: {
         email: '',
         password: '',
-        // rememberMe: false
       },
-      loginfail: false,
       allowRegister: CONFIG.ALLOW_REGISTER,
       passwordVisible: false,
     }
   },
   methods: {
-    getValidationState({ dirty, validated, valid = null }) {
-      return dirty || validated ? valid : null
-    },
     async onSubmit() {
-      // error info  ausschalten
-      this.loginfail = false
       const loader = this.$loading.show({
         container: this.$refs.submitButton,
       })
@@ -129,7 +90,7 @@ export default {
         loader.hide()
       } else {
         loader.hide()
-        this.loginfail = true
+        this.$toast.error(this.$t('error.no-account'))
       }
     },
   },

From 789808ea408997ab66fd9954fa7dd4ee5fc58049 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 29 Jun 2021 14:02:09 +0200
Subject: [PATCH 4/5] Complete test for login page

---
 frontend/src/components/Inputs/InputEmail.vue |   2 +-
 frontend/src/views/Pages/Login.spec.js        | 119 ++++++++++++++++--
 2 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Inputs/InputEmail.vue b/frontend/src/components/Inputs/InputEmail.vue
index adcd66345..41338fd8c 100644
--- a/frontend/src/components/Inputs/InputEmail.vue
+++ b/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 },
diff --git a/frontend/src/views/Pages/Login.spec.js b/frontend/src/views/Pages/Login.spec.js
index 0d94840b0..a4ff79bed 100644
--- a/frontend/src/views/Pages/Login.spec.js
+++ b/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')
+          })
+        })
+      })
+    })
   })
 })

From d3382620fa551ae2f2587bba404565cfecbead37 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 29 Jun 2021 14:09:34 +0200
Subject: [PATCH 5/5] frontend coverage to 33%

---
 .github/workflows/test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 14b507354..329b1dd60 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 31
+          min_coverage: 33
           token: ${{ github.token }}
   
   ##############################################################################