diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-10-26 14:49:28 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-10-26 14:49:28 +0000 |
commit | 83e898a57cd1b396968a0befe277b6d9d1507a11 (patch) | |
tree | 91dbd3e62dbb29916c95b25a315625249cd99fa0 | |
parent | 359474a29ee925faf51322707f9c11272542cfd7 (diff) | |
parent | 79ec24da6fd591da9343b4928b28475a414d9859 (diff) | |
download | gitlab-ce-83e898a57cd1b396968a0befe277b6d9d1507a11.tar.gz |
Merge branch 'winh-dynamic-tooltips' into 'master'
Update content of visible tooltips
See merge request gitlab-org/gitlab-ce!22504
-rw-r--r-- | app/assets/javascripts/vue_shared/directives/tooltip.js | 8 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/directives/tooltip_spec.js | 39 |
2 files changed, 38 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/directives/tooltip.js b/app/assets/javascripts/vue_shared/directives/tooltip.js index 4f2412ce520..549d27e96d9 100644 --- a/app/assets/javascripts/vue_shared/directives/tooltip.js +++ b/app/assets/javascripts/vue_shared/directives/tooltip.js @@ -9,6 +9,14 @@ export default { componentUpdated(el) { $(el).tooltip('_fixTitle'); + + // update visible tooltips + const tooltipInstance = $(el).data('bs.tooltip'); + const tip = tooltipInstance.getTipElement(); + tooltipInstance.setElementContent( + $(tip.querySelectorAll('.tooltip-inner')), + tooltipInstance.getTitle(), + ); }, unbind(el) { diff --git a/spec/javascripts/vue_shared/directives/tooltip_spec.js b/spec/javascripts/vue_shared/directives/tooltip_spec.js index 305d2fd5af4..1d516a280b0 100644 --- a/spec/javascripts/vue_shared/directives/tooltip_spec.js +++ b/spec/javascripts/vue_shared/directives/tooltip_spec.js @@ -13,24 +13,45 @@ describe('Tooltip directive', () => { describe('with a single tooltip', () => { beforeEach(() => { - const SomeComponent = Vue.extend({ + setFixtures('<div id="dummy-element"></div>'); + vm = new Vue({ + el: '#dummy-element', directives: { tooltip, }, - template: ` - <div - v-tooltip - title="foo"> - </div> - `, + data() { + return { + tooltip: 'some text', + }; + }, + template: '<div v-tooltip :title="tooltip"></div>', }); - - vm = new SomeComponent().$mount(); }); it('should have tooltip plugin applied', () => { expect($(vm.$el).data('bs.tooltip')).toBeDefined(); }); + + it('displays the title as tooltip', () => { + $(vm.$el).tooltip('show'); + const tooltipElement = document.querySelector('.tooltip-inner'); + + expect(tooltipElement.innerText).toContain('some text'); + }); + + it('updates a visible tooltip', done => { + $(vm.$el).tooltip('show'); + const tooltipElement = document.querySelector('.tooltip-inner'); + + vm.tooltip = 'other text'; + + Vue.nextTick() + .then(() => { + expect(tooltipElement).toContainText('other text'); + done(); + }) + .catch(done.fail); + }); }); describe('with multiple tooltips', () => { |