1 files changed, 211 insertions, 118 deletions
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index b3bba3180..ba38ebe06 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -1,5 +1,6 @@
-import Popover from '../../src/popover'
-import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
+import EventHandler from '../../src/dom/event-handler.js'
+import Popover from '../../src/popover.js'
+import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture.js'
 
 describe('Popover', () => {
   let fixtureEl
@@ -42,12 +43,6 @@ describe('Popover', () => {
     })
   })
 
-  describe('Event', () => {
-    it('should return plugin events', () => {
-      expect(Popover.Event).toEqual(jasmine.any(Object))
-    })
-  })
-
   describe('EVENT_KEY', () => {
     it('should return plugin event key', () => {
       expect(Popover.EVENT_KEY).toEqual('.bs.popover')
@@ -61,166 +56,264 @@ describe('Popover', () => {
   })
 
   describe('show', () => {
-    it('should show a popover', done => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
+    it('should show a popover', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl)
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl)
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        expect(document.querySelector('.popover')).not.toBeNull()
-        done()
-      })
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          expect(document.querySelector('.popover')).not.toBeNull()
+          resolve()
+        })
 
-      popover.show()
+        popover.show()
+      })
     })
 
-    it('should set title and content from functions', done => {
-      fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+    it('should set title and content from functions', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl, {
-        title: () => 'Bootstrap',
-        content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'
-      })
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          title: () => 'Bootstrap',
+          content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'
+        })
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        const popoverDisplayed = document.querySelector('.popover')
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
 
-        expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
-        done()
-      })
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
+          resolve()
+        })
 
-      popover.show()
+        popover.show()
+      })
     })
 
-    it('should show a popover with just content', done => {
-      fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+    it('should call content and title functions with trigger element', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
+
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          title(el) {
+            return el.dataset.foo
+          },
+          content(el) {
+            return el.dataset.foo
+          }
+        })
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
+
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')
+          resolve()
+        })
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl, {
-        content: 'Popover content'
+        popover.show()
       })
+    })
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        const popoverDisplayed = document.querySelector('.popover')
+    it('should call content and title functions with correct this value', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
+
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          title() {
+            return this.dataset.foo
+          },
+          content() {
+            return this.dataset.foo
+          }
+        })
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
+
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')
+          resolve()
+        })
 
-        expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
-        done()
+        popover.show()
       })
-
-      popover.show()
     })
 
-    it('should show a popover with just content without having header', done => {
-      fixtureEl.innerHTML = '<a href="#">Nice link</a>'
+    it('should show a popover with just content without having header', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#">Nice link</a>'
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl, {
-        content: 'Some beautiful content :)'
-      })
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          content: 'Some beautiful content :)'
+        })
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        const popoverDisplayed = document.querySelector('.popover')
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
 
-        expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
-        done()
-      })
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
+          resolve()
+        })
 
-      popover.show()
+        popover.show()
+      })
     })
 
-    it('should show a popover with just title without having body', done => {
-      fixtureEl.innerHTML = '<a href="#">Nice link</a>'
+    it('should show a popover with just title without having body', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#">Nice link</a>'
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl, {
-        title: 'Title, which does not require content'
-      })
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          title: 'Title which does not require content'
+        })
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        const popoverDisplayed = document.querySelector('.popover')
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
 
-        expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title, which does not require content')
-        done()
-      })
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
+          resolve()
+        })
 
-      popover.show()
+        popover.show()
+      })
     })
 
-    it('should call setContent once', done => {
-      fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+    it('should show a popover with just title without having body using data-attribute to get config', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="Title which does not require content">Nice link</a>'
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl, {
-        content: 'Popover content'
-      })
-      expect(popover._templateFactory).toBeNull()
-      let spy = null
-      let times = 1
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl)
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
+
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
+          resolve()
+        })
 
-      popoverEl.addEventListener('hidden.bs.popover', () => {
         popover.show()
       })
