@astryxdesign/core 0.7.5 → 0.7.6-canary.0bd3b37

package/src/BottomSheet/__tests__/BottomSheetPinchZoom.a11y.chromium.spec.ts

@@ -1,247 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file BottomSheetPinchZoom.a11y.chromium.spec.ts
- * @input Built BottomSheet stories and real Chromium touch input (CDP)
- * @output Browser evidence that a two-finger pinch on an open sheet zooms the
- *   page and leaves the sheet where it rests, while one-finger drag and scroll
- *   keep working (WCAG 1.4.4)
- * @position Chromium proof for the sheet's touch-action and pinch hand-off
- */
-
-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();
-});
-
-// A phone: the viewport meta applies and the page can pinch-zoom.
-test.use({
-  hasTouch: true,
-  isMobile: true,
-  viewport: {width: 390, height: 844},
-  deviceScaleFactor: 3,
-});
-
-const sleep = async (ms: number) =>
-  new Promise(resolve => setTimeout(resolve, ms));
-
-async function openSheet(page: Page) {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-bottomsheet--text-only&viewMode=story`,
-  );
-  const dialog = page.getByRole('dialog', {name: 'Reading details'});
-  await expect(dialog).toBeVisible();
-  const sheet = dialog.locator('.astryx-bottom-sheet').first();
-  await expect(sheet).toBeVisible();
-  await page.waitForTimeout(800); // the entrance
-  const box = await sheet.boundingBox();
-  if (box == null) {
-    throw new Error('no sheet box');
-  }
-  expect(await page.evaluate(() => window.visualViewport?.scale)).toBe(1);
-  return {dialog, sheet, box};
-}
-
-type Point = {x: number; y: number};
-
-// Two fingers land one after the other and spread apart, as a person pinches.
-// The spread is wide enough to clear the browser's minimum pinch span.
-async function pinch(cdp: CDPSession, first: Point, second: Point) {
-  const steps = 12;
-  const spread = 3;
-  const mid = {x: (first.x + second.x) / 2, y: (first.y + second.y) / 2};
-  const at = (p: Point, k: number, id: number) => ({
-    x: mid.x + (p.x - mid.x) * k,
-    y: mid.y + (p.y - mid.y) * k,
-    id,
-  });
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [at(first, 1, 1)],
-  });
-  await sleep(30);
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [at(first, 1, 1), at(second, 1, 2)],
-  });
-  for (let i = 1; i <= steps; i++) {
-    await sleep(16);
-    const k = 1 + ((spread - 1) * i) / steps;
-    await cdp.send('Input.dispatchTouchEvent', {
-      type: 'touchMove',
-      touchPoints: [at(first, k, 1), at(second, k, 2)],
-    });
-  }
-  await sleep(16);
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchEnd',
-    touchPoints: [],
-  });
-  await sleep(600);
-}
-
-// Record the furthest the sheet travelled while the fingers were down.
-async function trackSheetTravel(page: Page) {
-  await page.evaluate(() => {
-    const sheet = document.querySelector('.astryx-bottom-sheet')!;
-    const top = () => sheet.getBoundingClientRect().top;
-    const start = top();
-    const w = window as unknown as {__travel: number};
-    w.__travel = 0;
-    const sample = () => {
-      w.__travel = Math.max(w.__travel, Math.abs(top() - start));
-      requestAnimationFrame(sample);
-    };
-    requestAnimationFrame(sample);
-  });
-}
-
-// `maxTravel` is how far the sheet may move while the fingers are down. A pinch
-// is not a drag, so it is 2px except in one order: a finger that lands off the
-// sheet is invisible to the sheet until the handle finger's next touch event,
-// and the browser delivers that finger's pointermove first. That one input
-// sample can move the sheet before it yields and returns to its detent.
-const PINCHES: {
-  name: string;
-  fingers: (box: Box) => [Point, Point];
-  maxTravel?: number;
-}[] = [
-  {
-    name: 'across the handle and the body',
-    fingers: box => [
-      {x: box.x + box.width / 2, y: box.y + 12},
-      {x: box.x + box.width / 2 + 10, y: box.y + 90},
-    ],
-  },
-  {
-    name: 'at the top of the body, spreading vertically',
-    fingers: box => [
-      {x: box.x + box.width / 2, y: box.y + 160},
-      {x: box.x + box.width / 2 + 10, y: box.y + 220},
-    ],
-  },
-  {
-    name: 'across the body and the handle, body finger first',
-    fingers: box => [
-      {x: box.x + box.width / 2 + 10, y: box.y + 90},
-      {x: box.x + box.width / 2, y: box.y + 12},
-    ],
-  },
-  {
-    name: 'at the top of the body, lower finger first',
-    fingers: box => [
-      {x: box.x + box.width / 2 + 10, y: box.y + 220},
-      {x: box.x + box.width / 2, y: box.y + 160},
-    ],
-  },
-  {
-    name: 'from the handle and off the sheet above it',
-    fingers: box => [
-      {x: box.x + box.width / 2, y: box.y + 12},
-      {x: box.x + box.width / 2 + 10, y: box.y - 70},
-    ],
-    maxTravel: 16,
-  },
-  {
-    name: 'in the body, spreading sideways',
-    fingers: box => [
-      {x: box.x + box.width / 2 - 30, y: box.y + 280},
-      {x: box.x + box.width / 2 + 30, y: box.y + 280},
-    ],
-  },
-];
-type Box = {x: number; y: number; width: number; height: number};
-
-for (const {name, fingers, maxTravel = 2} of PINCHES) {
-  test(`a pinch ${name} zooms the page and leaves the sheet at rest`, async ({
-    page,
-  }) => {
-    const {dialog, sheet, box} = await openSheet(page);
-    await trackSheetTravel(page);
-    const cdp = await page.context().newCDPSession(page);
-    const [first, second] = fingers(box);
-    await pinch(cdp, first, second);
-
-    expect(
-      await page.evaluate(() => window.visualViewport?.scale ?? 1),
-    ).toBeGreaterThan(1.2);
-    // A pinch is not a drag: the sheet holds its detent.
-    expect(
-      await page.evaluate(
-        () => (window as unknown as {__travel: number}).__travel,
-      ),
-    ).toBeLessThan(maxTravel);
-    await expect(dialog).toBeVisible();
-    // Layout-viewport coordinates: the zoom itself does not move them.
-    expect(
-      await sheet.evaluate(el => el.getBoundingClientRect().top),
-    ).toBeCloseTo(box.y, 0);
-  });
-}
-
-test('one finger still drags the handle and scrolls the body, without zooming', async ({
-  page,
-}) => {
-  const {sheet, box} = await openSheet(page);
-  const cdp = await page.context().newCDPSession(page);
-  const x = box.x + box.width / 2;
-
-  // Handle: the sheet follows the finger.
-  const handleY = box.y + 12;
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [{x, y: handleY}],
-  });
-  for (let i = 1; i <= 10; i++) {
-    await sleep(16);
-    await cdp.send('Input.dispatchTouchEvent', {
-      type: 'touchMove',
-      touchPoints: [{x, y: handleY + i * 12}],
-    });
-  }
-  await sleep(50);
-  const dragged = await sheet.boundingBox();
-  expect((dragged?.y ?? box.y) - box.y).toBeGreaterThan(80);
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchCancel',
-    touchPoints: [],
-  });
-
-  // Body, on a fresh sheet (that drag may have thrown the first one away): a
-  // swipe up scrolls the content.
-  await openSheet(page);
-  const body = sheet.locator('[role="group"]').first();
-  const before = await body.evaluate(el => el.scrollTop);
-  const startY = box.y + box.height - 100;
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchStart',
-    touchPoints: [{x, y: startY}],
-  });
-  for (let i = 1; i <= 10; i++) {
-    await sleep(16);
-    await cdp.send('Input.dispatchTouchEvent', {
-      type: 'touchMove',
-      touchPoints: [{x, y: startY - i * 25}],
-    });
-  }
-  await cdp.send('Input.dispatchTouchEvent', {
-    type: 'touchEnd',
-    touchPoints: [],
-  });
-  await page.waitForTimeout(600);
-  expect(await body.evaluate(el => el.scrollTop)).toBeGreaterThan(before + 100);
-  expect(await page.evaluate(() => window.visualViewport?.scale)).toBe(1);
-});

package/src/BottomSheet/__tests__/BottomSheetToastOutlet.a11y.chromium.spec.ts

@@ -1,83 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y release-only
-
-/**
- * @file BottomSheetToastOutlet.a11y.chromium.spec.ts
- * @input The built Core/Toast AppToastOverBottomSheet story; real Chromium hit
- *   testing and mouse input
- * @output Browser evidence that a toast fired from an open BottomSheet, on its
- *   own or over a Dialog, is hit-testable above the sheet and takes a click
- * @position Chromium proof for BottomSheet's modal outlet
- *   (Layer/modalOutlet.ts). jsdom has no top layer and no modal inertness, so
- *   Toast/ToastViewport.modalHost.test.tsx can only check where the viewport
- *   lives.
- */
-
-import {expect, test} 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();
-});
-
-// Phone width: where an app presents its dialogs as bottom sheets.
-test.use({viewport: {width: 390, height: 844}});
-
-const SCENARIOS = [
-  {name: 'on its own', opens: ['Open sheet']},
-  {name: 'over a Dialog', opens: ['Open dialog', 'Open sheet from the dialog']},
-];
-
-for (const {name, opens} of SCENARIOS) {
-  test(`a toast action above a sheet opened ${name} takes the click`, async ({
-    page,
-  }) => {
-    await page.goto(
-      `${storybook.origin}/iframe.html?id=core-toast--app-toast-over-bottom-sheet&viewMode=story`,
-    );
-    await holdMotionStill(page);
-    for (const label of opens) {
-      await page.getByRole('button', {name: label, exact: true}).click();
-    }
-    const sheet = page.getByRole('dialog', {name: 'Item actions'});
-    await expect(sheet).toBeVisible();
-    await sheet.getByRole('button', {name: 'Archive'}).click();
-    await expect(sheet.getByText('The item is archived.')).toBeVisible();
-
-    const undo = page.locator('[popover] button', {hasText: 'Undo'});
-    await expect(undo).toBeVisible();
-    const box = await undo.boundingBox();
-    if (box == null) {
-      throw new Error('the Undo button has no box');
-    }
-    const x = box.x + box.width / 2;
-    const y = box.y + box.height / 2;
-
-    // Hit testing skips inert content and follows top-layer order: a toast
-    // left outside the sheet's modal, or under it, loses this point to the
-    // sheet.
-    const hit = await page.evaluate(
-      ([px, py]) =>
-        document.elementFromPoint(px, py)?.closest('button')?.textContent ??
-        null,
-      [x, y],
-    );
-    expect(hit).toBe('Undo');
-
-    await page.mouse.click(x, y);
-    await expect(
-      sheet.getByText('The item is back in your inbox.'),
-    ).toBeVisible();
-  });
-}

package/src/BottomSheet/snapOffsets.test.ts

@@ -1,254 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file snapOffsets.test.ts
- * @input Uses vitest, snapOffsets pure helpers
- * @output Unit tests for the snap-point -> translateY offset geometry
- * @position Testing; validates snapOffsets.ts (no DOM needed)
- *
- * SYNC: When snapOffsets.ts changes, update these tests to match.
- */
-
-import {describe, it, expect} from 'vitest';
-import {
-  computeDetentOffsets,
-  isValidSnapPoint,
-  nearestOffset,
-  peekOffsetFor,
-  resolveSettleOffset,
-  resolveSnapPoints,
-  scrimOpacityForOffset,
-  DETENT_DEDUP_PX,
-} from './snapOffsets';
-
-describe('resolveSnapPoints', () => {
-  it('reads a bare number as a fraction of the viewport', () => {
-    expect(resolveSnapPoints([0.5, 0.92], 800)).toEqual([400, 736]);
-  });
-
-  it('reads a percentage as the same fraction', () => {
-    expect(resolveSnapPoints(['50%', '92%'], 800)).toEqual([400, 736]);
-  });
-
-  it('reads a px length as an absolute height', () => {
-    expect(resolveSnapPoints(['320px'], 800)).toEqual([320]);
-  });
-
-  it('keeps the caller order, mixing forms', () => {
-    expect(resolveSnapPoints(['120px', 0.5, '90%'], 800)).toEqual([
-      120, 400, 720,
-    ]);
-  });
-
-  it('accepts fractional and unit-cased lengths, and surrounding space', () => {
-    expect(resolveSnapPoints(['12.5%', '0.5PX', ' 80px '], 800)).toEqual([
-      100, 0.5, 80,
-    ]);
-  });
-
-  it('drops numbers outside the (0, 1] fraction range', () => {
-    // 200 is the px mistake — a bare number is never a length.
-    expect(resolveSnapPoints([0, 0.5, 1, 1.2, -0.3, 200], 1000)).toEqual([
-      500, 1000,
-    ]);
-  });
-
-  it('drops lengths it cannot resolve by arithmetic on the viewport', () => {
-    expect(
-      resolveSnapPoints(
-        ['50', '30rem', '50vh', 'calc(50% - 20px)', '-10px', '', '0px'],
-        800,
-      ),
-    ).toEqual([]);
-  });
-});
-
-describe('isValidSnapPoint', () => {
-  it('accepts the three supported forms', () => {
-    expect(isValidSnapPoint(0.5)).toBe(true);
-    expect(isValidSnapPoint(1)).toBe(true);
-    expect(isValidSnapPoint('50%')).toBe(true);
-    expect(isValidSnapPoint('320px')).toBe(true);
-  });
-
-  it('rejects what resolveSnapPoints would silently drop', () => {
-    expect(isValidSnapPoint(200)).toBe(false);
-    expect(isValidSnapPoint(0)).toBe(false);
-    expect(isValidSnapPoint('50')).toBe(false);
-    expect(isValidSnapPoint('50vh')).toBe(false);
-    expect(isValidSnapPoint('calc(50% - 20px)')).toBe(false);
-  });
-});
-
-describe('computeDetentOffsets', () => {
-  it('always includes fully-open (0) first, ascending', () => {
-    // sheet 800; detent visible heights 400, 640 -> offsets 400, 160 -> sorted
-    expect(computeDetentOffsets(800, [400, 640])).toEqual([0, 160, 400]);
-  });
-
-  it('drops detents at or taller than the sheet (cannot translate up)', () => {
-    // 800 and 900 are >= sheet 800 -> dropped; only 500 (offset 300) remains
-    expect(computeDetentOffsets(800, [500, 800, 900])).toEqual([0, 300]);
-  });
-
-  it('de-dupes near-equal detents, keeping the taller (smaller offset)', () => {
-    // sheet 800; heights 760 (offset 40) and 400 (offset 400). 40 is within
-    // DETENT_DEDUP_PX of the fully-open 0 -> collapses to just [0, 400].
-    expect(computeDetentOffsets(800, [760, 400])).toEqual([0, 400]);
-  });
-
-  it('keeps detents that are farther apart than the dedup threshold', () => {
-    // offsets 0, 100, 400 with default 48px dedup -> all kept
-    expect(computeDetentOffsets(800, [700, 400])).toEqual([0, 100, 400]);
-  });
-
-  it('respects a custom dedup threshold', () => {
-    // offsets 0, 100, 400; dedup 150 -> 100 collapses into 0
-    expect(computeDetentOffsets(800, [700, 400], 150)).toEqual([0, 400]);
-  });
-
-  it('a single-height sheet has just the fully-open detent', () => {
-    expect(computeDetentOffsets(600, [])).toEqual([0]);
-  });
-});
-
-describe('nearestOffset', () => {
-  it('picks the closest offset', () => {
-    expect(nearestOffset(180, [0, 200, 400])).toBe(200);
-    expect(nearestOffset(90, [0, 200, 400])).toBe(0);
-  });
-});
-
-describe('resolveSettleOffset', () => {
-  const offsets = [0, 200, 400]; // full, mid, short
-
-  it('a down-drag never settles above the starting detent', () => {
-    // start at mid (200), drag down to ~240 -> nearest at/below is 200 (mid),
-    // never back up to 0.
-    expect(resolveSettleOffset(240, offsets, 1, 200)).toBe(200);
-  });
-
-  it('a down-drag past the midpoint moves to the next lower detent', () => {
-    // start mid (200), drag to 320 -> nearest at/below is 400 (short)
-    expect(resolveSettleOffset(320, offsets, 1, 200)).toBe(400);
-  });
-
-  it('an up-drag never settles below the starting detent', () => {
-    // start mid (200), drag up to ~160 -> nearest at/above is 0 or 200; 160 is
-    // closer to 200, so it holds mid rather than dropping to short.
-    expect(resolveSettleOffset(160, offsets, -1, 200)).toBe(200);
-  });
-
-  it('an up-drag past the midpoint expands to the next higher detent', () => {
-    // start mid (200), drag up to 80 -> nearest at/above is 0 (full)
-    expect(resolveSettleOffset(80, offsets, -1, 200)).toBe(0);
-  });
-
-  it('with no direction, picks the plain nearest', () => {
-    expect(resolveSettleOffset(180, offsets, 0, 200)).toBe(200);
-  });
-});
-
-describe('peekOffsetFor', () => {
-  it('is the shortest stop when that stop is a sliver', () => {
-    // sheet 800; stops at 800, 400 and 100 visible px. The 100px stop is an
-    // eighth of the sheet, well inside the quarter that makes a peek.
-    expect(peekOffsetFor([0, 400, 700], 800)).toBe(700);
-  });
-
-  it('has no peek when the shortest stop is a working height', () => {
-    // A half-height stop lays its content out and keeps a full scrim; it is
-    // the sheet the caller asked for, not a glance at one.
-    expect(peekOffsetFor([0, 400], 800)).toBeNull();
-  });
-
-  it('has no peek when the sheet has no collapsed stop', () => {
-    expect(peekOffsetFor([0], 800)).toBeNull();
-  });
-
-  it('takes the quarter mark itself as a peek', () => {
-    expect(peekOffsetFor([0, 600], 800)).toBe(600);
-  });
-
-  it('has no peek without a measured sheet', () => {
-    expect(peekOffsetFor([0, 600], 0)).toBeNull();
-  });
-});
-
-describe('scrimOpacityForOffset', () => {
-  describe('with a peek detent', () => {
-    const offsets = [0, 100, 200]; // full, mid, peek
-    const peekOffset = 200;
-    const dismissOffset = 280;
-
-    it('is full at or above the mid detent', () => {
-      expect(scrimOpacityForOffset(0, offsets, dismissOffset, peekOffset)).toBe(
-        1,
-      );
-      expect(
-        scrimOpacityForOffset(100, offsets, dismissOffset, peekOffset),
-      ).toBe(1);
-      expect(
-        scrimOpacityForOffset(60, offsets, dismissOffset, peekOffset),
-      ).toBe(1);
-    });
-
-    it('fades linearly from the mid detent toward the peek floor', () => {
-      // Halfway from mid (100) to peek (200), opacity is halfway from 1 to the
-      // 0.3 floor => 0.65.
-      expect(
-        scrimOpacityForOffset(150, offsets, dismissOffset, peekOffset),
-      ).toBeCloseTo(0.65);
-    });
-
-    it('thins to the peek floor at or below the peek detent (still modal)', () => {
-      expect(
-        scrimOpacityForOffset(200, offsets, dismissOffset, peekOffset),
-      ).toBeCloseTo(0.3);
-      expect(
-        scrimOpacityForOffset(240, offsets, dismissOffset, peekOffset),
-      ).toBeCloseTo(0.3);
-    });
-  });
-
-  describe('with collapsed stops but no peek among them', () => {
-    // The shortest stop is a working height, so the scrim is full there and
-    // only fades once the sheet is being dragged out below it.
-    const offsets = [0, 100];
-    const dismissOffset = 160;
-
-    it('stays full at every stop, including the shortest', () => {
-      expect(scrimOpacityForOffset(0, offsets, dismissOffset, null)).toBe(1);
-      expect(scrimOpacityForOffset(100, offsets, dismissOffset, null)).toBe(1);
-    });
-
-    it('fades only across the dismiss overshoot below the shortest stop', () => {
-      expect(
-        scrimOpacityForOffset(130, offsets, dismissOffset, null),
-      ).toBeCloseTo(0.5);
-      expect(scrimOpacityForOffset(160, offsets, dismissOffset, null)).toBe(0);
-    });
-  });
-
-  describe('with a single detent (no peek)', () => {
-    const offsets = [0];
-    const dismissOffset = 160;
-
-    it('stays full until the drag begins collapsing', () => {
-      expect(scrimOpacityForOffset(0, offsets, dismissOffset, null)).toBe(1);
-    });
-
-    it('fades across the dismiss overshoot toward the threshold', () => {
-      expect(
-        scrimOpacityForOffset(80, offsets, dismissOffset, null),
-      ).toBeCloseTo(0.5);
-      expect(scrimOpacityForOffset(160, offsets, dismissOffset, null)).toBe(0);
-    });
-  });
-});
-
-describe('DETENT_DEDUP_PX', () => {
-  it('is a sane positive threshold', () => {
-    expect(DETENT_DEDUP_PX).toBeGreaterThan(0);
-  });
-});