@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Layout/LayoutSlots.test.tsx

@@ -1,364 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file LayoutSlots.test.tsx
- * @input Uses vitest, @testing-library/react, Layout slot components
- * @output Characterization tests for LayoutHeader, LayoutFooter,
- *   LayoutContent and LayoutPanel
- * @position Testing; validates the slot primitives' rendering, landmark roles,
- *   divider reflection, sizing and context-driven behavior
- *
- * SYNC: When LayoutHeader/LayoutFooter/LayoutContent/LayoutPanel change,
- * update tests to match new behavior
- */
-
-import {describe, it, expect} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import {createRef} from 'react';
-import {Layout} from './Layout';
-import {LayoutHeader} from './LayoutHeader';
-import {LayoutFooter} from './LayoutFooter';
-import {LayoutContent} from './LayoutContent';
-import {LayoutPanel} from './LayoutPanel';
-import {LayoutDividerContext} from './LayoutDividerContext';
-import {useResizable} from '../Resizable/useResizable';
-
-// =============================================================================
-// LayoutHeader
-// =============================================================================
-
-describe('LayoutHeader', () => {
-  it('renders its children', () => {
-    render(<LayoutHeader>Page title</LayoutHeader>);
-    expect(screen.getByText('Page title')).toBeInTheDocument();
-  });
-
-  it('carries the astryx-layout-header class', () => {
-    const {container} = render(<LayoutHeader>H</LayoutHeader>);
-    expect(
-      container.querySelector('.astryx-layout-header'),
-    ).toBeInTheDocument();
-  });
-
-  it('exposes a landmark role and accessible name', () => {
-    render(
-      <LayoutHeader role="banner" label="Site header">
-        H
-      </LayoutHeader>,
-    );
-    expect(
-      screen.getByRole('banner', {name: 'Site header'}),
-    ).toBeInTheDocument();
-  });
-
-  it('omits data-divider by default', () => {
-    const {container} = render(<LayoutHeader>H</LayoutHeader>);
-    expect(
-      container
-        .querySelector('.astryx-layout-header')
-        ?.hasAttribute('data-divider'),
-    ).toBe(false);
-  });
-
-  it('reflects hasDivider as data-divider="true"', () => {
-    const {container} = render(<LayoutHeader hasDivider>H</LayoutHeader>);
-    expect(
-      container
-        .querySelector('.astryx-layout-header')
-        ?.getAttribute('data-divider'),
-    ).toBe('true');
-  });
-
-  it('inherits the divider default from LayoutDividerContext', () => {
-    const {container} = render(
-      <LayoutDividerContext value={{defaultHasDividers: true}}>
-        <LayoutHeader>H</LayoutHeader>
-      </LayoutDividerContext>,
-    );
-    expect(
-      container
-        .querySelector('.astryx-layout-header')
-        ?.getAttribute('data-divider'),
-    ).toBe('true');
-  });
-
-  it('an explicit hasDivider={false} overrides an inherited true default', () => {
-    const {container} = render(
-      <LayoutDividerContext value={{defaultHasDividers: true}}>
-        <LayoutHeader hasDivider={false}>H</LayoutHeader>
-      </LayoutDividerContext>,
-    );
-    expect(
-      container
-        .querySelector('.astryx-layout-header')
-        ?.hasAttribute('data-divider'),
-    ).toBe(false);
-  });
-
-  it('applies a numeric height to the element style', () => {
-    const {container} = render(<LayoutHeader height={64}>H</LayoutHeader>);
-    const el = container.querySelector('.astryx-layout-header') as HTMLElement;
-    expect(el.getAttribute('style') ?? '').toContain('64px');
-  });
-
-  it('forwards ref to the outer element', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<LayoutHeader ref={ref}>H</LayoutHeader>);
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current?.className).toContain('astryx-layout-header');
-  });
-
-  it('merges a caller className', () => {
-    const {container} = render(
-      <LayoutHeader className="hdr-custom">H</LayoutHeader>,
-    );
-    const el = container.querySelector('.astryx-layout-header') as HTMLElement;
-    expect(el.className).toContain('hdr-custom');
-  });
-
-  it('renders children in an inner wrapper (padding owner), not directly on the root', () => {
-    const {container} = render(<LayoutHeader>Inner</LayoutHeader>);
-    const root = container.querySelector(
-      '.astryx-layout-header',
-    ) as HTMLElement;
-    // Children live in a nested inner wrapper (the padding owner), not on the
-    // divider-owning root itself.
-    const inner = screen.getByText('Inner');
-    expect(inner).not.toBe(root);
-    expect(inner.parentElement).toBe(root);
-    expect(root).toContainElement(inner);
-  });
-});
-
-// =============================================================================
-// LayoutFooter
-// =============================================================================
-
-describe('LayoutFooter', () => {
-  it('renders its children', () => {
-    render(<LayoutFooter>Actions</LayoutFooter>);
-    expect(screen.getByText('Actions')).toBeInTheDocument();
-  });
-
-  it('carries the astryx-layout-footer class', () => {
-    const {container} = render(<LayoutFooter>F</LayoutFooter>);
-    expect(
-      container.querySelector('.astryx-layout-footer'),
-    ).toBeInTheDocument();
-  });
-
-  it('exposes a landmark role and accessible name', () => {
-    render(
-      <LayoutFooter role="contentinfo" label="Page footer">
-        F
-      </LayoutFooter>,
-    );
-    expect(
-      screen.getByRole('contentinfo', {name: 'Page footer'}),
-    ).toBeInTheDocument();
-  });
-
-  it('omits data-divider by default and reflects hasDivider when set', () => {
-    const {container, rerender} = render(<LayoutFooter>F</LayoutFooter>);
-    const sel = '.astryx-layout-footer';
-    expect(container.querySelector(sel)?.hasAttribute('data-divider')).toBe(
-      false,
-    );
-    rerender(<LayoutFooter hasDivider>F</LayoutFooter>);
-    expect(container.querySelector(sel)?.getAttribute('data-divider')).toBe(
-      'true',
-    );
-  });
-
-  it('inherits the divider default from context', () => {
-    const {container} = render(
-      <LayoutDividerContext value={{defaultHasDividers: true}}>
-        <LayoutFooter>F</LayoutFooter>
-      </LayoutDividerContext>,
-    );
-    expect(
-      container
-        .querySelector('.astryx-layout-footer')
-        ?.getAttribute('data-divider'),
-    ).toBe('true');
-  });
-
-  it('forwards ref to the outer element', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<LayoutFooter ref={ref}>F</LayoutFooter>);
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current?.className).toContain('astryx-layout-footer');
-  });
-});
-
-// =============================================================================
-// LayoutContent
-// =============================================================================
-
-describe('LayoutContent', () => {
-  it('renders its children', () => {
-    render(<LayoutContent>Body</LayoutContent>);
-    expect(screen.getByText('Body')).toBeInTheDocument();
-  });
-
-  it('carries the astryx-layout-content class', () => {
-    const {container} = render(<LayoutContent>C</LayoutContent>);
-    expect(
-      container.querySelector('.astryx-layout-content'),
-    ).toBeInTheDocument();
-  });
-
-  it('exposes the main landmark role with an accessible name', () => {
-    render(
-      <LayoutContent role="main" label="Main content">
-        C
-      </LayoutContent>,
-    );
-    expect(
-      screen.getByRole('main', {name: 'Main content'}),
-    ).toBeInTheDocument();
-  });
-
-  it('forwards ref to the element', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<LayoutContent ref={ref}>C</LayoutContent>);
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current?.className).toContain('astryx-layout-content');
-  });
-
-  it('merges caller className and inline style', () => {
-    const {container} = render(
-      <LayoutContent className="body-custom" style={{color: 'rgb(1, 2, 3)'}}>
-        C
-      </LayoutContent>,
-    );
-    const el = container.querySelector('.astryx-layout-content') as HTMLElement;
-    expect(el.className).toContain('body-custom');
-    expect(el.style.color).toBe('rgb(1, 2, 3)');
-  });
-
-  it('renders correctly as the content slot of a Layout (reads slot context)', () => {
-    render(
-      <Layout
-        header={<LayoutHeader>H</LayoutHeader>}
-        content={<LayoutContent role="main">Main</LayoutContent>}
-      />,
-    );
-    expect(screen.getByRole('main')).toHaveTextContent('Main');
-  });
-
-  it('accepts padding={0} (full bleed) and a numeric padding without crashing', () => {
-    const {rerender, container} = render(
-      <LayoutContent padding={0}>C</LayoutContent>,
-    );
-    expect(
-      container.querySelector('.astryx-layout-content'),
-    ).toBeInTheDocument();
-    rerender(<LayoutContent padding={6}>C</LayoutContent>);
-    expect(
-      container.querySelector('.astryx-layout-content'),
-    ).toBeInTheDocument();
-  });
-});
-
-// =============================================================================
-// LayoutPanel
-// =============================================================================
-
-describe('LayoutPanel', () => {
-  it('renders its children', () => {
-    render(<LayoutPanel>Nav</LayoutPanel>);
-    expect(screen.getByText('Nav')).toBeInTheDocument();
-  });
-
-  it('carries the astryx-layout-panel class', () => {
-    const {container} = render(<LayoutPanel>P</LayoutPanel>);
-    expect(container.querySelector('.astryx-layout-panel')).toBeInTheDocument();
-  });
-
-  it('exposes a navigation landmark with an accessible name', () => {
-    render(
-      <LayoutPanel role="navigation" label="Primary">
-        P
-      </LayoutPanel>,
-    );
-    expect(
-      screen.getByRole('navigation', {name: 'Primary'}),
-    ).toBeInTheDocument();
-  });
-
-  it('applies a numeric width to the element style', () => {
-    const {container} = render(<LayoutPanel width={240}>P</LayoutPanel>);
-    const el = container.querySelector('.astryx-layout-panel') as HTMLElement;
-    expect(el.getAttribute('style') ?? '').toContain('240px');
-  });
-
-  it('applies a string width to the element style', () => {
-    const {container} = render(<LayoutPanel width="18rem">P</LayoutPanel>);
-    const el = container.querySelector('.astryx-layout-panel') as HTMLElement;
-    expect(el.getAttribute('style') ?? '').toContain('18rem');
-  });
-
-  it('resizable._size overrides the width prop', () => {
-    function Harness() {
-      const region = useResizable({defaultSize: 300});
-      return (
-        <LayoutPanel width={100} resizable={region.props}>
-          P
-        </LayoutPanel>
-      );
-    }
-    const {container} = render(<Harness />);
-    const el = container.querySelector('.astryx-layout-panel') as HTMLElement;
-    const style = el.getAttribute('style') ?? '';
-    expect(style).toContain('300px');
-    expect(style).not.toContain('100px');
-  });
-
-  it('forwards ref to the element', () => {
-    const ref = createRef<HTMLDivElement>();
-    render(<LayoutPanel ref={ref}>P</LayoutPanel>);
-    expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    expect(ref.current?.className).toContain('astryx-layout-panel');
-  });
-
-  it('renders as a start-slot panel inside a Layout without crashing', () => {
-    render(
-      <Layout
-        start={
-          <LayoutPanel hasDivider role="navigation" label="Side">
-            Sidebar
-          </LayoutPanel>
-        }
-        content={<LayoutContent>Main</LayoutContent>}
-      />,
-    );
-    expect(screen.getByRole('navigation', {name: 'Side'})).toHaveTextContent(
-      'Sidebar',
-    );
-  });
-
-  it('renders as an end-slot panel inside a Layout without crashing', () => {
-    render(
-      <Layout
-        end={
-          <LayoutPanel hasDivider role="complementary" label="Inspector">
-            Details
-          </LayoutPanel>
-        }
-        content={<LayoutContent>Main</LayoutContent>}
-      />,
-    );
-    expect(
-      screen.getByRole('complementary', {name: 'Inspector'}),
-    ).toHaveTextContent('Details');
-  });
-
-  it('merges a caller className', () => {
-    const {container} = render(
-      <LayoutPanel className="panel-custom">P</LayoutPanel>,
-    );
-    const el = container.querySelector('.astryx-layout-panel') as HTMLElement;
-    expect(el.className).toContain('panel-custom');
-  });
-});

