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

package/src/MobileNav/MobileNavReopen.test.tsx

@@ -1,118 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file MobileNavReopen.test.tsx
- * @input Uses vitest, @testing-library/react, AppShell + SideNav
- * @output Regression test for mobile hamburger nav re-open after close
- * @position Testing; validates the OOTB AppShell mobile drawer toggle cycle
- *
- * Repro for: mobile hamburger nav can be opened and closed once, but cannot
- * be re-opened after closing.
- */
-
-import {
-  describe,
-  it,
-  expect,
-  vi,
-  beforeAll,
-  beforeEach,
-  afterEach,
-} from 'vitest';
-import {render, screen, fireEvent, act} from '@testing-library/react';
-import {AppShell} from '../AppShell/AppShell';
-import {SideNav, SideNavItem, SideNavSection} from '../SideNav';
-
-beforeAll(() => {
-  HTMLDialogElement.prototype.showModal =
-    HTMLDialogElement.prototype.showModal ||
-    function (this: HTMLDialogElement) {
-      this.setAttribute('open', '');
-    };
-  HTMLDialogElement.prototype.close =
-    HTMLDialogElement.prototype.close ||
-    function (this: HTMLDialogElement) {
-      this.removeAttribute('open');
-    };
-});
-
-class MockResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-vi.stubGlobal('ResizeObserver', MockResizeObserver);
-
-function createMockMatchMedia(matches: boolean) {
-  return {
-    matches,
-    media: '',
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  };
-}
-
-beforeEach(() => {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockReturnValue(createMockMatchMedia(true)),
-  );
-});
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-function TestShell() {
-  return (
-    <AppShell
-      sideNav={
-        <SideNav>
-          <SideNavSection title="Test" isHeaderHidden>
-            <SideNavItem label="Home" />
-          </SideNavSection>
-        </SideNav>
-      }
-      mobileNav={{breakpoint: 'md'}}>
-      <div>Content</div>
-    </AppShell>
-  );
-}
-
-describe('Mobile nav re-open after close (uncontrolled OOTB)', () => {
-  it('can be opened, closed, then opened again', () => {
-    vi.useFakeTimers();
-    try {
-      render(<TestShell />);
-
-      const getDialog = () => screen.getAllByRole('dialog', {hidden: true})[0];
-      const openToggle = () =>
-        screen.getByRole('button', {name: /open navigation/i});
-
-      // 1. Open
-      fireEvent.click(openToggle());
-      expect(getDialog()).toHaveAttribute('open');
-
-      // 2. Close via the drawer's close button
-      fireEvent.click(screen.getByRole('button', {name: /close navigation/i}));
-      // Flush the delayed dialog.close() (slide-out transition)
-      act(() => {
-        vi.advanceTimersByTime(300);
-      });
-      expect(getDialog()).not.toHaveAttribute('open');
-
-      // 3. Open AGAIN — this is the bug: it should re-open
-      fireEvent.click(openToggle());
-      act(() => {
-        vi.advanceTimersByTime(300);
-      });
-      expect(getDialog()).toHaveAttribute('open');
-    } finally {
-      vi.useRealTimers();
-    }
-  });
-});

package/src/MobileNav/MobileNavScrollbarGutter.test.tsx

