Merge branch 'winh-dynamic-tooltips' into 'master'
Update content of visible tooltips See merge request gitlab-org/gitlab-ce!22504
This commit is contained in:
commit
83e898a57c
2 changed files with 38 additions and 9 deletions
|
@ -9,6 +9,14 @@ export default {
|
||||||
|
|
||||||
componentUpdated(el) {
|
componentUpdated(el) {
|
||||||
$(el).tooltip('_fixTitle');
|
$(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) {
|
unbind(el) {
|
||||||
|
|
|
@ -13,24 +13,45 @@ describe('Tooltip directive', () => {
|
||||||
|
|
||||||
describe('with a single tooltip', () => {
|
describe('with a single tooltip', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
const SomeComponent = Vue.extend({
|
setFixtures('<div id="dummy-element"></div>');
|
||||||
|
vm = new Vue({
|
||||||
|
el: '#dummy-element',
|
||||||
directives: {
|
directives: {
|
||||||
tooltip,
|
tooltip,
|
||||||
},
|
},
|
||||||
template: `
|
data() {
|
||||||
<div
|
return {
|
||||||
v-tooltip
|
tooltip: 'some text',
|
||||||
title="foo">
|
};
|
||||||
</div>
|
},
|
||||||
`,
|
template: '<div v-tooltip :title="tooltip"></div>',
|
||||||
});
|
});
|
||||||
|
|
||||||
vm = new SomeComponent().$mount();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should have tooltip plugin applied', () => {
|
it('should have tooltip plugin applied', () => {
|
||||||
expect($(vm.$el).data('bs.tooltip')).toBeDefined();
|
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', () => {
|
describe('with multiple tooltips', () => {
|
||||||
|
|
Loading…
Reference in a new issue