From e7f1e23cff7566641d4eebf827dd957382d71345 Mon Sep 17 00:00:00 2001
From: Chancellor Clark <chancellor.clark@bigcommerce.com>
Date: Wed, 4 Jan 2023 15:27:00 -0500
Subject: [PATCH] test(component): add tests to capture change

---
 .../src/components/StatefulTree/spec.tsx      | 20 ++++++++++++++++++-
 .../big-design/src/components/Tree/spec.tsx   | 15 ++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

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