@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/InteractiveRoleContext/InteractiveRoleContext.test.tsx

@@ -1,185 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file InteractiveRoleContext.test.tsx
- * @input Uses vitest, @testing-library/react, InteractiveRoleContext + useInteractiveRole
- * @output Characterization tests for the interactive-role override context
- * @position Testing; validates the role-override contract and its consumption
- *   by useInteractiveRole
- *
- * SYNC: When InteractiveRoleContext.ts changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {renderHook} from '@testing-library/react';
-import {createElement, type ReactNode} from 'react';
-import {
-  InteractiveRoleContext,
-  useInteractiveRoleContext,
-} from './InteractiveRoleContext';
-import {
-  useInteractiveRole,
-  type InteractiveRole,
-} from '../hooks/useInteractiveRole';
-
-/** Wrap children in an InteractiveRoleContext provider set to `role`. */
-function withRole(role: InteractiveRole | null) {
-  return function Wrapper({children}: {children: ReactNode}) {
-    return (
-      <InteractiveRoleContext value={role}>{children}</InteractiveRoleContext>
-    );
-  };
-}
-
-describe('InteractiveRoleContext', () => {
-  describe('context primitive', () => {
-    it('defaults to null when read with no provider', () => {
-      const {result} = renderHook(() => useInteractiveRoleContext());
-      expect(result.current).toBeNull();
-    });
-
-    it('exposes a displayName for devtools', () => {
-      expect(InteractiveRoleContext.displayName).toBe('InteractiveRoleContext');
-    });
-
-    it('returns the provided role override', () => {
-      const {result} = renderHook(() => useInteractiveRoleContext(), {
-        wrapper: withRole('button'),
-      });
-      expect(result.current).toBe('button');
-    });
-
-    it('returns null when a provider explicitly supplies null', () => {
-      const {result} = renderHook(() => useInteractiveRoleContext(), {
-        wrapper: withRole(null),
-      });
-      expect(result.current).toBeNull();
-    });
-
-    it.each(['link', 'button', 'inert'] as const)(
-      'passes through the "%s" override verbatim',
-      role => {
-        const {result} = renderHook(() => useInteractiveRoleContext(), {
-          wrapper: withRole(role),
-        });
-        expect(result.current).toBe(role);
-      },
-    );
-
-    it('resolves to the nearest provider when nested', () => {
-      function Nested({children}: {children: ReactNode}) {
-        return (
-          <InteractiveRoleContext value="link">
-            <InteractiveRoleContext value="button">
-              {children}
-            </InteractiveRoleContext>
-          </InteractiveRoleContext>
-        );
-      }
-      const {result} = renderHook(() => useInteractiveRoleContext(), {
-        wrapper: Nested,
-      });
-      expect(result.current).toBe('button');
-    });
-
-    it('supports the createElement (no-JSX) provider form', () => {
-      const {result} = renderHook(() => useInteractiveRoleContext(), {
-        wrapper: ({children}: {children: ReactNode}) =>
-          createElement(InteractiveRoleContext, {value: 'button'}, children),
-      });
-      expect(result.current).toBe('button');
-    });
-  });
-
-  // useInteractiveRole is the real consumer of this context; these tests pin
-  // down how the context signal participates in the role-resolution priority.
-  describe('consumption via useInteractiveRole', () => {
-    it('href alone resolves to "link"', () => {
-      const {result} = renderHook(() =>
-        useInteractiveRole({href: '/somewhere'}),
-      );
-      expect(result.current).toBe('link');
-    });
-
-    it('onClick alone resolves to "button"', () => {
-      const {result} = renderHook(() =>
-        useInteractiveRole({onClick: () => {}}),
-      );
-      expect(result.current).toBe('button');
-    });
-
-    it('nothing interactive resolves to "inert"', () => {
-      const {result} = renderHook(() => useInteractiveRole({}));
-      expect(result.current).toBe('inert');
-    });
-
-    it('context override is used when neither href nor onClick is set', () => {
-      const {result} = renderHook(() => useInteractiveRole({}), {
-        wrapper: withRole('button'),
-      });
-      expect(result.current).toBe('button');
-    });
-
-    it('href wins over a context override (navigation has top priority)', () => {
-      const {result} = renderHook(() => useInteractiveRole({href: '/x'}), {
-        wrapper: withRole('button'),
-      });
-      expect(result.current).toBe('link');
-    });
-
-    it('onClick wins over a context override', () => {
-      const {result} = renderHook(
-        () => useInteractiveRole({onClick: () => {}}),
-        {wrapper: withRole('link')},
-      );
-      expect(result.current).toBe('button');
-    });
-
-    // NOTE — documents current behavior. The `isDisabled` JSDoc says a disabled
-    // href "falls back to button", but the implementation only *skips* the link
-    // branch when disabled — it does not force a button. With no onClick and no
-    // context override, a disabled href therefore resolves to "inert", not
-    // "button". (The doc-promised "button" fallback only holds when an onClick
-    // or a context override is also present — see the two tests below.)
-    it('a disabled href with nothing else resolves to "inert" (not "button" as the JSDoc implies)', () => {
-      const {result} = renderHook(() =>
-        useInteractiveRole({href: '/x', isDisabled: true}),
-      );
-      expect(result.current).toBe('inert');
-    });
-
-    it('a disabled href with an onClick resolves to "button" via the onClick branch', () => {
-      const {result} = renderHook(() =>
-        useInteractiveRole({href: '/x', isDisabled: true, onClick: () => {}}),
-      );
-      expect(result.current).toBe('button');
-    });
-
-    it('a disabled href with a context override falls through to that override', () => {
-      const {result} = renderHook(
-        () => useInteractiveRole({href: '/x', isDisabled: true}),
-        {wrapper: withRole('button')},
-      );
-      expect(result.current).toBe('button');
-    });
-
-    it('an "inert" context override is honored when nothing else is interactive', () => {
-      const {result} = renderHook(() => useInteractiveRole({}), {
-        wrapper: withRole('inert'),
-      });
-      expect(result.current).toBe('inert');
-    });
-
-    it('a null onClick is treated as absent (falls through to inert)', () => {
-      const {result} = renderHook(() => useInteractiveRole({onClick: null}));
-      expect(result.current).toBe('inert');
-    });
-
-    it('a null onClick still yields to a context override', () => {
-      const {result} = renderHook(() => useInteractiveRole({onClick: null}), {
-        wrapper: withRole('button'),
-      });
-      expect(result.current).toBe('button');
-    });
-  });
-});

