diff options
author | Phil Hughes <me@iamphill.com> | 2018-01-11 14:32:05 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-01-11 14:32:05 +0000 |
commit | 2b8e8c68901b68b2c7d7900fcd8035eb5cfc2ee8 (patch) | |
tree | 97856efef748ead9fa6909c6eed6b84e912cbd5d | |
parent | 4fbe2a00e9c4d83d9c5328510fd95d39fc052334 (diff) | |
parent | 0d99f6c62081edaf1f80615e2b70d489e800c95c (diff) | |
download | gitlab-ce-2b8e8c68901b68b2c7d7900fcd8035eb5cfc2ee8.tar.gz |
Merge branch '41608-clipboard-vue-button' into 'master'
Resolve "clipboard-button tooltip is broken"
Closes #41608
See merge request gitlab-org/gitlab-ce!16352
-rw-r--r-- | app/assets/javascripts/vue_shared/components/clipboard_button.vue | 19 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/clipboard_button_spec.js | 31 |
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); + }); +}); |