+    })
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
-        const popoverDisplayed = document.querySelector('.popover')
+    it('should NOT show a popover without `title` and `content`', () => {
+      fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
 
-        expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
-        expect(spy).toHaveBeenCalledTimes(0)
-        if (times > 1) {
-          done()
-        }
+      const popoverEl = fixtureEl.querySelector('a')
+      const popover = new Popover(popoverEl, { animation: false })
+      const spy = spyOn(EventHandler, 'trigger').and.callThrough()
 
-        times++
-        popover.hide()
-      })
       popover.show()
+
+      expect(spy).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show'))
+      expect(document.querySelector('.popover')).toBeNull()
     })
 
-    it('should show a popover with provided custom class', done => {
+    it('"setContent" should keep the initial template', () => {
       fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl)
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        const tip = document.querySelector('.popover')
-        expect(tip).not.toBeNull()
-        expect(tip.classList.contains('custom-class')).toBeTrue()
-        done()
+      popover.setContent({ '.tooltip-inner': 'foo' })
+      const tip = popover._getTipElement()
+
+      expect(tip).toHaveClass('popover')
+      expect(tip).toHaveClass('bs-popover-auto')
+      expect(tip.querySelector('.popover-arrow')).not.toBeNull()
+      expect(tip.querySelector('.popover-header')).not.toBeNull()
+      expect(tip.querySelector('.popover-body')).not.toBeNull()
+    })
+
+    it('should call setContent once', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          content: 'Popover content'
+        })
+        expect(popover._templateFactory).toBeNull()
+        let spy = null
+        let times = 1
+
+        popoverEl.addEventListener('hidden.bs.popover', () => {
+          popover.show()
+        })
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
+          const popoverDisplayed = document.querySelector('.popover')
+
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
+          expect(spy).toHaveBeenCalledTimes(0)
+          if (times > 1) {
+            resolve()
+          }
+
+          times++
+          popover.hide()
+        })
+        popover.show()
       })
+    })
 
-      popover.show()
+    it('should show a popover with provided custom class', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
+
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl)
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const tip = document.querySelector('.popover')
+          expect(tip).not.toBeNull()
+          expect(tip).toHaveClass('custom-class')
+          resolve()
+        })
+
+        popover.show()
+      })
     })
   })
 
   describe('hide', () => {
-    it('should hide a popover', done => {
-      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
+    it('should hide a popover', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
 
-      const popoverEl = fixtureEl.querySelector('a')
-      const popover = new Popover(popoverEl)
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl)
 
-      popoverEl.addEventListener('shown.bs.popover', () => {
-        popover.hide()
-      })
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          popover.hide()
+        })
 
-      popoverEl.addEventListener('hidden.bs.popover', () => {
-        expect(document.querySelector('.popover')).toBeNull()
-        done()
-      })
+        popoverEl.addEventListener('hidden.bs.popover', () => {
+          expect(document.querySelector('.popover')).toBeNull()
+          resolve()
+        })
 
-      popover.show()
+        popover.show()
+      })
     })
   })
 
@@ -290,11 +383,11 @@ describe('Popover', () => {
       jQueryMock.fn.popover = Popover.jQueryInterface
       jQueryMock.elements = [popoverEl]
 
-      spyOn(popover, 'show')
+      const spy = spyOn(popover, 'show')
 
       jQueryMock.fn.popover.call(jQueryMock, 'show')
 
-      expect(popover.show).toHaveBeenCalled()
+      expect(spy).toHaveBeenCalled()
     })
   })
 
@@ -314,7 +407,7 @@ describe('Popover', () => {
 
       const popoverEl = fixtureEl.querySelector('a')
 
-      expect(Popover.getInstance(popoverEl)).toEqual(null)
+      expect(Popover.getInstance(popoverEl)).toBeNull()
     })
   })
 
@@ -335,7 +428,7 @@ describe('Popover', () => {
 
       const div = fixtureEl.querySelector('div')
 
-      expect(Popover.getInstance(div)).toEqual(null)
+      expect(Popover.getInstance(div)).toBeNull()
       expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover)
     })
 
@@ -344,7 +437,7 @@ describe('Popover', () => {
 
       const div = fixtureEl.querySelector('div')
 
-      expect(Popover.getInstance(div)).toEqual(null)
+      expect(Popover.getInstance(div)).toBeNull()
       const popover = Popover.getOrCreateInstance(div, {
         placement: 'top'
       })