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] 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,