From cf58064e912fcad78a20049a600fbf6921c3e86e Mon Sep 17 00:00:00 2001
From: Brandon Tripp <brandongtripp@gmail.com>
Date: Wed, 14 Apr 2021 12:48:11 -0600
Subject: [PATCH] Add tests for ShowPassword component. Lint LoginForm and
 ShowPassword.

---
 webapp/components/LoginForm/LoginForm.vue     |  4 +-
 .../ShowPassword/ShowPassword.spec.js         | 33 +++++++++++++++
 .../components/ShowPassword/ShowPassword.vue  | 40 +++++++++----------
 3 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index ec9dbebf8..990a9d042 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/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 {
diff --git a/webapp/components/ShowPassword/ShowPassword.spec.js b/webapp/components/ShowPassword/ShowPassword.spec.js
index e69de29bb..6eb44f6b2 100644
--- a/webapp/components/ShowPassword/ShowPassword.spec.js
+++ b/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')
+      })
+    })
+  })
+})
diff --git a/webapp/components/ShowPassword/ShowPassword.vue b/webapp/components/ShowPassword/ShowPassword.vue
index 36d82baeb..c31e01b25 100644
--- a/webapp/components/ShowPassword/ShowPassword.vue
+++ b/webapp/components/ShowPassword/ShowPassword.vue
@@ -8,39 +8,37 @@
 
 <script>
 export default {
-  props: [
-    'iconName'
-  ],
+  props: ['iconName'],
   emits: ['toggle-password'],
   methods: {
     togglePassword(event) {
       event.preventDefault()
       this.$emit('show-password')
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss">
-  .icon-wrapper {
-    margin-right: 2px;
-  }
+.icon-wrapper {
+  margin-right: 2px;
+}
 
-  .click-wrapper {
-    padding: 8px;
-    align-content: center;
-    color: $text-color-disabled;
-    cursor: pointer;
-  }
+.click-wrapper {
+  padding: 8px;
+  align-content: center;
+  color: $text-color-disabled;
+  cursor: pointer;
+}
 
-  .click-wrapper:hover {
-    &:focus-within {
-      background-color: $background-color-base;
-      border: $input-border-size solid $border-color-active;
+.click-wrapper:hover {
+  &:focus-within {
+    background-color: $background-color-base;
+    border: $input-border-size solid $border-color-active;
 
-      .toggle-icon {
-        color: $text-color-base;
-      }
+    .toggle-icon {
+      color: $text-color-base;
     }
   }
+}
 </style>