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

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

@@ -1,393 +0,0 @@
-/*
-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");
-    });
-  });
-});