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

package/src/ContextMenu/__tests__/ContextMenuCursorAnchor.a11y.browser.spec.ts

@@ -1,154 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file ContextMenuCursorAnchor.a11y.browser.spec.ts
- * @input The built "Inside a scroll container" ContextMenu story and real
- *   Chromium/WebKit layout and paint
- * @output Browser evidence that the menu paints at its cursor anchor inside a
- *   scroll container, hides while the container clips that anchor, and that
- *   the anchor adds no scrollable overflow
- * @position Cross-browser proof; jsdom has no layout, anchor positioning or
- *   paint.
- *
- * The menu is anchored to a box at the pointer. The initial
- * `position-visibility: anchors-visible` hides an anchored box whose anchor
- * is clipped, and WebKit counts an empty anchor box inside a scroll container
- * as clipped. Whether the menu painted is read from pixels: WebKit still
- * hit-tests, and reports as visible, a box that rule hides.
- */
-
-import {expect, test, type Locator, type Page} from '@playwright/test';
-import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-/** Mounts the story with the trigger scrolled fully into the box. */
-async function mount(
-  page: Page,
-): Promise<{trigger: Locator; scroller: Locator}> {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-contextmenu--in-scroll-container&viewMode=story`,
-  );
-  await holdMotionStill(page);
-  const scroller = page.getByTestId('context-menu-scroller');
-  // The trigger is the box's last child: at the end of the scroll its bottom
-  // edge is the box's bottom edge.
-  await scroller.evaluate(el => {
-    el.scrollTop = el.scrollHeight;
-  });
-  return {trigger: page.getByText('Right-click this area'), scroller};
-}
-
-/** Right-clicks the trigger 40px in and 30px down; returns that point. */
-async function rightClick(
-  page: Page,
-  trigger: Locator,
-): Promise<{x: number; y: number}> {
-  const box = await trigger.boundingBox();
-  const point = {
-    x: Math.round(box?.x ?? 0) + 40,
-    y: Math.round(box?.y ?? 0) + 30,
-  };
-  await page.mouse.click(point.x, point.y, {button: 'right'});
-  return point;
-}
-
-/** Whether the open menu is on screen: hiding it must change the pixels. */
-async function menuPainted(page: Page): Promise<boolean> {
-  const layer = page.locator('[popover]:has(> [role="menu"])');
-  const clip = await layer.boundingBox();
-  if (clip == null) {
-    return false;
-  }
-  const shown = await page.screenshot({clip});
-  await layer.evaluate(el => {
-    el.style.visibility = 'hidden';
-  });
-  const hidden = await page.screenshot({clip});
-  await layer.evaluate(el => {
-    el.style.visibility = '';
-  });
-  return !shown.equals(hidden);
-}
-
-test('a right-click inside a scroll container paints the menu at the pointer', async ({
-  page,
-}) => {
-  const {trigger} = await mount(page);
-  const point = await rightClick(page, trigger);
-  await expect(page.getByRole('menu')).toBeVisible();
-  await expect.poll(async () => menuPainted(page)).toBe(true);
-
-  const anchor = await page
-    .locator('span[aria-hidden="true"][style*="anchor-name"]')
-    .boundingBox();
-  // The anchor owns a box, so WebKit does not count it as clipped.
-  expect(anchor).toMatchObject({width: 1, height: 1});
-  expect(anchor?.x).toBeCloseTo(point.x, 0);
-  expect(anchor?.y).toBeCloseTo(point.y, 0);
-});
-
-test('the menu hides while the box scrolls its anchor out of view, and returns with it', async ({
-  page,
-}) => {
-  const {trigger, scroller} = await mount(page);
-  await rightClick(page, trigger);
-  await expect(page.getByRole('menu')).toBeVisible();
-  await expect.poll(async () => menuPainted(page)).toBe(true);
-
-  await scroller.evaluate(el => {
-    el.scrollTop -= el.clientHeight;
-  });
-  await expect(page.getByRole('menu')).toBeAttached();
-  await expect.poll(async () => menuPainted(page)).toBe(false);
-
-  await scroller.evaluate(el => {
-    el.scrollTop = el.scrollHeight;
-  });
-  await expect.poll(async () => menuPainted(page)).toBe(true);
-});
-
-test('a keyboard open on the bottom edge paints and adds no scrollable overflow', async ({
-  page,
-}) => {
-  const {trigger, scroller} = await mount(page);
-  const scrollHeight = await scroller.evaluate(el => el.scrollHeight);
-  // Several browsers report Shift+F10 as a contextmenu at (0, 0), which
-  // anchors the menu to the trigger's bottom edge, here the box's own edge.
-  await trigger.evaluate(el => {
-    el.dispatchEvent(
-      new MouseEvent('contextmenu', {
-        bubbles: true,
-        cancelable: true,
-        clientX: 0,
-        clientY: 0,
-        detail: 0,
-      }),
-    );
-  });
-  await expect(page.getByRole('menu')).toBeVisible();
-  const anchor = await page
-    .locator('span[aria-hidden="true"][style*="anchor-name"]')
-    .boundingBox();
-  const area = await trigger.boundingBox();
-  expect((anchor?.y ?? 0) + (anchor?.height ?? 0)).toBeCloseTo(
-    (area?.y ?? 0) + (area?.height ?? 0),
-    0,
-  );
-  await expect.poll(async () => menuPainted(page)).toBe(true);
-  expect(await scroller.evaluate(el => el.scrollHeight)).toBe(scrollHeight);
-});

package/src/ContextMenu/__tests__/ContextMenuLongPress.a11y.chromium.spec.ts

@@ -1,117 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ContextMenuLongPress.a11y.chromium.spec.ts
- * @input The `Core/ContextMenu` Default story in a built Storybook and CDP
- *   touch input.
- * @output Real-engine proof that the long press that opens a context menu
- *   does not close it as the finger lifts, and that a tap outside still does.
- * @position Run with `pnpm test:a11y-contract`; jsdom cannot produce the
- *   compatibility mouse events a real browser sends after a touch.
- */
-
-import {expect, test, type CDPSession, type Page} from '@playwright/test';
-import {
-  DEFAULT_STORYBOOK_DIR,
-  serveStorybook,
-  type StaticServer,
-} from '@astryxdesign/a11y-spec/storybook';
-
-let storybook: StaticServer;
-
-test.beforeAll(async () => {
-  storybook = await serveStorybook(
-    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
-  );
-});
-
-test.afterAll(async () => {
-  await storybook?.close();
-});
-
-const STORY = 'core-contextmenu--default';
-
-async function touchCdp(page: Page): Promise<CDPSession> {
-  const cdp = await page.context().newCDPSession(page);
-  await cdp.send('Emulation.setTouchEmulationEnabled', {
-    enabled: true,
-    maxTouchPoints: 1,
-  });
-  return cdp;
-}
-
-async function triggerCenter(page: Page): Promise<{x: number; y: number}> {
-  const box = await page.getByText('Right-click this area').boundingBox();
-  if (box == null) {
-    throw new Error('the trigger area has no rendered bounds');
-  }
-  return {x: box.x + box.width / 2, y: box.y + box.height / 2};
-}
-
-/**
- * Resolves once the browser has delivered the `click` that follows a touch
- * (the last of its compatibility mouse events) and two frames have run, so
- * anything that event closes has closed.
- */
-async function armCompatClick(page: Page): Promise<void> {
-  await page.evaluate(() => {
-    const w = window as unknown as {__compatClick?: Promise<void>};
-    w.__compatClick = new Promise(resolve => {
-      document.addEventListener(
-        'click',
-        () =>
-          requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
-        {once: true, capture: true},
-      );
-    });
-  });
-}
-
-async function compatClickDelivered(page: Page): Promise<void> {
-  await page.evaluate(
-    async () =>
-      (window as unknown as {__compatClick?: Promise<void>}).__compatClick,
-  );
-}
-
-test('the long press that opens the menu leaves it open as the finger lifts', async ({
-  page,
-}) => {
-  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
-  const cdp = await touchCdp(page);
-  const center = await triggerCenter(page);
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [{x: center.x, y: center.y, id: 1}],
-  });
-  const menu = page.getByRole('menu');
-  await expect(menu).toBeVisible({timeout: 2000});
-  await armCompatClick(page);
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchEnd',
-    touchPoints: [],
-  });
-  await compatClickDelivered(page);
-  await expect(menu).toBeVisible();
-
-  // A tap outside still closes it.
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [{x: 5, y: 5, id: 2}],
-  });
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchEnd',
-    touchPoints: [],
-  });
-  await expect(menu).toBeHidden();
-});
-
-test('a mouse press outside closes a right-click menu', async ({page}) => {
-  await page.goto(`${storybook.origin}/iframe.html?id=${STORY}&viewMode=story`);
-  const center = await triggerCenter(page);
-  await page.mouse.click(center.x, center.y, {button: 'right'});
-  const menu = page.getByRole('menu');
-  await expect(menu).toBeVisible();
-  await page.mouse.click(5, 5);
-  await expect(menu).toBeHidden();
-});

package/src/DateInput/DateInput.fr10.test.tsx

@@ -1,283 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file DateInput.fr10.test.tsx
- * @input Uses vitest, Testing Library, DateInput, FormLayout, and the input-family FR10 test helpers
- * @output Tests that every DateInput surface takes no root styling and routes
- *   base props, container*, and control* to their FR10 targets
- * @position Colocated test for family:input-fields FR10
- */
-
-import {
-  describe,
-  it,
-  expect,
-  vi,
-  beforeAll,
-  beforeEach,
-  afterEach,
-} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
-import {DateInput, type DateInputProps} from './DateInput';
-import {FormLayout} from '../FormLayout';
-import {expectFieldInputProps} from '../Field/fieldInputFamily.testing';
-import {describeFieldInputParts} from '../Field/fieldInputFamily.render-testing';
-
-const SURFACES = [
-  ['pointer', 'popover', 'input[role="combobox"]'],
-  ['native', 'native', 'input[type="date"]'],
-  ['touch', 'bottom-sheet', 'input[role="combobox"]'],
-] as const;
-
-// The touch surface's month scroller measures itself and its sheet is a
-// modal <dialog>; jsdom implements neither.
-class MockResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-beforeAll(() => {
-  Element.prototype.scrollTo = vi.fn();
-  HTMLDialogElement.prototype.showModal = vi.fn(function (
-    this: HTMLDialogElement,
-  ) {
-    this.open = true;
-  });
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.open = false;
-  });
-});
-
-beforeEach(() => {
-  vi.stubGlobal('ResizeObserver', MockResizeObserver);
-});
-
-afterEach(() => {
-  vi.unstubAllGlobals();
-});
-
-function control(selector: string): HTMLElement {
-  const el = document.querySelector<HTMLElement>(selector);
-  if (el == null) {
-    throw new Error(`no control matching ${selector}`);
-  }
-  return el;
-}
-
-describe('DateInput FR10 styling contract', () => {
-  it('has no root styling props and has the container* and control* parts', () => {
-    expectFieldInputProps<DateInputProps>();
-  });
-
-  it('rejects root xstyle, className, and style at compile time', () => {
-    const typeOnly = () => (
-      <>
-        {/* Control: the same element without root styling compiles. */}
-        <DateInput label="L" controlClassName="x" containerClassName="y" />
-        {/* @ts-expect-error -- root className is not a DateInput prop (FR10) */}
-        <DateInput label="L" className="x" />
-        {/* @ts-expect-error -- root style is not a DateInput prop (FR10) */}
-        <DateInput label="L" style={{margin: 1}} />
-        {/* @ts-expect-error -- root xstyle is not a DateInput prop (FR10) */}
-        <DateInput label="L" xstyle={{}} />
-      </>
-    );
-    void typeOnly;
-  });
-});
-
-for (const [surface, presentation, selector] of SURFACES) {
-  describe(`${surface} surface`, () => {
-    describeFieldInputParts('DateInput', {
-      renderMember: props => (
-        <DateInput label="Due" presentation={presentation} {...props} />
-      ),
-      getControl: () => control(selector),
-      inGroup: true,
-    });
-  });
-
-  describe(`DateInput (${surface}) FR10 details`, () => {
-    it('names the control from its label when the caller sets id', () => {
-      render(<DateInput label="Due" presentation={presentation} id="due" />);
-      expect(control(selector).id).toBe('due');
-      expect(document.querySelector('label[for="due"]')).not.toBeNull();
-    });
-
-    it("adds a caller's aria-describedby to the component's own", () => {
-      render(
-        <DateInput
-          label="Due"
-          description="Pick a weekday"
-          presentation={presentation}
-          aria-describedby="caller-desc"
-        />,
-      );
-      const ids = control(selector)
-        .getAttribute('aria-describedby')
-        ?.split(' ');
-      expect(ids).toContain('caller-desc');
-      expect(ids?.length).toBeGreaterThan(1);
-    });
-
-    it('keeps component-only props off the control', () => {
-      const error = vi.spyOn(console, 'error').mockImplementation(() => {});
-      render(
-        <DateInput
-          label="Due"
-          presentation={presentation}
-          min="2026-01-01"
-          max="2026-12-31"
-          dateConstraints={[]}
-          numberOfMonths={2}
-          weekStartsOn={1}
-          format="date"
-          hasClear
-          size="sm"
-          statusVariant="detached"
-          labelTooltip="tip"
-          placeholder="Pick"
-          isOptional
-          width={240}
-        />,
-      );
-      const attrs = [...control(selector).attributes].map(a => a.name);
-      for (const prop of [
-        'increment',
-        'hasautofocus',
-        'timeincrement',
-        'timeoptioninterval',
-        'numberofmonths',
-        'weekstartson',
-        'dateconstraints',
-        'hasclear',
-        'hasseconds',
-        'hourformat',
-        'statusvariant',
-        'labeltooltip',
-        'format',
-        'width',
-        'size',
-      ]) {
-        expect(attrs).not.toContain(prop);
-      }
-      expect(
-        error.mock.calls.filter(call =>
-          /React does not recognize|Invalid value for prop|non-boolean attribute/.test(
-            String(call[0]),
-          ),
-        ),
-      ).toEqual([]);
-      error.mockRestore();
-    });
-
-    it("names the control by its label and then a caller's aria-labelledby", () => {
-      render(
-        <>
-          <span id="caller-name">Billing</span>
-          <DateInput
-            label="Due"
-            presentation={presentation}
-            aria-labelledby="caller-name"
-          />
-        </>,
-      );
-      const ids = control(selector).getAttribute('aria-labelledby')?.split(' ');
-      expect(ids?.at(-1)).toBe('caller-name');
-      const own = document.getElementById(ids?.[0] ?? '');
-      expect(own?.tagName).toBe('LABEL');
-      expect(own?.textContent).toContain('Due');
-    });
-
-    it('keeps control* on the control box in a horizontal-labels FormLayout', () => {
-      vi.spyOn(console, 'warn').mockImplementation(() => {});
-      const {container} = render(
-        <FormLayout direction="horizontal-labels">
-          <DateInput
-            label="Due"
-            presentation={presentation}
-            controlClassName="fr10-control"
-          />
-        </FormLayout>,
-      );
-      const box = container.querySelector('.fr10-control');
-      expect(box).not.toBeNull();
-      expect(box).toContainElement(control(selector));
-      expect(box).not.toBe(control(selector));
-      vi.restoreAllMocks();
-    });
-  });
-}
-
-describe('DateInput FR10 handler composition', () => {
-  it('runs a caller onClick after the pointer field opens its calendar', () => {
-    const onClick = vi.fn();
-    render(<DateInput label="Due" presentation="popover" onClick={onClick} />);
-    const input = screen.getByRole('combobox', {name: 'Due'});
-    fireEvent.click(input);
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(input).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('runs a caller onKeyDown for keys the field does not consume', () => {
-    const onKeyDown = vi.fn();
-    render(
-      <DateInput label="Due" presentation="popover" onKeyDown={onKeyDown} />,
-    );
-    fireEvent.keyDown(screen.getByRole('combobox', {name: 'Due'}), {key: 'a'});
-    expect(onKeyDown).toHaveBeenCalledOnce();
-  });
-
-  it('runs a caller onClick after the touch field opens its sheet', () => {
-    const onClick = vi.fn();
-    render(
-      <DateInput label="Due" presentation="bottom-sheet" onClick={onClick} />,
-    );
-    const input = screen.getByRole('combobox', {name: 'Due'});
-    fireEvent.click(input);
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(input).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('still hands a caller onKeyDown the keys the field consumes, after the field', () => {
-    // The caller's handler used to sit on the wrapper and receive every key by
-    // bubbling, after the input's own handler; that order is kept.
-    const seen: {key: string; defaultPrevented: boolean}[] = [];
-    render(
-      <DateInput
-        label="Due"
-        presentation="popover"
-        onKeyDown={event =>
-          seen.push({key: event.key, defaultPrevented: event.defaultPrevented})
-        }
-      />,
-    );
-    fireEvent.keyDown(screen.getByRole('combobox', {name: 'Due'}), {
-      key: 'Enter',
-    });
-    expect(seen).toEqual([{key: 'Enter', defaultPrevented: true}]);
-  });
-
-  it('does not let a caller onClick cancel opening the calendar', () => {
-    render(
-      <DateInput
-        label="Due"
-        presentation="popover"
-        onClick={event => event.preventDefault()}
-      />,
-    );
-    const input = screen.getByRole('combobox', {name: 'Due'});
-    fireEvent.click(input);
-    expect(input).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('runs a caller onBlur on the native field', () => {
-    const onBlur = vi.fn();
-    render(<DateInput label="Due" presentation="native" onBlur={onBlur} />);
-    const input = control('input[type="date"]');
-    fireEvent.focus(input);
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalledOnce();
-  });
-});