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