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();