Add tests

packages/react/src/toolbar/button/ToolbarButton.test.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { expect } from 'chai';
-// import { spy } from 'sinon';
-// import { act } from '@mui/internal-test-utils';
 import { Toolbar } from '@base-ui-components/react/toolbar';
 import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';

packages/react/src/toolbar/group/ToolbarGroup.test.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { screen } from '@mui/internal-test-utils';
+import { createRenderer, describeConformance } from '#test-utils';
+import { NOOP } from '../../utils/noop';
+import { ToolbarRootContext } from '../root/ToolbarRootContext';
+import { CompositeRootContext } from '../../composite/root/CompositeRootContext';
+
+const testCompositeContext = {
+  highlightedIndex: 0,
+  onHighlightedIndexChange: NOOP,
+};
+
+const testToolbarContext: ToolbarRootContext = {
+  disabled: false,
+  orientation: 'horizontal',
+  setItemMap: NOOP,
+};
+
+describe('<Toolbar.Group />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toolbar.Group />, () => ({
+    refInstanceof: window.HTMLDivElement,
+    render: (node) => {
+      return render(
+        <ToolbarRootContext.Provider value={testToolbarContext}>
+          <CompositeRootContext.Provider value={testCompositeContext}>
+            {node}
+          </CompositeRootContext.Provider>
+        </ToolbarRootContext.Provider>,
+      );
+    },
+  }));
+
+  describe('ARIA attributes', () => {
+    it('renders a group', async () => {
+      const { getByTestId } = await render(
+        <Toolbar.Root>
+          <Toolbar.Group data-testid="group" />
+        </Toolbar.Root>,
+      );
+
+      expect(getByTestId('group')).to.equal(screen.getByRole('group'));
+    });
+  });
+
+  describe('prop: disabled', () => {
+    it('disables all toolbar items except links in the group', async () => {
+      const { getByRole, getByText } = await render(
+        <Toolbar.Root>
+          <Toolbar.Group disabled>
+            <Toolbar.Button />
+            <Toolbar.Link href="https://base-ui.com">Link</Toolbar.Link>
+            <Toolbar.Input defaultValue="" />
+          </Toolbar.Group>
+        </Toolbar.Root>,
+      );
+
+      [getByRole('button'), getByRole('textbox')].forEach((toolbarItem) => {
+        expect(toolbarItem).to.have.attribute('aria-disabled', 'true');
+        expect(toolbarItem).to.have.attribute('data-disabled');
+      });
+
+      expect(getByText('Link')).to.not.have.attribute('data-disabled');
+      expect(getByText('Link')).to.not.have.attribute('aria-disabled');
+    });
+  });
+});

packages/react/src/toolbar/input/ToolbarInput.test.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { expect } from 'chai';
-// import { spy } from 'sinon';
-// import { act } from '@mui/internal-test-utils';
 import { Toolbar } from '@base-ui-components/react/toolbar';
 import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';

packages/react/src/toolbar/link/ToolbarLink.test.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { expect } from 'chai';
-// import { spy } from 'sinon';
-// import { act } from '@mui/internal-test-utils';
 import { Toolbar } from '@base-ui-components/react/toolbar';
 import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';

packages/react/src/toolbar/root/ToolbarRoot.test.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { expect } from 'chai';
-// import { spy } from 'sinon';
-// import { act } from '@mui/internal-test-utils';
 import { Toolbar } from '@base-ui-components/react/toolbar';
-import { createRenderer, describeConformance } from '#test-utils';
+import {
+  DirectionProvider,
+  type TextDirection,
+} from '@base-ui-components/react/direction-provider';
+import { createRenderer, describeConformance, isJSDOM } from '#test-utils';
 
 describe('<Toolbar.Root />', () => {
   const { render } = createRenderer();
@@ -20,4 +22,67 @@ describe('<Toolbar.Root />', () => {
       expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'toolbar');
     });
   });
+
+  describe.skipIf(isJSDOM)('keyboard navigation', () => {
+    [
+      ['ltr', 'horizontal', 'ArrowRight', 'ArrowLeft'],
+      ['ltr', 'vertical', 'ArrowDown', 'ArrowUp'],
+      ['rtl', 'horizontal', 'ArrowLeft', 'ArrowRight'],
+      ['rtl', 'vertical', 'ArrowDown', 'ArrowUp'],
+    ].forEach((entry) => {
+      const [direction, orientation, nextKey, prevKey] = entry;
+
+      function expectFocused(element) {
+        expect(element).to.have.attribute('data-highlighted');
+        expect(element).to.have.attribute('tabindex', '0');
+        expect(element).toHaveFocus();
+      }
+
+      describe(direction, () => {
+        it(`orientation: ${orientation}`, async () => {
+          const { getAllByRole, getByRole, getByText, user } = await render(
+            <DirectionProvider direction={direction as TextDirection}>
+              <Toolbar.Root dir={direction} orientation={orientation}>
+                <Toolbar.Button />
+                <Toolbar.Link href="https://base-ui.com">Link</Toolbar.Link>
+                <Toolbar.Group>
+                  <Toolbar.Button />
+                  <Toolbar.Button />
+                </Toolbar.Group>
+                <Toolbar.Input defaultValue="" />
+              </Toolbar.Root>
+            </DirectionProvider>,
+          );
+          const [button1, groupedButton1, groupedButton2] = getAllByRole('button');
+          const link = getByText('Link');
+          const input = getByRole('textbox');
+
+          await user.keyboard('[Tab]');
+          expectFocused(button1);
+
+          await user.keyboard(`[${nextKey}]`);
+          expectFocused(link);
+
+          await user.keyboard(`[${nextKey}]`);
+          expectFocused(groupedButton1);
+
+          await user.keyboard(`[${nextKey}]`);
+          expectFocused(groupedButton2);
+
+          await user.keyboard(`[${nextKey}]`);
+          expectFocused(input);
+
+          // loop to the beginning
+          await user.keyboard(`[${nextKey}]`);
+          expectFocused(button1);
+
+          await user.keyboard(`[${prevKey}]`);
+          expectFocused(input);
+
+          await user.keyboard(`[${prevKey}]`);
+          expectFocused(groupedButton2);
+        });
+      });
+    });
+  });
 });