@@ -1,109 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file MobileNavScrollbarGutter.test.tsx
- * @input Uses vitest, @testing-library/react, MobileNav, a stubbed viewport
- * @output Unit tests for the scrollbar gutter MobileNav reserves while open
- * @position Testing; guards MobileNav.tsx against the open-drawer page shift
- *
- * MobileNav clips the document to lock background scroll, which hides a
- * classic scrollbar and widens the layout viewport by its width — the page
- * behind the drawer jumps sideways. The clip has to be paired with holding
- * that gutter open.
- *
- * SYNC: When MobileNav.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect, beforeAll, afterEach} from 'vitest';
-import {render, cleanup} from '@testing-library/react';
-import {MobileNav} from './MobileNav';
-
-beforeAll(() => {
-  // jsdom doesn't implement showModal/close on <dialog>
-  HTMLDialogElement.prototype.showModal =
-    HTMLDialogElement.prototype.showModal ||
-    function (this: HTMLDialogElement) {
-      this.setAttribute('open', '');
-    };
-  HTMLDialogElement.prototype.close =
-    HTMLDialogElement.prototype.close ||
-    function (this: HTMLDialogElement) {
-      this.removeAttribute('open');
-    };
-});
-
-/** jsdom does no layout, so both halves of the measurement are stubbed. */
-function stubViewport(innerWidth: number, clientWidth: number) {
-  Object.defineProperty(window, 'innerWidth', {
-    value: innerWidth,
-    configurable: true,
-    writable: true,
-  });
-  Object.defineProperty(document.documentElement, 'clientWidth', {
-    value: clientWidth,
-    configurable: true,
-  });
-}
-
-const rootGutter = () => document.documentElement.style.scrollbarGutter;
-
-describe('MobileNav scrollbar gutter', () => {
-  afterEach(() => {
-    cleanup();
-    document.documentElement.style.cssText = '';
-    // @ts-expect-error -- drop the viewport stub so jsdom's own value comes back
-    delete document.documentElement.clientWidth;
-  });
-
-  it('holds the gutter open while the drawer is open', () => {
-    stubViewport(1024, 1009);
-
-    const view = render(
-      <MobileNav isOpen={true} onOpenChange={() => {}}>
-        <span>Nav content</span>
-      </MobileNav>,
-    );
-
-    expect(document.documentElement.style.overflow).toBe('clip');
-    expect(rootGutter()).toBe('stable');
-
-    view.unmount();
-
-    expect(document.documentElement.style.overflow).toBe('');
-    expect(rootGutter()).toBe('');
-  });
-
-  it('gives the gutter back when the drawer closes', () => {
-    stubViewport(1024, 1009);
-
-    const view = render(
-      <MobileNav isOpen={true} onOpenChange={() => {}}>
-        <span>Nav content</span>
-      </MobileNav>,
-    );
-
-    expect(rootGutter()).toBe('stable');
-
-    view.rerender(
-      <MobileNav isOpen={false} onOpenChange={() => {}}>
-        <span>Nav content</span>
-      </MobileNav>,
-    );
-
-    expect(rootGutter()).toBe('');
-  });
-
-  it('holds nothing when the scrollbar is an overlay one', () => {
-    stubViewport(1024, 1024);
-
-    render(
-      <MobileNav isOpen={true} onOpenChange={() => {}}>
-        <span>Nav content</span>
-      </MobileNav>,
-    );
-
-    expect(document.documentElement.style.overflow).toBe('clip');
-    expect(rootGutter()).toBe('');
-    expect(document.documentElement.style.paddingRight).toBe('');
-  });
-});

package/src/MobileNav/MobileNavToggle.test.tsx

