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

package/src/components/Grid/tests/GridCol.unit.test.tsx

@@ -1,199 +0,0 @@
-/**
- * GridCol component unit tests
- *
- * This test suite verifies the rendering, props, and className logic of the GridCol component.
- * It checks default rendering, tag rendering, className merging, and all supported props (align, size, etc).
- * Also includes complex scenarios with various size combinations and responsive behavior.
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import { GridCol, GridColAlign, GridColSize } from '../GridCol';
-
-describe('GridCol', () => {
-  it('renders with default class grid__col', () => {
-    const { getByTestId } = render(<GridCol data-testid="test-id" />);
-    expect(getByTestId('test-id')).toHaveClass('grid__col');
-  });
-
-  it('renders with default tag div', () => {
-    const { container } = render(<GridCol />);
-    expect(container.querySelector('div')).toBeTruthy();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(<GridCol>test</GridCol>);
-    expect(getByText('test')).toBeInTheDocument();
-  });
-
-  it('renders with custom tag', () => {
-    const { container } = render(<GridCol tag="span" />);
-    expect(container.querySelector('span')).toBeTruthy();
-  });
-
-  it('merges additional className', () => {
-    const { getByTestId } = render(
-      <GridCol data-testid="test-id" className="test-class" />
-    );
-    expect(getByTestId('test-id')).toHaveClass('test-class');
-  });
-
-  (['shrink', 'fill', 'auto'] as GridColSize[]).forEach(size => {
-    it(`applies grid__col--${size} class when size is ${size}`, () => {
-      const { getByTestId } = render(
-        <GridCol data-testid="test-id" size={size} />
-      );
-      expect(getByTestId('test-id')).toHaveClass(`grid__col--${size}`);
-    });
-  });
-
-  (['top', 'middle', 'bottom', 'stretch'] as GridColAlign[]).forEach(align => {
-    it(`applies align-self-${align} class when align is ${align}`, () => {
-      const { getByTestId } = render(
-        <GridCol data-testid="test-id" align={align} />
-      );
-      expect(getByTestId('test-id')).toHaveClass(`align-self-${align}`);
-    });
-  });
-
-  it('applies grid__col--3 class when size is number 3', () => {
-    const { getByTestId } = render(
-      <GridCol data-testid="test-id" size={3} />
-    );
-    expect(getByTestId('test-id')).toHaveClass('grid__col--3');
-  });
-
-  it('spreads additional props to the rendered element', () => {
-    const { getByTestId } = render(
-      <GridCol data-testid="test-id" id="my-col" data-extra="foo" />
-    );
-    const el = getByTestId('test-id');
-    expect(el).toHaveAttribute('id', 'my-col');
-    expect(el).toHaveAttribute('data-extra', 'foo');
-  });
-});
-
-describe('GridCol complex scenarios', () => {
-  it('renders with all numeric sizes from 1 to 12', () => {
-    for (let size = 1; size <= 12; size++) {
-      const { getByTestId } = render(
-        <GridCol data-testid={`test-${size}`} size={size} />
-      );
-      expect(getByTestId(`test-${size}`)).toHaveClass(`grid__col--${size}`);
-    }
-  });
-
-  it('renders with semantic HTML tags', () => {
-    const semanticTags = ['article', 'aside', 'section', 'header', 'footer', 'main', 'nav'] as const;
-    
-    semanticTags.forEach(tag => {
-      const { container } = render(<GridCol tag={tag} size={6} />);
-      const element = container.querySelector(tag);
-      expect(element).toBeTruthy();
-      expect(element).toHaveClass('grid__col--6');
-    });
-  });
-
-  it('renders with form elements as tags', () => {
-    const { container } = render(<GridCol tag="label" size="auto" />);
-    const label = container.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label).toHaveClass('grid__col--auto');
-  });
-
-  it('combines size and alignment props correctly', () => {
-    const { getByTestId } = render(
-      <GridCol 
-        data-testid="test-id" 
-        size={8} 
-        align="top" 
-        className="custom-class"
-      />
-    );
-    const el = getByTestId('test-id');
-    expect(el).toHaveClass('grid__col--8', 'align-self-top', 'custom-class');
-  });
-
-  it('renders with complex content and styling', () => {
-    const { getByText } = render(
-      <GridCol size="fill" align="middle" className="content-col">
-        <h2>Title</h2>
-        <p>Paragraph content</p>
-        <button>Click me</button>
-      </GridCol>
-    );
-    
-    expect(getByText('Title')).toBeInTheDocument();
-    expect(getByText('Paragraph content')).toBeInTheDocument();
-    expect(getByText('Click me')).toBeInTheDocument();
-  });
-
-  it('renders multiple GridCols with different configurations', () => {
-    const { container } = render(
-      <div>
-        <GridCol size={4} align="top" className="col-1">Column 1</GridCol>
-        <GridCol size="auto" align="middle" className="col-2">Column 2</GridCol>
-        <GridCol size="fill" align="bottom" className="col-3">Column 3</GridCol>
-        <GridCol size="shrink" align="stretch" className="col-4">Column 4</GridCol>
-      </div>
-    );
-    
-    const cols = container.querySelectorAll('.grid__col');
-    expect(cols).toHaveLength(4);
-    
-    expect(cols[0]).toHaveClass('grid__col--4', 'align-self-top', 'col-1');
-    expect(cols[1]).toHaveClass('grid__col--auto', 'align-self-middle', 'col-2');
-    expect(cols[2]).toHaveClass('grid__col--fill', 'align-self-bottom', 'col-3');
-    expect(cols[3]).toHaveClass('grid__col--shrink', 'align-self-stretch', 'col-4');
-  });
-
-  it('renders with inline styles and data attributes', () => {
-    const { getByTestId } = render(
-      <GridCol 
-        data-testid="test-id"
-        size={6}
-        style={{ backgroundColor: 'red', color: 'white' }}
-        data-component="grid-col"
-        data-size="6"
-      />
-    );
-    
-    const el = getByTestId('test-id');
-    expect(el).toHaveStyle({ backgroundColor: 'red', color: 'white' });
-    expect(el).toHaveAttribute('data-component', 'grid-col');
-    expect(el).toHaveAttribute('data-size', '6');
-  });
-
-  it('renders with event handlers', () => {
-    const handleClick = jest.fn();
-    const { getByTestId } = render(
-      <GridCol 
-        data-testid="test-id"
-        size={3}
-        onClick={handleClick}
-        onMouseEnter={() => {}}
-      />
-    );
-    
-    const el = getByTestId('test-id');
-    el.click();
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders with aria attributes for accessibility', () => {
-    const { getByTestId } = render(
-      <GridCol 
-        data-testid="test-id"
-        size="auto"
-        role="region"
-        aria-label="Content section"
-        aria-describedby="description"
-      />
-    );
-    
-    const el = getByTestId('test-id');
-    expect(el).toHaveAttribute('role', 'region');
-    expect(el).toHaveAttribute('aria-label', 'Content section');
-    expect(el).toHaveAttribute('aria-describedby', 'description');
-  });
-}); 

package/src/components/Link/styles/config.scss

@@ -1,85 +0,0 @@
-@use '../../../styles/tokens/color';
-
-$variants: (
-  'default': (
-    'default': (
-      color: color.$black,
-    ),
-    'hover': (
-      color: color.$orange-dark,
-    ),
-    'focus': (
-      color: color.$white,
-      background-color: color.$info,
-      box-shadow: 0 2px 0 0 color.$black,
-      text-decoration: none,
-      outline-width: 0 !important,
-      outline-color: transparent !important,
-    )
-  ),
-  'default-important': (
-    'default': (
-      color: color.$black !important,
-    ),
-    'hover': (
-      color: color.$orange-dark !important,
-    ),
-    'focus': (
-      color: color.$white !important,
-      box-shadow: 0 2px 0 0 color.$black !important,
-    )
-  ),
-  'black': (
-    'default': (
-      color: color.$black !important,
-    ),
-    'hover': (
-      color: color.$black !important,
-    ),
-    'focus': (
-      color: color.$white !important,
-      box-shadow: 0 2px 0 0 color.$white !important,
-    )
-  ),
-  'default-inverse': (
-    'default': (
-      color: color.$white,
-    ),
-    'hover': (
-      color: color.$orange,
-    ),
-    'focus': (
-      box-shadow: 0 2px 0 0 color.$white,
-    )
-  ),
-  'inverse-important': (
-    'default': (
-      color: color.$white !important,
-    ),
-    'hover': (
-      color: color.$orange !important,
-    ),
-    'focus': (
-      box-shadow: 0 2px 0 0 color.$white !important,
-    )
-  ),
-  'orange': (
-    'default': (
-      color: color.$orange-dark !important,
-    ),
-    'hover': (
-      color: color.$black !important,
-    ),
-  ),
-  'orange-inverse': (
-    'default': (
-      color: color.$orange !important,
-    ),
-    'hover': (
-      color: color.$white !important,
-    ),
-    'focus': (
-      color: color.$white !important,
-    )
-  ),
-);

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");
-    });
-  });
-});