How to use the @microsoft/fast-web-utilities.KeyCodes.arrowDown function in @microsoft/fast-web-utilities

test("should move focus down when the down arrow is pressed", (): void => {
        const rendered: any = mount(
            
                <div role="menuitem">one</div>
                <div role="menuitem">two</div>
            
        );

        rendered.childAt(0).simulate("keydown", { keyCode: KeyCodes.arrowDown });

        expect(rendered.state("focusIndex")).toBe(1);
    });

test("should not throw with a single focusable child in single select mode", (): void => {
        const rendered: any = mount({itemA}, {
            attachTo: container,
        });

        expect(rendered.state("focusIndex")).toBe(0);
        rendered.childAt(0).simulate("keydown", { keyCode: KeyCodes.arrowDown });
        expect(rendered.state("focusIndex")).toBe(0);
        rendered.childAt(0).simulate("keydown", { key: "a" });
        expect(rendered.state("focusIndex")).toBe(0);

        rendered.detach();
    });

test("Arrow keys should increment selection without opening menu in single select mode", (): void => {
        const rendered: any = mount(
            <select>
                {itemA}
                {itemB}
                {itemC}
            </select>
        );

        expect(rendered.state("selectedItems").length).toBe(0);

        rendered.simulate("keydown", { keyCode: KeyCodes.arrowDown });

        expect(rendered.state("selectedItems").length).toBe(1);
        expect(rendered.state("selectedItems")[0].id).toBe("a");
        expect(rendered.state("isMenuOpen")).toBe(false);

        rendered.simulate("keydown", { keyCode: KeyCodes.arrowDown });

        expect(rendered.state("selectedItems").length).toBe(1);
        expect(rendered.state("selectedItems")[0].id).toBe("b");
        expect(rendered.state("isMenuOpen")).toBe(false);

        rendered.simulate("keydown", { keyCode: KeyCodes.arrowDown });
        expect(rendered.state("selectedItems").length).toBe(1);
        expect(rendered.state("selectedItems")[0].id).toBe("c");
        expect(rendered.state("isMenuOpen")).toBe(false);

test("should decrement `height` in state when a user presses down arrow on `resize control` and `resizeFrom` prop is `RowResizeDirection.north`", () => {
            const mockResize: any = jest.fn();

            const rendered: any = mount(
                
            );
            const initialHeight: number = rendered.state().height;

            rendered
                .find(`.${managedClasses.row_resizeHandle}`)
                .simulate("keyDown", { keyCode: KeyCodes.arrowDown });

            expect(rendered.state().height).toBe(initialHeight - 1);
        });

xtest("should increment `height` in state by 10 when a user presses shift and down arrow on `resize control` and `resizeFrom` prop is `RowResizeDirection.south`", () => {
            const mockResize: any = jest.fn();

            const rendered: any = mount(
                
            );
            const initialHeight: number = rendered.state().height;

            rendered
                .find(`.${managedClasses.row_resizeHandle}`)
                .simulate("keyDown", { isShift: true, keyCode: KeyCodes.arrowDown });

            expect(rendered.state().height).toBe(initialHeight + 10);
        });

if (this.state.childrenSearchTerm !== "") {
                    this.onAddComponent(
                        this.state.filteredChildOptions[
                            this.state.indexOfSelectedFilteredChildOption
                        ]
                    );
                }

                this.setState({
                    hideChildrenList: true,
                });
                break;
            case KeyCodes.arrowUp:
                this.selectPreviousFilteredChildOption();
                break;
            case KeyCodes.arrowDown:
                this.selectNextFilteredChildOption();
                break;
        }
    };

.prop("active")
        ).toBe(true);
        expect(
            rendered
                .find(Tab.displayName)
                .at(1)
                .prop("active")
        ).toBe(false);
        expect(
            rendered
                .find(Tab.displayName)
                .at(2)
                .prop("active")
        ).toBe(false);

        tab1.simulate("keydown", { keyCode: KeyCodes.arrowDown });

        expect(onUpdate).toBeCalledWith(id1);

        expect(
            rendered
                .find(Tab.displayName)
                .at(0)
                .prop("tabIndex")
        ).toEqual(0);
        expect(
            rendered
                .find(Tab.displayName)
                .at(1)
                .prop("tabIndex")
        ).toEqual(-1);
        expect(

return (e: React.KeyboardEvent): void => {
            e.preventDefault();

            if (e.target === e.currentTarget) {
                switch (e.keyCode) {
                    case KeyCodes.enter:
                    case KeyCodes.space:
                        if (e.target === e.currentTarget) {
                            this.toggleItems(dataLocation);
                        }
                        break;
                    case KeyCodes.arrowDown:
                        this.focusNextTreeItem(dataLocation);
                        break;
                    case KeyCodes.arrowUp:
                        this.focusPreviousTreeItem(dataLocation);
                        break;
                    case KeyCodes.arrowRight:
                        this.focusAndOpenTreeItems(dataLocation);
                        break;
                    case KeyCodes.arrowLeft:
                        this.focusAndCloseTreeItems(dataLocation);
                        break;
                    case KeyCodes.home:
                        this.focusFirstTreeItem();
                        break;
                    case KeyCodes.end:
                        this.focusLastTreeItem();

.prop("active")
        ).toBe(false);
        expect(
            rendered
                .find(Tab.displayName)
                .at(1)
                .prop("active")
        ).toBe(true);
        expect(
            rendered
                .find(Tab.displayName)
                .at(2)
                .prop("active")
        ).toBe(false);

        tab2.simulate("keydown", { keyCode: KeyCodes.arrowDown });

        expect(
            rendered
                .find(Tab.displayName)
                .at(0)
                .prop("tabIndex")
        ).toEqual(-1);
        expect(
            rendered
                .find(Tab.displayName)
                .at(1)
                .prop("tabIndex")
        ).toEqual(-1);
        expect(
            rendered
                .find(Tab.displayName)

);

        expect(rendered.state("displayString")).toBe("");
        expect(rendered.state("value")).toEqual([]);

        rendered
            .find('[displayString="a"]')
            .simulate("keydown", { keyCode: KeyCodes.space });

        expect(rendered.state("displayString")).toBe("a");
        expect(rendered.state("value")).toEqual(["a"]);

        rendered
            .find('[displayString="a"]')
            .simulate("keydown", { keyCode: KeyCodes.arrowDown, shiftKey: true });

        expect(rendered.state("displayString")).toBe("a, ab");
        expect(rendered.state("value")).toEqual(["a", "b"]);
    });