package/src/Layout/Layout.test.tsx

@@ -1,285 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Layout.test.tsx
- * @input Uses vitest, @testing-library/react, Layout + layout contexts
- * @output Characterization tests for the Layout page-shell component
- * @position Testing; validates slot rendering, context provisioning, and
- *   divider/padding/height wiring
- *
- * SYNC: When Layout.tsx changes, update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {use, createRef} from 'react';
-import {Layout} from './Layout';
-import {LayoutHeader} from './LayoutHeader';
-import {LayoutFooter} from './LayoutFooter';
-import {LayoutAreaContext} from './LayoutAreaContext';
-import {LayoutSlotsContext} from './LayoutSlotsContext';
-
-/** Reports which layout area it is rendered inside. */
-function AreaProbe({testid}: {testid: string}) {
-  const area = use(LayoutAreaContext);
-  return <span data-testid={testid}>{String(area)}</span>;
-}
-
-/** Reports the current LayoutSlots record as JSON. */
-function SlotsProbe() {
-  const slots = use(LayoutSlotsContext);
-  return <span data-testid="slots">{JSON.stringify(slots)}</span>;
-}
-
-/** The Layout root is the outermost element rendered by the component. */
-function root(container: HTMLElement): HTMLElement {
-  return container.firstElementChild as HTMLElement;
-}
-
-describe('Layout', () => {
-  describe('content / children resolution', () => {
-    it('renders the content prop', () => {
-      render(<Layout content={<div>main body</div>} />);
-      expect(screen.getByText('main body')).toBeInTheDocument();
-    });
-
-    it('renders children as a shorthand for the content slot', () => {
-      render(
-        <Layout>
-          <div>child body</div>
-        </Layout>,
-      );
-      expect(screen.getByText('child body')).toBeInTheDocument();
-    });
-
-    it('content wins when both content and children are provided', () => {
-      render(
-        <Layout content={<div>from-content</div>}>
-          <div>from-children</div>
-        </Layout>,
-      );
-      expect(screen.getByText('from-content')).toBeInTheDocument();
-      expect(screen.queryByText('from-children')).not.toBeInTheDocument();
-    });
-
-    it('renders an empty shell without crashing when no slots are given', () => {
-      const {container} = render(<Layout />);
-      expect(root(container)).toBeInTheDocument();
-    });
-  });
-
-  describe('slots', () => {
-    it('renders all four surrounding slots plus content', () => {
-      render(
-        <Layout
-          header={<div>the-header</div>}
-          start={<div>the-start</div>}
-          end={<div>the-end</div>}
-          footer={<div>the-footer</div>}
-          content={<div>the-content</div>}
-        />,
-      );
-      expect(screen.getByText('the-header')).toBeInTheDocument();
-      expect(screen.getByText('the-start')).toBeInTheDocument();
-      expect(screen.getByText('the-end')).toBeInTheDocument();
-      expect(screen.getByText('the-footer')).toBeInTheDocument();
-      expect(screen.getByText('the-content')).toBeInTheDocument();
-    });
-
-    it('does not render an area wrapper for an omitted slot', () => {
-      render(<Layout content={<AreaProbe testid="content" />} />);
-      // Only the content probe exists; header/start/end/footer probes absent.
-      expect(screen.getByTestId('content')).toHaveTextContent('content');
-    });
-  });
-
-  describe('LayoutAreaContext provisioning', () => {
-    it('tags each slot with its area name', () => {
-      render(
-        <Layout
-          header={<AreaProbe testid="h" />}
-          start={<AreaProbe testid="s" />}
-          end={<AreaProbe testid="e" />}
-          footer={<AreaProbe testid="f" />}
-          content={<AreaProbe testid="c" />}
-        />,
-      );
-      expect(screen.getByTestId('h')).toHaveTextContent('header');
-      expect(screen.getByTestId('s')).toHaveTextContent('start');
-      expect(screen.getByTestId('e')).toHaveTextContent('end');
-      expect(screen.getByTestId('f')).toHaveTextContent('footer');
-      expect(screen.getByTestId('c')).toHaveTextContent('content');
-    });
-  });
-
-  describe('LayoutSlotsContext provisioning', () => {
-    it('reports which slots are filled to descendants', () => {
-      render(
-        <Layout
-          header={<div>h</div>}
-          start={<div>s</div>}
-          content={<SlotsProbe />}
-        />,
-      );
-      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
-      expect(slots).toEqual({
-        hasHeader: true,
-        hasFooter: false,
-        hasStart: true,
-        hasEnd: false,
-      });
-    });
-
-    it('reports all-false when only content is present', () => {
-      render(<Layout content={<SlotsProbe />} />);
-      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
-      expect(slots).toEqual({
-        hasHeader: false,
-        hasFooter: false,
-        hasStart: false,
-        hasEnd: false,
-      });
-    });
-
-    it('reports every slot filled', () => {
-      render(
-        <Layout
-          header={<div>h</div>}
-          footer={<div>f</div>}
-          start={<div>s</div>}
-          end={<div>e</div>}
-          content={<SlotsProbe />}
-        />,
-      );
-      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
-      expect(slots).toEqual({
-        hasHeader: true,
-        hasFooter: true,
-        hasStart: true,
-        hasEnd: true,
-      });
-    });
-  });
-
-  describe('theme props (class + data attributes)', () => {
-    it('renders the astryx-layout class on the root', () => {
-      const {container} = render(<Layout content={<div>x</div>} />);
-      expect(root(container).className).toContain('astryx-layout');
-    });
-
-    it('defaults data-height to "fill"', () => {
-      const {container} = render(<Layout content={<div>x</div>} />);
-      expect(root(container).getAttribute('data-height')).toBe('fill');
-    });
-
-    it('reflects height="auto" as data-height', () => {
-      const {container} = render(
-        <Layout height="auto" content={<div>x</div>} />,
-      );
-      expect(root(container).getAttribute('data-height')).toBe('auto');
-    });
-  });
-
-  describe('defaultHasDividers → LayoutDividerContext', () => {
-    it('makes headers default to having a divider', () => {
-      render(
-        <Layout
-          defaultHasDividers
-          header={<LayoutHeader>H</LayoutHeader>}
-          content={<div>c</div>}
-        />,
-      );
-      const header = screen.getByText('H').closest('[data-divider]');
-      expect(header).not.toBeNull();
-      expect(header?.getAttribute('data-divider')).toBe('true');
-    });
-
-    it('makes footers default to having a divider', () => {
-      const {container} = render(
-        <Layout
-          defaultHasDividers
-          footer={<LayoutFooter>F</LayoutFooter>}
-          content={<div>c</div>}
-        />,
-      );
-      expect(
-        container.querySelector('.astryx-layout-footer[data-divider]'),
-      ).not.toBeNull();
-    });
-
-    it('does not force dividers when defaultHasDividers is unset', () => {
-      const {container} = render(
-        <Layout
-          header={<LayoutHeader>H</LayoutHeader>}
-          content={<div>c</div>}
-        />,
-      );
-      expect(
-        container.querySelector('.astryx-layout-header[data-divider]'),
-      ).toBeNull();
-    });
-
-    it('an explicit hasDivider={false} on a header overrides the context default', () => {
-      const {container} = render(
-        <Layout
-          defaultHasDividers
-          header={<LayoutHeader hasDivider={false}>H</LayoutHeader>}
-          content={<div>c</div>}
-        />,
-      );
-      expect(
-        container.querySelector('.astryx-layout-header[data-divider]'),
-      ).toBeNull();
-    });
-  });
-
-  describe('padding / contentWidth', () => {
-    it('accepts a numeric padding step without crashing', () => {
-      const {container} = render(<Layout padding={4} content={<div>c</div>} />);
-      expect(root(container)).toBeInTheDocument();
-    });
-
-    it('accepts padding={0} (full bleed) without crashing', () => {
-      const {container} = render(<Layout padding={0} content={<div>c</div>} />);
-      expect(root(container)).toBeInTheDocument();
-    });
-
-    it('accepts a numeric contentWidth without crashing', () => {
-      const {container} = render(
-        <Layout contentWidth={640} content={<div>c</div>} />,
-      );
-      expect(root(container)).toBeInTheDocument();
-    });
-
-    it('accepts a string contentWidth without crashing', () => {
-      const {container} = render(
-        <Layout contentWidth="60ch" content={<div>c</div>} />,
-      );
-      expect(root(container)).toBeInTheDocument();
-    });
-  });
-
-  describe('styling & ref', () => {
-    it('forwards ref to the root div', () => {
-      const ref = createRef<HTMLDivElement>();
-      render(<Layout ref={ref} content={<div>c</div>} />);
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
-      expect(ref.current?.className).toContain('astryx-layout');
-    });
-
-    it('merges a caller className onto the root', () => {
-      const {container} = render(
-        <Layout className="my-layout" content={<div>c</div>} />,
-      );
-      expect(root(container).className).toContain('my-layout');
-      expect(root(container).className).toContain('astryx-layout');
-    });
-
-    it('merges a caller inline style onto the root', () => {
-      const {container} = render(
-        <Layout style={{outline: '1px solid red'}} content={<div>c</div>} />,
-      );
-      expect(root(container).style.outline).toBe('1px solid red');
-    });
-  });
-});