Fix popover arrow & tooltip template after the `setContent` addition (#35441)

2 files changed, 31 insertions, 0 deletions

diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index ba23ec024..606d7370c 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -155,6 +155,22 @@ describe('Popover', () => {
       popover.show()
     })
 
+    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)
+
+      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', done => {
       fixtureEl.innerHTML = '<a href="#">BS twitter</a>'
 
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 19eeca2f5..d261986c3 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -1081,6 +1081,21 @@ describe('Tooltip', () => {
       expect(tip()).not.toHaveClass('show')
       expect(tip().querySelector('.tooltip-inner').textContent).toEqual('foo')
     })
+
+    it('"setContent" should keep the initial template', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      tooltip.setContent({ '.tooltip-inner': 'foo' })
+      const tip = tooltip.getTipElement()
+
+      expect(tip).toHaveClass('tooltip')
+      expect(tip).toHaveClass('bs-tooltip-auto')
+      expect(tip.querySelector('.tooltip-arrow')).not.toBeNull()
+      expect(tip.querySelector('.tooltip-inner')).not.toBeNull()
+    })
   })
 
   describe('setContent', () => {