Skip to content
Permalink
Browse files
fix(b-tooltip, b-popover): fix title not being reset on hide (#5793)
* fix bug

* add test

* update tooltip.spec.js

* Update bv-tooltip.js

* Update bv-tooltip.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
  • Loading branch information
Hiws and jacobmllr95 committed Sep 17, 2020
1 parent 107cd14 commit 31eeb0ab5ef262c33579f43969c7d6ee6c802e3d
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 6 deletions.
@@ -621,19 +621,31 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
}
},
fixTitle() {
// If the target has a `title` attribute, remove it and store it on a data attribute
// If the target has a `title` attribute,
// remove it and store it on a data attribute
const target = this.getTarget()
if (target && hasAttr(target, 'title')) {
setAttr(target, DATA_TITLE_ATTR, getAttr(target, 'title') || '')
if (hasAttr(target, 'title')) {
// Get `title` attribute value and remove it from target
const title = getAttr(target, 'title')
setAttr(target, 'title', '')
// Only set the data attribute when the value is truthy
if (title) {
setAttr(target, DATA_TITLE_ATTR, title)
}
}
},
restoreTitle() {
// If the target had a title, restore it and remove the data attribute
// If the target had a `title` attribute,
// restore it and remove the data attribute
const target = this.getTarget()
if (target && hasAttr(target, DATA_TITLE_ATTR)) {
setAttr(target, 'title', getAttr(target, DATA_TITLE_ATTR) || '')
if (hasAttr(target, DATA_TITLE_ATTR)) {
// Get data attribute value and remove it from target
const title = getAttr(target, DATA_TITLE_ATTR)
removeAttr(target, DATA_TITLE_ATTR)
// Only restore the `title` attribute when the value is truthy
if (title) {
setAttr(target, 'title', title)
}
}
},
// --- BvEvent helpers ---
@@ -1445,4 +1445,85 @@ describe('b-tooltip', () => {

wrapper.destroy()
})

it('saves title in data attribute on open and adds to back on hide', async () => {
jest.useFakeTimers()
const wrapper = mount(App, {
attachTo: createContainer(),
propsData: {
triggers: 'click',
show: false,
titleAttr: 'bar'
},
slots: {
default: 'title'
}
})

expect(wrapper.vm).toBeDefined()
await waitNT(wrapper.vm)
await waitRAF()
await waitNT(wrapper.vm)
await waitRAF()
jest.runOnlyPendingTimers()

expect(wrapper.element.tagName).toBe('ARTICLE')
expect(wrapper.attributes('id')).toBeDefined()
expect(wrapper.attributes('id')).toEqual('wrapper')

// The trigger button
const $button = wrapper.find('button')
expect($button.exists()).toBe(true)
expect($button.attributes('id')).toBeDefined()
expect($button.attributes('id')).toEqual('foo')
expect($button.attributes('title')).toBeDefined()
expect($button.attributes('title')).toEqual('bar')
expect($button.attributes('data-original-title')).not.toBeDefined()
expect($button.attributes('aria-describedby')).not.toBeDefined()

// Show tooltip
await wrapper.setProps({ show: true })

expect($button.attributes('title')).toBeDefined()
expect($button.attributes('title')).toEqual('')
expect($button.attributes('data-original-title')).toBeDefined()
expect($button.attributes('data-original-title')).toEqual('bar')
expect($button.attributes('aria-describedby')).toBeDefined()
// ID of the tooltip that will be in the body
const adb = $button.attributes('aria-describedby')

// <b-tooltip> wrapper
const $tipHolder = wrapper.findComponent(BTooltip)
expect($tipHolder.exists()).toBe(true)
expect($tipHolder.element.nodeType).toEqual(Node.COMMENT_NODE)

// Find the tooltip element in the document
const tip = document.getElementById(adb)
expect(tip).not.toBe(null)
expect(tip).toBeInstanceOf(HTMLElement)
expect(tip.tagName).toEqual('DIV')
expect(tip.classList.contains('tooltip')).toBe(true)
expect(tip.classList.contains('b-tooltip')).toBe(true)
expect(tip.classList.contains('interactive')).toBe(false)
expect(tip.textContent).toEqual('title')

// Hide the tooltip
await wrapper.setProps({ show: false })
await waitRAF()
await waitRAF()
jest.runOnlyPendingTimers()
await waitNT(wrapper.vm)
await waitRAF()

expect($button.attributes('title')).toBeDefined()
expect($button.attributes('title')).toEqual('bar')
expect($button.attributes('data-original-title')).not.toBeDefined()
expect($button.attributes('aria-describedby')).not.toBeDefined()

// Tooltip element should not be in the document
expect(document.body.contains(tip)).toBe(false)
expect(document.querySelector(adb)).toBe(null)

wrapper.destroy()
})
})

0 comments on commit 31eeb0a

Please sign in to comment.