Add tests

mui · Feb 18, 2025 · 2c50af8 · 2c50af8
1 parent e841c75
commit 2c50af8
Showing 1 changed file with 68 additions and 1 deletion.
diff --git a/packages/react/src/tabs/root/TabsRoot.test.tsx b/packages/react/src/tabs/root/TabsRoot.test.tsx
@@ -431,9 +431,39 @@ describe('<Tabs.Root />', () => {
                 expect(handleKeyDown.callCount).to.equal(1);
                 expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
               });
+
+              it('moves focus to a disabled tab without activating it', async () => {
+                const handleKeyDown = spy();
+                const { getAllByRole } = await render(
+                  <DirectionProvider direction={direction as TextDirection}>
+                    <Tabs.Root
+                      onKeyDown={handleKeyDown}
+                      orientation={orientation as Tabs.Root.Props['orientation']}
+                      value={2}
+                    >
+                      <Tabs.List activateOnFocus={false}>
+                        <Tabs.Tab value={0} />
+                        <Tabs.Tab value={1} disabled />
+                        <Tabs.Tab value={2} />
+                      </Tabs.List>
+                    </Tabs.Root>
+                  </DirectionProvider>,
+                );
+                const [, disabledTab, lastTab] = getAllByRole('tab');
+                await act(async () => {
+                  lastTab.focus();
+                });
+
+                fireEvent.keyDown(lastTab, { key: previousItemKey });
+                await flushMicrotasks();
+
+                expect(disabledTab).toHaveFocus();
+                expect(handleKeyDown.callCount).to.equal(1);
+                expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
+              });
             });
 
-            describe('with `activateOnFocus = true`', () => {
+            describe('with `activateOnFocus = true`', async () => {
               it('moves focus to the last tab while activating it if focus is on the first tab', async () => {
                 const handleChange = spy();
                 const handleKeyDown = spy();
@@ -601,6 +631,43 @@ describe('<Tabs.Root />', () => {
                 expect(handleKeyDown.callCount).to.equal(1);
                 expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
               });
+
+              it('moves focus to a disabled tab without activating it', async () => {
+                const handleChange = spy();
+                const handleKeyDown = spy();
+                const { getAllByRole } = await render(
+                  <DirectionProvider direction={direction as TextDirection}>
+                    <Tabs.Root
+                      onValueChange={handleChange}
+                      onKeyDown={handleKeyDown}
+                      orientation={orientation as Tabs.Root.Props['orientation']}
+                      value={0}
+                    >
+                      <Tabs.List activateOnFocus={false}>
+                        <Tabs.Tab value={0} />
+                        <Tabs.Tab value={1} disabled />
+                        <Tabs.Tab value={2} />
+                      </Tabs.List>
+                    </Tabs.Root>
+                  </DirectionProvider>,
+                );
+                const [firstTab, disabledTab, thirdTab] = getAllByRole('tab');
+                await act(async () => {
+                  firstTab.focus();
+                });
+
+                fireEvent.keyDown(firstTab, { key: nextItemKey });
+                await flushMicrotasks();
+
+                expect(disabledTab).toHaveFocus();
+                expect(handleChange.callCount).to.equal(0);
+                expect(handleKeyDown.callCount).to.equal(1);
+                expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
+
+                fireEvent.keyDown(disabledTab, { key: nextItemKey });
+                await flushMicrotasks();
+                expect(thirdTab).toHaveFocus();
+              });
             });
 
             describe('with `activateOnFocus = true`', () => {