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

test("should move focus up when the up arrow is pressed", (): void => {
        const rendered: any = mount(
            
                {itemA}
                {itemB}
            ,
            { attachTo: container }
        );

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

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

        rendered.detach();
    });

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

        rendered.setState({ focusIndex: 1 });

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

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

test("should decrement `height` in state when a user presses up 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", { keyCode: KeyCodes.arrowUp });

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

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

        rendered.setState({ focusIndex: 1 });

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

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

test("Arrow up with no selection opens menu and select last item in single select mode", (): void => {
        const rendered: any = mount(
            <select>
                {itemA}
                {itemB}
                {itemC}
            </select>
        );

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

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

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

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

        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.arrowUp });

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

case KeyCodes.enter:
                e.preventDefault();
            case KeyCodes.tab:
                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;
        }
    };

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();
                        break;
                    default:
                        break;

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

        tab3.simulate("keydown", { keyCode: KeyCodes.arrowUp });

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

.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.arrowUp });

        expect(onUpdate).toBeCalledWith(id2);

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