@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/components/Breadcrumbs/tests/BreadcrumbItem.unit.test.js

@@ -0,0 +1,294 @@
+import { render } from "@testing-library/react";
+
+import { BreadcrumbItem } from "../BreadcrumbItem";
+
+// text is required as a child to render in ConditionalWrapper component
+describe("rendering BreadcrumbItem", () => {
+  describe("initial state", () => {
+    it("has default class osk-breadcrumbs__item", () => {
+      const { getByTestId } = render(
+        <BreadcrumbItem text="test" data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs__item");
+    });
+
+    it("renders as li element", () => {
+      const { container } = render(<BreadcrumbItem text="test" />);
+      const li = container.querySelector("li");
+      expect(li).toBeInTheDocument();
+      expect(li).toHaveClass("osk-breadcrumbs__item");
+    });
+
+    it("renders text content directly when no URL is provided", () => {
+      const { container } = render(<BreadcrumbItem text="Test text" />);
+      const li = container.querySelector("li");
+      expect(li.textContent).toBe("Test text");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<BreadcrumbItem text="test" />);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+
+    it("passes other props", () => {
+      const { getByTestId } = render(
+        <BreadcrumbItem text="test" data-testid="test" />,
+      );
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <BreadcrumbItem
+          text="test"
+          data-testid="test-id"
+          className="test-class"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs__item");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("combines multiple CSS classes correctly", () => {
+      const { getByTestId } = render(
+        <BreadcrumbItem
+          text="test"
+          data-testid="test-id"
+          className="custom-class another-class"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs__item");
+      expect(getByTestId("test-id")).toHaveClass("custom-class");
+      expect(getByTestId("test-id")).toHaveClass("another-class");
+    });
+
+    it("renders anchor element with class osk-breadcrumbs__link when url is set", () => {
+      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
+      const anchor = container.querySelector("a");
+      expect(anchor).toBeInTheDocument();
+      expect(anchor).toHaveClass("osk-breadcrumbs__link");
+    });
+
+    it("renders children inside anchor element when url is set", () => {
+      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
+      expect(container.querySelector("a").textContent).toBe("test");
+    });
+
+    it("anchor element has correct href attribute", () => {
+      const { container } = render(
+        <BreadcrumbItem text="test" url="/test-url" />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor).toHaveAttribute("href", "/test-url");
+    });
+
+    it("anchor element has aria-current attribute set to 'page' when isCurrent prop is passed", () => {
+      const { container } = render(
+        <BreadcrumbItem text="test" url="/test" isCurrent />,
+      );
+      expect(container.querySelector("a").getAttribute("aria-current")).toBe(
+        "page",
+      );
+    });
+
+    it("does not render anchor when isCurrent is true but no URL provided", () => {
+      const { container } = render(<BreadcrumbItem text="test" isCurrent />);
+      const anchor = container.querySelector("a");
+      expect(anchor).not.toBeInTheDocument();
+      expect(container.querySelector("li").textContent).toBe("test");
+    });
+
+    it("passes additional props to li element", () => {
+      const { getByTestId } = render(
+        <BreadcrumbItem
+          text="test"
+          data-testid="test-id"
+          data-custom="custom-value"
+          aria-label="Custom label"
+        />,
+      );
+      const li = getByTestId("test-id");
+      expect(li).toHaveAttribute("data-custom", "custom-value");
+      expect(li).toHaveAttribute("aria-label", "Custom label");
+    });
+
+    it("passes additional props to anchor element when URL is provided", () => {
+      const { container } = render(
+        <BreadcrumbItem
+          text="test"
+          url="/test"
+          data-custom="custom-value"
+          aria-label="Custom label"
+        />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor).toHaveAttribute("data-custom", "custom-value");
+      expect(anchor).toHaveAttribute("aria-label", "Custom label");
+    });
+  });
+
+  describe("conditional rendering", () => {
+    it("renders anchor when URL is provided", () => {
+      const { container } = render(
+        <BreadcrumbItem text="Link text" url="/link" />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor).toBeInTheDocument();
+      expect(anchor).toHaveAttribute("href", "/link");
+      expect(anchor.textContent).toBe("Link text");
+    });
+
+    it("renders text directly when URL is not provided", () => {
+      const { container } = render(<BreadcrumbItem text="Plain text" />);
+      const li = container.querySelector("li");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
+      expect(li.textContent).toBe("Plain text");
+    });
+
+    it("renders text directly when URL is empty string", () => {
+      const { container } = render(<BreadcrumbItem text="Plain text" url="" />);
+      const li = container.querySelector("li");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
+      expect(li.textContent).toBe("Plain text");
+    });
+
+    it("renders text directly when URL is null", () => {
+      const { container } = render(
+        <BreadcrumbItem text="Plain text" url={null} />,
+      );
+      const li = container.querySelector("li");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
+      expect(li.textContent).toBe("Plain text");
+    });
+
+    it("renders text directly when URL is undefined", () => {
+      const { container } = render(
+        <BreadcrumbItem text="Plain text" url={undefined} />,
+      );
+      const li = container.querySelector("li");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
+      expect(li.textContent).toBe("Plain text");
+    });
+  });
+
+  describe("accessibility", () => {
+    it("anchor elements are focusable when URL is provided", () => {
+      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
+      const anchor = container.querySelector("a");
+      expect(anchor).toHaveAttribute("href");
+      expect(anchor).not.toBeDisabled();
+    });
+
+    it("has proper semantic structure", () => {
+      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
+      const li = container.querySelector("li");
+      const anchor = container.querySelector("a");
+
+      expect(li).toBeInTheDocument();
+      expect(anchor).toBeInTheDocument();
+      expect(li).toContainElement(anchor);
+    });
+
+    it("aria-current is only applied when both URL and isCurrent are provided", () => {
+      const { container } = render(
+        <BreadcrumbItem text="test" url="/test" isCurrent />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor).toHaveAttribute("aria-current", "page");
+    });
+
+    it("aria-current is not applied when isCurrent is false", () => {
+      const { container } = render(
+        <BreadcrumbItem text="test" url="/test" isCurrent={false} />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor).not.toHaveAttribute("aria-current");
+    });
+
+    it("aria-current is not applied when no URL is provided", () => {
+      const { container } = render(<BreadcrumbItem text="test" isCurrent />);
+      const anchor = container.querySelector("a");
+      expect(anchor).not.toBeInTheDocument();
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles empty text gracefully", () => {
+      const { container } = render(<BreadcrumbItem text="" />);
+      const li = container.querySelector("li");
+      expect(li.textContent).toBe("");
+    });
+
+    it("handles empty text with URL gracefully", () => {
+      const { container } = render(<BreadcrumbItem text="" url="/test" />);
+      const anchor = container.querySelector("a");
+      expect(anchor.textContent).toBe("");
+      expect(anchor).toHaveAttribute("href", "/test");
+    });
+
+    it("handles special characters in text", () => {
+      const specialText = "Test & More: Special Characters!";
+      const { container } = render(<BreadcrumbItem text={specialText} />);
+      const li = container.querySelector("li");
+      expect(li.textContent).toBe(specialText);
+    });
+
+    it("handles special characters in text with URL", () => {
+      const specialText = "Test & More: Special Characters!";
+      const { container } = render(
+        <BreadcrumbItem text={specialText} url="/test" />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor.textContent).toBe(specialText);
+    });
+
+    it("handles very long text", () => {
+      const longText = "A".repeat(1000);
+      const { container } = render(<BreadcrumbItem text={longText} />);
+      const li = container.querySelector("li");
+      expect(li.textContent).toBe(longText);
+    });
+
+    it("handles very long URL", () => {
+      const longUrl = "/".repeat(1000);
+      const { container } = render(
+        <BreadcrumbItem text="test" url={longUrl} />,
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor).toHaveAttribute("href", longUrl);
+    });
+
+    it("handles whitespace in text", () => {
+      const textWithWhitespace = "  Test  Text  ";
+      const { container } = render(
+        <BreadcrumbItem text={textWithWhitespace} />,
+      );
+      const li = container.querySelector("li");
+      expect(li.textContent).toBe(textWithWhitespace);
+    });
+  });
+
+  describe("interaction", () => {
+    it("anchor is clickable when URL is provided", async () => {
+      const { container } = render(
+        <BreadcrumbItem text="Click me" url="/test" />,
+      );
+
+      const anchor = container.querySelector("a");
+      expect(anchor).toHaveAttribute("href", "/test");
+      expect(anchor).not.toBeDisabled();
+    });
+
+    it("maintains proper tab order for anchor elements", () => {
+      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
+      const anchor = container.querySelector("a");
+
+      expect(anchor).toHaveAttribute("href");
+      // Anchor should be focusable by default
+      expect(anchor.tabIndex).toBe(0);
+    });
+  });
+});

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

@@ -0,0 +1,52 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Breadcrumbs } from "../";
+
+const example = (
+  <>
+    <Breadcrumbs
+      label="Breadcrumbs"
+      items={[
+        {
+          text: "Home",
+          url: "/styleguide",
+        },
+        {
+          text: "Components",
+          url: "/components",
+        },
+        {
+          text: "Breadcrumbs",
+          url: "#main",
+        },
+      ]}
+    />
+    <Breadcrumbs
+      label="Breadcrumbs 2"
+      items={[
+        {
+          text: "Home",
+          url: "/styleguide",
+        },
+        {
+          text: "Components",
+          url: "/components",
+        },
+        {
+          text: "Breadcrumbs",
+        },
+      ]}
+    />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Breadcrumbs/tests/Breadcrumbs.integration.test.js

@@ -0,0 +1,309 @@
+import { render } from "@testing-library/react";
+
+import { Breadcrumbs } from "../Breadcrumbs";
+
+describe("Breadcrumbs Integration Tests", () => {
+  describe("complex navigation scenarios", () => {
+    it("renders deep navigation hierarchy correctly", () => {
+      const deepNavigation = [
+        { url: "/", text: "Domov" },
+        { url: "/kategoria", text: "Kategória" },
+        { url: "/kategoria/elektronika", text: "Elektronika" },
+        { url: "/kategoria/elektronika/telefony", text: "Telefóny" },
+        {
+          url: "/kategoria/elektronika/telefony/smartphony",
+          text: "Smartphony",
+        },
+        { text: "iPhone 15 Pro" },
+      ];
+
+      const { container } = render(
+        <Breadcrumbs items={deepNavigation} label="Navigácia" />,
+      );
+
+      const listItems = container.querySelectorAll("li");
+      const anchors = container.querySelectorAll("a");
+
+      expect(listItems).toHaveLength(6);
+      expect(anchors).toHaveLength(5); // Last item has no URL
+
+      // Check all text content
+      deepNavigation.forEach((item, index) => {
+        expect(listItems[index].textContent).toBe(item.text);
+      });
+
+      // Check all URLs
+      deepNavigation.slice(0, -1).forEach((item, index) => {
+        expect(anchors[index]).toHaveAttribute("href", item.url);
+      });
+
+      // Last anchor should have aria-current
+      expect(anchors[anchors.length - 1]).toHaveAttribute(
+        "aria-current",
+        "page",
+      );
+    });
+
+    it("handles e-commerce navigation correctly", () => {
+      const ecommerceNav = [
+        { url: "/", text: "Domov" },
+        { url: "/obchod", text: "Obchod" },
+        { url: "/obchod/oblecenie", text: "Oblečenie" },
+        { url: "/obchod/oblecenie/muzske", text: "Mužské" },
+        { url: "/obchod/oblecenie/muzske/tricka", text: "Tričká" },
+        { text: "Bavlnené tričko" },
+      ];
+
+      const { container } = render(
+        <Breadcrumbs
+          items={ecommerceNav}
+          label="Navigácia obchodu"
+          className="ecommerce-breadcrumbs"
+        />,
+      );
+
+      const nav = container.querySelector("nav");
+      expect(nav).toHaveAttribute("aria-label", "Navigácia obchodu");
+      expect(nav).toHaveClass("osk-breadcrumbs");
+      expect(nav).toHaveClass("ecommerce-breadcrumbs");
+
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(6);
+    });
+
+    it("handles multilingual navigation", () => {
+      const multilingualNav = [
+        { url: "/", text: "Home" },
+        { url: "/products", text: "Products" },
+        { url: "/products/electronics", text: "Electronics" },
+        { text: "Smartphones" },
+      ];
+
+      const { container } = render(
+        <Breadcrumbs items={multilingualNav} label="Navigation" darkMode />,
+      );
+
+      const nav = container.querySelector("nav");
+      expect(nav).toHaveClass("osk-breadcrumbs--dark");
+      expect(nav).toHaveAttribute("aria-label", "Navigation");
+
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(4);
+    });
+  });
+
+  describe("accessibility integration", () => {
+    it("maintains proper ARIA structure throughout navigation", () => {
+      const items = [
+        { url: "/home", text: "Domov" },
+        { url: "/section", text: "Sekcia" },
+        { text: "Aktuálna stránka" },
+      ];
+
+      const { container } = render(
+        <Breadcrumbs items={items} label="Hlavná navigácia" />,
+      );
+
+      const nav = container.querySelector("nav");
+      const ol = container.querySelector("ol");
+      const anchors = container.querySelectorAll("a");
+
+      // Check navigation structure
+      expect(nav).toHaveAttribute("aria-label", "Hlavná navigácia");
+      expect(nav).toContainElement(ol);
+      expect(ol).toHaveClass("osk-breadcrumbs__container");
+
+      // Check anchor accessibility
+      anchors.forEach((anchor, index) => {
+        expect(anchor).toHaveAttribute("href");
+        expect(anchor).toHaveClass("osk-breadcrumbs__link");
+
+        // Last anchor should have aria-current
+        if (index === anchors.length - 1) {
+          expect(anchor).toHaveAttribute("aria-current", "page");
+        } else {
+          expect(anchor).not.toHaveAttribute("aria-current");
+        }
+      });
+    });
+
+    it("provides proper keyboard navigation support", () => {
+      const items = [
+        { url: "/home", text: "Domov" },
+        { url: "/products", text: "Produkty" },
+        { text: "Aktuálny produkt" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={items} />);
+      const anchors = container.querySelectorAll("a");
+
+      anchors.forEach((anchor) => {
+        expect(anchor).toHaveAttribute("href");
+        // Anchors should be focusable by default
+        expect(anchor.tabIndex).toBe(0);
+      });
+    });
+  });
+
+  describe("styling integration", () => {
+    it("applies dark mode styling correctly", () => {
+      const items = [
+        { url: "/home", text: "Domov" },
+        { text: "Aktuálna stránka" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={items} darkMode />);
+
+      const nav = container.querySelector("nav");
+      expect(nav).toHaveClass("osk-breadcrumbs--dark");
+    });
+
+    it("combines custom classes with default classes", () => {
+      const items = [{ text: "Test" }];
+
+      const { container } = render(
+        <Breadcrumbs
+          items={items}
+          className="custom-class another-class"
+          data-testid="breadcrumbs"
+        />,
+      );
+
+      const nav = container.querySelector("nav");
+      expect(nav).toHaveClass("osk-breadcrumbs");
+      expect(nav).toHaveClass("custom-class");
+      expect(nav).toHaveClass("another-class");
+    });
+
+    it("maintains consistent styling across all breadcrumb items", () => {
+      const items = [
+        { url: "/home", text: "Domov" },
+        { url: "/products", text: "Produkty" },
+        { text: "Aktuálna stránka" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={items} />);
+      const listItems = container.querySelectorAll("li");
+      const anchors = container.querySelectorAll("a");
+
+      // All list items should have the same base class
+      listItems.forEach((li) => {
+        expect(li).toHaveClass("osk-breadcrumbs__item");
+      });
+
+      // All anchors should have the same link class
+      anchors.forEach((anchor) => {
+        expect(anchor).toHaveClass("osk-breadcrumbs__link");
+      });
+    });
+  });
+
+  describe("edge cases and error handling", () => {
+    it("handles empty items array gracefully", () => {
+      const { container } = render(<Breadcrumbs items={[]} />);
+
+      const nav = container.querySelector("nav");
+      const ol = container.querySelector("ol");
+      const listItems = container.querySelectorAll("li");
+
+      expect(nav).toBeInTheDocument();
+      expect(ol).toBeInTheDocument();
+      expect(listItems).toHaveLength(0);
+    });
+
+    it("handles single item navigation", () => {
+      const singleItem = [{ text: "Domov" }];
+      const { container } = render(<Breadcrumbs items={singleItem} />);
+
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(1);
+      expect(listItems[0].textContent).toBe("Domov");
+    });
+
+    it("handles items with missing text gracefully", () => {
+      const itemsWithMissingText = [
+        { url: "/home", text: "Domov" },
+        { url: "/products", text: "" },
+        { text: "Aktuálna stránka" },
+      ];
+
+      const { container } = render(
+        <Breadcrumbs items={itemsWithMissingText} />,
+      );
+      const listItems = container.querySelectorAll("li");
+
+      expect(listItems[0].textContent).toBe("Domov");
+      expect(listItems[1].textContent).toBe("");
+      expect(listItems[2].textContent).toBe("Aktuálna stránka");
+    });
+
+    it("handles very long navigation paths", () => {
+      const longPath = Array.from({ length: 20 }, (_, i) => ({
+        url: `/level${i}`,
+        text: `Level ${i}`,
+      }));
+      longPath.push({ text: "Final Level" });
+
+      const { container } = render(<Breadcrumbs items={longPath} />);
+      const listItems = container.querySelectorAll("li");
+
+      expect(listItems).toHaveLength(21);
+    });
+
+    it("handles special characters and unicode in navigation", () => {
+      const specialItems = [
+        { url: "/home", text: "Domov 🏠" },
+        { url: "/products", text: "Produkty & služby" },
+        { url: "/category", text: "Kategória: Elektronika" },
+        { text: "Aktuálny produkt (2024)" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={specialItems} />);
+      const listItems = container.querySelectorAll("li");
+
+      specialItems.forEach((item, index) => {
+        expect(listItems[index].textContent).toBe(item.text);
+      });
+    });
+  });
+
+  describe("performance and rendering", () => {
+    it("renders efficiently with many items", () => {
+      const manyItems = Array.from({ length: 100 }, (_, i) => ({
+        url: `/item${i}`,
+        text: `Item ${i}`,
+      }));
+
+      // const startTime = performance.now();
+      const { container } = render(<Breadcrumbs items={manyItems} />);
+      // const endTime = performance.now();
+
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(100);
+
+      // TODO
+      // Should render quickly (less than 100ms)
+      // expect(endTime - startTime).toBeLessThan(100);
+    });
+
+    it("maintains consistent rendering across re-renders", () => {
+      const items = [
+        { url: "/home", text: "Domov" },
+        { text: "Aktuálna stránka" },
+      ];
+
+      const { container, rerender } = render(<Breadcrumbs items={items} />);
+
+      const firstRenderItems = container.querySelectorAll("li");
+      expect(firstRenderItems).toHaveLength(2);
+
+      // Re-render with same props
+      rerender(<Breadcrumbs items={items} />);
+
+      const secondRenderItems = container.querySelectorAll("li");
+      expect(secondRenderItems).toHaveLength(2);
+      expect(secondRenderItems[0].textContent).toBe("Domov");
+      expect(secondRenderItems[1].textContent).toBe("Aktuálna stránka");
+    });
+  });
+});