@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/SizeContext/SizeContext.test.tsx

@@ -1,226 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file SizeContext.test.tsx
- * @input Uses vitest, @testing-library/react, SizeContext module
- * @output Characterization tests for SizeContext / useSize / SizeProvider
- * @position Testing; validates the size-cascade resolution contract
- *
- * SYNC: When SizeContext.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {renderHook, render, screen} from '@testing-library/react';
-import {createElement, type ReactNode} from 'react';
-import {
-  SizeContext,
-  SizeProvider,
-  useSize,
-  type ElementSize,
-} from './SizeContext';
-
-/**
- * Wrap children in a SizeProvider set to `size`. Passing `null` mimics
- * "no container is providing a size".
- */
-function withProvider(size: ElementSize | null) {
-  return function Wrapper({children}: {children: ReactNode}) {
-    return <SizeProvider value={size}>{children}</SizeProvider>;
-  };
-}
-
-describe('SizeContext', () => {
-  describe('context identity', () => {
-    it('defaults to null when read outside any provider', () => {
-      const {result} = renderHook(() => useSize());
-      // No provider + no prop + no explicit default → the 'md' fallback.
-      expect(result.current).toBe('md');
-    });
-
-    it('exposes a displayName for devtools', () => {
-      expect(SizeContext.displayName).toBe('SizeContext');
-    });
-
-    it('SizeProvider is the context Provider itself', () => {
-      expect(SizeProvider).toBe(SizeContext.Provider);
-    });
-  });
-
-  describe('useSize — resolution priority', () => {
-    it('returns the default "md" with no prop and no provider', () => {
-      const {result} = renderHook(() => useSize());
-      expect(result.current).toBe('md');
-    });
-
-    it('honors an explicit defaultSize when neither prop nor context is set', () => {
-      const {result} = renderHook(() => useSize(undefined, 'lg'));
-      expect(result.current).toBe('lg');
-    });
-
-    it('returns the explicit size prop when provided', () => {
-      const {result} = renderHook(() => useSize('sm'));
-      expect(result.current).toBe('sm');
-    });
-
-    it('prop wins over the explicit default', () => {
-      const {result} = renderHook(() => useSize('sm', 'lg'));
-      expect(result.current).toBe('sm');
-    });
-
-    it('inherits the size from an enclosing provider when no prop is passed', () => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: withProvider('lg'),
-      });
-      expect(result.current).toBe('lg');
-    });
-
-    it('prop wins over the inherited provider size', () => {
-      const {result} = renderHook(() => useSize('sm'), {
-        wrapper: withProvider('lg'),
-      });
-      expect(result.current).toBe('sm');
-    });
-
-    it('inherited context wins over the explicit default fallback', () => {
-      const {result} = renderHook(() => useSize(undefined, 'sm'), {
-        wrapper: withProvider('lg'),
-      });
-      expect(result.current).toBe('lg');
-    });
-
-    it('falls back to default when the provider value is explicitly null', () => {
-      const {result} = renderHook(() => useSize(undefined, 'sm'), {
-        wrapper: withProvider(null),
-      });
-      expect(result.current).toBe('sm');
-    });
-
-    it('falls back to "md" when provider is null and no default is given', () => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: withProvider(null),
-      });
-      expect(result.current).toBe('md');
-    });
-  });
-
-  describe('useSize — every standard ElementSize resolves', () => {
-    const sizes: ElementSize[] = ['sm', 'md', 'lg'];
-
-    it.each(sizes)('resolves explicit prop "%s"', size => {
-      const {result} = renderHook(() => useSize(size));
-      expect(result.current).toBe(size);
-    });
-
-    it.each(sizes)('resolves inherited provider "%s"', size => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: withProvider(size),
-      });
-      expect(result.current).toBe(size);
-    });
-  });
-
-  describe('useSize — nested providers', () => {
-    it('resolves to the nearest provider', () => {
-      function Nested({children}: {children: ReactNode}) {
-        return (
-          <SizeProvider value="sm">
-            <SizeProvider value="lg">{children}</SizeProvider>
-          </SizeProvider>
-        );
-      }
-      const {result} = renderHook(() => useSize(), {wrapper: Nested});
-      expect(result.current).toBe('lg');
-    });
-
-    it('a prop still overrides the nearest provider', () => {
-      function Nested({children}: {children: ReactNode}) {
-        return (
-          <SizeProvider value="sm">
-            <SizeProvider value="lg">{children}</SizeProvider>
-          </SizeProvider>
-        );
-      }
-      const {result} = renderHook(() => useSize('md'), {wrapper: Nested});
-      expect(result.current).toBe('md');
-    });
-  });
-
-  describe('useSize — generic (non-ElementSize) values', () => {
-    it('supports a custom string union via the type parameter', () => {
-      type Custom = 'compact' | 'comfortable';
-      const {result} = renderHook(() =>
-        useSize<Custom>('compact', 'comfortable'),
-      );
-      expect(result.current).toBe('compact');
-    });
-
-    it('returns the custom default when no prop is given', () => {
-      type Custom = 'compact' | 'comfortable';
-      const {result} = renderHook(() =>
-        useSize<Custom>(undefined, 'comfortable'),
-      );
-      expect(result.current).toBe('comfortable');
-    });
-
-    it('empty-string prop is a real value and does NOT fall through to default', () => {
-      // '' ?? x === '' because nullish coalescing only catches null/undefined.
-      const {result} = renderHook(() => useSize('' as ElementSize, 'lg'));
-      expect(result.current).toBe('');
-    });
-  });
-
-  describe('integration — components consuming the cascade', () => {
-    function SizedProbe({size}: {size?: ElementSize}) {
-      const resolved = useSize(size);
-      return <span data-testid="probe">{resolved}</span>;
-    }
-
-    it('a child with no size prop reads the container size', () => {
-      render(
-        <SizeProvider value="lg">
-          <SizedProbe />
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('probe')).toHaveTextContent('lg');
-    });
-
-    it('sibling children resolve independently against the same provider', () => {
-      render(
-        <SizeProvider value="lg">
-          <span data-testid="a">
-            <SizedProbe />
-          </span>
-          <span data-testid="b">
-            <SizedProbe size="sm" />
-          </span>
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('a')).toHaveTextContent('lg');
-      expect(screen.getByTestId('b')).toHaveTextContent('sm');
-    });
-
-    it('re-renders with the new size when the provider value changes', () => {
-      const {rerender} = render(
-        <SizeProvider value="sm">
-          <SizedProbe />
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('probe')).toHaveTextContent('sm');
-
-      rerender(
-        <SizeProvider value="lg">
-          <SizedProbe />
-        </SizeProvider>,
-      );
-      expect(screen.getByTestId('probe')).toHaveTextContent('lg');
-    });
-
-    it('works with createElement (no JSX) call form', () => {
-      const {result} = renderHook(() => useSize(), {
-        wrapper: ({children}: {children: ReactNode}) =>
-          createElement(SizeProvider, {value: 'sm'}, children),
-      });
-      expect(result.current).toBe('sm');
-    });
-  });
-});

