@pharos-ds/core 0.1.9

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -0,0 +1,612 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file ButtonGroup.test.tsx
+ * @input Uses vitest, @testing-library/react, @babel/core + @stylexjs/babel-plugin,
+ *   ButtonGroup and Button components
+ * @output Unit tests for ButtonGroup, incl. the compiled-CSS contract for the
+ *   trailing radius (#2508)
+ * @position Testing; validates ButtonGroup component implementation
+ *
+ * SYNC: When ButtonGroup component changes, update tests to match new behavior
+ */
+
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {transformSync} from '@babel/core';
+import stylexBabelPlugin from '@stylexjs/babel-plugin';
+import {readFileSync} from 'node:fs';
+import path from 'node:path';
+import {ButtonGroup} from './ButtonGroup';
+import {Button} from '../Button';
+import {IconButton} from '../IconButton';
+import {DropdownMenu} from '../DropdownMenu';
+import {Tooltip} from '../Tooltip';
+import {HoverCard} from '../HoverCard';
+
+describe('ButtonGroup', () => {
+  it('renders a group with aria-label', () => {
+    render(
+      <ButtonGroup label="Actions">
+        <Button label="Copy" />
+        <Button label="Cut" />
+        <Button label="Paste" />
+      </ButtonGroup>,
+    );
+
+    const group = screen.getByRole('group');
+    expect(group).toBeInTheDocument();
+    expect(group).toHaveAttribute('aria-label', 'Actions');
+  });
+
+  it('renders all child buttons', () => {
+    render(
+      <ButtonGroup label="Actions">
+        <Button label="Copy" />
+        <Button label="Cut" />
+        <Button label="Paste" />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Cut'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Paste'})).toBeInTheDocument();
+  });
+
+  it('works with IconButton children', () => {
+    render(
+      <ButtonGroup label="Text formatting">
+        <IconButton
+          label="Bold"
+          icon={<span data-testid="bold-icon">B</span>}
+        />
+        <IconButton
+          label="Italic"
+          icon={<span data-testid="italic-icon">I</span>}
+        />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'Bold'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Italic'})).toBeInTheDocument();
+  });
+
+  it('applies data-testid', () => {
+    render(
+      <ButtonGroup label="Actions" data-testid="my-group">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByTestId('my-group')).toBeInTheDocument();
+  });
+
+  it('forwards ref to the root element', () => {
+    let refValue: HTMLDivElement | null = null;
+    render(
+      <ButtonGroup
+        label="Actions"
+        ref={el => {
+          refValue = el;
+        }}>
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+
+    expect(refValue).toBeInstanceOf(HTMLDivElement);
+    expect(refValue).toBe(screen.getByRole('group'));
+  });
+
+  it('reflects orientation via data-orientation, not aria-orientation', () => {
+    // aria-orientation is not a valid ARIA attribute on role="group"; the
+    // orientation is exposed through data-orientation instead.
+    const {rerender} = render(
+      <ButtonGroup label="Actions">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+
+    let group = screen.getByRole('group');
+    expect(group).not.toHaveAttribute('aria-orientation');
+    expect(group).toHaveAttribute('data-orientation', 'horizontal');
+
+    rerender(
+      <ButtonGroup label="Actions" orientation="vertical">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+
+    group = screen.getByRole('group');
+    expect(group).not.toHaveAttribute('aria-orientation');
+    expect(group).toHaveAttribute('data-orientation', 'vertical');
+  });
+
+  it('renders with vertical orientation', () => {
+    render(
+      <ButtonGroup label="Actions" orientation="vertical">
+        <Button label="Copy" />
+        <Button label="Cut" />
+      </ButtonGroup>,
+    );
+
+    const group = screen.getByRole('group');
+    expect(group).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Cut'})).toBeInTheDocument();
+  });
+
+  it('renders with different sizes', () => {
+    const {rerender} = render(
+      <ButtonGroup label="Actions" size="sm">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+    expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument();
+
+    rerender(
+      <ButtonGroup label="Actions" size="lg">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+    expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument();
+  });
+
+  it('disables all buttons when isDisabled is true', () => {
+    render(
+      <ButtonGroup label="Actions" isDisabled>
+        <Button label="Copy" />
+        <Button label="Cut" />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole('group')).toHaveAttribute('aria-disabled', 'true');
+    expect(screen.getByRole('button', {name: 'Copy'})).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Cut'})).toBeDisabled();
+  });
+
+  it('does not set aria-disabled when not disabled', () => {
+    render(
+      <ButtonGroup label="Actions">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole('group')).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('renders a single button without errors', () => {
+    render(
+      <ButtonGroup label="Actions">
+        <Button label="Copy" />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument();
+  });
+
+  it('renders mixed Button and IconButton children', () => {
+    render(
+      <ButtonGroup label="Edit actions">
+        <Button label="Edit" />
+        <IconButton label="More options" icon={<span>▼</span>} />
+      </ButtonGroup>,
+    );
+
+    expect(screen.getByRole('button', {name: 'Edit'})).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'More options'}),
+    ).toBeInTheDocument();
+  });
+
+  // ===========================================================================
+  // Trailing radius (issue #2508)
+  //
+  // The trailing end cap cannot be keyed off `:last-child`: members render an
+  // invisible layer AFTER their button (tooltip'd Button, DropdownMenu), and
+  // useLayer renders it inline rather than portaling it, so the layer steals the
+  // slot. See IS_LAST_ITEM in Button.tsx.
+  //
+  // HOW THESE TESTS CATCH THE BUG
+  // jsdom applies no StyleX CSS, so a DOM-only test cannot prove which rule
+  // wins — and a test that hand-copies the selector is a tautology (revert
+  // groupStyles to `:last-child` and it still passes). So the predicate is NOT
+  // hand-copied here: `compileButtonRules()` runs the REAL StyleX babel plugin
+  // over Button.tsx (same config as scripts/build-css.mjs) and reads the
+  // trailing-radius rule's selector straight out of the emitted CSS, then
+  // matches it against the real rendered DOM. Revert groupStyles to
+  // `:last-child` and these go red.
+  // ===========================================================================
+  describe('trailing radius (#2508)', () => {
+    /** The group members, in DOM order (excludes invisible layer siblings). */
+    const items = (group: HTMLElement): Element[] =>
+      Array.from(group.querySelectorAll(':scope > *:not([popover])'));
+
+    // -- Compiled CSS, read from the source -----------------------------------
+
+    /** One atomic StyleX rule, parsed out of the plugin's emitted CSS. */
+    type CompiledRule = {
+      /** Atomic class name, e.g. `xp0wexf`. */
+      className: string;
+      /** Selector text after the class, e.g. `:first-child`. '' if unconditional. */
+      condition: string;
+      /** CSS property, e.g. `border-start-end-radius`. */
+      property: string;
+      /** CSS value, e.g. `var(--radius-element)`. */
+      value: string;
+      /** The full compiled selector, e.g. `.xp0wexf:not(:has(~ [data-...]))`. */
+      selector: string;
+    };
+
+    /**
+     * Compiles Button.tsx with the real StyleX babel plugin and returns its
+     * atomic rules. This is the CSS the browser actually gets — the whole point
+     * is that the trailing-radius predicate comes from the SOURCE, never from a
+     * string retyped in this file.
+     */
+    function compileButtonRules(): CompiledRule[] {
+      const repoRoot = path.resolve(__dirname, '../../../..');
+      const buttonSrc = path.resolve(__dirname, '../Button/Button.tsx');
+
+      const result = transformSync(readFileSync(buttonSrc, 'utf8'), {
+        babelrc: false,
+        configFile: false,
+        filename: buttonSrc,
+        presets: [
+          ['@babel/preset-typescript', {isTSX: true, allExtensions: true}],
+          ['@babel/preset-react', {runtime: 'automatic'}],
+        ],
+        plugins: [
+          [
+            stylexBabelPlugin,
+            {
+              dev: false,
+              runtimeInjection: false,
+              genConditionalClasses: true,
+              treeshakeCompensation: true,
+              unstable_moduleResolution: {type: 'commonJS', rootDir: repoRoot},
+            },
+          ],
+        ],
+      });
+
+      const rules =
+        (result?.metadata as {stylex?: [string, {ltr: string}, number][]})
+          ?.stylex ?? [];
+
+      return rules.flatMap(([, {ltr}]) => {
+        // Plain atomic rules only: `.cls<condition>{prop:value}`. @media-wrapped
+        // rules are irrelevant to the radius contract.
+        const parsed = /^\.([\w-]+)([^{]*)\{([\w-]+):(.+)\}$/.exec(ltr);
+        if (!parsed) {
+          return [];
+        }
+        const [, className, condition, property, value] = parsed;
+        return [
+          {
+            className,
+            condition,
+            property,
+            value,
+            selector: `.${className}${condition}`,
+          },
+        ];
+      });
+    }
+
+    const COMPILED = compileButtonRules();
+
+    /** A rounded (non-zero) corner is exactly this value in the compiled CSS. */
+    const ROUNDED = 'var(--radius-element)';
+
+    /** The two corners on the group's trailing edge — pure geometry. */
+    const TRAILING_CORNERS = {
+      horizontal: ['border-end-end-radius', 'border-start-end-radius'],
+      vertical: ['border-end-end-radius', 'border-end-start-radius'],
+    } as const;
+
+    /** The two corners on the group's leading edge — pure geometry. */
+    const LEADING_CORNERS = {
+      horizontal: ['border-end-start-radius', 'border-start-start-radius'],
+      vertical: ['border-start-end-radius', 'border-start-start-radius'],
+    } as const;
+
+    type Orientation = keyof typeof TRAILING_CORNERS;
+
+    /**
+     * The compiled rules that ROUND `corners` and are actually applied to `el`
+     * (its class list carries them). StyleX emits the `default: 0` class and the
+     * conditional class on every member, so this returns the same rules for any
+     * member of the group — which rule *wins* is decided by the selector, and
+     * that is what the tests below assert against the DOM.
+     */
+    const roundingRules = (
+      el: Element,
+      corners: ReadonlyArray<string>,
+    ): CompiledRule[] =>
+      COMPILED.filter(
+        rule =>
+          corners.includes(rule.property) &&
+          rule.value === ROUNDED &&
+          el.classList.contains(rule.className),
+      );
+
+    /** The compiled selectors that round `el`'s trailing corners. */
+    const trailingRoundingSelectors = (
+      el: Element,
+      orientation: Orientation,
+    ): string[] => {
+      const rules = roundingRules(el, TRAILING_CORNERS[orientation]);
+      // Guard against a vacuous pass: both trailing corners must be accounted
+      // for, or the assertions below would be quantifying over an empty set.
+      expect(rules.map(rule => rule.property).sort()).toEqual([
+        ...TRAILING_CORNERS[orientation],
+      ]);
+      return rules.map(rule => rule.selector);
+    };
+
+    /** Does the compiled CSS actually round `el`'s trailing corners? */
+    const hasRoundedTrailingCorners = (
+      el: Element,
+      orientation: Orientation = 'horizontal',
+    ): boolean =>
+      trailingRoundingSelectors(el, orientation).every(selector =>
+        el.matches(selector),
+      );
+
+    // -- The compiled CSS contract --------------------------------------------
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'keys the trailing radius off layer-skipping, not :last-child (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Actions" orientation={orientation}>
+            <Button label="Save" />
+          </ButtonGroup>,
+        );
+
+        const save = screen.getByRole('button', {name: 'Save'});
+        const selectors = trailingRoundingSelectors(save, orientation);
+
+        for (const selector of selectors) {
+          // `:last-child` is the bug: an inline layer element steals the slot.
+          expect(selector).not.toContain(':last-child');
+          // `[popover]` must survive compilation *verbatim*. StyleX only
+          // statically evaluates a selector key from a same-file const; from a
+          // .stylex.ts file it compiles to a mangled selector like `[x13pbwiz]`
+          // that matches nothing in the DOM.
+          expect(selector).toContain('[popover]');
+        }
+      },
+    );
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'still rounds the leading corners off :first-child (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Actions" orientation={orientation}>
+            <Button label="Save" />
+            <Button label="More" tooltip="More options" />
+          </ButtonGroup>,
+        );
+
+        const save = screen.getByRole('button', {name: 'Save'});
+        const more = screen.getByRole('button', {name: 'More'});
+        const rules = roundingRules(save, LEADING_CORNERS[orientation]);
+
+        expect(rules.map(rule => rule.property).sort()).toEqual([
+          ...LEADING_CORNERS[orientation],
+        ]);
+        for (const {condition, selector} of rules) {
+          // The leading edge is genuinely safe on :first-child — a member's
+          // button always precedes its own layer.
+          expect(condition).toBe(':first-child');
+          expect(save.matches(selector)).toBe(true);
+          expect(more.matches(selector)).toBe(false);
+        }
+      },
+    );
+
+    // -- The compiled CSS, matched against the real DOM ------------------------
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'rounds a tooltip’d trailing Button, whose layer follows it in the DOM (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Actions" orientation={orientation}>
+            <Button label="Save" />
+            <Button label="More" tooltip="More options" />
+          </ButtonGroup>,
+        );
+
+        const group = screen.getByRole('group');
+        const save = screen.getByRole('button', {name: 'Save'});
+        const more = screen.getByRole('button', {name: 'More'});
+
+        // Precondition: the tooltip layer really is an inline DOM sibling that
+        // follows the button — this is exactly what broke `:last-child`.
+        expect(more).not.toBe(group.lastElementChild);
+        expect(items(group).at(-1)).toBe(more);
+
+        expect(hasRoundedTrailingCorners(more, orientation)).toBe(true);
+        expect(hasRoundedTrailingCorners(save, orientation)).toBe(false);
+      },
+    );
+
+    it.each(['horizontal', 'vertical'] as const)(
+      'rounds a trailing DropdownMenu trigger, whose popover follows it (%s)',
+      orientation => {
+        render(
+          <ButtonGroup label="Approve action" orientation={orientation}>
+            <Button label="Allow once" variant="primary" />
+            <DropdownMenu
+              button={{label: 'Allow options', variant: 'primary'}}
+              items={[{label: 'Always allow'}]}
+            />
+          </ButtonGroup>,
+        );
+
+        const group = screen.getByRole('group');
+        const allow = screen.getByRole('button', {name: 'Allow once'});
+        const trigger = screen.getByRole('button', {name: 'Allow options'});
+
+        // The popover surface is an inline sibling after the trigger.
+        expect(trigger).not.toBe(group.lastElementChild);
+        expect(items(group).at(-1)).toBe(trigger);
+
+        expect(hasRoundedTrailingCorners(trigger, orientation)).toBe(true);
+        expect(hasRoundedTrailingCorners(allow, orientation)).toBe(false);
+      },
+    );
+
+    it('rounds a trailing link (<a>) member with a tooltip', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <Button label="Docs" href="https://example.com" tooltip="Open docs" />
+        </ButtonGroup>,
+      );
+
+      const group = screen.getByRole('group');
+      const link = screen.getByRole('link', {name: 'Docs'});
+
+      expect(link.tagName).toBe('A');
+      expect(link).not.toBe(group.lastElementChild);
+      expect(items(group).at(-1)).toBe(link);
+
+      expect(hasRoundedTrailingCorners(link)).toBe(true);
+    });
+
+    it('rounds only the last member (first/middle/last)', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="First" />
+          <Button label="Middle" tooltip="Middle tip" />
+          <DropdownMenu
+            button={{label: 'Last'}}
+            items={[{label: 'An option'}]}
+          />
+        </ButtonGroup>,
+      );
+
+      const group = screen.getByRole('group');
+      const [first, middle, last] = items(group);
+
+      expect([first, middle, last].map(el => el.textContent)).toEqual([
+        'First',
+        'Middle',
+        'Last',
+      ]);
+
+      // Middle has a tooltip layer after it, but a *marked* sibling follows too,
+      // so it must NOT take the trailing radius.
+      expect(hasRoundedTrailingCorners(first)).toBe(false);
+      expect(hasRoundedTrailingCorners(middle)).toBe(false);
+      expect(hasRoundedTrailingCorners(last)).toBe(true);
+    });
+
+    it('rounds both edges of a lone tooltip’d member', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Only" tooltip="The only one" />
+        </ButtonGroup>,
+      );
+
+      const only = screen.getByRole('button', {name: 'Only'});
+
+      // Leading edge is unaffected: a member's button always precedes its layer.
+      expect(only.matches(':first-child')).toBe(true);
+      expect(hasRoundedTrailingCorners(only)).toBe(true);
+    });
+
+    // -- Members the group does not recognise ---------------------------------
+    //
+    // The trailing predicate must stay CONSERVATIVE: a sibling the group does
+    // not understand is still a member. Otherwise the button BEFORE it wrongly
+    // takes the trailing radius and renders as a rounded notch mid-group —
+    // worse than the bug being fixed, because it is silent and visual.
+
+    it('does not round the preceding button when a Tooltip-wrapped member follows', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <Tooltip content="Rich tip">
+            <Button label="More" />
+          </Tooltip>
+        </ButtonGroup>,
+      );
+
+      const save = screen.getByRole('button', {name: 'Save'});
+
+      // Tooltip wraps element children in a `display: contents` <div>, so the
+      // inner Button is a DESCENDANT of the wrapper, not a DOM sibling of Save.
+      expect(hasRoundedTrailingCorners(save)).toBe(false);
+    });
+
+    it('does not round the preceding button when a HoverCard-wrapped member follows', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <HoverCard content="Preview">
+            <Button label="More" />
+          </HoverCard>
+        </ButtonGroup>,
+      );
+
+      const save = screen.getByRole('button', {name: 'Save'});
+
+      // Button has no `hoverCard` prop, so wrapping is the ONLY way to put a
+      // HoverCard on a group button — this composition has no alternative.
+      expect(hasRoundedTrailingCorners(save)).toBe(false);
+    });
+
+    it('does not round the preceding button when a raw <button> follows', () => {
+      render(
+        <ButtonGroup label="Actions">
+          <Button label="Save" />
+          <button type="button">Custom</button>
+        </ButtonGroup>,
+      );
+
+      const save = screen.getByRole('button', {name: 'Save'});
+
+      expect(hasRoundedTrailingCorners(save)).toBe(false);
+    });
+  });
+
+  describe('elevation', () => {
+    it('renders a distinct class on the group for each elevation level', () => {
+      const classFor = (elevation: 'none' | 'low' | 'med' | 'high') => {
+        const {container} = render(
+          <ButtonGroup label="Actions" elevation={elevation}>
+            <Button label="One" />
+            <Button label="Two" />
+          </ButtonGroup>,
+        );
+        return container.querySelector('[role="group"]')!.className;
+      };
+      const classes = new Set([
+        classFor('none'),
+        classFor('low'),
+        classFor('med'),
+        classFor('high'),
+      ]);
+      expect(classes.size).toBe(4);
+    });
+
+    it('defaults to flat (elevation none)', () => {
+      const {container: def} = render(
+        <ButtonGroup label="Actions">
+          <Button label="One" />
+        </ButtonGroup>,
+      );
+      const {container: none} = render(
+        <ButtonGroup label="Actions" elevation="none">
+          <Button label="One" />
+        </ButtonGroup>,
+      );
+      expect(def.querySelector('[role="group"]')!.className).toBe(
+        none.querySelector('[role="group"]')!.className,
+      );
+    });
+  });
+});