diff options
-rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 2 | ||||
-rw-r--r-- | tests/unit/Global/InputPasswordToggle.spec.js | 33 | ||||
-rw-r--r-- | tests/unit/Global/__snapshots__/InputPasswordToggle.spec.js.snap | 32 |
3 files changed, 66 insertions, 1 deletions
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index 2119f8c6..969a15d3 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -35,7 +35,7 @@ export default { this.isVisible = !this.isVisible; - if (inputEl.nodeName === 'INPUT') { + if (inputEl && inputEl.nodeName === 'INPUT') { inputEl.type = this.isVisible ? 'text' : 'password'; } 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> +`; |