Popover.js: Accept empty content through `data-bs-content` (#35514)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

2 files changed, 31 insertions, 15 deletions

diff --git a/js/src/popover.js b/js/src/popover.js
index 375eb8b0ab..b62b6a2123 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -34,7 +34,7 @@ const Default = {
 
 const DefaultType = {
   ...Tooltip.DefaultType,
-  content: '(string|element|function)'
+  content: '(null|string|element|function)'
 }
 
 const Event = {
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index a2906ade71..a04bd21c60 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -1,4 +1,5 @@
 import Popover from '../../src/popover'
+import EventHandler from '../../src/dom/event-handler'
 import { clearFixture, getFixture, jQueryMock } from '../helpers/fixture'
 
 describe('Popover', () => {
@@ -96,59 +97,74 @@ describe('Popover', () => {
       popover.show()
     })
 
-    it('should show a popover with just content', done => {
-      fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
+    it('should show a popover with just content without having header', done => {
+      fixtureEl.innerHTML = '<a href="#">Nice link</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl, {
-        content: 'Popover content'
+        content: 'Some beautiful content :)'
       })
 
       popoverEl.addEventListener('shown.bs.popover', () => {
         const popoverDisplayed = document.querySelector('.popover')
 
         expect(popoverDisplayed).not.toBeNull()
-        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
+        expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
+        expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
         done()
       })
 
       popover.show()
     })
 
-    it('should show a popover with just content without having header', done => {
+    it('should show a popover with just title without having body', done => {
       fixtureEl.innerHTML = '<a href="#">Nice link</a>'
 
       const popoverEl = fixtureEl.querySelector('a')
       const popover = new Popover(popoverEl, {
-        content: 'Some beautiful content :)'
+        title: 'Title which does not require content'
       })
 
       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 :)')
+        expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
+        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
         done()
       })
 
       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 using data-attribute to get config', done => {
+      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, {
-        title: 'Title, which does not require content'
-      })
+      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')
+        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
+        done()
+      })
+
+      popover.show()
+    })
+
+    it('should NOT show a popover without `title` and `content`', done => {
+      fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
+
+      const popoverEl = fixtureEl.querySelector('a')
+      const popover = new Popover(popoverEl, { animation: false })
+      spyOn(EventHandler, 'trigger').and.callThrough()
+
+      setTimeout(() => {
+        expect(EventHandler.trigger).not.toHaveBeenCalled()
+        expect(document.querySelector('.popover')).toBeNull()
         done()
       })