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

package/src/components/CarouselHero/tests/CarouselHero.conformance.test.js

@@ -0,0 +1,129 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CarouselHero, CarouselHeroItem } from "../";
+
+const basicExample = (
+  <CarouselHero>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
+      <h2>Slide 1</h2>
+      <p>First slide content</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
+      <h2>Slide 2</h2>
+      <p>Second slide content</p>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+const exampleWithTabs = (
+  <CarouselHero
+    tabs={[
+      { label: "First Tab" },
+      { label: "Second Tab" },
+      { label: "Third Tab" },
+    ]}
+  >
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+1">
+      <h2>Slide 1</h2>
+      <p>First slide with tabs</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+2">
+      <h2>Slide 2</h2>
+      <p>Second slide with tabs</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Slide+3">
+      <h2>Slide 3</h2>
+      <p>Third slide with tabs</p>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+const exampleWithAutoplay = (
+  <CarouselHero
+    interval={3000}
+    tabs={[{ label: "Auto Tab 1" }, { label: "Auto Tab 2" }]}
+  >
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Auto+Slide+1">
+      <h2>Auto Slide 1</h2>
+      <p>Autoplay slide 1</p>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Auto+Slide+2">
+      <h2>Auto Slide 2</h2>
+      <p>Autoplay slide 2</p>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+const exampleWithComplexContent = (
+  <CarouselHero
+    tabs={[{ label: "Product 1" }, { label: "Product 2" }]}
+    interval={5000}
+    swiperOptions={{ speed: 300 }}
+  >
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Product+1">
+      <h2>Premium Product</h2>
+      <p>Discover our premium product line with advanced features.</p>
+      <button type="button">Learn More</button>
+      <button type="button">Buy Now</button>
+    </CarouselHeroItem>
+    <CarouselHeroItem image="https://placehold.co/720x560?text=Product+2">
+      <h2>Special Offer</h2>
+      <p>Limited time offer - get 50% off on selected items.</p>
+      <ul>
+        <li>Free shipping</li>
+        <li>30-day return policy</li>
+        <li>Extended warranty</li>
+      </ul>
+      <button type="button">View Details</button>
+    </CarouselHeroItem>
+  </CarouselHero>
+);
+
+describe("CarouselHero conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(basicExample);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(basicExample);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHero with tabs conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithTabs);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithTabs);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHero with autoplay conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithAutoplay);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithAutoplay);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHero with complex content conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/CarouselHero/tests/CarouselHero.unit.test.js

@@ -0,0 +1,332 @@
+import { render } from "@testing-library/react";
+
+import { CarouselHero } from "../CarouselHero";
+import { CarouselHeroItem } from "../CarouselHeroItem";
+
+describe("rendering CarouselHero", () => {
+  describe("initial state", () => {
+    it("has default class carousel-hero", () => {
+      const { getByTestId } = render(<CarouselHero data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero");
+    });
+
+    it("has data-carousel-hero attribute", () => {
+      const { container } = render(<CarouselHero />);
+      expect(container.querySelector(".carousel-hero")).toHaveAttribute(
+        "data-carousel-hero",
+      );
+    });
+
+    it("has default class carousel-hero__viewport-wrapper", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__viewport-wrapper")
+          .length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__viewport", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__viewport").length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__track", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__track").length,
+      ).toBe(1);
+    });
+
+    it("has container with d-flex class for controls", () => {
+      const { container } = render(<CarouselHero />);
+      expect(container.querySelector(".container.d-flex")).toBeInTheDocument();
+    });
+
+    it("has default class carousel-hero__navigation", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__navigation").length,
+      ).toBe(1);
+    });
+
+    it("has default class carousel-hero__pagination", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__pagination").length,
+      ).toBe(1);
+    });
+
+    it("renders navigation controls (prev/next)", () => {
+      const { container } = render(<CarouselHero />);
+      expect(
+        container.getElementsByClassName("carousel-hero__prev").length,
+      ).toBe(1);
+      expect(
+        container.getElementsByClassName("carousel-hero__next").length,
+      ).toBe(1);
+    });
+
+    it("navigation controls have proper ARIA labels", () => {
+      const { container } = render(<CarouselHero />);
+
+      const prevButton = container.querySelector(".carousel-hero__prev");
+      const nextButton = container.querySelector(".carousel-hero__next");
+
+      expect(prevButton).toHaveAttribute("aria-label", "Predchádzajúci snímok");
+      expect(nextButton).toHaveAttribute("aria-label", "Nasledujúci snímok");
+    });
+
+    it("play/pause button has proper ARIA label when displayed", () => {
+      const { container } = render(<CarouselHero interval={3000} />);
+
+      const playPauseButton = container.querySelector(
+        ".carousel-hero__play-pause",
+      );
+      expect(playPauseButton).toHaveAttribute(
+        "aria-label",
+        "Pozastaviť/Spustiť automatické prehrávanie",
+      );
+    });
+  });
+
+  describe("passed props", () => {
+    const tabs = [{ label: "Tab 1" }, { label: "Tab 2" }, { label: "Tab 3" }];
+
+    const children = (
+      <>
+        <CarouselHeroItem key="slide-1" image="https://placehold.co/720x560">
+          <h2>Test Title 1</h2>
+          <p>Test content 1</p>
+        </CarouselHeroItem>
+        <CarouselHeroItem key="slide-2" image="https://placehold.co/720x560">
+          <h2>Test Title 2</h2>
+          <p>Test content 2</p>
+        </CarouselHeroItem>
+      </>
+    );
+
+    it("renders children slides", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      const slides = container.getElementsByClassName("carousel-hero__slide");
+      expect(slides.length).toBe(2);
+      expect(slides[0]).toHaveTextContent("Test Title 1");
+      expect(slides[1]).toHaveTextContent("Test Title 2");
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <CarouselHero data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("carousel-hero");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("does not have is-light or is-dark class by default", () => {
+      const { getByTestId } = render(<CarouselHero data-testid="test-id" />);
+      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
+    });
+
+    it("renders tabs when tabs prop is provided", () => {
+      const { container } = render(
+        <CarouselHero tabs={tabs}>{children}</CarouselHero>,
+      );
+
+      const tabsContainer = container.querySelector(".carousel-hero__tabs");
+      expect(tabsContainer).toBeInTheDocument();
+      expect(tabsContainer).toHaveAttribute("role", "tablist");
+
+      const tabButtons = container.querySelectorAll(".carousel-hero__tab");
+      expect(tabButtons.length).toBe(3);
+      expect(tabButtons[0]).toHaveTextContent("Tab 1");
+      expect(tabButtons[1]).toHaveTextContent("Tab 2");
+      expect(tabButtons[2]).toHaveTextContent("Tab 3");
+    });
+
+    it("does not render tabs when tabs prop is empty", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      const tabsContainer = container.querySelector(".carousel-hero__tabs");
+      expect(tabsContainer).not.toBeInTheDocument();
+    });
+
+    it("sets proper ARIA attributes on tabs", () => {
+      const { container } = render(
+        <CarouselHero tabs={tabs}>{children}</CarouselHero>,
+      );
+
+      const tabButtons = container.querySelectorAll(".carousel-hero__tab");
+
+      // First tab should be active
+      expect(tabButtons[0]).toHaveAttribute("role", "tab");
+      expect(tabButtons[0]).toHaveAttribute("aria-selected", "true");
+      expect(tabButtons[0]).toHaveAttribute("tabIndex", "0");
+
+      // Other tabs should not be active
+      expect(tabButtons[1]).toHaveAttribute("aria-selected", "false");
+      expect(tabButtons[1]).toHaveAttribute("tabIndex", "-1");
+      expect(tabButtons[2]).toHaveAttribute("aria-selected", "false");
+      expect(tabButtons[2]).toHaveAttribute("tabIndex", "-1");
+    });
+
+    it("shows play/pause button when interval is provided", () => {
+      const { container } = render(
+        <CarouselHero interval={3000}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(1);
+    });
+
+    it("does not show play/pause button when interval is not provided", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
+    it("does not show play/pause button when interval is 0", () => {
+      const { container } = render(
+        <CarouselHero interval={0}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
+    it("sets data-interval attribute when interval is provided", () => {
+      const { container } = render(
+        <CarouselHero interval={5000}>{children}</CarouselHero>,
+      );
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel).toHaveAttribute("data-interval", "5000");
+    });
+
+    it("does not set data-interval attribute when interval is not provided", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel).not.toHaveAttribute("data-interval");
+    });
+  });
+
+  describe("swiperOptions prop", () => {
+    const children = (
+      <CarouselHeroItem key="slide-1" image="https://placehold.co/720x560">
+        <h2>Test Title</h2>
+        <p>Test content</p>
+      </CarouselHeroItem>
+    );
+
+    it("sets data-swiper-options attribute when swiperOptions prop is provided", () => {
+      const swiperOptions = { speed: 500, loop: true };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel.getAttribute("data-swiper-options")).toBe(
+        JSON.stringify(swiperOptions),
+      );
+    });
+
+    it("does not set data-swiper-options attribute when swiperOptions prop is not provided", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel.hasAttribute("data-swiper-options")).toBe(false);
+    });
+
+    it("shows play/pause button when swiperOptions has autoplay with delay >= 1000ms", () => {
+      const swiperOptions = {
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false,
+        },
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(1);
+    });
+
+    it("does not show play/pause button when swiperOptions autoplay delay < 1000ms", () => {
+      const swiperOptions = {
+        autoplay: {
+          delay: 500,
+        },
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
+    it("does not show play/pause button when autoplay is boolean true", () => {
+      const swiperOptions = {
+        autoplay: true,
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+  });
+
+  describe("Swiper integration", () => {
+    const children = (
+      <>
+        <CarouselHeroItem key="slide-1" image="https://placehold.co/720x560">
+          <h2>Test Title 1</h2>
+          <p>Test content 1</p>
+        </CarouselHeroItem>
+        <CarouselHeroItem key="slide-2" image="https://placehold.co/720x560">
+          <h2>Test Title 2</h2>
+          <p>Test content 2</p>
+        </CarouselHeroItem>
+      </>
+    );
+
+    it("track element uses carousel-hero__track class which maps to swiper-wrapper", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      expect(
+        container.querySelector(".carousel-hero__track"),
+      ).toBeInTheDocument();
+    });
+
+    it("slide elements use carousel-hero__slide class which maps to swiper-slide", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      const slides = container.getElementsByClassName("carousel-hero__slide");
+      expect(slides.length).toBe(2);
+    });
+
+    it("viewport element uses carousel-hero__viewport class which maps to swiper-container", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      expect(
+        container.querySelector(".carousel-hero__viewport"),
+      ).toBeInTheDocument();
+    });
+
+    it("pagination element uses carousel-hero__pagination class which maps to swiper-pagination", () => {
+      const { container } = render(<CarouselHero>{children}</CarouselHero>);
+      expect(
+        container.querySelector(".carousel-hero__pagination"),
+      ).toBeInTheDocument();
+    });
+  });
+});