package/src/Toast/useToast.test.tsx

@@ -1,258 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useToast.test.tsx
- * @input Uses vitest, @testing-library/react, useToast/ToastViewport/Theme
- * @output Unit tests for the fallback viewport's theme mode resolution
- * @position Testing; validates useToast.tsx's attribute mirroring onto the
- *   fallback container, plus useTheme.ts's <html data-theme> fallback (which
- *   is what actually resolves Toast's JS-computed mode; see useTheme.test.tsx
- *   for direct coverage of that half)
- *
- * SYNC: When useToast.tsx's fallback container setup changes, update these tests
- *
- * The fallback viewport root is a module-level singleton, so it's mounted
- * once (by whichever test runs first) and persists across every test in the
- * file below — mirroring a real app whose root <Theme> mode changes over
- * time. Each test dismisses its own toast in afterEach (see
- * dismissAllFallbackToasts) so none linger as a useTheme subscriber into the
- * next test.
- */
-
-import {describe, it, expect, vi, afterEach} from 'vitest';
-import {render, screen, fireEvent, act, waitFor} from '@testing-library/react';
-import React from 'react';
-import {Theme} from '../theme/Theme';
-import {defineTheme} from '../theme/defineTheme';
-import {ToastViewport} from './ToastViewport';
-import {useToast} from './useToast';
-import type {ToastOptions} from './types';
-
-const testTheme = defineTheme({name: 'test', tokens: {}});
-const NO_AUTO_HIDE: ToastOptions = {body: 'hello', isAutoHide: false};
-
-function mockMatchMedia(prefersDark: boolean) {
-  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
-    matches: query.includes('dark') ? prefersDark : false,
-    media: query,
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  }));
-}
-
-function ShowToastButton({label = 'Trigger'}: {label?: string}) {
-  const toast = useToast();
-  return (
-    <button type="button" onClick={() => toast(NO_AUTO_HIDE)}>
-      {label}
-    </button>
-  );
-}
-
-// The fallback's toasts accumulate in one persistent viewport across tests
-// (see file header) — take the most recently added one.
-function newestMediaAttr(scope: ParentNode): string | null {
-  const nodes = scope.querySelectorAll('[data-astryx-media]');
-  const last = nodes[nodes.length - 1];
-  return last ? last.getAttribute('data-astryx-media') : null;
-}
-
-// Fire the transition-end that ToastViewport listens for to unmount an
-// exiting toast (jsdom does not run CSS transitions) — mirrors
-// ToastViewport.test.tsx's completeExit helper.
-function completeExit(toastId: string) {
-  const node = document.querySelector<HTMLElement>(
-    `[data-toast-id="${toastId}"]`,
-  );
-  if (node) {
-    fireEvent.transitionEnd(node, {propertyName: 'grid-template-rows'});
-  }
-}
-
-// Dismisses every toast still mounted in the fallback viewport so none of
-// them remain subscribed to useTheme's shared MutationObserver by the time
-// RTL's own cleanup unmounts this test's <Theme> — that unmount would
-// otherwise notify a lingering subscriber outside any act scope.
-async function dismissAllFallbackToasts(): Promise<void> {
-  const fallback = document.querySelector('[data-astryx-toast-fallback]');
-  const ids = Array.from(
-    fallback?.querySelectorAll<HTMLElement>('[data-toast-id]') ?? [],
-  ).map(node => node.getAttribute('data-toast-id')!);
-
-  await act(async () => {
-    for (const id of ids) {
-      fallback
-        ?.querySelector<HTMLElement>(
-          `[data-toast-id="${id}"] button[aria-label="Dismiss notification"]`,
-        )
-        ?.click();
-    }
-  });
-
-  await act(async () => {
-    for (const id of ids) {
-      completeExit(id);
-    }
-  });
-}
-
-describe('useToast fallback viewport theme mode', () => {
-  afterEach(async () => {
-    mockMatchMedia(false);
-    await dismissAllFallbackToasts();
-  });
-
-  it('resolves the app mode (light) instead of OS preference (dark) with no LayerProvider', async () => {
-    mockMatchMedia(true); // OS prefers dark
-
-    render(
-      <Theme theme={testTheme} mode="light">
-        <ShowToastButton />
-      </Theme>,
-    );
-
-    // This is the very first click in the whole file, so it's the one that
-    // finds the fallback proxy still pending: addToast queues the entry and
-    // kicks off the ctxReady.then(...) microtask that later delivers it to
-    // the real context. Awaiting an async act() here flushes that chain
-    // instead of letting it resolve outside any act scope.
-    await act(async () => {
-      fireEvent.click(screen.getByText('Trigger'));
-    });
-
-    await waitFor(() => {
-      expect(
-        document.querySelector(
-          '[data-astryx-toast-fallback] [data-astryx-media]',
-        ),
-      ).not.toBeNull();
-    });
-
-    // App mode is light, so the toast's inverted surface must be dark — if
-    // the fallback fell back to OS preference (dark) instead, this would be
-    // 'light' and the toast's text/icon would compute the same color as its
-    // own background (the invisible-toast bug).
-    expect(
-      newestMediaAttr(document.querySelector('[data-astryx-toast-fallback]')!),
-    ).toBe('dark');
-  });
-
-  it('keeps the OS-preference fallback for mode="system" with no LayerProvider', async () => {
-    mockMatchMedia(true); // OS prefers dark
-
-    render(
-      <Theme theme={testTheme} mode="system">
-        <ShowToastButton label="Trigger System" />
-      </Theme>,
-    );
-
-    // The fallback viewport is a persistent module singleton (see file
-    // header), so earlier tests may have already added toasts to it — count
-    // beforehand instead of assuming a fixed prior count, so this test
-    // survives running alone (.only, -t, shuffle) as well as in sequence.
-    const countBefore = document.querySelectorAll(
-      '[data-astryx-toast-fallback] [data-astryx-media]',
-    ).length;
-
-    act(() => {
-      fireEvent.click(screen.getByText('Trigger System'));
-    });
-
-    await waitFor(() => {
-      const nodes = document.querySelectorAll(
-        '[data-astryx-toast-fallback] [data-astryx-media]',
-      );
-      expect(nodes.length).toBeGreaterThan(countBefore);
-    });
-
-    // mode="system" means #1587 removes data-theme from <html> — useTheme's
-    // <html data-theme> fallback then has nothing to read, leaving its own
-    // OS-preference resolution (dark here) in place, same as before this fix.
-    expect(
-      newestMediaAttr(document.querySelector('[data-astryx-toast-fallback]')!),
-    ).toBe('light');
-  });
-
-  it('mirrors <html data-theme> and data-astryx-theme onto the fallback container', async () => {
-    mockMatchMedia(false);
-
-    const {rerender} = render(
-      <Theme theme={testTheme} mode="dark">
-        <ShowToastButton label="Trigger Mirror" />
-      </Theme>,
-    );
-
-    act(() => {
-      fireEvent.click(screen.getByText('Trigger Mirror'));
-    });
-
-    await waitFor(() => {
-      const fallback = document.querySelector(
-        '[data-astryx-toast-fallback]',
-      ) as HTMLElement;
-      expect(fallback.getAttribute('data-theme')).toBe('dark');
-      expect(fallback.getAttribute('data-astryx-theme')).toBe('test');
-      // Inline color-scheme must follow the mirrored mode, not <html>'s own
-      // (possibly #3658-pinned) theme CSS — see useToast.tsx's syncRootThemeAttrs.
-      expect(fallback.style.colorScheme).toBe('dark');
-    });
-
-    // Flip the app mode: the shared MutationObserver re-syncs the container,
-    // so the inline color-scheme must follow it live.
-    rerender(
-      <Theme theme={testTheme} mode="light">
-        <ShowToastButton label="Trigger Mirror" />
-      </Theme>,
-    );
-
-    await waitFor(() => {
-      const fallback = document.querySelector(
-        '[data-astryx-toast-fallback]',
-      ) as HTMLElement;
-      expect(fallback.getAttribute('data-theme')).toBe('light');
-      expect(fallback.style.colorScheme).toBe('light');
-    });
-
-    // mode="system" removes <html data-theme> entirely — the inline property
-    // must be removed too, reverting to whatever the CSS otherwise resolves.
-    rerender(
-      <Theme theme={testTheme} mode="system">
-        <ShowToastButton label="Trigger Mirror" />
-      </Theme>,
-    );
-
-    await waitFor(() => {
-      const fallback = document.querySelector(
-        '[data-astryx-toast-fallback]',
-      ) as HTMLElement;
-      expect(fallback.getAttribute('data-theme')).toBeNull();
-      expect(fallback.style.colorScheme).toBe('');
-    });
-  });
-});
-
-describe('useToast LayerProvider path', () => {
-  afterEach(() => {
-    mockMatchMedia(false);
-  });
-
-  it('resolves mode via real context, unaffected by the fallback provider', () => {
-    mockMatchMedia(true); // OS prefers dark; should be irrelevant here
-
-    const {container} = render(
-      <Theme theme={testTheme} mode="light">
-        <ToastViewport isTopLayer={false}>
-          <ShowToastButton label="Trigger Provider" />
-        </ToastViewport>
-      </Theme>,
-    );
-
-    act(() => {
-      fireEvent.click(screen.getByText('Trigger Provider'));
-    });
-
-    expect(newestMediaAttr(container)).toBe('dark');
-  });
-});

