@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f899313

package/src/hooks/useAnnounce.test.tsx

@@ -1,293 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useAnnounce.test.tsx
- * @input Uses vitest, @testing-library/react, useAnnounce hook
- * @output Unit tests for useAnnounce live-region announcements
- * @position Testing; validates useAnnounce.ts
- *
- * SYNC: When useAnnounce.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect, afterEach, vi} from 'vitest';
-import {act, renderHook, waitFor} from '@testing-library/react';
-import {useAnnounce, __resetLiveRegionsForTest} from './useAnnounce';
-
-afterEach(() => {
-  __resetLiveRegionsForTest();
-});
-
-function politeRegion(): HTMLElement | null {
-  return document.querySelector('[data-astryx-live-region="polite"]');
-}
-function assertiveRegion(): HTMLElement | null {
-  return document.querySelector('[data-astryx-live-region="assertive"]');
-}
-
-describe('useAnnounce', () => {
-  it.each(['polite', 'assertive'] as const)(
-    'cancels every queued %s write when cleared',
-    politeness => {
-      vi.useFakeTimers();
-      try {
-        const {result} = renderHook(() => useAnnounce());
-        result.current('First', politeness);
-        result.current('Second', politeness);
-        const region =
-          politeness === 'polite' ? politeRegion()! : assertiveRegion()!;
-        const write = vi.spyOn(region, 'textContent', 'set');
-        result.current('', politeness);
-        act(() => {
-          vi.advanceTimersByTime(50);
-        });
-        expect(write.mock.calls).toEqual([['']]);
-        write.mockRestore();
-      } finally {
-        vi.useRealTimers();
-      }
-    },
-  );
-
-  it.each(['polite', 'assertive'] as const)(
-    'joins %s messages announced in the same frame, in order (AST-086 FR9)',
-    politeness => {
-      vi.useFakeTimers();
-      try {
-        const {result} = renderHook(() => useAnnounce());
-        result.current('3 results', politeness);
-        result.current('Filter applied', politeness);
-        const region =
-          politeness === 'polite' ? politeRegion()! : assertiveRegion()!;
-        const write = vi.spyOn(region, 'textContent', 'set');
-        act(() => {
-          vi.advanceTimersByTime(50);
-        });
-        // One write exposes both; neither is dropped or exposed alone.
-        expect(write.mock.calls).toEqual([['3 results Filter applied']]);
-        write.mockRestore();
-      } finally {
-        vi.useRealTimers();
-      }
-    },
-  );
-
-  it('keeps an identical message repeated in the same frame once (AST-086 FR9)', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('1 result');
-      result.current('Filter applied');
-      result.current('1 result');
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      expect(politeRegion()!.textContent).toBe('1 result Filter applied');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('starts a new announcement for a message after the joined one is exposed (AST-086 FR9)', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('First');
-      result.current('Second');
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      expect(politeRegion()).toHaveTextContent('First Second');
-      result.current('Third');
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      expect(politeRegion()!.textContent).toBe('Third');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('clears messages joined but not yet exposed (AST-086 FR9)', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('First');
-      result.current('Second');
-      result.current('');
-      result.current('Third');
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      // The clear dropped First and Second; only the later message is exposed.
-      expect(politeRegion()!.textContent).toBe('Third');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('cancels queued writes on reset', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('Saved');
-      result.current('Failed', 'assertive');
-      const polite = politeRegion()!;
-      const assertive = assertiveRegion()!;
-      __resetLiveRegionsForTest();
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      expect(polite.textContent).toBe('');
-      expect(assertive.textContent).toBe('');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('mounts empty polite and assertive live regions on first announce', async () => {
-    const {result} = renderHook(() => useAnnounce());
-    // Regions do not exist until first use.
-    expect(politeRegion()).toBeNull();
-
-    result.current('Saved');
-
-    // Both regions exist after the first announce, before content settles.
-    expect(politeRegion()).not.toBeNull();
-    expect(assertiveRegion()).not.toBeNull();
-    expect(politeRegion()).toHaveAttribute('aria-live', 'polite');
-    expect(politeRegion()).toHaveAttribute('aria-atomic', 'true');
-    expect(politeRegion()).toHaveAttribute('role', 'status');
-    expect(assertiveRegion()).toHaveAttribute('aria-live', 'assertive');
-    expect(assertiveRegion()).toHaveAttribute('role', 'alert');
-  });
-
-  it('announces a polite message into the polite region', async () => {
-    const {result} = renderHook(() => useAnnounce());
-    result.current('12 results');
-    await waitFor(() => {
-      expect(politeRegion()).toHaveTextContent('12 results');
-    });
-    // Assertive region stays empty.
-    expect(assertiveRegion()).toHaveTextContent('');
-  });
-
-  it('routes assertive messages to the assertive region', async () => {
-    const {result} = renderHook(() => useAnnounce());
-    result.current('Upload failed', 'assertive');
-    await waitFor(() => {
-      expect(assertiveRegion()).toHaveTextContent('Upload failed');
-    });
-    expect(politeRegion()).toHaveTextContent('');
-  });
-
-  it('re-announces an identical message (clears then re-sets)', async () => {
-    const {result} = renderHook(() => useAnnounce());
-    result.current('No results found');
-    await waitFor(() => {
-      expect(politeRegion()).toHaveTextContent('No results found');
-    });
-    // Second identical announce should still land (region is cleared first).
-    result.current('No results found');
-    expect(politeRegion()).toHaveTextContent('');
-    await waitFor(() => {
-      expect(politeRegion()).toHaveTextContent('No results found');
-    });
-  });
-
-  it('ignores empty messages', () => {
-    const {result} = renderHook(() => useAnnounce());
-    result.current('');
-    // No regions created for an empty announce.
-    expect(politeRegion()).toBeNull();
-  });
-
-  it('clears the region after the clear delay, but not before', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('Saved');
-      // Flush the rAF that re-sets the message.
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      expect(politeRegion()?.textContent).toBe('Saved');
-
-      // The message survives long enough for AT to finish reading it.
-      act(() => {
-        vi.advanceTimersByTime(1000);
-      });
-      expect(politeRegion()?.textContent).toBe('Saved');
-
-      // After the clear delay, stale status text is removed from the DOM.
-      act(() => {
-        vi.advanceTimersByTime(10_000);
-      });
-      expect(politeRegion()?.textContent).toBe('');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('resets the clear timer on each announce', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('first');
-      act(() => {
-        vi.advanceTimersByTime(1500);
-      });
-      // Announcing again must reset the pending clear, not inherit it.
-      result.current('second');
-      act(() => {
-        vi.advanceTimersByTime(1900);
-      });
-      // 3.4s after 'first' (past its clear point) but only 1.9s after
-      // 'second' — the newer message must still be present.
-      expect(politeRegion()?.textContent).toBe('second');
-      act(() => {
-        vi.advanceTimersByTime(10_000);
-      });
-      expect(politeRegion()?.textContent).toBe('');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('re-announces normally after a clear', () => {
-    vi.useFakeTimers();
-    try {
-      const {result} = renderHook(() => useAnnounce());
-      result.current('gone soon');
-      act(() => {
-        vi.advanceTimersByTime(10_000);
-      });
-      expect(politeRegion()?.textContent).toBe('');
-
-      // The clear-then-rAF re-announce pattern still works after a clear.
-      result.current('back again');
-      act(() => {
-        vi.advanceTimersByTime(50);
-      });
-      expect(politeRegion()?.textContent).toBe('back again');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-
-  it('reuses the same singleton regions across hook instances', async () => {
-    const {result: a} = renderHook(() => useAnnounce());
-    a.current('first');
-    const region = politeRegion();
-
-    const {result: b} = renderHook(() => useAnnounce());
-    b.current('second');
-    await waitFor(() => {
-      expect(politeRegion()).toHaveTextContent('second');
-    });
-    // Same DOM node, not a duplicate.
-    expect(politeRegion()).toBe(region);
-    expect(
-      document.querySelectorAll('[data-astryx-live-region="polite"]').length,
-    ).toBe(1);
-  });
-});

package/src/hooks/useAnnounceRenderedText.adopters.test.tsx

@@ -1,235 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useAnnounceRenderedText.adopters.test.tsx
- * @input Every core component that announces its own rendered content, with
- *   the shared own-content module replaced by a recorder
- * @output architecture:react-component-runtime INV10 test: each adopter hands
- *   its own-content announcement to the shared module and announces none of it
- *   itself
- * @position Shared adopter test for the own-content announcement module
- *
- * With the module replaced by a recorder that never announces, an adopter that
- * still announced its own content would be holding an Effect, observer, timer
- * or listener of its own for it, which INV10 rules out. The registry check at
- * the end keeps this list in step with every file that imports the module, so
- * a new adopter cannot skip the test. The sheet case loads Tokenizer's
- * on-demand sheet module before it opens the sheet, so its wait covers the
- * open, not the module's load.
- */
-
-import fs from 'node:fs';
-import path from 'node:path';
-import {useEffect, useRef, type HTMLAttributes, type RefObject} from 'react';
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {fireEvent, render, screen, waitFor} from '@testing-library/react';
-
-interface ModuleCall {
-  isShown: boolean;
-  text: string;
-}
-
-const calls: ModuleCall[] = [];
-const announce = vi.hoisted(() => vi.fn());
-
-vi.mock('./useAnnounceRenderedText', async importOriginal => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  useAnnounceRenderedText: (
-    ref: RefObject<HTMLElement | null>,
-    isShown: boolean,
-  ) => {
-    // Read after commit, the way the real module does.
-    useEffect(() => {
-      calls.push({isShown, text: ref.current?.textContent ?? ''});
-    });
-  },
-}));
-vi.mock('./AnnounceRenderedText', () => ({
-  AnnounceRenderedText: (props: HTMLAttributes<HTMLDivElement>) => {
-    const ref = useRef<HTMLDivElement>(null);
-    useEffect(() => {
-      calls.push({isShown: true, text: ref.current?.textContent ?? ''});
-    });
-    return <div ref={ref} {...props} />;
-  },
-}));
-vi.mock('./useAnnounce', async importOriginal => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  useAnnounce: () => announce,
-}));
-
-const {EmptyState} = await import('../EmptyState');
-const {ChatComposer} = await import('../Chat');
-const {Selector} = await import('../Selector');
-const {MultiSelector} = await import('../MultiSelector');
-const {CommandPalette} = await import('../CommandPalette');
-const {BaseTypeahead} = await import('../Typeahead/BaseTypeahead');
-const {TokenizerWithPresentation} =
-  await import('../internal/tokenizer-presentation');
-const {createStaticSource} = await import('../Typeahead/createStaticSource');
-
-const source = createStaticSource([{id: 'apple', label: 'Apple'}]);
-
-beforeEach(() => {
-  calls.length = 0;
-  announce.mockClear();
-  // jsdom does not implement the modal dialog methods CommandPalette uses.
-  HTMLDialogElement.prototype.showModal = vi.fn(function (
-    this: HTMLDialogElement,
-  ) {
-    this.setAttribute('open', '');
-  });
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.removeAttribute('open');
-  });
-});
-
-afterEach(() => {
-  vi.useRealTimers();
-});
-
-/**
- * The adopter showed `text` through the module, and announced none of it
- * through its own channel calls.
- */
-async function expectDelegated(text: string) {
-  await waitFor(() =>
-    expect(calls.some(call => call.isShown && call.text.includes(text))).toBe(
-      true,
-    ),
-  );
-  const own = announce.mock.calls.filter(([message]) =>
-    String(message).includes(text),
-  );
-  expect(own).toEqual([]);
-}
-
-/** Each adopter, shown in the state where its own content appears. */
-const ADOPTERS: Record<string, () => Promise<void>> = {
-  'EmptyState/EmptyState.tsx': async () => {
-    render(<EmptyState title="Nothing here" description="Add an item" />);
-    await expectDelegated('Nothing here');
-  },
-  'Chat/ChatComposer.tsx': async () => {
-    const composer = (status?: {
-      type: 'error' | 'warning';
-      message: string;
-    }) => <ChatComposer onSubmit={() => {}} input={<div />} status={status} />;
-    const {rerender} = render(composer());
-    rerender(composer({type: 'error', message: 'Send failed'}));
-    await expectDelegated('Send failed');
-    rerender(composer({type: 'warning', message: 'Offline'}));
-    await expectDelegated('Offline');
-  },
-  'Selector/Selector.tsx': async () => {
-    render(
-      <Selector
-        label="Fruit"
-        options={[] as string[]}
-        value=""
-        onChange={() => {}}
-      />,
-    );
-    fireEvent.click(screen.getByRole('combobox'));
-    await expectDelegated('No options');
-  },
-  'MultiSelector/MultiSelector.tsx': async () => {
-    render(
-      <MultiSelector
-        label="Fruits"
-        options={[] as string[]}
-        value={[]}
-        onChange={() => {}}
-      />,
-    );
-    fireEvent.click(screen.getByRole('combobox'));
-    await expectDelegated('No options');
-  },
-  'CommandPalette/CommandPalette.tsx': async () => {
-    render(
-      <CommandPalette isOpen onOpenChange={() => {}} searchSource={source} />,
-    );
-    fireEvent.change(screen.getByRole('combobox'), {target: {value: 'zzz'}});
-    await expectDelegated('No results');
-  },
-  'Typeahead/BaseTypeahead.tsx': async () => {
-    render(
-      <BaseTypeahead
-        searchSource={source}
-        value={null}
-        onChange={() => {}}
-        debounceMs={0}
-      />,
-    );
-    fireEvent.change(screen.getByRole('combobox'), {target: {value: 'zzz'}});
-    await expectDelegated('No results found');
-  },
-  'Tokenizer/TokenizerBottomSheet.tsx': async () => {
-    // The sheet's own content is a caller's `emptySearchText` element; the
-    // default EmptyState announces itself.
-    //
-    // Tokenizer loads the sheet on demand (Tokenizer.tsx's
-    // loadTokenizerBottomSheet). Loading the module is not what this case
-    // checks, so it waits for it first, and the one-second wait for the
-    // sheet's search field below covers only the open: on a busy machine the
-    // module's load alone outlasts it.
-    await import('../Tokenizer/TokenizerBottomSheet');
-    render(
-      <TokenizerWithPresentation
-        label="Tags"
-        searchSource={source}
-        value={[]}
-        onChange={() => {}}
-        debounceMs={0}
-        emptySearchText={<em>Nothing called that</em>}
-        experimental={{presentation: 'bottom-sheet'}}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', {name: 'Tags'}));
-    fireEvent.change(await screen.findByLabelText('Search Tags'), {
-      target: {value: 'zzz'},
-    });
-    await expectDelegated('Nothing called that');
-  },
-};
-
-describe('own-content announcement adopters (react-component-runtime INV10)', () => {
-  it.each(Object.entries(ADOPTERS))(
-    '%s hands its own content to the shared module and announces none of it itself',
-    async (_file, run) => {
-      await run();
-    },
-  );
-
-  it('covers every core file that imports the module', () => {
-    const src = path.resolve(import.meta.dirname, '..');
-    const importers: string[] = [];
-    const walk = (dir: string) => {
-      for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
-        const full = path.join(dir, entry.name);
-        if (entry.isDirectory()) {
-          walk(full);
-        } else if (
-          /\.tsx?$/.test(entry.name) &&
-          !/\.(test|spec|stories)\.tsx?$/.test(entry.name) &&
-          /from '[./]*(hooks\/)?(useAnnounceRenderedText|AnnounceRenderedText)'/.test(
-            fs.readFileSync(full, 'utf8'),
-          )
-        ) {
-          importers.push(path.relative(src, full));
-        }
-      }
-    };
-    walk(src);
-    const modules = [
-      'hooks/useAnnounceRenderedText.ts',
-      'hooks/AnnounceRenderedText.tsx',
-    ];
-    expect(
-      importers
-        .filter(file => !modules.includes(file))
-        .map(file => file.split(path.sep).join('/'))
-        .sort(),
-    ).toEqual(Object.keys(ADOPTERS).sort());
-  });
-});

package/src/hooks/useAutoMediaMode.test.ts

@@ -1,109 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-import {pickMediaMode} from './useAutoMediaMode';
-import {parseColor} from '../utils/color';
-
-const rgb = (value: string) => {
-  const parsed = parseColor(value);
-  if (parsed === null) {
-    throw new Error(`bad test color ${value}`);
-  }
-  return parsed;
-};
-
-const onDark = rgb('#FFFFFF');
-const onLight = rgb('#171717');
-// The theme's --color-text-primary, per color mode.
-const ambientLight = rgb('#171717');
-const ambientDark = rgb('#FAFAFA');
-
-describe('pickMediaMode', () => {
-  it('picks dark for a dark surface under a light page', () => {
-    expect(pickMediaMode(rgb('#0A1317'), ambientLight, onDark, onLight)).toBe(
-      'dark',
-    );
-  });
-
-  it('picks light for a light surface under a dark page', () => {
-    expect(pickMediaMode(rgb('#FFFFFF'), ambientDark, onDark, onLight)).toBe(
-      'light',
-    );
-  });
-
-  // The bug this exists for: a theme whose "inverted" background is a pale
-  // grey, where a hardcoded mode="dark" paints white text at 1.25:1.
-  it('answers off for a surface a theme merely calls inverted', () => {
-    // Ambient already reads at 14.36; no media side improves on it, so a
-    // media context would churn accent and overlays for nothing.
-    expect(pickMediaMode(rgb('#E4E6EB'), ambientLight, onDark, onLight)).toBe(
-      'off',
-    );
-  });
-
-  it('answers off for a chromatic surface its ambient text already reads on', () => {
-    // The dark-mode error toast: ambient 4.50 clears the bar. Verified in
-    // Chromium that this renders identically to mode="dark" — a dark page
-    // already resolves those tokens to what the media context would install.
-    expect(pickMediaMode(rgb('#E3193B'), ambientDark, onDark, onLight)).toBe(
-      'off',
-    );
-  });
-
-  it('picks dark for a saturated surface under a light page', () => {
-    // The light-mode error toast: a deeper red, where the page's near-black
-    // text only manages 2.35 and the surface genuinely needs inverting.
-    expect(pickMediaMode(rgb('#AA071E'), ambientLight, onDark, onLight)).toBe(
-      'dark',
-    );
-  });
-
-  it('respects a theme that overrides its on-colors', () => {
-    // The decision follows the theme's own values, not an assumption that
-    // on-dark is white.
-    expect(
-      pickMediaMode(
-        rgb('#0A1317'),
-        ambientLight,
-        rgb('#101010'),
-        rgb('#F0F0F0'),
-      ),
-    ).toBe('light');
-  });
-
-  it('composites a translucent on-color before judging it', () => {
-    // Ambient (1.44) does not read, so a side must be chosen. Raw white would
-    // score 4.54 here and win; composited at 10% alpha it is 1.21 and loses.
-    expect(
-      pickMediaMode(
-        rgb('#767676'),
-        rgb('#8A8A8A'),
-        rgb('rgba(255,255,255,0.10)'),
-        rgb('#171717'),
-      ),
-    ).toBe('light');
-  });
-
-  it('picks a side when the ambient color cannot be read at all', () => {
-    // Unparseable token: it cannot conclude "no media wanted", so it inverts.
-    expect(pickMediaMode(rgb('#0A1317'), null, onDark, onLight)).toBe('dark');
-  });
-
-  it('treats the bar as a floor, not a target', () => {
-    // 3.45:1 is poor for body text but clears the bar: the theme is rendering
-    // this successfully and a media context would not make it more legible.
-    // Deliberately NOT corrected — this is not a WCAG enforcer.
-    expect(pickMediaMode(rgb('#8A8A8A'), rgb('#FFFFFF'), onDark, onLight)).toBe(
-      'off',
-    );
-  });
-
-  it('gives up when an on-color is unreadable', () => {
-    expect(
-      pickMediaMode(rgb('#0A1317'), ambientLight, null, onLight),
-    ).toBeNull();
-    expect(
-      pickMediaMode(rgb('#0A1317'), ambientLight, onDark, null),
-    ).toBeNull();
-  });
-});