test(component): add tests to capture change

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();
+});

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();
+});