@astryxdesign/core 0.7.5 → 0.7.6-canary.0135af4

package/src/hooks/scrollKeyboardDelegation.test.ts

@@ -1,155 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file scrollKeyboardDelegation.test.ts
- * @input Private delegation behavior, explicit visibility, and focus event sequences
- * @output Eligibility, keyboard intent, observer cost, and cleanup regressions
- * @position DOM-level policy proof; browser tests own native Tab and scroll evidence
- */
-
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {attachScrollKeyboardDelegation} from './scrollKeyboardDelegation';
-import {FOCUSABLE_SELECTOR} from './focusableSelector';
-
-let detach: (() => void) | undefined;
-let before: HTMLButtonElement;
-let viewport: HTMLDivElement;
-let content: HTMLDivElement;
-
-beforeEach(() => {
-  vi.spyOn(HTMLElement.prototype, 'getClientRects').mockReturnValue([
-    new DOMRect(0, 0, 20, 20),
-  ] as unknown as DOMRectList);
-  before = document.createElement('button');
-  viewport = document.createElement('div');
-  viewport.tabIndex = 0;
-  content = document.createElement('div');
-  viewport.append(content);
-  // The pinned jsdom selector engine orders this comma-separated selector by
-  // selector group. Browsers return document order; normalize only the emulator.
-  const query = content.querySelectorAll.bind(content);
-  vi.spyOn(content, 'querySelectorAll').mockImplementation(selector => {
-    const result = query(selector);
-    return selector === FOCUSABLE_SELECTOR
-      ? ([...result].sort((a, b) =>
-          a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
-            ? -1
-            : 1,
-        ) as unknown as NodeListOf<Element>)
-      : result;
-  });
-  document.body.append(before, viewport);
-  detach = attachScrollKeyboardDelegation(viewport, content);
-});
-
-afterEach(() => {
-  detach?.();
-  before.remove();
-  viewport.remove();
-  vi.restoreAllMocks();
-});
-
-// jsdom supplies no Tab default action. Complete dispatch before focusing to
-// model the browser's event boundary; real traversal is tested in both engines.
-function enter() {
-  before.focus();
-  before.dispatchEvent(
-    new KeyboardEvent('keydown', {key: 'Tab', bubbles: true}),
-  );
-  viewport.focus();
-}
-
-describe('scroll keyboard delegation', () => {
-  it('inspects content only on keyboard entry and leaves mutation observation untouched', () => {
-    content.innerHTML = '<button>Action</button>';
-    const scan = vi.spyOn(content, 'querySelectorAll');
-    const observe = vi.spyOn(MutationObserver.prototype, 'observe');
-    viewport.focus();
-    content.firstElementChild?.setAttribute('data-state', 'changed');
-    viewport.dispatchEvent(new Event('scroll'));
-    expect(scan).not.toHaveBeenCalled();
-    expect(observe).not.toHaveBeenCalled();
-    enter();
-    expect(scan).toHaveBeenCalledTimes(1);
-    expect(document.activeElement).toBe(content.firstElementChild);
-    expect(viewport.tabIndex).toBe(0);
-  });
-
-  it.each([
-    '<input aria-label="Input"><button>Later action</button>',
-    '<button role="radio">Radio</button><button>Later action</button>',
-    '<div role="toolbar"><button>Toolbar action</button></div>',
-    '<div contenteditable="true"><button>Editor action</button></div>',
-    '<button aria-haspopup="menu">Open menu</button>',
-    '<button aria-disabled="true">Unavailable</button>',
-    '<button aria-hidden="true">Hidden from AT</button><button>Later action</button>',
-    '<button>Zero</button><button tabindex="1">Earlier positive stop</button>',
-    '<div tabindex="0">Custom target</div><button>Later action</button>',
-  ])('does not skip an excluded first target: %s', markup => {
-    content.innerHTML = markup;
-    enter();
-    expect(document.activeElement).toBe(viewport);
-  });
-
-  it.each(['disabled', 'hidden', 'tabindex="-2"', 'style="visibility:hidden"'])(
-    'skips a nonsequential target (%s)',
-    attributes => {
-      content.innerHTML = `<button ${attributes}>Skipped</button><button>Action</button>`;
-      enter();
-      expect(document.activeElement).toBe(content.lastElementChild);
-    },
-  );
-
-  it('rechecks ancestor eligibility on the next entry', () => {
-    content.innerHTML = '<div><button>Action</button></div>';
-    enter();
-    expect(document.activeElement).toBe(content.querySelector('button'));
-    content.firstElementChild?.setAttribute('role', 'menu');
-    enter();
-    expect(document.activeElement).toBe(viewport);
-  });
-
-  it('retains programmatic focus during a Tab handler even without preventDefault', () => {
-    content.innerHTML = '<button>Action</button>';
-    before.addEventListener('keydown', () => viewport.focus(), {once: true});
-    before.focus();
-    before.dispatchEvent(
-      new KeyboardEvent('keydown', {key: 'Tab', bubbles: true}),
-    );
-    expect(document.activeElement).toBe(viewport);
-  });
-
-  it('does not retain canceled keyboard intent', () => {
-    content.innerHTML = '<button>Action</button>';
-    before.addEventListener('keydown', event => event.preventDefault(), {
-      once: true,
-    });
-    before.focus();
-    before.dispatchEvent(
-      new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-        cancelable: true,
-      }),
-    );
-    viewport.focus();
-    expect(document.activeElement).toBe(viewport);
-  });
-
-  it('restores the skipped viewport on cancellation and cleans up pending work', () => {
-    content.innerHTML = '<button>Action</button><button>Last</button>';
-    enter();
-    const first = content.firstElementChild as HTMLElement;
-    (content.lastElementChild as HTMLElement).focus();
-    first.focus();
-    first.dispatchEvent(
-      new KeyboardEvent('keydown', {key: 'Tab', shiftKey: true, bubbles: true}),
-    );
-    expect(viewport.tabIndex).toBe(-1);
-    detach?.();
-    detach = undefined;
-    expect(viewport.tabIndex).toBe(0);
-    enter();
-    expect(document.activeElement).toBe(viewport);
-  });
-});

