Don't add empty content holder when there is no content available (#33982)

* Remove content holder when there is no content

* Add tests to check the removal of header/content

Co-authored-by: XhmikosR <[email protected]>

1 files changed, 40 insertions, 0 deletions

diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index dc1c4afc1..7c741fe47 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -117,6 +117,46 @@ describe('Popover', () => {
       popover.show()
     })
 
+    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: 'Some beautiful 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 :)')
+        done()
+      })
+
+      popover.show()
+    })
+
+    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, {
+        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-body')).toBeNull()
+        expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title, which does not require content')
+        done()
+      })
+
+      popover.show()
+    })
+
     it('should show a popover with provided custom class', done => {
       fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'