package/src/Outline/parseOutlineFromMarkdown.test.ts

@@ -1,80 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, expect, it} from 'vitest';
-import {parseOutlineFromMarkdown} from './parseOutlineFromMarkdown';
-
-describe('parseOutlineFromMarkdown', () => {
-  it('returns an empty outline for content with no headings', () => {
-    expect(parseOutlineFromMarkdown('just a paragraph of text')).toEqual([]);
-    expect(parseOutlineFromMarkdown('')).toEqual([]);
-  });
-
-  it('extracts headings with their level and slugified id', () => {
-    const outline = parseOutlineFromMarkdown('# Getting Started');
-    expect(outline).toEqual([
-      {id: 'getting-started', label: 'Getting Started', level: 1},
-    ]);
-  });
-
-  it('captures heading levels distinctly', () => {
-    const outline = parseOutlineFromMarkdown(
-      ['# One', '## Two', '### Three'].join('\n\n'),
-    );
-    expect(outline.map(i => i.level)).toEqual([1, 2, 3]);
-    expect(outline.map(i => i.label)).toEqual(['One', 'Two', 'Three']);
-  });
-
-  it('slugifies punctuation and spaces into single hyphens', () => {
-    const outline = parseOutlineFromMarkdown('# Hello, World!  Again');
-    expect(outline[0].id).toBe('hello-world-again');
-  });
-
-  it('strips quotes rather than converting them to hyphens', () => {
-    const outline = parseOutlineFromMarkdown(`# The "Best" Way`);
-    expect(outline[0].id).toBe('the-best-way');
-  });
-
-  it('trims leading and trailing hyphens from the slug', () => {
-    const outline = parseOutlineFromMarkdown('# ...leading and trailing...');
-    expect(outline[0].id).not.toMatch(/^-/);
-    expect(outline[0].id).not.toMatch(/-$/);
-  });
-
-  it('deduplicates repeated slugs with a numeric suffix', () => {
-    const outline = parseOutlineFromMarkdown(
-      ['# Setup', '# Setup', '# Setup'].join('\n\n'),
-    );
-    expect(outline.map(i => i.id)).toEqual(['setup', 'setup-1', 'setup-2']);
-    // labels stay unchanged even as ids are disambiguated
-    expect(outline.every(i => i.label === 'Setup')).toBe(true);
-  });
-
-  it('falls back to "section" when a heading slugifies to empty', () => {
-    const outline = parseOutlineFromMarkdown(['# !!!', '# @@@'].join('\n\n'));
-    expect(outline.map(i => i.id)).toEqual(['section', 'section-1']);
-  });
-
-  it('flattens inline formatting into the label text', () => {
-    const outline = parseOutlineFromMarkdown('# **Bold** and _italic_ text');
-    expect(outline[0].label).toBe('Bold and italic text');
-    expect(outline[0].id).toBe('bold-and-italic-text');
-  });
-
-  it('includes inline code content in the label', () => {
-    const outline = parseOutlineFromMarkdown('# The `useState` hook');
-    expect(outline[0].label).toBe('The useState hook');
-  });
-
-  it('does not treat fenced code block content as headings', () => {
-    const md = ['# Real Heading', '', '```', '# not a heading', '```'].join(
-      '\n',
-    );
-    const outline = parseOutlineFromMarkdown(md);
-    expect(outline.map(i => i.label)).toEqual(['Real Heading']);
-  });
-
-  it('trims surrounding whitespace from labels', () => {
-    const outline = parseOutlineFromMarkdown('#    Spaced Out   ');
-    expect(outline[0].label).toBe('Spaced Out');
-  });
-});