diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/clipboard_button_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/clipboard_button_spec.js | 72 |
1 files changed, 71 insertions, 1 deletions
diff --git a/spec/frontend/vue_shared/components/clipboard_button_spec.js b/spec/frontend/vue_shared/components/clipboard_button_spec.js index 33445923a49..fca5e664a96 100644 --- a/spec/frontend/vue_shared/components/clipboard_button_spec.js +++ b/spec/frontend/vue_shared/components/clipboard_button_spec.js @@ -1,8 +1,16 @@ import { GlButton } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; -import initCopyToClipboard from '~/behaviors/copy_to_clipboard'; +import { nextTick } from 'vue'; + +import initCopyToClipboard, { + CLIPBOARD_SUCCESS_EVENT, + CLIPBOARD_ERROR_EVENT, + I18N_ERROR_MESSAGE, +} from '~/behaviors/copy_to_clipboard'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +jest.mock('lodash/uniqueId', () => (prefix) => (prefix ? `${prefix}1` : 1)); + describe('clipboard button', () => { let wrapper; @@ -15,6 +23,42 @@ describe('clipboard button', () => { const findButton = () => wrapper.find(GlButton); + const expectConfirmationTooltip = async ({ event, message }) => { + const title = 'Copy this value'; + + createWrapper({ + text: 'copy me', + title, + }); + + wrapper.vm.$root.$emit = jest.fn(); + + const button = findButton(); + + expect(button.attributes()).toMatchObject({ + title, + 'aria-label': title, + }); + + await button.trigger(event); + + expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('bv::show::tooltip', 'clipboard-button-1'); + + expect(button.attributes()).toMatchObject({ + title: message, + 'aria-label': message, + }); + + jest.runAllTimers(); + await nextTick(); + + expect(button.attributes()).toMatchObject({ + title, + 'aria-label': title, + }); + expect(wrapper.vm.$root.$emit).toHaveBeenCalledWith('bv::hide::tooltip', 'clipboard-button-1'); + }; + afterEach(() => { wrapper.destroy(); wrapper = null; @@ -99,6 +143,32 @@ describe('clipboard button', () => { expect(findButton().props('variant')).toBe(variant); }); + describe('confirmation tooltip', () => { + it('adds `id` and `data-clipboard-handle-tooltip` attributes to button', () => { + createWrapper({ + text: 'copy me', + title: 'Copy this value', + }); + + expect(findButton().attributes()).toMatchObject({ + id: 'clipboard-button-1', + 'data-clipboard-handle-tooltip': 'false', + 'aria-live': 'polite', + }); + }); + + it('shows success tooltip after successful copy', () => { + expectConfirmationTooltip({ + event: CLIPBOARD_SUCCESS_EVENT, + message: ClipboardButton.i18n.copied, + }); + }); + + it('shows error tooltip after failed copy', () => { + expectConfirmationTooltip({ event: CLIPBOARD_ERROR_EVENT, message: I18N_ERROR_MESSAGE }); + }); + }); + describe('integration', () => { it('actually copies to clipboard', () => { initCopyToClipboard(); |