diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-06-20 14:10:13 +0300 |
commit | 0ea3fcec397b69815975647f5e2aa5fe944a8486 (patch) | |
tree | 7979381b89d26011bcf9bdc989a40fcc2f1ed4ff /spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js | |
parent | 72123183a20411a36d607d70b12d57c484394c8e (diff) |
Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42
Diffstat (limited to 'spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js | 69 |
1 files changed, 61 insertions, 8 deletions
diff --git a/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js b/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js index e636f58d868..e1da8b690af 100644 --- a/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js +++ b/spec/frontend/vue_shared/components/form/input_copy_toggle_visibility_spec.js @@ -66,7 +66,7 @@ describe('InputCopyToggleVisibility', () => { }); it('displays value as hidden', () => { - expect(findFormInputGroup().props('value')).toBe('********************'); + expect(findFormInput().element.value).toBe('********************'); }); it('saves actual value to clipboard when manually copied', () => { @@ -77,6 +77,16 @@ describe('InputCopyToggleVisibility', () => { expect(event.preventDefault).toHaveBeenCalled(); }); + it('emits `copy` event when manually copied the token', () => { + expect(wrapper.emitted('copy')).toBeUndefined(); + + findFormInput().element.dispatchEvent(createCopyEvent()); + + expect(wrapper.emitted()).toHaveProperty('copy'); + expect(wrapper.emitted('copy')).toHaveLength(1); + expect(wrapper.emitted('copy')[0]).toEqual([]); + }); + describe('visibility toggle button', () => { it('renders a reveal button', () => { const revealButton = findRevealButton(); @@ -97,7 +107,7 @@ describe('InputCopyToggleVisibility', () => { }); it('displays value', () => { - expect(findFormInputGroup().props('value')).toBe(valueProp); + expect(findFormInput().element.value).toBe(valueProp); }); it('renders a hide button', () => { @@ -135,6 +145,8 @@ describe('InputCopyToggleVisibility', () => { }); it('emits `copy` event', () => { + expect(wrapper.emitted()).toHaveProperty('copy'); + expect(wrapper.emitted('copy')).toHaveLength(1); expect(wrapper.emitted('copy')[0]).toEqual([]); }); }); @@ -147,25 +159,52 @@ describe('InputCopyToggleVisibility', () => { }); it('displays value as hidden with 20 asterisks', () => { - expect(findFormInputGroup().props('value')).toBe('********************'); + expect(findFormInput().element.value).toBe('********************'); }); }); describe('when `initialVisibility` prop is `true`', () => { + const label = 'My label'; + beforeEach(() => { createComponent({ propsData: { value: valueProp, initialVisibility: true, + label, + 'label-for': 'my-input', + formInputGroupProps: { + id: 'my-input', + }, }, }); }); it('displays value', () => { - expect(findFormInputGroup().props('value')).toBe(valueProp); + expect(findFormInput().element.value).toBe(valueProp); }); itDoesNotModifyCopyEvent(); + + describe('when input is clicked', () => { + it('selects input value', async () => { + const mockSelect = jest.fn(); + wrapper.vm.$refs.input.$el.select = mockSelect; + await wrapper.findByLabelText(label).trigger('click'); + + expect(mockSelect).toHaveBeenCalled(); + }); + }); + + describe('when label is clicked', () => { + it('selects input value', async () => { + const mockSelect = jest.fn(); + wrapper.vm.$refs.input.$el.select = mockSelect; + await wrapper.find('label').trigger('click'); + + expect(mockSelect).toHaveBeenCalled(); + }); + }); }); describe('when `showToggleVisibilityButton` is `false`', () => { @@ -184,7 +223,7 @@ describe('InputCopyToggleVisibility', () => { }); it('displays value', () => { - expect(findFormInputGroup().props('value')).toBe(valueProp); + expect(findFormInput().element.value).toBe(valueProp); }); itDoesNotModifyCopyEvent(); @@ -204,16 +243,30 @@ describe('InputCopyToggleVisibility', () => { }); }); - it('passes `formInputGroupProps` prop to `GlFormInputGroup`', () => { + it('passes `formInputGroupProps` prop only to the input', () => { createComponent({ propsData: { formInputGroupProps: { - label: 'Foo bar', + name: 'Foo bar', + 'data-qa-selector': 'Foo bar', + class: 'Foo bar', + id: 'Foo bar', }, }, }); - expect(findFormInputGroup().props('label')).toBe('Foo bar'); + expect(findFormInput().attributes()).toMatchObject({ + name: 'Foo bar', + 'data-qa-selector': 'Foo bar', + class: expect.stringContaining('Foo bar'), + id: 'Foo bar', + }); + + const attributesInputGroup = findFormInputGroup().attributes(); + expect(attributesInputGroup.name).toBeUndefined(); + expect(attributesInputGroup['data-qa-selector']).toBeUndefined(); + expect(attributesInputGroup.class).not.toContain('Foo bar'); + expect(attributesInputGroup.id).toBeUndefined(); }); it('passes `copyButtonTitle` prop to `ClipboardButton`', () => { |