Refactored accessible list and added basic tests

Author: Said Shah

src/molecules/accessible-list/accessible-list.test.tsx

@@ -1,7 +1,61 @@
-// import React from "react";
-// import { render } from "@testing-library/react";
-// import { AccessibleList } from "./accessible-list";
+import React from "react";
+import faker from "faker";
+import { render, fireEvent } from "@testing-library/react";
+import { AccessibleList } from "./accessible-list";
+import { KeyboardKeys } from "../../constants/keyboard-keys";
 
 describe("AccessibleList", () => {
-    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/19", () => {});
+    test("when default props, renders items", () => {
+        // Arrange
+        const expected = faker.random.word();
+
+        // Act
+        const { getByText } = render(
+            <AccessibleList focusFirstItem={false}>
+                <button>{expected}</button>
+            </AccessibleList>
+        );
+
+        // Assert
+        expect(getByText(expected)).not.toBeNil();
+    });
+
+    test("when onEsc set, calls handler upon escape pressed", () => {
+        // Arrange
+        let isChecked = false;
+        const buttonText = faker.random.word();
+        const onEscHandler = () => {
+            isChecked = true;
+        };
+
+        // Act
+        const { getByText } = render(
+            <AccessibleList focusFirstItem={true} onEsc={onEscHandler}>
+                <button>{buttonText}</button>
+            </AccessibleList>
+        );
+        fireEvent.keyDown(getByText(buttonText), { key: KeyboardKeys.Escape });
+
+        // Assert
+        expect(isChecked).toBeTrue();
+    });
+
+    test("when down arrow pressed, calls setCurrent method", () => {
+        // Arrange
+        const buttonText1 = faker.random.word();
+        const buttonText2 = faker.random.word();
+
+        // Act
+        const { getByText } = render(
+            <AccessibleList focusFirstItem={true}>
+                <button>{buttonText1}</button>
+                <button>{buttonText2}</button>
+            </AccessibleList>
+        );
+        fireEvent.keyDown(getByText(buttonText1), {
+            key: KeyboardKeys.DownArrow,
+        });
+
+        // Assert
+    });
 });

src/molecules/accessible-list/accessible-list.tsx

@@ -37,47 +37,46 @@ const AccessibleList: React.FunctionComponent<AccessibleListProps> = (
     }, [refArray, current, props.focusFirstItem]);
 
     const handleKeyDown = (e: KeyboardEvent) => {
-        if (
-            e.key === KeyboardKeys.DownArrow &&
-            current === refArray.length - 1
-        ) {
-            e.preventDefault();
-            setCurrent(0);
-            return;
-        }
-
-        if (e.key === KeyboardKeys.UpArrow && current === 0) {
-            e.preventDefault();
-            setCurrent(refArray.length - 1);
-            return;
+        switch (e.key) {
+            case KeyboardKeys.UpArrow: {
+                handleUpArrowPress(e);
+                break;
+            }
+            case KeyboardKeys.DownArrow: {
+                handleDownArrowPress(e);
+                break;
+            }
+            case KeyboardKeys.Escape: {
+                handleEscapePress(e);
+                break;
+            }
+            default: {
+                return;
+            }
         }
+    };
 
-        if (
-            e.key === KeyboardKeys.DownArrow &&
-            current !== refArray.length - 1
-        ) {
-            e.preventDefault();
-
-            setCurrent(current + 1);
-            return;
-        }
+    const handleDownArrowPress = (e: KeyboardEvent) => {
+        const isLastElementFocused = current === refArray.length - 1;
+        const indexToFocus = isLastElementFocused ? 0 : current + 1;
 
-        if (e.key === KeyboardKeys.UpArrow && current !== 0) {
-            e.preventDefault();
+        setCurrentAndPreventDefault(e, indexToFocus);
+    };
 
-            setCurrent(current - 1);
-            return;
+    const handleEscapePress = (e: KeyboardEvent) => {
+        setCurrentAndPreventDefault(e, 0);
+        if (props.onEsc != null) {
+            props.onEsc();
         }
+    };
 
-        if (e.key === KeyboardKeys.Escape) {
-            e.preventDefault();
-            setCurrent(0);
+    const handleUpArrowPress = (e: KeyboardEvent) => {
+        const isFirstElementFocused = current === 0;
+        const indexToFocus = isFirstElementFocused
+            ? refArray.length - 1
+            : current - 1;
 
-            if (props.onEsc != null) {
-                props.onEsc();
-            }
-            return;
-        }
+        setCurrentAndPreventDefault(e, indexToFocus);
     };
 
     const renderChildren = () => {
@@ -100,6 +99,17 @@ const AccessibleList: React.FunctionComponent<AccessibleListProps> = (
         });
     };
 
+    const setCurrentAndPreventDefault = (
+        e: KeyboardEvent,
+        indexToFocus: number
+    ) => {
+        if (indexToFocus < 0) {
+            return;
+        }
+        e.preventDefault();
+        setCurrent(indexToFocus);
+    };
+
     return <React.Fragment>{renderChildren()}</React.Fragment>;
 };