@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/Collapsible/Collapsible.test.tsx

@@ -1,405 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Collapsible.test.tsx
- * @input Uses vitest, @testing-library/react, Collapsible + CollapsibleGroup
- * @output Characterization coverage for Collapsible behavior
- * @position Testing; validates Collapsible.tsx (disclosure primitive)
- *
- * SYNC: When Collapsible.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen, within} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {Collapsible} from './Collapsible';
-import {CollapsibleGroup} from './CollapsibleGroup';
-
-/**
- * Resolves the content region a trigger controls via aria-controls, so tests
- * assert the real disclosure linkage rather than guessing at DOM structure.
- */
-function contentFor(trigger: HTMLElement): HTMLElement {
-  const id = trigger.getAttribute('aria-controls');
-  expect(id).toBeTruthy();
-  const el = document.getElementById(id as string);
-  expect(el).not.toBeNull();
-  return el as HTMLElement;
-}
-
-describe('Collapsible', () => {
-  describe('structure and rendering', () => {
-    it('renders the trigger content inside a button', () => {
-      render(
-        <Collapsible trigger="Details">
-          <p>Body</p>
-        </Collapsible>,
-      );
-      const button = screen.getByRole('button');
-      expect(button).toHaveTextContent('Details');
-      expect(button.tagName).toBe('BUTTON');
-    });
-
-    it('renders the trigger button with an explicit type="button"', () => {
-      // Prevents implicit form submission when used inside a <form>.
-      render(<Collapsible trigger="T">c</Collapsible>);
-      expect(screen.getByRole('button')).toHaveAttribute('type', 'button');
-    });
-
-    it('renders children inside the controlled content region', () => {
-      render(
-        <Collapsible trigger="Section">
-          <span data-testid="child">Hello</span>
-        </Collapsible>,
-      );
-      const content = contentFor(screen.getByRole('button'));
-      expect(within(content).getByTestId('child')).toBeInTheDocument();
-    });
-
-    it('links the trigger to its content via aria-controls', () => {
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      const button = screen.getByRole('button');
-      const content = contentFor(button);
-      expect(button.getAttribute('aria-controls')).toBe(content.id);
-    });
-
-    it('renders the stable astryx-collapsible class on the root', () => {
-      render(
-        <Collapsible trigger="T" data-testid="root">
-          c
-        </Collapsible>,
-      );
-      expect(screen.getByTestId('root')).toHaveClass('astryx-collapsible');
-    });
-
-    it('renders a ReactNode trigger, not just a string', () => {
-      render(
-        <Collapsible trigger={<span data-testid="rich">Rich</span>}>
-          c
-        </Collapsible>,
-      );
-      expect(screen.getByTestId('rich')).toBeInTheDocument();
-    });
-  });
-
-  describe('uncontrolled open state', () => {
-    it('is open by default (aria-expanded="true")', () => {
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      expect(screen.getByRole('button')).toHaveAttribute(
-        'aria-expanded',
-        'true',
-      );
-    });
-
-    it('honors defaultIsOpen={false} (starts collapsed)', () => {
-      render(
-        <Collapsible trigger="T" defaultIsOpen={false}>
-          Body
-        </Collapsible>,
-      );
-      expect(screen.getByRole('button')).toHaveAttribute(
-        'aria-expanded',
-        'false',
-      );
-    });
-
-    it('toggles open/closed when the trigger is clicked', async () => {
-      const user = userEvent.setup();
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      const button = screen.getByRole('button');
-
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-      await user.click(button);
-      expect(button).toHaveAttribute('aria-expanded', 'false');
-      await user.click(button);
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('opens a default-collapsed instance on click', async () => {
-      const user = userEvent.setup();
-      render(
-        <Collapsible trigger="T" defaultIsOpen={false}>
-          Body
-        </Collapsible>,
-      );
-      const button = screen.getByRole('button');
-      await user.click(button);
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('toggles via keyboard activation (Enter and Space)', async () => {
-      const user = userEvent.setup();
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      const button = screen.getByRole('button');
-
-      button.focus();
-      expect(button).toHaveFocus();
-
-      await user.keyboard('{Enter}');
-      expect(button).toHaveAttribute('aria-expanded', 'false');
-      await user.keyboard(' ');
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('hides the content region (display:none) only when collapsed', async () => {
-      const user = userEvent.setup();
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      const button = screen.getByRole('button');
-      const content = contentFor(button);
-
-      // Open: not display:none.
-      expect(content).not.toHaveStyle({display: 'none'});
-      await user.click(button);
-      // Collapsed: hidden via the contentHidden style.
-      expect(content).toHaveStyle({display: 'none'});
-    });
-
-    it('rotates the chevron indicator between open and closed states', async () => {
-      const user = userEvent.setup();
-      render(<Collapsible trigger="T">Body</Collapsible>);
-      const button = screen.getByRole('button');
-      // The chevron lives in the last span of the trigger button.
-      const chevron = button.querySelectorAll('span')[1];
-      const openClass = chevron.getAttribute('class');
-
-      await user.click(button);
-      const closedClass = chevron.getAttribute('class');
-      expect(closedClass).not.toEqual(openClass);
-    });
-  });
-
-  describe('controlled open state', () => {
-    it('reflects the isOpen prop', () => {
-      const {rerender} = render(
-        <Collapsible trigger="T" isOpen={false}>
-          Body
-        </Collapsible>,
-      );
-      expect(screen.getByRole('button')).toHaveAttribute(
-        'aria-expanded',
-        'false',
-      );
-
-      rerender(
-        <Collapsible trigger="T" isOpen={true}>
-          Body
-        </Collapsible>,
-      );
-      expect(screen.getByRole('button')).toHaveAttribute(
-        'aria-expanded',
-        'true',
-      );
-    });
-
-    it('calls onOpenChange with the negated state on click', async () => {
-      const user = userEvent.setup();
-      const onOpenChange = vi.fn();
-      render(
-        <Collapsible trigger="T" isOpen={false} onOpenChange={onOpenChange}>
-          Body
-        </Collapsible>,
-      );
-      await user.click(screen.getByRole('button'));
-      expect(onOpenChange).toHaveBeenCalledTimes(1);
-      expect(onOpenChange).toHaveBeenCalledWith(true);
-    });
-
-    it('does not self-update when controlled without onOpenChange', async () => {
-      // A controlled instance is driven entirely by the isOpen prop; a click
-      // must not flip the visual state on its own.
-      const user = userEvent.setup();
-      render(
-        <Collapsible trigger="T" isOpen={false}>
-          Body
-        </Collapsible>,
-      );
-      const button = screen.getByRole('button');
-      await user.click(button);
-      expect(button).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('stays put until the parent updates isOpen', async () => {
-      const user = userEvent.setup();
-      const onOpenChange = vi.fn();
-      const {rerender} = render(
-        <Collapsible trigger="T" isOpen={false} onOpenChange={onOpenChange}>
-          Body
-        </Collapsible>,
-      );
-      const button = screen.getByRole('button');
-      await user.click(button);
-      // Still closed — parent hasn't re-rendered with the new value yet.
-      expect(button).toHaveAttribute('aria-expanded', 'false');
-
-      rerender(
-        <Collapsible trigger="T" isOpen={true} onOpenChange={onOpenChange}>
-          Body
-        </Collapsible>,
-      );
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-    });
-  });
-
-  describe('prop forwarding', () => {
-    it('forwards a ref to the root element', () => {
-      const ref = vi.fn();
-      render(
-        <Collapsible ref={ref} trigger="T">
-          c
-        </Collapsible>,
-      );
-      expect(ref).toHaveBeenCalledWith(expect.any(HTMLDivElement));
-    });
-
-    it('passes through data-testid and other DOM props to the root', () => {
-      render(
-        <Collapsible trigger="T" data-testid="root" data-custom="x">
-          c
-        </Collapsible>,
-      );
-      const root = screen.getByTestId('root');
-      expect(root).toHaveAttribute('data-custom', 'x');
-    });
-
-    it('exposes a displayName for devtools', () => {
-      expect(Collapsible.displayName).toBe('Collapsible');
-    });
-  });
-
-  describe('inside CollapsibleGroup (single mode)', () => {
-    it('opens the item matching defaultValue and closes the rest', () => {
-      render(
-        <CollapsibleGroup type="single" defaultValue="b">
-          <Collapsible trigger="A" value="a">
-            Body A
-          </Collapsible>
-          <Collapsible trigger="B" value="b">
-            Body B
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const [a, b] = screen.getAllByRole('button');
-      expect(a).toHaveAttribute('aria-expanded', 'false');
-      expect(b).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('opening one item closes the previously open item', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single" defaultValue="a">
-          <Collapsible trigger="A" value="a">
-            Body A
-          </Collapsible>
-          <Collapsible trigger="B" value="b">
-            Body B
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const [a, b] = screen.getAllByRole('button');
-      expect(a).toHaveAttribute('aria-expanded', 'true');
-
-      await user.click(b);
-      expect(a).toHaveAttribute('aria-expanded', 'false');
-      expect(b).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('clicking the open item closes it (single mode allows all-closed)', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="single" defaultValue="a">
-          <Collapsible trigger="A" value="a">
-            Body A
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const a = screen.getByRole('button');
-      await user.click(a);
-      expect(a).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('fires the group onChange with the newly opened value', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <CollapsibleGroup type="single" onChange={onChange}>
-          <Collapsible trigger="A" value="a">
-            Body A
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      await user.click(screen.getByRole('button'));
-      expect(onChange).toHaveBeenCalledWith('a');
-    });
-  });
-
-  describe('inside CollapsibleGroup (multiple mode)', () => {
-    it('allows several items open at once', async () => {
-      const user = userEvent.setup();
-      render(
-        <CollapsibleGroup type="multiple" defaultValue={['a']}>
-          <Collapsible trigger="A" value="a">
-            Body A
-          </Collapsible>
-          <Collapsible trigger="B" value="b">
-            Body B
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const [a, b] = screen.getAllByRole('button');
-      expect(a).toHaveAttribute('aria-expanded', 'true');
-      expect(b).toHaveAttribute('aria-expanded', 'false');
-
-      await user.click(b);
-      // Opening B does not close A in multiple mode.
-      expect(a).toHaveAttribute('aria-expanded', 'true');
-      expect(b).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('fires onChange with the full array of open values', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <CollapsibleGroup
-          type="multiple"
-          defaultValue={['a']}
-          onChange={onChange}>
-          <Collapsible trigger="A" value="a">
-            Body A
-          </Collapsible>
-          <Collapsible trigger="B" value="b">
-            Body B
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const [, b] = screen.getAllByRole('button');
-      await user.click(b);
-      expect(onChange).toHaveBeenCalledWith(['a', 'b']);
-    });
-  });
-
-  describe('group presentation (dividers + density)', () => {
-    it('reflects group dividers and density as data attributes on items', () => {
-      render(
-        <CollapsibleGroup type="single" dividers="between" density="compact">
-          <Collapsible trigger="A" value="a" data-testid="item-a">
-            Body A
-          </Collapsible>
-        </CollapsibleGroup>,
-      );
-      const item = screen.getByTestId('item-a');
-      expect(item).toHaveAttribute('data-dividers', 'between');
-      expect(item).toHaveAttribute('data-density', 'compact');
-    });
-
-    it('omits divider data attributes when standalone (no group)', () => {
-      render(
-        <Collapsible trigger="A" data-testid="item">
-          Body
-        </Collapsible>,
-      );
-      const item = screen.getByTestId('item');
-      expect(item).not.toHaveAttribute('data-dividers');
-      expect(item).not.toHaveAttribute('data-density');
-    });
-  });
-});

package/src/FieldStatus/FieldStatus.test.tsx

@@ -1,282 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file FieldStatus.test.tsx
- * @input Uses vitest, @testing-library/react, FieldStatus component
- * @output Characterization coverage for FieldStatus behavior
- * @position Testing; validates FieldStatus.tsx implementation
- *
- * SYNC: When FieldStatus.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import * as stylex from '@stylexjs/stylex';
-import {FieldStatus} from './FieldStatus';
-
-const testStyles = stylex.create({
-  custom: {color: 'rebeccapurple'},
-});
-
-describe('FieldStatus', () => {
-  it('renders the message text', () => {
-    render(<FieldStatus type="error" message="This field is required" />);
-    expect(screen.getByText('This field is required')).toBeInTheDocument();
-  });
-
-  it('renders the message inside a <div>', () => {
-    render(<FieldStatus type="error" message="Boom" data-testid="fs" />);
-    expect(screen.getByTestId('fs').tagName).toBe('DIV');
-  });
-
-  describe('role semantics', () => {
-    // Errors are urgent — they get role="alert" so assistive tech interrupts.
-    it('uses role="alert" for error status', () => {
-      render(<FieldStatus type="error" message="msg" />);
-      expect(screen.getByRole('alert')).toHaveTextContent('msg');
-    });
-
-    // Non-error statuses are advisory — role="status" is a polite live region.
-    it('uses role="status" for warning status', () => {
-      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('role', 'status');
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    });
-
-    it('uses role="status" for success status', () => {
-      render(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('role', 'status');
-    });
-  });
-
-  describe('aria-live politeness', () => {
-    // Error → assertive so screen readers announce immediately.
-    it('sets aria-live="assertive" for error', () => {
-      render(<FieldStatus type="error" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute(
-        'aria-live',
-        'assertive',
-      );
-    });
-
-    it('sets aria-live="polite" for warning', () => {
-      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('aria-live', 'polite');
-    });
-
-    it('sets aria-live="polite" for success', () => {
-      render(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('aria-live', 'polite');
-    });
-
-    // The element is a live region, never hidden from assistive tech.
-    it('does not mark itself aria-hidden', () => {
-      render(<FieldStatus type="error" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).not.toHaveAttribute('aria-hidden');
-    });
-  });
-
-  describe('theme class + data attribute reflection', () => {
-    it('renders the stable astryx-field-status class', () => {
-      render(<FieldStatus type="error" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveClass('astryx-field-status');
-    });
-
-    it('reflects the type as a class token and data-type attribute', () => {
-      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
-      const el = screen.getByTestId('fs');
-      expect(el).toHaveClass('warning');
-      expect(el).toHaveAttribute('data-type', 'warning');
-    });
-
-    it('reflects the variant as a class token and data-variant attribute', () => {
-      render(
-        <FieldStatus
-          type="error"
-          message="msg"
-          variant="detached"
-          data-testid="fs"
-        />,
-      );
-      const el = screen.getByTestId('fs');
-      expect(el).toHaveClass('detached');
-      expect(el).toHaveAttribute('data-variant', 'detached');
-    });
-
-    it('defaults data-variant to "attached"', () => {
-      render(<FieldStatus type="error" message="msg" data-testid="fs" />);
-      const el = screen.getByTestId('fs');
-      expect(el).toHaveAttribute('data-variant', 'attached');
-      expect(el).toHaveClass('attached');
-    });
-  });
-
-  describe('color styling per status type', () => {
-    // Each status type maps to a distinct color treatment. The rendered class
-    // list must therefore differ between types — a regression that collapsed
-    // them onto one color would be caught here.
-    it('applies distinct StyleX classes for each type', () => {
-      const {rerender} = render(
-        <FieldStatus type="error" message="msg" data-testid="fs" />,
-      );
-      const errorClass = screen.getByTestId('fs').getAttribute('class');
-
-      rerender(<FieldStatus type="warning" message="msg" data-testid="fs" />);
-      const warningClass = screen.getByTestId('fs').getAttribute('class');
-
-      rerender(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      const successClass = screen.getByTestId('fs').getAttribute('class');
-
-      expect(errorClass).not.toEqual(warningClass);
-      expect(warningClass).not.toEqual(successClass);
-      expect(errorClass).not.toEqual(successClass);
-    });
-
-    it('applies distinct StyleX classes for each variant', () => {
-      const {rerender} = render(
-        <FieldStatus
-          type="error"
-          message="msg"
-          variant="attached"
-          data-testid="fs"
-        />,
-      );
-      const attachedClass = screen.getByTestId('fs').getAttribute('class');
-
-      rerender(
-        <FieldStatus
-          type="error"
-          message="msg"
-          variant="detached"
-          data-testid="fs"
-        />,
-      );
-      const detachedClass = screen.getByTestId('fs').getAttribute('class');
-
-      expect(attachedClass).not.toEqual(detachedClass);
-    });
-  });
-
-  describe('prop forwarding', () => {
-    it('forwards a ref to the root element', () => {
-      const ref = vi.fn();
-      render(<FieldStatus ref={ref} type="error" message="msg" />);
-      expect(ref).toHaveBeenCalledWith(expect.any(HTMLDivElement));
-    });
-
-    it('applies the id attribute', () => {
-      render(
-        <FieldStatus
-          type="error"
-          message="msg"
-          id="email-error"
-          data-testid="fs"
-        />,
-      );
-      expect(screen.getByTestId('fs')).toHaveAttribute('id', 'email-error');
-    });
-
-    it('passes through arbitrary DOM props', () => {
-      render(
-        <FieldStatus
-          type="error"
-          message="msg"
-          data-testid="fs"
-          data-custom="xyz"
-        />,
-      );
-      expect(screen.getByTestId('fs')).toHaveAttribute('data-custom', 'xyz');
-    });
-
-    it('merges a consumer className with the stable class', () => {
-      render(
-        <FieldStatus
-          type="error"
-          message="msg"
-          className="my-status"
-          data-testid="fs"
-        />,
-      );
-      const el = screen.getByTestId('fs');
-      expect(el).toHaveClass('my-status');
-      expect(el).toHaveClass('astryx-field-status');
-    });
-
-    it('merges a consumer inline style', () => {
-      render(
-        <FieldStatus
-          type="error"
-          message="msg"
-          style={{marginTop: '10px'}}
-          data-testid="fs"
-        />,
-      );
-      expect(screen.getByTestId('fs')).toHaveStyle({marginTop: '10px'});
-    });
-
-    it('applies an xstyle as an extra class', () => {
-      const {rerender} = render(
-        <FieldStatus type="error" message="msg" data-testid="fs" />,
-      );
-      const withoutXstyle = screen.getByTestId('fs').getAttribute('class');
-
-      // xstyle values are compiled StyleX styles; passing one adds classes.
-      rerender(
-        <FieldStatus
-          type="error"
-          message="msg"
-          data-testid="fs"
-          xstyle={testStyles.custom}
-        />,
-      );
-      const withXstyle = screen.getByTestId('fs').getAttribute('class');
-      expect(withXstyle).not.toEqual(withoutXstyle);
-    });
-  });
-
-  describe('dynamic updates', () => {
-    it('updates the rendered message on rerender', () => {
-      const {rerender} = render(
-        <FieldStatus type="error" message="First" data-testid="fs" />,
-      );
-      expect(screen.getByTestId('fs')).toHaveTextContent('First');
-
-      rerender(<FieldStatus type="error" message="Second" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveTextContent('Second');
-    });
-
-    // Switching from error to a non-error type must relax both the role and
-    // the live-region politeness in lockstep.
-    it('relaxes role and aria-live when type changes from error', () => {
-      const {rerender} = render(
-        <FieldStatus type="error" message="msg" data-testid="fs" />,
-      );
-      let el = screen.getByTestId('fs');
-      expect(el).toHaveAttribute('role', 'alert');
-      expect(el).toHaveAttribute('aria-live', 'assertive');
-
-      rerender(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      el = screen.getByTestId('fs');
-      expect(el).toHaveAttribute('role', 'status');
-      expect(el).toHaveAttribute('aria-live', 'polite');
-    });
-  });
-
-  describe('edge cases', () => {
-    it('renders an empty message without crashing', () => {
-      render(<FieldStatus type="error" message="" data-testid="fs" />);
-      const el = screen.getByTestId('fs');
-      expect(el).toBeInTheDocument();
-      expect(el).toHaveTextContent('');
-    });
-
-    it('renders message content verbatim, including whitespace-only strings', () => {
-      render(<FieldStatus type="warning" message="   " data-testid="fs" />);
-      expect(screen.getByTestId('fs').textContent).toBe('   ');
-    });
-  });
-
-  it('exposes a displayName for devtools', () => {
-    expect(FieldStatus.displayName).toBe('FieldStatus');
-  });
-});