package/src/hooks/scrollbarGutter.test.ts

@@ -1,167 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file scrollbarGutter.test.ts
- * @input Uses vitest and a stubbed viewport + element box (jsdom does no layout)
- * @output Unit tests for holdScrollbarGutter
- * @position Testing; validates scrollbarGutter.ts implementation
- *
- * SYNC: When scrollbarGutter.ts changes, update tests to match new behavior
- */
-
-import {afterEach, describe, expect, it} from 'vitest';
-import {holdScrollbarGutter} from './scrollbarGutter';
-
-/**
- * jsdom does no layout, so both halves of the measurement are stubbed: the
- * viewport (`innerWidth` vs `documentElement.clientWidth`) and the element's
- * own box, which `widths` reads from and a test flips to simulate the lock
- * widening it.
- */
-function stub({
-  innerWidth,
-  clientWidth,
-  widths,
-}: {
-  innerWidth: number;
-  clientWidth: number;
-  widths?: () => number;
-}) {
-  Object.defineProperty(window, 'innerWidth', {
-    value: innerWidth,
-    configurable: true,
-    writable: true,
-  });
-  Object.defineProperty(document.documentElement, 'clientWidth', {
-    value: clientWidth,
-    configurable: true,
-  });
-  if (widths) {
-    document.body.getBoundingClientRect = () => ({width: widths()}) as DOMRect;
-  }
-}
-
-const rootGutter = () => document.documentElement.style.scrollbarGutter;
-
-describe('holdScrollbarGutter', () => {
-  afterEach(() => {
-    document.body.style.cssText = '';
-    document.documentElement.style.cssText = '';
-    // @ts-expect-error -- drop the stubs so jsdom's own values come back
-    delete document.documentElement.clientWidth;
-    // @ts-expect-error -- restore the prototype's implementation
-    delete document.body.getBoundingClientRect;
-  });
-
-  it('holds the gutter open when a space-taking scrollbar is about to be hidden', () => {
-    // A 1024px window over a 1009px layout viewport = a 15px classic scrollbar.
-    stub({innerWidth: 1024, clientWidth: 1009});
-
-    const hold = holdScrollbarGutter(document.body);
-
-    expect(rootGutter()).toBe('stable');
-
-    hold.settle();
-    hold.release();
-
-    expect(rootGutter()).toBe('');
-  });
-
-  it('leaves an overlay scrollbar alone — there is no gutter to hold', () => {
-    stub({innerWidth: 1024, clientWidth: 1024});
-
-    const hold = holdScrollbarGutter(document.body);
-    hold.settle();
-
-    expect(rootGutter()).toBe('');
-    expect(document.body.style.paddingRight).toBe('');
-
-    hold.release();
-  });
-
-  it('does not pad when holding the gutter kept the element still', () => {
-    stub({innerWidth: 1024, clientWidth: 1009, widths: () => 1009});
-
-    const hold = holdScrollbarGutter(document.body);
-    hold.settle();
-
-    expect(rootGutter()).toBe('stable');
-    expect(document.body.style.paddingRight).toBe('');
-
-    hold.release();
-  });
-
-  it('falls back to padding when the element grew anyway', () => {
-    // What an engine without scrollbar-gutter support does: the gutter request
-    // is ignored, the scrollbar goes away, and the element widens by 15px.
-    let width = 1009;
-    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
-
-    const hold = holdScrollbarGutter(document.body);
-    width = 1024;
-    hold.settle();
-
-    expect(document.body.style.paddingRight).toBe('15px');
-
-    hold.release();
-
-    expect(document.body.style.paddingRight).toBe('');
-  });
-
-  it("adds to the page's own padding instead of replacing it", () => {
-    let width = 1009;
-    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
-    document.body.style.paddingRight = '24px';
-
-    const hold = holdScrollbarGutter(document.body);
-    width = 1024;
-    hold.settle();
-
-    expect(document.body.style.paddingRight).toBe('39px');
-
-    hold.release();
-
-    expect(document.body.style.paddingRight).toBe('24px');
-  });
-
-  it('restores the page\u2019s own scrollbar-gutter rather than clearing it', () => {
-    stub({innerWidth: 1024, clientWidth: 1009});
-    document.documentElement.style.scrollbarGutter = 'stable both-edges';
-
-    const hold = holdScrollbarGutter(document.body);
-
-    expect(rootGutter()).toBe('stable');
-
-    hold.settle();
-    hold.release();
-
-    expect(rootGutter()).toBe('stable both-edges');
-  });
-
-  it('settles once, however many times it is called', () => {
-    let width = 1009;
-    stub({innerWidth: 1024, clientWidth: 1009, widths: () => width});
-
-    const hold = holdScrollbarGutter(document.body);
-    width = 1024;
-    hold.settle();
-    hold.settle();
-    hold.settle();
-
-    expect(document.body.style.paddingRight).toBe('15px');
-
-    hold.release();
-  });
-
-  it('does nothing where there is no layout to measure', () => {
-    stub({innerWidth: 1024, clientWidth: 0});
-
-    const hold = holdScrollbarGutter(document.body);
-    hold.settle();
-
-    expect(rootGutter()).toBe('');
-    expect(document.body.style.paddingRight).toBe('');
-
-    hold.release();
-  });
-});