Merge 0baaa5391d into 4c98145482

js/src/base-component.js

@@ -29,6 +29,11 @@ class BaseComponent extends Config {
       return
     }
 
+    const instance = Data.get(element, this.constructor.DATA_KEY)
+    if (instance instanceof this.constructor) {
+      instance.dispose()
+    }
+
     this._element = element
     this._config = this._getConfig(config)
 

js/tests/unit/alert.spec.js

@@ -18,9 +18,9 @@ describe('Alert', () => {
 
     const alertEl = fixtureEl.querySelector('.alert')
     const alertBySelector = new Alert('.alert')
-    const alertByElement = new Alert(alertEl)
-
     expect(alertBySelector._element).toEqual(alertEl)
+
+    const alertByElement = new Alert(alertEl)
     expect(alertByElement._element).toEqual(alertEl)
   })
 

js/tests/unit/base-component.spec.js

@@ -114,6 +114,15 @@ describe('Base Component', () => {
 
         expect(spy).toHaveBeenCalledWith(element, DummyClass.EVENT_KEY)
       })
+
+      it('should call dispose automatically when an component is reinitialized', () => {
+        instance = new DummyClass(element)
+        const spy = spyOn(instance, 'dispose')
+
+        instance = new DummyClass(element)
+
+        expect(spy).toHaveBeenCalled()
+      })
     })
 
     describe('getInstance', () => {

js/tests/unit/button.spec.js

@@ -16,9 +16,9 @@ describe('Button', () => {
     fixtureEl.innerHTML = '<button data-bs-toggle="button">Placeholder</button>'
     const buttonEl = fixtureEl.querySelector('[data-bs-toggle="button"]')
     const buttonBySelector = new Button('[data-bs-toggle="button"]')
-    const buttonByElement = new Button(buttonEl)
-
     expect(buttonBySelector._element).toEqual(buttonEl)
+
+    const buttonByElement = new Button(buttonEl)
     expect(buttonByElement._element).toEqual(buttonEl)
   })
 

js/tests/unit/carousel.spec.js

@@ -59,9 +59,9 @@ describe('Carousel', () => {
 
       const carouselEl = fixtureEl.querySelector('#myCarousel')
       const carouselBySelector = new Carousel('#myCarousel')
-      const carouselByElement = new Carousel(carouselEl)
-
       expect(carouselBySelector._element).toEqual(carouselEl)
+
+      const carouselByElement = new Carousel(carouselEl)
       expect(carouselByElement._element).toEqual(carouselEl)
     })
 

js/tests/unit/collapse.spec.js

@@ -37,9 +37,9 @@ describe('Collapse', () => {
 
       const collapseEl = fixtureEl.querySelector('div.my-collapse')
       const collapseBySelector = new Collapse('div.my-collapse')
-      const collapseByElement = new Collapse(collapseEl)
-
       expect(collapseBySelector._element).toEqual(collapseEl)
+
+      const collapseByElement = new Collapse(collapseEl)
       expect(collapseByElement._element).toEqual(collapseEl)
     })
 

js/tests/unit/dropdown.spec.js

@@ -53,9 +53,9 @@ describe('Dropdown', () => {
 
       const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
       const dropdownBySelector = new Dropdown('[data-bs-toggle="dropdown"]')
-      const dropdownByElement = new Dropdown(btnDropdown)
-
       expect(dropdownBySelector._element).toEqual(btnDropdown)
+
+      const dropdownByElement = new Dropdown(btnDropdown)
       expect(dropdownByElement._element).toEqual(btnDropdown)
     })
 

js/tests/unit/modal.spec.js

@@ -50,9 +50,9 @@ describe('Modal', () => {
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modalBySelector = new Modal('.modal')
-      const modalByElement = new Modal(modalEl)
-
       expect(modalBySelector._element).toEqual(modalEl)
+
+      const modalByElement = new Modal(modalEl)
       expect(modalByElement._element).toEqual(modalEl)
     })
   })

js/tests/unit/scrollspy.spec.js

@@ -100,9 +100,9 @@ describe('ScrollSpy', () => {
 
       const sSpyEl = fixtureEl.querySelector('.content')
       const sSpyBySelector = new ScrollSpy('.content')
-      const sSpyByElement = new ScrollSpy(sSpyEl)
-
       expect(sSpyBySelector._element).toEqual(sSpyEl)
+
+      const sSpyByElement = new ScrollSpy(sSpyEl)
       expect(sSpyByElement._element).toEqual(sSpyEl)
     })
 

js/tests/unit/tab.spec.js

@@ -33,9 +33,9 @@ describe('Tab', () => {
 
       const tabEl = fixtureEl.querySelector('[href="#home"]')
       const tabBySelector = new Tab('[href="#home"]')
-      const tabByElement = new Tab(tabEl)
-
       expect(tabBySelector._element).toEqual(tabEl)
+
+      const tabByElement = new Tab(tabEl)
       expect(tabByElement._element).toEqual(tabEl)
     })
 

js/tests/unit/toast.spec.js

@@ -32,9 +32,9 @@ describe('Toast', () => {
 
       const toastEl = fixtureEl.querySelector('.toast')
       const toastBySelector = new Toast('.toast')
-      const toastByElement = new Toast(toastEl)
-
       expect(toastBySelector._element).toEqual(toastEl)
+
+      const toastByElement = new Toast(toastEl)
       expect(toastByElement._element).toEqual(toastEl)
     })
 

js/tests/unit/tooltip.spec.js

@@ -62,9 +62,9 @@ describe('Tooltip', () => {
 
       const tooltipEl = fixtureEl.querySelector('#tooltipEl')
       const tooltipBySelector = new Tooltip('#tooltipEl')
-      const tooltipByElement = new Tooltip(tooltipEl)
-
       expect(tooltipBySelector._element).toEqual(tooltipEl)
+
+      const tooltipByElement = new Tooltip(tooltipEl)
       expect(tooltipByElement._element).toEqual(tooltipEl)
     })