diff --git a/packages/big-design/src/components/StatefulTree/spec.tsx b/packages/big-design/src/components/StatefulTree/spec.tsx index 7adbcd983..d6b0b96b5 100644 --- a/packages/big-design/src/components/StatefulTree/spec.tsx +++ b/packages/big-design/src/components/StatefulTree/spec.tsx @@ -1,7 +1,8 @@ import { theme } from '@bigcommerce/big-design-theme'; +import userEvent from '@testing-library/user-event'; import React from 'react'; -import { fireEvent, render } from '@test/utils'; +import { fireEvent, render, screen } from '@test/utils'; import { StatefulTree, StatefulTreeProps, TreeNodeProps } from '.'; @@ -182,3 +183,20 @@ describe('selectable = radio', () => { } }); }); + +test('should focus on TreeItem on arrow down', async () => { + render(getSimpleTree()); + + const node0 = await screen.findByRole('treeitem', { name: 'Test Node 0' }); + const node1 = await screen.findByRole('treeitem', { name: 'Test Node 1' }); + + await userEvent.tab(); + + expect(node0).toHaveFocus(); + expect(node1).not.toHaveFocus(); + + await userEvent.keyboard('{ArrowDown}'); + + expect(node0).not.toHaveFocus(); + expect(node1).toHaveFocus(); +}); diff --git a/packages/big-design/src/components/Tree/spec.tsx b/packages/big-design/src/components/Tree/spec.tsx index b6b6bad92..83cb5e131 100644 --- a/packages/big-design/src/components/Tree/spec.tsx +++ b/packages/big-design/src/components/Tree/spec.tsx @@ -286,3 +286,18 @@ test('expanding node triggers onExpand', async () => { expect(onExpand).toHaveBeenCalledWith('0'); }); + +test('should focus when tabbed on', async () => { + renderDefaultTree({ + nodes: [{ id: '0', label: 'Test Node 0' }], + focusable: { focusedNode: '0', onFocus: jest.fn() }, + }); + + const node = await screen.findByRole('treeitem'); + + expect(node).not.toHaveFocus(); + + await userEvent.tab(); + + expect(node).toHaveFocus(); +});