@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/Carousel/tests/Carousel.static.test.js

@@ -0,0 +1,616 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Swiper } from "swiper";
+import Carousel from "../Carousel.static";
+
+// Mock Swiper
+jest.mock("swiper", () => ({
+  Swiper: jest.fn().mockImplementation(() => ({
+    slideNext: jest.fn(),
+    slidePrev: jest.fn(),
+    destroy: jest.fn(),
+    update: jest.fn(),
+    on: jest.fn(),
+    enable: jest.fn(),
+    disable: jest.fn(),
+    activeIndex: 0,
+    isBeginning: true,
+    isEnd: false,
+    slides: [{}, {}, {}],
+    params: {
+      slidesPerView: 1,
+    },
+  })),
+}));
+
+// Mock Swiper modules
+jest.mock("swiper/modules", () => ({
+  Navigation: {},
+  Pagination: {},
+  Scrollbar: {},
+  A11y: {},
+  Keyboard: {},
+}));
+
+describe("Carousel Static - External Controls", () => {
+  let carouselElement;
+  let carouselInstance;
+  let mockSwiperInstance;
+
+  beforeEach(() => {
+    // Clear all mocks
+    jest.clearAllMocks();
+
+    // Create mock Swiper instance
+    mockSwiperInstance = {
+      slideNext: jest.fn(),
+      slidePrev: jest.fn(),
+      destroy: jest.fn(),
+      update: jest.fn(),
+      on: jest.fn(),
+      enable: jest.fn(),
+      disable: jest.fn(),
+      activeIndex: 0,
+      isBeginning: true,
+      isEnd: false,
+      slides: [{}, {}, {}],
+      params: {
+        slidesPerView: 1,
+      },
+    };
+
+    Swiper.mockImplementation(() => mockSwiperInstance);
+
+    // Set up DOM
+    document.body.innerHTML = `
+      <div class="carousel" data-carousel-id="test-carousel" id="test-carousel">
+        <div class="carousel__viewport">
+          <div class="carousel__track">
+            <div class="carousel__slide">Slide 1</div>
+            <div class="carousel__slide">Slide 2</div>
+            <div class="carousel__slide">Slide 3</div>
+          </div>
+        </div>
+        <div class="carousel__pagination"></div>
+      </div>
+      <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn">Previous</button>
+      <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn">Next</button>
+    `;
+
+    carouselElement = document.querySelector(".carousel");
+
+    // Mock requestAnimationFrame to execute synchronously
+    global.requestAnimationFrame = jest.fn((cb) => cb());
+
+    carouselInstance = new Carousel(carouselElement);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    // Restore requestAnimationFrame
+    global.requestAnimationFrame = undefined;
+  });
+
+  describe("External Controls Initialization", () => {
+    it("should find and initialize external controls", () => {
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(prevButton.getAttribute("aria-label")).toBe(
+        "Predchádzajúci snímok",
+      );
+      expect(nextButton.getAttribute("aria-label")).toBe("Nasledujúci snímok");
+      expect(prevButton.getAttribute("type")).toBe("button");
+      expect(nextButton.getAttribute("type")).toBe("button");
+    });
+
+    it("should not initialize controls without carousel ID", () => {
+      // Create carousel without ID
+      document.body.innerHTML = `
+        <div class="carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="missing-carousel" data-carousel-action="next">Next</button>
+      `;
+
+      const element = document.querySelector(".carousel");
+      new Carousel(element);
+      const button = document.querySelector("button");
+
+      expect(button.hasAttribute("data-carousel-initialized")).toBe(false);
+    });
+
+    it("should skip already initialized controls", () => {
+      // Mark button as already initialized
+      const prevButton = document.getElementById("prev-btn");
+      prevButton.setAttribute("data-carousel-initialized", "true");
+
+      // Create new carousel instance
+      new Carousel(carouselElement);
+
+      // Should not double-initialize
+      expect(prevButton.getAttribute("data-carousel-initialized")).toBe("true");
+    });
+  });
+
+  describe("External Controls Navigation", () => {
+    it("should call slideNext when next button is clicked", () => {
+      const nextButton = document.getElementById("next-btn");
+      nextButton.click();
+
+      expect(mockSwiperInstance.slideNext).toHaveBeenCalledTimes(1);
+    });
+
+    it("should call slidePrev when prev button is clicked", () => {
+      // Ensure button is not disabled by setting carousel state
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      prevButton.click();
+
+      expect(mockSwiperInstance.slidePrev).toHaveBeenCalledTimes(1);
+    });
+
+    it("should prevent default behavior on button click", () => {
+      const nextButton = document.getElementById("next-btn");
+      const mockEvent = new Event("click");
+      mockEvent.preventDefault = jest.fn();
+
+      nextButton.dispatchEvent(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it("should not navigate when button is disabled", () => {
+      const nextButton = document.getElementById("next-btn");
+      nextButton.setAttribute("disabled", "true");
+
+      nextButton.click();
+
+      expect(mockSwiperInstance.slideNext).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("External Controls State Management", () => {
+    it("should disable prev button when at beginning", () => {
+      mockSwiperInstance.isBeginning = true;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(true);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("true");
+
+      expect(nextButton.hasAttribute("disabled")).toBe(false);
+      expect(nextButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should disable next button when at end", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = true;
+      mockSwiperInstance.activeIndex = 2; // Set to last slide so activeIndex + slidesPerView >= slidesCount
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(nextButton.hasAttribute("disabled")).toBe(true);
+      expect(nextButton.getAttribute("aria-disabled")).toBe("true");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(false);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should enable both buttons when in middle", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      expect(prevButton.hasAttribute("disabled")).toBe(false);
+      expect(nextButton.hasAttribute("disabled")).toBe(false);
+      expect(prevButton.getAttribute("aria-disabled")).toBe("false");
+      expect(nextButton.getAttribute("aria-disabled")).toBe("false");
+    });
+
+    it("should update controls state on slide change transition end", () => {
+      const updateStatesSpy = jest.spyOn(
+        carouselInstance,
+        "updateExternalControlsState",
+      );
+
+      // Get the slideChangeTransitionEnd callback from Swiper initialization
+      const swiperOnCallArgs = mockSwiperInstance.on.mock.calls.find(
+        (call) => call[0] === "slideChangeTransitionEnd",
+      );
+
+      if (swiperOnCallArgs) {
+        const callback = swiperOnCallArgs[1];
+        callback();
+        expect(updateStatesSpy).toHaveBeenCalled();
+      }
+    });
+  });
+
+  describe("Multiple Control Sets", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="test-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+              <div class="carousel__slide">Slide 2</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn-1">Prev 1</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn-1">Next 1</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="prev" id="prev-btn-2">Prev 2</button>
+        <button data-carousel-controls="test-carousel" data-carousel-action="next" id="next-btn-2">Next 2</button>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+
+      // Mock requestAnimationFrame to execute synchronously
+      global.requestAnimationFrame = jest.fn((cb) => cb());
+
+      carouselInstance = new Carousel(carouselElement);
+    });
+
+    it("should initialize multiple control sets", () => {
+      const buttons = document.querySelectorAll(
+        '[data-carousel-controls="test-carousel"]',
+      );
+
+      buttons.forEach((button) => {
+        expect(button.hasAttribute("data-carousel-initialized")).toBe(true);
+      });
+    });
+
+    it("should update state for all control sets", () => {
+      mockSwiperInstance.isBeginning = true;
+      mockSwiperInstance.isEnd = false;
+
+      carouselInstance.updateExternalControlsState();
+
+      const prevButtons = document.querySelectorAll(
+        '[data-carousel-action="prev"]',
+      );
+      const nextButtons = document.querySelectorAll(
+        '[data-carousel-action="next"]',
+      );
+
+      prevButtons.forEach((button) => {
+        expect(button.hasAttribute("disabled")).toBe(true);
+        expect(button.getAttribute("aria-disabled")).toBe("true");
+      });
+
+      nextButtons.forEach((button) => {
+        expect(button.hasAttribute("disabled")).toBe(false);
+        expect(button.getAttribute("aria-disabled")).toBe("false");
+      });
+    });
+  });
+
+  describe("Cleanup", () => {
+    it("should clean up external controls on destroy", () => {
+      const prevButton = document.getElementById("prev-btn");
+      const nextButton = document.getElementById("next-btn");
+
+      // Verify controls are initialized
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(true);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(true);
+
+      // Destroy carousel
+      carouselInstance.destroy();
+
+      // Verify cleanup
+      expect(prevButton.hasAttribute("data-carousel-initialized")).toBe(false);
+      expect(nextButton.hasAttribute("data-carousel-initialized")).toBe(false);
+      expect(mockSwiperInstance.destroy).toHaveBeenCalled();
+    });
+
+    it("should remove event listeners on destroy", () => {
+      const nextButton = document.getElementById("next-btn");
+
+      // Store reference to click handler
+      const clickHandler = nextButton._carouselClickHandler;
+      expect(clickHandler).toBeDefined();
+
+      carouselInstance.destroy();
+
+      // Handler reference should be removed
+      expect(nextButton._carouselClickHandler).toBeUndefined();
+    });
+  });
+
+  describe("Static Methods", () => {
+    it("should get instance by ID", () => {
+      const foundInstance = Carousel.getInstanceById("test-carousel");
+      expect(foundInstance).toBe(carouselInstance);
+    });
+
+    it("should get instance by data-carousel-id", () => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="data-id-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const element = document.querySelector(".carousel");
+      const instance = new Carousel(element);
+      const foundInstance = Carousel.getInstanceById("data-id-carousel");
+
+      expect(foundInstance).toBe(instance);
+    });
+
+    it("should return null for non-existent carousel", () => {
+      const foundInstance = Carousel.getInstanceById("non-existent");
+      expect(foundInstance).toBe(null);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle controls without valid action", () => {
+      document.body.innerHTML = `
+        <div class="carousel" data-carousel-id="test-carousel">
+          <div class="carousel__viewport">
+            <div class="carousel__track">
+              <div class="carousel__slide">Slide 1</div>
+            </div>
+          </div>
+        </div>
+        <button data-carousel-controls="test-carousel" data-carousel-action="invalid">Invalid</button>
+      `;
+
+      const element = document.querySelector(".carousel");
+      new Carousel(element);
+
+      const button = document.querySelector("button");
+      button.click();
+
+      // Should not crash and should not call slideNext/slidePrev
+      expect(mockSwiperInstance.slideNext).not.toHaveBeenCalled();
+      expect(mockSwiperInstance.slidePrev).not.toHaveBeenCalled();
+    });
+
+    it("should handle updateExternalControlsState without instance", () => {
+      carouselInstance.instance = null;
+
+      // Should not crash
+      expect(() => {
+        carouselInstance.updateExternalControlsState();
+      }).not.toThrow();
+    });
+
+    it("should handle updateExternalControlsState without carouselId", () => {
+      carouselInstance.carouselId = null;
+
+      // Should not crash
+      expect(() => {
+        carouselInstance.updateExternalControlsState();
+      }).not.toThrow();
+    });
+  });
+});
+
+describe("Carousel Static - Auto-Disable Feature", () => {
+  let carouselElement;
+  let carouselInstance;
+  let mockSwiperInstance;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Create mock Swiper instance with slides array
+    mockSwiperInstance = {
+      slideNext: jest.fn(),
+      slidePrev: jest.fn(),
+      destroy: jest.fn(),
+      update: jest.fn(),
+      on: jest.fn(),
+      enable: jest.fn(),
+      disable: jest.fn(),
+      activeIndex: 0,
+      isBeginning: true,
+      isEnd: false,
+      slides: [], // Will be populated in tests
+      params: {
+        slidesPerView: 1.2,
+      },
+    };
+
+    Swiper.mockImplementation(() => mockSwiperInstance);
+
+    document.body.innerHTML = `
+      <div class="carousel" data-carousel-id="test-carousel" id="test-carousel">
+        <div class="carousel__viewport">
+          <div class="carousel__track">
+            <div class="carousel__slide">Slide 1</div>
+            <div class="carousel__slide">Slide 2</div>
+            <div class="carousel__slide">Slide 3</div>
+          </div>
+        </div>
+        <div class="carousel__pagination"></div>
+      </div>
+    `;
+
+    carouselElement = document.querySelector(".carousel");
+    global.requestAnimationFrame = jest.fn((cb) => cb());
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    global.requestAnimationFrame = undefined;
+  });
+
+  describe("Auto-disable when content fits", () => {
+    it("should enable carousel when more slides than slidesPerView", () => {
+      // 3 slides, slidesPerView 1.2
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 1.2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+
+    it("should disable carousel when slides match slidesPerView", () => {
+      // 2 slides, slidesPerView 2
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should disable carousel when slides less than slidesPerView", () => {
+      // 1 slide, slidesPerView 3
+      mockSwiperInstance.slides = [document.createElement("div")];
+      mockSwiperInstance.params.slidesPerView = 3;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should enable carousel when slides exceed slidesPerView by more than 1", () => {
+      // 5 slides, slidesPerView 2
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+  });
+
+  describe("Update state on resize/breakpoint change", () => {
+    it("should update carousel enabled state on resize event", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // Clear previous calls
+      mockSwiperInstance.disable.mockClear();
+      mockSwiperInstance.enable.mockClear();
+
+      // Simulate resize event with different breakpoint
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 3;
+
+      // Get the resize callback
+      const resizeCallback = mockSwiperInstance.on.mock.calls.find(
+        (call) => call[0] === "resize",
+      );
+      if (resizeCallback) {
+        resizeCallback[1]();
+        expect(mockSwiperInstance.enable).toHaveBeenCalled();
+      }
+    });
+
+    it("should handle resize with decimal slidesPerView", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2.5;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // 4 slides > 2.5, should be enabled
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+  });
+
+  describe("Edge cases for auto-disable", () => {
+    it("should handle carousel with no slides", () => {
+      mockSwiperInstance.slides = [];
+      mockSwiperInstance.params.slidesPerView = 1;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should handle slidesPerView as string number", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = "2";
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should default to slidesPerView 1 if not specified", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = undefined;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // 2 slides > 1 (default), should be enabled
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+
+    it("should not crash if updateCarouselEnabledState called without instance", () => {
+      carouselInstance = new Carousel(carouselElement);
+      carouselInstance.instance = null;
+
+      expect(() => {
+        carouselInstance.updateCarouselEnabledState();
+      }).not.toThrow();
+    });
+  });
+});