Merge branch '41608-clipboard-vue-button' into 'master'

Resolve "clipboard-button tooltip is broken"

Closes #41608

See merge request gitlab-org/gitlab-ce!16352

2 files changed, 49 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index e18852af6e9..31d9b9d9c48 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -1,10 +1,14 @@
 <script>
+  import tooltip from '../directives/tooltip';
   /**
    * Falls back to the code used in `copy_to_clipboard.js`
    */
 
   export default {
     name: 'ClipboardButton',
+    directives: {
+      tooltip,
+    },
     props: {
       text: {
         type: String,
@@ -14,6 +18,16 @@
         type: String,
         required: true,
       },
+      tooltipPlacement: {
+        type: String,
+        required: false,
+        default: 'top',
+      },
+      tooltipContainer: {
+        type: [String, Boolean],
+        required: false,
+        default: false,
+      },
     },
   };
 </script>
@@ -22,8 +36,11 @@
   <button
     type="button"
     class="btn btn-transparent btn-clipboard"
-    :data-title="title"
+    :title="title"
     :data-clipboard-text="text"
+    v-tooltip
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
   >
     <i
       aria-hidden="true"
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
new file mode 100644
index 00000000000..08e4e1f8337
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('clipboard button', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(clipboardButton);
+    vm = mountComponent(Component, {
+      text: 'copy me',
+      title: 'Copy this value into Clipboard!',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a button for clipboard', () => {
+    expect(vm.$el.tagName).toEqual('BUTTON');
+    expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
+    expect(vm.$el.querySelector('i').className).toEqual('fa fa-clipboard');
+  });
+
+  it('should have a tooltip with default values', () => {
+    expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
+    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+    expect(vm.$el.getAttribute('data-container')).toEqual(null);
+  });
+});