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

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

@@ -0,0 +1,393 @@
+/*
+Integration tests for the Link component:
+- User Interactions:
+  - Handles click events and multiple event types (mouse, focus, blur).
+  - Prevents default behavior when requested.
+  - Handles keyboard interactions (Enter, Space, Tab).
+- Dynamic Props:
+  - Updates classes when props change (color, isInverse).
+  - Changes element type when tag prop changes (anchor <-> button).
+- Complex Scenarios:
+  - Handles multiple links with different configurations.
+  - Handles links within complex DOM structures (header, nav, main, footer).
+  - Handles async interactions correctly.
+- Error Handling:
+  - Handles invalid href values gracefully.
+  - Handles malformed children gracefully.
+- Performance Tests:
+  - Renders many links efficiently.
+  - Handles rapid prop changes efficiently.
+*/
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { Link } from "../";
+
+describe("Link Integration Tests", () => {
+  describe("User Interactions", () => {
+    it("handles click events correctly", () => {
+      const handleClick = jest.fn();
+
+      render(
+        <Link href="/test" onClick={handleClick} data-testid="clickable-link">
+          Click me
+        </Link>,
+      );
+
+      const link = screen.getByTestId("clickable-link");
+      fireEvent.click(link);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("handles keyboard interactions correctly", () => {
+      const handleClick = jest.fn();
+
+      render(
+        <Link href="/test" onClick={handleClick} data-testid="keyboard-link">
+          Keyboard accessible
+        </Link>,
+      );
+
+      const link = screen.getByTestId("keyboard-link");
+
+      // Test that link can receive focus (anchor elements are naturally focusable)
+      link.focus();
+      expect(document.activeElement).toBe(link);
+    });
+
+    it("handles focus and blur events", () => {
+      const handleFocus = jest.fn();
+      const handleBlur = jest.fn();
+
+      render(
+        <Link
+          href="/test"
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          data-testid="focusable-link"
+        >
+          Focusable link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("focusable-link");
+
+      fireEvent.focus(link);
+      expect(handleFocus).toHaveBeenCalledTimes(1);
+
+      fireEvent.blur(link);
+      expect(handleBlur).toHaveBeenCalledTimes(1);
+    });
+
+    it("handles mouse events", () => {
+      const handleMouseEnter = jest.fn();
+      const handleMouseLeave = jest.fn();
+
+      render(
+        <Link
+          href="/test"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          data-testid="mouse-link"
+        >
+          Mouse link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("mouse-link");
+
+      fireEvent.mouseEnter(link);
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+
+      fireEvent.mouseLeave(link);
+      expect(handleMouseLeave).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Dynamic Props", () => {
+    it("updates classes when props change", () => {
+      const { rerender } = render(
+        <Link href="/test" data-testid="dynamic-link">
+          Dynamic link
+        </Link>,
+      );
+
+      let link = screen.getByTestId("dynamic-link");
+      expect(link).toHaveClass("link");
+      expect(link).not.toHaveClass("link--orange");
+      expect(link).not.toHaveClass("link--is-inverse");
+
+      // Add color
+      rerender(
+        <Link href="/test" color="orange" data-testid="dynamic-link">
+          Dynamic link
+        </Link>,
+      );
+
+      link = screen.getByTestId("dynamic-link");
+      expect(link).toHaveClass("link", "link--orange");
+      expect(link).not.toHaveClass("link--is-inverse");
+
+      // Add inverse
+      rerender(
+        <Link href="/test" color="orange" isInverse data-testid="dynamic-link">
+          Dynamic link
+        </Link>,
+      );
+
+      link = screen.getByTestId("dynamic-link");
+      expect(link).toHaveClass("link", "link--orange", "link--is-inverse");
+
+      // Remove color, keep inverse
+      rerender(
+        <Link href="/test" isInverse data-testid="dynamic-link">
+          Dynamic link
+        </Link>,
+      );
+
+      link = screen.getByTestId("dynamic-link");
+      expect(link).toHaveClass("link", "link--is-inverse");
+      expect(link).not.toHaveClass("link--orange");
+    });
+
+    it("changes element type when tag prop changes", () => {
+      const { rerender } = render(
+        <Link href="/test" data-testid="dynamic-element">
+          Dynamic element
+        </Link>,
+      );
+
+      let element = screen.getByTestId("dynamic-element");
+      expect(element.tagName).toBe("A");
+      expect(element).toHaveAttribute("href", "/test");
+
+      // Change to button
+      rerender(
+        <Link tag="button" data-testid="dynamic-element">
+          Dynamic element
+        </Link>,
+      );
+
+      element = screen.getByTestId("dynamic-element");
+      expect(element.tagName).toBe("BUTTON");
+      expect(element).not.toHaveAttribute("href");
+
+      // Change back to anchor
+      rerender(
+        <Link href="/test" data-testid="dynamic-element">
+          Dynamic element
+        </Link>,
+      );
+
+      element = screen.getByTestId("dynamic-element");
+      expect(element.tagName).toBe("A");
+      expect(element).toHaveAttribute("href", "/test");
+    });
+  });
+
+  describe("Complex Scenarios", () => {
+    it("handles multiple links with different configurations", () => {
+      const links = [
+        { href: "/page1", color: "default", children: "Default link" },
+        { href: "/page2", color: "orange", children: "Orange link" },
+        {
+          href: "/page3",
+          color: "black",
+          isInverse: true,
+          children: "Black inverse link",
+        },
+        { tag: "button", children: "Button link" },
+        {
+          href: "https://external.com",
+          target: "_blank",
+          children: "External link",
+        },
+      ];
+
+      render(
+        <div>
+          {links.map((props, index) => (
+            <Link key={index} {...props} data-testid={`link-${index}`} />
+          ))}
+        </div>,
+      );
+
+      links.forEach((props, index) => {
+        const element = screen.getByTestId(`link-${index}`);
+        expect(element).toBeInTheDocument();
+        expect(element).toHaveTextContent(props.children);
+
+        if (props.href) {
+          expect(element).toHaveAttribute("href", props.href);
+        }
+
+        if (props.target) {
+          expect(element).toHaveAttribute("target", props.target);
+        }
+      });
+    });
+
+    it("handles links within complex DOM structures", () => {
+      render(
+        <div>
+          <header>
+            <nav>
+              <Link href="/home" data-testid="nav-link">
+                Home
+              </Link>
+            </nav>
+          </header>
+          <main>
+            <article>
+              <h1>Article Title</h1>
+              <p>
+                This is a paragraph with a{" "}
+                <Link href="/reference" data-testid="inline-link">
+                  reference link
+                </Link>{" "}
+                embedded in the text.
+              </p>
+            </article>
+          </main>
+          <footer>
+            <Link href="/contact" data-testid="footer-link">
+              Contact
+            </Link>
+          </footer>
+        </div>,
+      );
+
+      expect(screen.getByTestId("nav-link")).toBeInTheDocument();
+      expect(screen.getByTestId("inline-link")).toBeInTheDocument();
+      expect(screen.getByTestId("footer-link")).toBeInTheDocument();
+
+      expect(screen.getByText("Home")).toBeInTheDocument();
+      expect(screen.getByText("reference link")).toBeInTheDocument();
+      expect(screen.getByText("Contact")).toBeInTheDocument();
+    });
+
+    it("handles async interactions correctly", async () => {
+      const handleAsyncClick = jest.fn(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        return "async result";
+      });
+
+      render(
+        <Link href="/test" onClick={handleAsyncClick} data-testid="async-link">
+          Async link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("async-link");
+      fireEvent.click(link);
+
+      await waitFor(() => {
+        expect(handleAsyncClick).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe("Error Handling", () => {
+    it("handles invalid href gracefully", () => {
+      const invalidHrefs = ["", null, undefined, 'javascript:alert("xss")'];
+
+      invalidHrefs.forEach((href, index) => {
+        render(
+          <Link key={index} href={href} data-testid={`invalid-link-${index}`}>
+            Invalid link {index}
+          </Link>,
+        );
+
+        const link = screen.getByTestId(`invalid-link-${index}`);
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveTextContent(`Invalid link ${index}`);
+      });
+    });
+
+    it("handles malformed children gracefully", () => {
+      const malformedChildren = [
+        null,
+        undefined,
+        "",
+        [],
+        [null, undefined, ""],
+      ];
+
+      malformedChildren.forEach((children, index) => {
+        render(
+          <Link key={index} href="/test" data-testid={`malformed-${index}`}>
+            {children}
+          </Link>,
+        );
+
+        const link = screen.getByTestId(`malformed-${index}`);
+        expect(link).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Performance Tests", () => {
+    it("renders many links efficiently", () => {
+      const manyLinks = Array.from({ length: 100 }, (_, i) => ({
+        href: `/page${i}`,
+        children: `Link ${i}`,
+        dataTestId: `link-${i}`,
+      }));
+
+      const startTime = performance.now();
+
+      render(
+        <div>
+          {manyLinks.map(({ href, children, dataTestId }) => (
+            <Link key={dataTestId} href={href} data-testid={dataTestId}>
+              {children}
+            </Link>
+          ))}
+        </div>,
+      );
+
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+
+      // Should render 100 links in reasonable time (less than 100ms)
+      expect(renderTime).toBeLessThan(100);
+
+      // Verify all links are rendered
+      manyLinks.forEach(({ dataTestId, children }) => {
+        expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
+        expect(screen.getByText(children)).toBeInTheDocument();
+      });
+    });
+
+    it("handles rapid prop changes efficiently", () => {
+      const { rerender } = render(
+        <Link href="/test" data-testid="rapid-link">
+          Rapid changes
+        </Link>,
+      );
+
+      const link = screen.getByTestId("rapid-link");
+
+      // Rapidly change props
+      for (let i = 0; i < 10; i++) {
+        rerender(
+          <Link
+            href={`/test${i}`}
+            color={i % 2 === 0 ? "orange" : "black"}
+            isInverse={i % 3 === 0}
+            data-testid="rapid-link"
+          >
+            Rapid changes {i}
+          </Link>,
+        );
+      }
+
+      // Final state should be correct
+      expect(link).toHaveAttribute("href", "/test9");
+      expect(link).toHaveClass("link--black");
+      expect(link).toHaveClass("link--is-inverse");
+      expect(link).toHaveTextContent("Rapid changes 9");
+    });
+  });
+});

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

@@ -0,0 +1,308 @@
+/*
+Unit tests for the Link component:
+- Rendering:
+  - Renders with default props and checks for default class and attributes.
+  - Renders children correctly, including nested elements.
+  - Applies custom className when provided.
+  - Renders as anchor tag by default and as button when tag prop is set.
+- Color Variants:
+  - Applies correct class for each color variant (default, orange, black).
+  - Combines color with inverse class when both are set.
+- Inverse Styling:
+  - Applies inverse class when isInverse is true.
+  - Does not apply inverse class when isInverse is false.
+- Props Forwarding:
+  - Forwards additional HTML attributes (target, rel, aria-label, etc.).
+  - Forwards event handlers (onClick, onMouseEnter, etc.).
+- Warning Messages:
+  - Shows warning when anchor tag is used without href.
+  - Does not show warning for button tag or anchor with href.
+- Edge Cases:
+  - Handles empty children.
+  - Handles null and undefined props gracefully.
+  - Handles complex nested children.
+- Accessibility:
+  - Has correct role when rendered as link or button.
+  - Supports keyboard navigation (click event).
+- Component Display Name:
+  - Has correct display name 'Link'.
+*/
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { Link } from "../";
+
+// Mock console.warn to test warning messages
+const originalWarn = console.warn;
+beforeEach(() => {
+  console.warn = jest.fn();
+});
+
+afterEach(() => {
+  console.warn = originalWarn;
+});
+
+describe("Link Component", () => {
+  describe("Rendering", () => {
+    it("renders with default props", () => {
+      render(
+        <Link href="/test" data-testid="link">
+          Test Link
+        </Link>,
+      );
+      const link = screen.getByTestId("link");
+
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveClass("link");
+      expect(link).toHaveAttribute("href", "/test");
+      expect(link).toHaveTextContent("Test Link");
+    });
+
+    it("renders children correctly", () => {
+      render(
+        <Link href="/">
+          <span>Custom</span> <strong>Content</strong>
+        </Link>,
+      );
+
+      expect(screen.getByText("Custom")).toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+
+    it("applies custom className", () => {
+      render(
+        <Link href="/" className="custom-class" data-testid="link">
+          Test
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).toHaveClass("link", "custom-class");
+    });
+
+    it("renders as anchor tag by default", () => {
+      render(
+        <Link href="/" data-testid="link">
+          Test
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link.tagName).toBe("A");
+      expect(link).toHaveAttribute("href", "/");
+    });
+
+    it("renders as button when tag prop is set to button", () => {
+      render(
+        <Link tag="button" data-testid="link">
+          Test
+        </Link>,
+      );
+
+      const button = screen.getByTestId("link");
+      expect(button.tagName).toBe("BUTTON");
+      expect(button).not.toHaveAttribute("href");
+    });
+  });
+
+  describe("Color Variants", () => {
+    const colorVariants = ["default", "orange", "black"];
+
+    colorVariants.forEach((color) => {
+      it(`applies correct class for ${color} color variant`, () => {
+        render(
+          <Link href="/" color={color} data-testid="link">
+            {color} link
+          </Link>,
+        );
+
+        const link = screen.getByTestId("link");
+        expect(link).toHaveClass(`link--${color}`);
+      });
+    });
+
+    it("combines color with inverse class", () => {
+      render(
+        <Link href="/" color="orange" isInverse data-testid="link">
+          Orange inverse link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).toHaveClass("link--orange", "link--is-inverse");
+    });
+  });
+
+  describe("Inverse Styling", () => {
+    it("applies inverse class when isInverse is true", () => {
+      render(
+        <Link href="/" isInverse data-testid="link">
+          Inverse link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).toHaveClass("link--is-inverse");
+    });
+
+    it("does not apply inverse class when isInverse is false", () => {
+      render(
+        <Link href="/" isInverse={false} data-testid="link">
+          Normal link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).not.toHaveClass("link--is-inverse");
+    });
+  });
+
+  describe("Props Forwarding", () => {
+    it("forwards additional HTML attributes", () => {
+      render(
+        <Link
+          href="/"
+          data-testid="link"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="External link"
+        >
+          External link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).toHaveAttribute("target", "_blank");
+      expect(link).toHaveAttribute("rel", "noopener noreferrer");
+      expect(link).toHaveAttribute("aria-label", "External link");
+    });
+
+    it("forwards event handlers", () => {
+      const handleClick = jest.fn();
+      const handleMouseEnter = jest.fn();
+
+      render(
+        <Link
+          href="/"
+          data-testid="link"
+          onClick={handleClick}
+          onMouseEnter={handleMouseEnter}
+        >
+          Clickable link
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+
+      fireEvent.click(link);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+
+      fireEvent.mouseEnter(link);
+      expect(handleMouseEnter).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Warning Messages", () => {
+    it("shows warning when anchor tag is used without href", () => {
+      render(<Link tag="a">Link without href</Link>);
+
+      expect(console.warn).toHaveBeenCalledWith(
+        "Anchor element requires a valid address. Provide a valid, navigable address as the href value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href",
+      );
+    });
+
+    it("does not show warning when button tag is used without href", () => {
+      render(<Link tag="button">Button link</Link>);
+
+      expect(console.warn).not.toHaveBeenCalled();
+    });
+
+    it("does not show warning when anchor tag has href", () => {
+      render(<Link href="/">Link with href</Link>);
+
+      expect(console.warn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("handles empty children", () => {
+      render(<Link href="/" data-testid="link" />);
+
+      const link = screen.getByTestId("link");
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveClass("link");
+    });
+
+    it("handles null and undefined props gracefully", () => {
+      render(
+        <Link
+          href="/"
+          data-testid="link"
+          color={null}
+          isInverse={undefined}
+          className={null}
+        >
+          Test
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveClass("link");
+    });
+
+    it("handles complex nested children", () => {
+      render(
+        <Link href="/" data-testid="link">
+          <div>
+            <span>Nested</span>
+            <strong>Content</strong>
+            <em>Here</em>
+          </div>
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+      expect(link).toBeInTheDocument();
+      expect(screen.getByText("Nested")).toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
+      expect(screen.getByText("Here")).toBeInTheDocument();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("has correct role when rendered as link", () => {
+      render(<Link href="/">Accessible link</Link>);
+
+      expect(screen.getByRole("link")).toBeInTheDocument();
+    });
+
+    it("has correct role when rendered as button", () => {
+      render(<Link tag="button">Accessible button</Link>);
+
+      expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("supports keyboard navigation", () => {
+      const handleClick = jest.fn();
+
+      render(
+        <Link href="/" onClick={handleClick} data-testid="link">
+          Keyboard accessible
+        </Link>,
+      );
+
+      const link = screen.getByTestId("link");
+
+      // Test click event
+      fireEvent.click(link);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Component Display Name", () => {
+    it("has correct display name", () => {
+      expect(Link.displayName).toBe("Link");
+    });
+  });
+});