fix(b-tooltip, b-popover): fix title not being reset on hide (#5793)

Hiws · jacobmllr95 · web-flow · commit 31eeb0ab5ef2 · 2020-09-17T14:43:38.000+02:00
* fix bug

* add test

* update tooltip.spec.js

* Update bv-tooltip.js

* Update bv-tooltip.js

Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
@@ -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 ---
diff --git a/src/components/tooltip/tooltip.spec.js b/src/components/tooltip/tooltip.spec.js
@@ -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()
+  })
 })