package/src/__tests__/TestIcon.tsx

@@ -1,26 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file TestIcon.tsx
- * @input Standard SVG props
- * @output A minimal SVG React component for tests
- * @position Test fixture; a stand-in external SVG icon for Icon component-mode tests
- *
- * A trivial SVG component used by tests that need to pass a custom SVG icon to
- * `Icon` (component mode) or component `*Icon` props. It forwards all standard
- * SVG props and its ref so tests exercising prop/ref forwarding behave the same
- * as a real third-party icon component.
- */
-
-import React, {type SVGProps} from 'react';
-
-export function TestIcon({
-  ref,
-  ...props
-}: SVGProps<SVGSVGElement> & {ref?: React.Ref<SVGSVGElement>}) {
-  return (
-    <svg ref={ref} viewBox="0 0 24 24" {...props}>
-      <path d="M4 4h16v16H4z" />
-    </svg>
-  );
-}

package/src/__tests__/fastRoleQueries.ts

@@ -1,66 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file fastRoleQueries.ts
- * @input Uses @testing-library/react screen, dom-accessibility-api
- * @output getButton/queryButton — role+name lookups that stay O(match) in jsdom
- * @position Shared test helper; imported by component tests that render large
- *   always-mounted button collections (Calendar month grids)
- *
- * RTL's getByRole('button', {name}) computes the accessible name of EVERY
- * role candidate before filtering, and each computation consults jsdom's slow
- * getComputedStyle (~5ms per node). The date components keep a month grid of
- * ~35–85 role=button nodes mounted — visible in Calendar's case, inside the
- * closed popover for the *Input components — so a single trigger lookup cost
- * ~450ms and dominated those suites' runtime (DateRangeInput: 34s for 34
- * tests before this helper existed).
- *
- * These helpers keep RTL's exact name algorithm (dom-accessibility-api is the
- * library RTL uses internally) but:
- *   - collect candidates with {hidden: true}, skipping the per-node
- *     getComputedStyle visibility checks, and
- *   - inject a constant "visible" style stub into the name computation —
- *     names only consult display/visibility, and under {hidden: true}
- *     semantics visibility must not exclude candidates anyway.
- *
- * Trade-off vs getByRole: first match wins — no tree-wide uniqueness check.
- *
- * SYNC: When modified, update this header.
- */
-
-import {screen} from '@testing-library/react';
-import {computeAccessibleName} from 'dom-accessibility-api';
-
-// The name algorithm only reads getPropertyValue (for display/visibility/
-// content), so a Pick is all we need to type honestly — no object-literal
-// cast. The widening to CSSStyleDeclaration happens at the call site, where
-// getComputedStyle's signature demands the full type.
-const visibleStyleStub: Pick<CSSStyleDeclaration, 'getPropertyValue'> = {
-  getPropertyValue: prop =>
-    prop === 'display' ? 'block' : prop === 'visibility' ? 'visible' : '',
-};
-
-function matchesName(el: Element, name: string | RegExp): boolean {
-  const accessibleName = computeAccessibleName(el, {
-    getComputedStyle: () => visibleStyleStub as CSSStyleDeclaration,
-  });
-  return typeof name === 'string'
-    ? accessibleName === name
-    : name.test(accessibleName);
-}
-
-export function queryButton(name: string | RegExp): HTMLElement | null {
-  return (
-    screen
-      .queryAllByRole('button', {hidden: true})
-      .find(el => matchesName(el, name)) ?? null
-  );
-}
-
-export function getButton(name: string | RegExp): HTMLElement {
-  const el = queryButton(name);
-  if (!el) {
-    throw new Error(`Unable to find a role=button named ${String(name)}`);
-  }
-  return el;
-}