@@ -1,179 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file MobileNavToggle.test.tsx
- * @input Uses vitest, @testing-library/react, AppShell + SideNav
- * @output Unit tests for MobileNavToggle ARIA wiring
- * @position Testing; validates MobileNavToggle.tsx exposes aria-expanded and
- *   aria-controls so screen-reader users know the drawer state and target.
- *
- * SYNC: When MobileNavToggle.tsx changes, update tests to match new behavior
- */
-
-import {
-  describe,
-  it,
-  expect,
-  vi,
-  beforeAll,
-  beforeEach,
-  afterEach,
-} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
-import {AppShell} from '../AppShell/AppShell';
-import {SideNav, SideNavItem, SideNavSection} from '../SideNav';
-import {MobileNavToggle, type MobileNavToggleProps} from './MobileNavToggle';
-
-// jsdom doesn't implement showModal/close on <dialog>, so we mock them
-beforeAll(() => {
-  HTMLDialogElement.prototype.showModal =
-    HTMLDialogElement.prototype.showModal ||
-    function (this: HTMLDialogElement) {
-      this.setAttribute('open', '');
-    };
-  HTMLDialogElement.prototype.close =
-    HTMLDialogElement.prototype.close ||
-    function (this: HTMLDialogElement) {
-      this.removeAttribute('open');
-    };
-});
-
-class MockResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-vi.stubGlobal('ResizeObserver', MockResizeObserver);
-
-function createMockMatchMedia(matches: boolean) {
-  return {
-    matches,
-    media: '',
-    onchange: null,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  };
-}
-
-beforeEach(() => {
-  // Below the breakpoint so the mobile nav (and its toggle) render.
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockReturnValue(createMockMatchMedia(true)),
-  );
-});
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-function TestShell() {
-  return (
-    <AppShell
-      sideNav={
-        <SideNav>
-          <SideNavSection title="Test" isHeaderHidden>
-            <SideNavItem label="Home" />
-          </SideNavSection>
-        </SideNav>
-      }
-      mobileNav={{breakpoint: 'md'}}>
-      <div>Content</div>
-    </AppShell>
-  );
-}
-
-describe('MobileNavToggle ARIA wiring', () => {
-  it('exposes aria-expanded="false" when the drawer is closed', () => {
-    render(<TestShell />);
-
-    const toggle = screen.getByRole('button', {name: /open navigation/i});
-    expect(toggle).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('exposes aria-expanded="true" after opening the drawer', () => {
-    render(<TestShell />);
-
-    const toggle = screen.getByRole('button', {name: /open navigation/i});
-    fireEvent.click(toggle);
-    expect(toggle).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('references the nav drawer via aria-controls that resolves to the dialog', () => {
-    render(<TestShell />);
-
-    const toggle = screen.getByRole('button', {name: /open navigation/i});
-    const controls = toggle.getAttribute('aria-controls');
-    expect(controls).toBeTruthy();
-
-    const target = document.getElementById(controls!);
-    expect(target).not.toBeNull();
-    expect(target).toBe(screen.getAllByRole('dialog', {hidden: true})[0]);
-    expect(target?.tagName).toBe('DIALOG');
-  });
-});
-
-describe('MobileNavToggle host attributes', () => {
-  // architecture:public-component-api INV5 and INV7: host attributes and
-  // handlers reach the button; FR11's toggle and ARIA wiring stay owned.
-  function ShellWithToggle(props: MobileNavToggleProps) {
-    return (
-      <AppShell
-        sideNav={
-          <SideNav>
-            <SideNavSection title="Test" isHeaderHidden>
-              <SideNavItem label="Home" />
-            </SideNavSection>
-          </SideNav>
-        }
-        mobileNav={{breakpoint: 'md'}}>
-        <MobileNavToggle {...props} />
-      </AppShell>
-    );
-  }
-
-  it('forwards data, ARIA and id attributes to the button', () => {
-    render(
-      <ShellWithToggle
-        data-testid="page-menu"
-        data-analytics-id="open-nav"
-        id="page-menu-toggle"
-        aria-describedby="nav-hint"
-      />,
-    );
-    const toggle = screen.getByTestId('page-menu');
-    expect(toggle.tagName).toBe('BUTTON');
-    expect(toggle).toHaveAttribute('data-analytics-id', 'open-nav');
-    expect(toggle).toHaveAttribute('id', 'page-menu-toggle');
-    expect(toggle).toHaveAttribute('aria-describedby', 'nav-hint');
-  });
-
-  it('keeps its own aria-expanded and aria-controls over a caller value', () => {
-    render(
-      <ShellWithToggle
-        data-testid="page-menu"
-        aria-expanded="true"
-        aria-controls="elsewhere"
-      />,
-    );
-    const toggle = screen.getByTestId('page-menu');
-    expect(toggle).toHaveAttribute('aria-expanded', 'false');
-    const controls = toggle.getAttribute('aria-controls');
-    expect(controls).not.toBe('elsewhere');
-    expect(document.getElementById(controls!)?.tagName).toBe('DIALOG');
-  });
-
-  it('runs a caller onClick after the toggle, which a preventDefault does not cancel', () => {
-    const onClick = vi.fn((event: {preventDefault: () => void}) => {
-      event.preventDefault();
-    });
-    render(<ShellWithToggle data-testid="page-menu" onClick={onClick} />);
-    const toggle = screen.getByTestId('page-menu');
-    fireEvent.click(toggle);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(toggle).toHaveAttribute('aria-expanded', 'true');
-  });
-});

package/src/MobileNav/__tests__/MobileNavWidth.a11y.chromium.spec.ts

@@ -1,103 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-// @pr-a11y always
-
-/**
- * @file MobileNavWidth.a11y.chromium.spec.ts
- * @input Built MobileNav stories and real Chromium touch input in phone
- *   contexts
- * @output Browser evidence that the drawer is never wider than 85% of the
- *   viewport: on a 320 px phone it leaves a 48 px strip of the page, and a
- *   tap on the strip closes it; on a 402 px phone it keeps its 320 px width
- * @position Chromium proof for MobileNav's width cap (`dynamicStyles.width`
- *   in MobileNav.tsx); the jsdom layer is MobileNav.test.tsx
- */
-
-import {expect, test, 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();
-});
-
-/** Opens the default story's drawer with a tap and waits for the slide-in. */
-async function openNav(page: Page) {
-  await page.goto(
-    `${storybook.origin}/iframe.html?id=core-mobilenav--default&viewMode=story`,
-  );
-  await page.getByRole('button', {name: 'Open Navigation'}).tap();
-  const nav = page.getByRole('dialog');
-  await expect(nav).toBeVisible();
-  const drawer = nav.locator('[tabindex="-1"]').first();
-  await drawer.evaluate(async element => {
-    await Promise.all(element.getAnimations().map(async a => a.finished));
-  });
-  const box = await drawer.boundingBox();
-  const viewport = page.viewportSize();
-  if (box == null || viewport == null) {
-    throw new Error('the drawer did not render');
-  }
-  // The backdrop strip is on whichever side the drawer left free.
-  const strip =
-    box.x > 0.5
-      ? {from: 0, to: box.x}
-      : {from: box.x + box.width, to: viewport.width};
-  return {nav, box, strip, viewport};
-}
-
-test.describe('on a 320 px phone', () => {
-  test.use({
-    hasTouch: true,
-    isMobile: true,
-    viewport: {width: 320, height: 568},
-    deviceScaleFactor: 1,
-  });
-
-  test('the drawer leaves a strip of the page, and a tap on it closes the drawer', async ({
-    page,
-  }) => {
-    const {nav, box, strip, viewport} = await openNav(page);
-
-    // 85% of 320 px: the default 320 px drawer is capped at 272 px.
-    expect(box.width).toBeCloseTo(272, 0);
-    expect(strip.to - strip.from).toBeCloseTo(48, 0);
-
-    // The strip is backdrop (the dialog itself), not drawer.
-    const at = {x: (strip.from + strip.to) / 2, y: viewport.height / 2};
-    expect(
-      await page.evaluate(
-        ({x, y}) => document.elementFromPoint(x, y)?.tagName.toLowerCase(),
-        at,
-      ),
-    ).toBe('dialog');
-
-    await page.touchscreen.tap(at.x, at.y);
-    await expect(nav).toBeHidden();
-  });
-});
-
-test.describe('on a 402 px phone', () => {
-  test.use({
-    hasTouch: true,
-    isMobile: true,
-    viewport: {width: 402, height: 714},
-    deviceScaleFactor: 1,
-  });
-
-  test('the drawer keeps its 320 px width', async ({page}) => {
-    const {box, strip} = await openNav(page);
-
-    // 85% of 402 px is 341.7 px: the cap does not bind.
-    expect(box.width).toBeCloseTo(320, 0);
-    expect(strip.to - strip.from).toBeCloseTo(82, 0);
-  });
-});