package/src/components/CarouselHero/tests/CarouselHeroItem.conformance.test.js

@@ -0,0 +1,135 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { CarouselHeroItem } from "../";
+
+const basicExample = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Basic">
+    <h2>Basic Slide Title</h2>
+    <p>Basic slide content</p>
+  </CarouselHeroItem>
+);
+
+const exampleWithButton = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Button">
+    <h2>Slide with Button</h2>
+    <p>This slide has interactive content.</p>
+    <button type="button">Click me</button>
+  </CarouselHeroItem>
+);
+
+const exampleWithComplexContent = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Complex">
+    <h2>Complex Content Slide</h2>
+    <p>This slide contains various content types:</p>
+    <ul>
+      <li>List item 1</li>
+      <li>List item 2</li>
+      <li>List item 3</li>
+    </ul>
+    <div>
+      <button type="button">Primary Action</button>
+      <button type="button">Secondary Action</button>
+    </div>
+  </CarouselHeroItem>
+);
+
+const exampleWithLongContent = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Long+Title">
+    <h2>
+      This is a Very Long Title That Should Still Be Accessible and Properly
+      Rendered
+    </h2>
+    <p>Content for slide with long title.</p>
+  </CarouselHeroItem>
+);
+
+const exampleWithSpecialCharacters = (
+  <CarouselHeroItem image="https://placehold.co/720x560?text=Special+Chars">
+    <h2>Špeciálny Titul s Diakritikou & Symbolmi €</h2>
+    <p>Obsah so špeciálnymi znakmi: áéíóúôäňľščťžý.</p>
+    <p>Mathematical symbols: ∑ ∞ ± × ÷</p>
+  </CarouselHeroItem>
+);
+
+const exampleWithCustomClassName = (
+  <CarouselHeroItem
+    className="custom-slide-class"
+    image="https://placehold.co/720x560?text=Custom"
+  >
+    <h2>Custom Styled Slide</h2>
+    <p>This slide has custom styling.</p>
+  </CarouselHeroItem>
+);
+
+describe("CarouselHeroItem conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(basicExample);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(basicExample);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with button conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithButton);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithButton);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with complex content conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithComplexContent);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with long content conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithLongContent);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithLongContent);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with special characters conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithSpecialCharacters);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithSpecialCharacters);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("CarouselHeroItem with custom class conformance", () => {
+  it("is valid html", () => {
+    const { container } = render(exampleWithCustomClassName);
+    expect(container).toHTMLValidate();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(exampleWithCustomClassName);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});