diff --git a/src/components/TreeView/TreeNavigator.tsx b/src/components/TreeView/TreeNavigator.tsx
index 69a8bcc882..2d623f2bb9 100644
--- a/src/components/TreeView/TreeNavigator.tsx
+++ b/src/components/TreeView/TreeNavigator.tsx
@@ -9,7 +9,7 @@ export interface TreeNavigatorProps {
}
export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
- const { getNextSibling, getOnlyChild, getParent, getPrevSibling } =
+ const { getFirstChild, getNextSibling, getParent, getPrevSibling } =
useTreeNavigation(props);
// Navigate tree via arrow keys.
@@ -23,7 +23,7 @@ export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
case Key.ArrowUp:
return getParent();
case Key.ArrowDown:
- return getOnlyChild();
+ return getFirstChild();
}
};
@@ -43,8 +43,8 @@ export default function TreeNavigator(props: TreeNavigatorProps): ReactElement {
}
interface TreeNavigation {
+ getFirstChild: () => SemanticDomain | undefined;
getNextSibling: () => SemanticDomain | undefined;
- getOnlyChild: () => SemanticDomain | undefined;
getParent: () => SemanticDomain | undefined;
getPrevSibling: () => SemanticDomain | undefined;
}
@@ -53,9 +53,8 @@ interface TreeNavigation {
export function useTreeNavigation(props: TreeNavigatorProps): TreeNavigation {
const dom = props.currentDomain;
return {
+ getFirstChild: () => (dom.children.length ? dom.children[0] : undefined),
getNextSibling: () => dom.next,
- getOnlyChild: () =>
- dom.children.length === 1 ? dom.children[0] : undefined,
getParent: () => dom.parent,
getPrevSibling: () => dom.previous,
};
diff --git a/src/components/TreeView/tests/TreeNavigator.test.tsx b/src/components/TreeView/tests/TreeNavigator.test.tsx
index 30e2a3e3ae..2beb298ebc 100644
--- a/src/components/TreeView/tests/TreeNavigator.test.tsx
+++ b/src/components/TreeView/tests/TreeNavigator.test.tsx
@@ -18,7 +18,12 @@ const headNode: TreeNavigatorProps = {
currentDomain: domMap[mapIds.head],
animate: MOCK_ANIMATE,
};
-// Current domain with a parent, two siblings, and multiple kids
+// Current domain with a parent, no siblings, three kid
+const parentOfThree: TreeNavigatorProps = {
+ currentDomain: domMap[mapIds.parent],
+ animate: MOCK_ANIMATE,
+};
+// Current domain with a parent, two siblings, three kids
const twoBrothersManyKids: TreeNavigatorProps = {
currentDomain: domMap[mapIds.middleKid],
animate: MOCK_ANIMATE,
@@ -56,26 +61,19 @@ describe("TreeNavigator", () => {
expect(current.getPrevSibling()).toBeUndefined();
});
- it("getOnlyChild returns undefined if no children", () => {
+ it("getFirstChild returns undefined if no children", () => {
const { current } = renderHook(() =>
useTreeNavigation(noBrothersNoKids)
).result;
- expect(current.getOnlyChild()).toBeUndefined();
+ expect(current.getFirstChild()).toBeUndefined();
});
- it("getOnlyChild returns undefined if more than one child", () => {
+ it("getFirstChild returns first if at least one child", () => {
const { current } = renderHook(() =>
- useTreeNavigation(twoBrothersManyKids)
+ useTreeNavigation(parentOfThree)
).result;
- expect(current.getOnlyChild()).toBeUndefined();
- });
-
- it("getOnlyChild returns child if only one", () => {
- const { current } = renderHook(() =>
- useTreeNavigation(noBrothersOneKid)
- ).result;
- expect(current.getOnlyChild()).toEqual(
- semDomFromTreeNode(domMap[mapIds.depth4])
+ expect(current.getFirstChild()).toEqual(
+ semDomFromTreeNode(domMap[mapIds.firstKid])
);
});
@@ -127,10 +125,10 @@ describe("TreeNavigator", () => {
const expectedDom = semDomFromTreeNode(domMap[mapIds.parent]);
expect(MOCK_ANIMATE).toHaveBeenCalledWith(expectedDom);
});
- it("down arrow does nothing when multiple kids", () => {
+ it("down arrow moves when multiple kids", () => {
render();
simulateKey(Key.ArrowDown);
- expect(MOCK_ANIMATE).toHaveBeenCalledTimes(0);
+ expect(MOCK_ANIMATE).toHaveBeenCalledTimes(1);
});
it("down arrow moves to only child", () => {
render();