Add tests for ShowPassword component. Lint LoginForm and ShowPassword.

webapp/components/LoginForm/LoginForm.vue

@@ -31,7 +31,7 @@
             ref="password"
             :type="showPassword ? 'text' : 'password'"
           />
-          <show-password @show-password="toggleShowPassword" :iconName='iconName' />
+          <show-password @show-password="toggleShowPassword" :iconName="iconName" />
         </div>
         <nuxt-link to="/password-reset/request">
           {{ $t('login.forgotPassword') }}
@@ -60,7 +60,7 @@ import ShowPassword from '../ShowPassword/ShowPassword.vue'
 export default {
   components: {
     LocaleSwitch,
-    ShowPassword
+    ShowPassword,
   },
   data() {
     return {

webapp/components/ShowPassword/ShowPassword.spec.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+
+import ShowPassword from './ShowPassword.vue'
+
+describe('ShowPassword', () => {
+  describe('State of show password icon', () => {
+    const wrapper = mount(ShowPassword, {
+      propsData: {
+        iconName: 'eye',
+      },
+    })
+
+    it('Shows eye icon by default', () => {
+      expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye')
+    })
+
+    describe('After click', () => {
+      it('Password wrapper emits show-password event', async () => {
+        wrapper.find('.click-wrapper').trigger('click')
+        await Vue.nextTick()
+        expect(wrapper.emitted()).toBeTruthy()
+      })
+
+      it('Shows the slash-eye icon after click', async () => {
+        wrapper.find('.click-wrapper').trigger('click')
+        wrapper.setProps({ iconName: 'eye-slash' })
+        await Vue.nextTick()
+        expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye-slash')
+      })
+    })
+  })
+})

webapp/components/ShowPassword/ShowPassword.vue

@@ -8,39 +8,37 @@
 
 <script>
 export default {
-  props: [
+  props: ['iconName'],
-    'iconName'
-  ],
   emits: ['toggle-password'],
   methods: {
     togglePassword(event) {
       event.preventDefault()
       this.$emit('show-password')
-    }
+    },
-  }
+  },
 }
 </script>
 
 <style lang="scss">
-  .icon-wrapper {
+.icon-wrapper {
-    margin-right: 2px;
+  margin-right: 2px;
-  }
+}
 
-  .click-wrapper {
+.click-wrapper {
-    padding: 8px;
+  padding: 8px;
-    align-content: center;
+  align-content: center;
-    color: $text-color-disabled;
+  color: $text-color-disabled;
-    cursor: pointer;
+  cursor: pointer;
-  }
+}
 
-  .click-wrapper:hover {
+.click-wrapper:hover {
-    &:focus-within {
+  &:focus-within {
-      background-color: $background-color-base;
+    background-color: $background-color-base;
-      border: $input-border-size solid $border-color-active;
+    border: $input-border-size solid $border-color-active;
 
-      .toggle-icon {
+    .toggle-icon {
-        color: $text-color-base;
+      color: $text-color-base;
-      }
     }
   }
+}
 </style>