From 736a277e124db732ed781433c743e94fa040f153 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 14 Feb 2025 20:08:56 +0800
Subject: [PATCH] Add tests

---
 .../src/toolbar/button/ToolbarButton.test.tsx |  2 -
 .../src/toolbar/group/ToolbarGroup.test.tsx   | 70 ++++++++++++++++++
 .../src/toolbar/input/ToolbarInput.test.tsx   |  2 -
 .../src/toolbar/link/ToolbarLink.test.tsx     |  2 -
 .../src/toolbar/root/ToolbarRoot.test.tsx     | 71 ++++++++++++++++++-
 5 files changed, 138 insertions(+), 9 deletions(-)
 create mode 100644 packages/react/src/toolbar/group/ToolbarGroup.test.tsx

diff --git a/packages/react/src/toolbar/button/ToolbarButton.test.tsx b/packages/react/src/toolbar/button/ToolbarButton.test.tsx
index 09f757062f..ae6e4d2bb3 100644
--- a/packages/react/src/toolbar/button/ToolbarButton.test.tsx
+++ b/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';
diff --git a/packages/react/src/toolbar/group/ToolbarGroup.test.tsx b/packages/react/src/toolbar/group/ToolbarGroup.test.tsx
new file mode 100644
index 0000000000..ce8ccdea3e
--- /dev/null
+++ b/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');
+    });
+  });
+});
diff --git a/packages/react/src/toolbar/input/ToolbarInput.test.tsx b/packages/react/src/toolbar/input/ToolbarInput.test.tsx
index 55a80a8b8d..9b8154d9b7 100644
--- a/packages/react/src/toolbar/input/ToolbarInput.test.tsx
+++ b/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';
diff --git a/packages/react/src/toolbar/link/ToolbarLink.test.tsx b/packages/react/src/toolbar/link/ToolbarLink.test.tsx
index da291c934a..70aaa6cedd 100644
--- a/packages/react/src/toolbar/link/ToolbarLink.test.tsx
+++ b/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';
diff --git a/packages/react/src/toolbar/root/ToolbarRoot.test.tsx b/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
index 4eb292d1f5..e4ccf773cf 100644
--- a/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
+++ b/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);
+        });
+      });
+    });
+  });
 });