Add test case for input password toggle component

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I00e3fc12a58d644d0aad3c0caf4a94d2ed435109

2 files changed, 65 insertions, 0 deletions

diff --git a/tests/unit/Global/InputPasswordToggle.spec.js b/tests/unit/Global/InputPasswordToggle.spec.js
new file mode 100644
index 00000000..4a3a0b0e
--- /dev/null
+++ b/tests/unit/Global/InputPasswordToggle.spec.js
@@ -0,0 +1,33 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+import BootstrapVue from 'bootstrap-vue';
+
+const localVue = createLocalVue();
+localVue.use(BootstrapVue);
+
+describe('InputPasswordToggle.vue', () => {
+  const wrapper = mount(InputPasswordToggle, {
+    localVue,
+    data() {
+      return {
+        isVisible: false,
+      };
+    },
+    mocks: {
+      $t: (key) => key,
+    },
+  });
+  it('should exist', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('should not render isVisible class', () => {
+    expect(wrapper.find('.isVisible').exists()).toBe(false);
+  });
+  it('should render isVisible class when button is clicked', async () => {
+    await wrapper.find('button').trigger('click');
+    expect(wrapper.find('.isVisible').exists()).toBe(true);
+  });
+  it('should render correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap b/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap
new file mode 100644
index 00000000..6421ddc7
--- /dev/null
+++ b/tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputPasswordToggle.vue should render correctly 1`] = `
+<div
+  class="input-password-toggle-container"
+>
+  <button
+    aria-label="global.ariaLabel.hidePassword"
+    class="btn input-action-btn btn-icon-only btn-link isVisible"
+    title="global.ariaLabel.hidePassword"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      focusable="false"
+      height="20"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 32 32"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.24,22.51l1.43-1.42A14.06,14.06,0,0,1,3.07,16C5.1,10.93,10.7,7,16,7a12.38,12.38,0,0,1,4,.72l1.55-1.56A14.72,14.72,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16,16,0,0,0,5.24,22.51Z"
+      />
+      <path
+        d="M12 15.73a4 4 0 013.7-3.7l1.81-1.82a6 6 0 00-7.33 7.33zM30.94 15.66A16.4 16.4 0 0025.2 8.22L30 3.41 28.59 2 2 28.59 3.41 30l5.1-5.1A15.29 15.29 0 0016 27 16.69 16.69 0 0030.94 16.34 1 1 0 0030.94 15.66zM20 16a4 4 0 01-6 3.44L19.44 14A4 4 0 0120 16zm-4 9a13.05 13.05 0 01-6-1.58l2.54-2.54a6 6 0 008.35-8.35l2.87-2.87A14.54 14.54 0 0128.93 16C26.9 21.07 21.3 25 16 25z"
+      />
+    </svg>
+  </button>
+</div>
+`;