From d62ba935ef2e1ee97a57b1b75090e50e86e0d140 Mon Sep 17 00:00:00 2001
From: alpadev <2838324+alpadev@users.noreply.github.com>
Date: Wed, 16 Jun 2021 06:48:23 +0200
Subject: [PATCH] Fix carousel buttons (#34266)

* test(carousel): add test to check if next/prev button work as intended

* fix(carousel): merge passed config with instance config in carouselInterface
---
 js/src/carousel.js             |  9 ++++++++-
 js/tests/unit/carousel.spec.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index a956ebc8bb..fa401535af 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -498,7 +498,14 @@ class Carousel extends BaseComponent {
   static carouselInterface(element, config) {
     const data = Carousel.getOrCreateInstance(element, config)
 
-    const { _config } = data
+    let { _config } = data
+    if (typeof config === 'object') {
+      _config = {
+        ..._config,
+        ...config
+      }
+    }
+
     const action = typeof config === 'string' ? config : _config.slide
 
     if (typeof config === 'number') {
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index 5120cc6015..74f82ce1f0 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -707,6 +707,34 @@ describe('Carousel', () => {
 
       carousel.next()
     })
+
+    it('should call next()/prev() instance methods when clicking the respective direction buttons', () => {
+      fixtureEl.innerHTML = [
+        '<div id="carousel" class="carousel slide">',
+        '  <div class="carousel-inner">',
+        '    <div class="carousel-item active">item 1</div>',
+        '    <div class="carousel-item">item 2</div>',
+        '    <div class="carousel-item">item 3</div>',
+        '  </div>',
+        '  <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev"></button>',
+        '  <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next"></button>',
+        '</div>'
+      ].join('')
+
+      const carouselEl = fixtureEl.querySelector('#carousel')
+      const prevBtnEl = fixtureEl.querySelector('.carousel-control-prev')
+      const nextBtnEl = fixtureEl.querySelector('.carousel-control-next')
+
+      const carousel = new Carousel(carouselEl)
+      const nextSpy = spyOn(carousel, 'next')
+      const prevSpy = spyOn(carousel, 'prev')
+
+      nextBtnEl.click()
+      prevBtnEl.click()
+
+      expect(nextSpy).toHaveBeenCalled()
+      expect(prevSpy).toHaveBeenCalled()
+    })
   })
 
   describe('nextWhenVisible', () => {