@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Overlay/Overlay.test.tsx

@@ -1,356 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Overlay.test.tsx
- * @input Uses vitest, @testing-library/react, Overlay + useOverlay
- * @output Characterization tests for the Overlay component and useOverlay hook
- * @position Testing; validates the overlay/scrim rendering + touch-toggle contract
- *
- * SYNC: When Overlay.tsx / useOverlay.tsx / OverlayScrim.tsx change,
- * update tests to match new behavior
- */
-
-import {describe, it, expect, beforeEach, afterEach} from 'vitest';
-import {render, screen, renderHook} from '@testing-library/react';
-import {createRef} from 'react';
-import {Overlay} from './Overlay';
-import {useOverlay} from './useOverlay';
-
-/** The scrim is the div carrying data-position (from themeProps). */
-function getScrim(container: HTMLElement): HTMLElement {
-  const el = container.querySelector<HTMLElement>('[data-position]');
-  if (!el) {
-    throw new Error('scrim element not found');
-  }
-  return el;
-}
-
-/**
- * Force window.matchMedia('(hover: none)') to report a given value so we can
- * exercise the touch vs. pointer branches of useOverlay. Returns a restore fn.
- */
-function mockHoverNone(matches: boolean): () => void {
-  const original = window.matchMedia;
-  window.matchMedia = ((query: string) => ({
-    matches: query.includes('hover: none') ? matches : false,
-    media: query,
-    onchange: null,
-    addListener: () => {},
-    removeListener: () => {},
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => false,
-  }));
-  return () => {
-    window.matchMedia = original;
-  };
-}
-
-describe('Overlay', () => {
-  describe('rendering & structure', () => {
-    it('renders the base children', () => {
-      render(
-        <Overlay content={<span>badge</span>}>
-          <img alt="hero" src="x.jpg" />
-        </Overlay>,
-      );
-      expect(screen.getByAltText('hero')).toBeInTheDocument();
-    });
-
-    it('renders the overlay content inside the scrim', () => {
-      render(
-        <Overlay content={<button type="button">Quick view</button>}>
-          <div>base</div>
-        </Overlay>,
-      );
-      expect(
-        screen.getByRole('button', {name: 'Quick view'}),
-      ).toBeInTheDocument();
-    });
-
-    it('renders a root div carrying the astryx-overlay class', () => {
-      const {container} = render(
-        <Overlay content={<span>c</span>}>
-          <div>base</div>
-        </Overlay>,
-      );
-      const root = container.firstElementChild as HTMLElement;
-      expect(root.tagName).toBe('DIV');
-      expect(root.className).toContain('astryx-overlay');
-    });
-
-    it('places the scrim after the base children in DOM order', () => {
-      const {container} = render(
-        <Overlay content={<span data-testid="ovl">c</span>}>
-          <div data-testid="base">base</div>
-        </Overlay>,
-      );
-      const root = container.firstElementChild as HTMLElement;
-      const base = screen.getByTestId('base');
-      const scrim = getScrim(container);
-      // base comes before scrim
-      expect(
-        base.compareDocumentPosition(scrim) & Node.DOCUMENT_POSITION_FOLLOWING,
-      ).toBeTruthy();
-      expect(root).toContainElement(scrim);
-    });
-
-    it('applies the astryx-overlay-scrim class to the scrim', () => {
-      const {container} = render(
-        <Overlay content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).className).toContain('astryx-overlay-scrim');
-    });
-  });
-
-  describe('position', () => {
-    it('defaults data-position to "fill"', () => {
-      const {container} = render(
-        <Overlay content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).getAttribute('data-position')).toBe('fill');
-    });
-
-    it.each(['fill', 'bottom', 'top'] as const)(
-      'reflects position="%s" as data-position',
-      position => {
-        const {container} = render(
-          <Overlay position={position} content={<span>c</span>}>
-            <div>b</div>
-          </Overlay>,
-        );
-        expect(getScrim(container).getAttribute('data-position')).toBe(
-          position,
-        );
-      },
-    );
-  });
-
-  describe('scrim mode → media theme inversion', () => {
-    it('dark scrim (default) wraps content in a dark MediaTheme', () => {
-      const {container} = render(
-        <Overlay content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(
-        container.querySelector('[data-astryx-media="dark"]'),
-      ).toBeInTheDocument();
-    });
-
-    it('light scrim wraps content in a light MediaTheme', () => {
-      const {container} = render(
-        <Overlay scrim="light" content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(
-        container.querySelector('[data-astryx-media="light"]'),
-      ).toBeInTheDocument();
-      expect(
-        container.querySelector('[data-astryx-media="dark"]'),
-      ).not.toBeInTheDocument();
-    });
-
-    it('scrim={false} renders no MediaTheme wrapper', () => {
-      const {container} = render(
-        <Overlay scrim={false} content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(
-        container.querySelector('[data-astryx-media]'),
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  describe('controlled visibility (isOpen)', () => {
-    it('marks the scrim inert when isOpen is false', () => {
-      const {container} = render(
-        <Overlay isOpen={false} content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).hasAttribute('inert')).toBe(true);
-    });
-
-    it('does not mark the scrim inert when isOpen is true', () => {
-      const {container} = render(
-        <Overlay isOpen content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).hasAttribute('inert')).toBe(false);
-    });
-
-    it('is never inert in uncontrolled (CSS-driven) mode', () => {
-      const {container} = render(
-        <Overlay showOn="hover" content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).hasAttribute('inert')).toBe(false);
-    });
-
-    it('toggles inert when the isOpen prop flips', () => {
-      const {container, rerender} = render(
-        <Overlay isOpen={false} content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).hasAttribute('inert')).toBe(true);
-      rerender(
-        <Overlay isOpen content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).hasAttribute('inert')).toBe(false);
-    });
-  });
-
-  describe('styling & ref', () => {
-    it('forwards ref to the root div element', () => {
-      const ref = createRef<HTMLDivElement>();
-      render(
-        <Overlay ref={ref} content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
-      expect(ref.current?.className).toContain('astryx-overlay');
-    });
-
-    it('merges a caller className onto the root', () => {
-      const {container} = render(
-        <Overlay className="custom-cls" content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      const root = container.firstElementChild as HTMLElement;
-      expect(root.className).toContain('custom-cls');
-      expect(root.className).toContain('astryx-overlay');
-    });
-
-    it('merges a caller inline style onto the root', () => {
-      const {container} = render(
-        <Overlay style={{opacity: 0.5}} content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      const root = container.firstElementChild as HTMLElement;
-      expect(root.style.opacity).toBe('0.5');
-    });
-  });
-});
-
-describe('useOverlay', () => {
-  describe('return shape', () => {
-    it('exposes containerRef, containerProps, element and renderOverlay', () => {
-      const {result} = renderHook(() => useOverlay());
-      expect(result.current.containerRef).toHaveProperty('current');
-      expect(result.current.containerProps).toBeDefined();
-      expect(typeof result.current.renderOverlay).toBe('function');
-    });
-
-    it('containerProps.className is a non-empty marker string', () => {
-      const {result} = renderHook(() => useOverlay());
-      expect(typeof result.current.containerProps.className).toBe('string');
-      expect(result.current.containerProps.className?.length).toBeGreaterThan(
-        0,
-      );
-    });
-
-    it('returns element=null when no content is provided', () => {
-      const {result} = renderHook(() => useOverlay({showOn: 'hover'}));
-      expect(result.current.element).toBeNull();
-    });
-
-    it('returns a scrim element when content is provided', () => {
-      const {result} = renderHook(() => useOverlay({content: <span>c</span>}));
-      expect(result.current.element).not.toBeNull();
-    });
-
-    it('renderOverlay(children) produces a renderable scrim', () => {
-      const {result} = renderHook(() => useOverlay({showOn: 'hover'}));
-      const el = result.current.renderOverlay(<span>on demand</span>);
-      const {container} = render(el);
-      expect(screen.getByText('on demand')).toBeInTheDocument();
-      expect(getScrim(container)).toBeInTheDocument();
-    });
-  });
-
-  describe('pointer (non-touch) device', () => {
-    let restore: () => void;
-    beforeEach(() => {
-      restore = mockHoverNone(false);
-    });
-    afterEach(() => restore());
-
-    it('does not attach touch toggle handlers in hover mode', () => {
-      const {result} = renderHook(() => useOverlay({showOn: 'hover'}));
-      expect(result.current.containerProps.onClick).toBeUndefined();
-      expect(result.current.containerProps.onMouseUp).toBeUndefined();
-    });
-  });
-
-  describe('touch device', () => {
-    let restore: () => void;
-    beforeEach(() => {
-      restore = mockHoverNone(true);
-    });
-    afterEach(() => restore());
-
-    it('attaches tap-to-toggle handlers in hover mode', () => {
-      const {result} = renderHook(() => useOverlay({showOn: 'hover'}));
-      expect(typeof result.current.containerProps.onClick).toBe('function');
-      expect(typeof result.current.containerProps.onMouseUp).toBe('function');
-    });
-
-    it('does NOT attach toggle handlers when showOn="always" (no toggle needed)', () => {
-      const {result} = renderHook(() => useOverlay({showOn: 'always'}));
-      expect(result.current.containerProps.onClick).toBeUndefined();
-      expect(result.current.containerProps.onMouseUp).toBeUndefined();
-    });
-
-    it('does NOT attach toggle handlers when showOn="focus"', () => {
-      const {result} = renderHook(() => useOverlay({showOn: 'focus'}));
-      expect(result.current.containerProps.onClick).toBeUndefined();
-    });
-
-    it('a consumer prop isOpen overrides the touch toggle (scrim reflects it)', () => {
-      // With isOpen provided, the scrim is controlled regardless of touch.
-      const {container} = render(
-        <Overlay showOn="hover" isOpen={false} content={<span>c</span>}>
-          <div>b</div>
-        </Overlay>,
-      );
-      expect(getScrim(container).hasAttribute('inert')).toBe(true);
-    });
-  });
-
-  describe('memoization', () => {
-    it('returns a stable renderOverlay across re-renders with same options', () => {
-      const {result, rerender} = renderHook(
-        (props: {showOn: 'hover' | 'always'}) => useOverlay(props),
-        {initialProps: {showOn: 'hover'}},
-      );
-      const first = result.current.renderOverlay;
-      rerender({showOn: 'hover'});
-      expect(result.current.renderOverlay).toBe(first);
-    });
-
-    it('returns a new renderOverlay when options change', () => {
-      const {result, rerender} = renderHook(
-        (props: {showOn: 'hover' | 'always'}) => useOverlay(props),
-        {initialProps: {showOn: 'hover'}},
-      );
-      const first = result.current.renderOverlay;
-      rerender({showOn: 'always'});
-      expect(result.current.renderOverlay).not.toBe(first);
-    });
-  });
-});

package/src/Resizable/ResizeHandle.test.tsx

@@ -1,218 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ResizeHandle.test.tsx
- * @input Uses vitest, @testing-library/react, useResizable, ResizeHandle
- * @output Unit tests for ResizeHandle keyboard operability and ARIA state
- * @position Testing; validates ResizeHandle.tsx implementation
- *
- * SYNC: When ResizeHandle.tsx changes, update tests to match new behavior
- *
- * These tests guard the WAI-ARIA window-splitter keyboard contract: the
- * keydown handler must live on the focusable `role="separator"` element.
- * Keyboard resizing is pure state math in useResizable (no layout
- * measurement), so the observable effect asserted here is aria-valuenow,
- * which is bound to the region's `_size`.
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen, fireEvent, act} from '@testing-library/react';
-import {ResizeHandle} from './ResizeHandle';
-import type {ResizeHandleProps} from './ResizeHandle';
-import {useResizable} from './useResizable';
-import type {ResizableProps, UseResizableSingleConfig} from './useResizable';
-
-const KEYBOARD_STEP = 10;
-const KEYBOARD_LARGE_STEP = 50;
-
-function Harness({
-  config,
-  handleProps,
-}: {
-  config?: UseResizableSingleConfig;
-  handleProps?: Partial<ResizeHandleProps>;
-}) {
-  const region = useResizable(
-    config ?? {defaultSize: 200, minSizePx: 100, maxSizePx: 400},
-  );
-  return (
-    <ResizeHandle resizable={region.props} label="Resize" {...handleProps} />
-  );
-}
-
-function getSeparator(): HTMLElement {
-  return screen.getByRole('separator');
-}
-
-describe('ResizeHandle', () => {
-  // --- ARIA wiring ---
-
-  it('exposes the region size and bounds via ARIA', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('aria-valuenow', '200');
-    expect(separator).toHaveAttribute('aria-valuemin', '100');
-    expect(separator).toHaveAttribute('aria-valuemax', '400');
-    // Horizontal layout splits along the vertical axis.
-    expect(separator).toHaveAttribute('aria-orientation', 'vertical');
-    expect(separator).toHaveAttribute('aria-label', 'Resize');
-  });
-
-  it('makes the separator focusable', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('tabindex', '0');
-    act(() => separator.focus());
-    expect(separator).toHaveFocus();
-  });
-
-  // --- Keyboard resizing (the fix: handler lives on the focused separator) ---
-
-  it('grows the panel by a step on ArrowRight', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowRight'});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_STEP),
-    );
-  });
-
-  it('shrinks the panel by a step on ArrowLeft', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowLeft'});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 - KEYBOARD_STEP),
-    );
-  });
-
-  it('uses the large step when Shift is held', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowRight', shiftKey: true});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_LARGE_STEP),
-    );
-  });
-
-  it('jumps to the minimum on Home', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'Home'});
-    expect(separator).toHaveAttribute('aria-valuenow', '100');
-  });
-
-  it('jumps to the maximum on End', () => {
-    render(<Harness />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'End'});
-    expect(separator).toHaveAttribute('aria-valuenow', '400');
-  });
-
-  it('resizes along the block axis for a vertical handle', () => {
-    render(
-      <Harness
-        config={{defaultSize: 200, minSizePx: 100, maxSizePx: 400}}
-        handleProps={{direction: 'vertical'}}
-      />,
-    );
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('aria-orientation', 'horizontal');
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowDown'});
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_STEP),
-    );
-    fireEvent.keyDown(separator, {key: 'ArrowUp'});
-    expect(separator).toHaveAttribute('aria-valuenow', '200');
-  });
-
-  it('collapses on Enter when the region is collapsible', () => {
-    render(
-      <Harness
-        config={{
-          defaultSize: 200,
-          minSizePx: 100,
-          maxSizePx: 400,
-          collapsible: true,
-        }}
-      />,
-    );
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'Enter'});
-    expect(separator).toHaveAttribute('aria-valuenow', '0');
-  });
-
-  // --- Disabled guard ---
-
-  it('ignores keyboard input when disabled', () => {
-    render(<Harness handleProps={{isDisabled: true}} />);
-    const separator = getSeparator();
-    expect(separator).toHaveAttribute('tabindex', '-1');
-    fireEvent.keyDown(separator, {key: 'ArrowRight'});
-    expect(separator).toHaveAttribute('aria-valuenow', '200');
-  });
-
-  // --- Drag listener lifecycle ---
-
-  it('stops driving the region and releases window listeners when unmounted mid-drag', () => {
-    const resizable: ResizableProps = {
-      _size: 200,
-      _isCollapsed: false,
-      _onResizeStart: vi.fn(),
-      _onResizeMove: vi.fn(),
-      _onResizeEnd: vi.fn(),
-      _minSizePx: 100,
-      _maxSizePx: 400,
-      _snaps: [],
-      _collapsedSize: 40,
-      _collapsible: false,
-      _isResizableProps: true,
-    };
-    const {unmount} = render(
-      <ResizeHandle resizable={resizable} label="Resize" />,
-    );
-    const separator = screen.getByRole('separator');
-    const hitArea = separator.firstElementChild as HTMLElement;
-
-    // Start a drag and confirm moves reach the region.
-    fireEvent.pointerDown(hitArea, {clientX: 0, clientY: 0});
-    expect(resizable._onResizeStart).toHaveBeenCalledTimes(1);
-    fireEvent.pointerMove(window, {clientX: 10, clientY: 0});
-    expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
-
-    // Unmount mid-drag: the window listeners must be torn down, so further
-    // pointer moves no longer resize the (still-mounted) region, and the
-    // body cursor/user-select overrides are released.
-    unmount();
-    fireEvent.pointerMove(window, {clientX: 50, clientY: 0});
-    expect(resizable._onResizeMove).toHaveBeenCalledTimes(1);
-    expect(document.body.style.cursor).toBe('');
-    expect(document.body.style.userSelect).toBe('');
-  });
-
-  // --- Prop composition (ordering choice: handler sits after {...props}) ---
-
-  it('runs a consumer onKeyDown alongside keyboard resizing', () => {
-    const onKeyDown = vi.fn();
-    render(<Harness handleProps={{onKeyDown}} />);
-    const separator = getSeparator();
-    act(() => separator.focus());
-    fireEvent.keyDown(separator, {key: 'ArrowRight'});
-    expect(onKeyDown).toHaveBeenCalledTimes(1);
-    expect(separator).toHaveAttribute(
-      'aria-valuenow',
-      String(200 + KEYBOARD_STEP),
-    );
-  });
-});