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

const mockResize: any = jest.fn();

            // Due to client rect call, let's reset width to 0
            const rendered: any = mount(
                
            );
            const initialWidth: number = rendered.state().width;

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

            expect(rendered.state().width).toBe(initialWidth + 1);

            rendered.update();
        });

xtest("should NOT update `height` in state when a user presses a key other than up or down on `resize control`", () => {
            const mockResize: any = jest.fn();

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

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

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

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

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

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

        rendered.detach();
    });

test("should fire an onResize callback on keydown of the `resize control` when `onResize` prop is passed", (): void => {
            const mockResize: any = jest.fn();
            const rendered: any = mount(
                
            );

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

            expect(mockResize).toHaveBeenCalledTimes(1);
        });

test("should move focus down when the right 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.arrowRight });

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

rendered
            .find(Tab.displayName)
            .at(0)
            .simulate("keydown", { keyCode: KeyCodes.end });
        rendered
            .find(Tab.displayName)
            .at(0)
            .simulate("keydown", { keyCode: KeyCodes.home });
        rendered
            .find(Tab.displayName)
            .at(0)
            .simulate("keydown", { keyCode: KeyCodes.arrowLeft });
        rendered
            .find(Tab.displayName)
            .at(0)
            .simulate("keydown", { keyCode: KeyCodes.arrowRight });
        rendered
            .find(Tab.displayName)
            .at(0)
            .simulate("click", {
                currentTarget: { getAttribute: (): string => id1 },
            });
    });

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

        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(