How to use @microsoft/fast-web-utilities - 10 common examples

test("should call the `onDismiss` callback when escape key is pressed and `visible` prop is true", () => {
        const onDismiss: any = jest.fn();
        const map: any = {};

        // Mock window.addEventListener
        window.addEventListener = jest.fn((event: string, callback: any) => {
            map[event] = callback;
        });

        const rendered: any = mount(
            <dialog>
        );

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(0);

        // set visible prop
        rendered.setProps({ visible: true });

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(1);
    });
</dialog>

private handleValueInputKeyDown = (
        rowKey: string,
        rowIndex: number,
        event: React.KeyboardEvent
    ): void => {
        const rowCount: number = Object.keys(this.editData).length;
        switch (event.keyCode) {
            case KeyCodes.enter:
                if (rowIndex < rowCount - 1) {
                    // focus on the next row
                    this.focusOnRow(rowIndex + 1);
                    event.preventDefault();
                } else if (this.editData[rowKey] !== "") {
                    // create a new row if the current one is valid
                    this.createRow(rowCount);
                    event.preventDefault();
                }
                return;

            case KeyCodes.tab:
                if (
                    !event.shiftKey &&
                    rowIndex === rowCount - 1 &&
                    this.editData[rowKey] !== ""

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

const row: string = this.generateRow();
        const span: number = this.generateColumnSpan();
        const gridColumnValue: string = [position, `span ${span}`]
            .filter((item: string | number) => Boolean(item))
            .join(" / ");

        const order: number | null = Array.isArray(this.props.order)
            ? this.getValueByBreakpoint(this.props.order)
            : this.props.order;

        const canUseCssGridStyle: boolean =
            this.props.cssGridPropertyName === "grid"
                ? true
                : this.props.cssGridPropertyName === "-ms-grid"
                    ? false
                    : canUseCssGrid();

        const gridStyles: React.CSSProperties = canUseCssGridStyle
            ? {
                  gridColumn: gridColumnValue,
                  gridRowStart: row,
              }
            : {
                  ["msGridColumn" as any]: this.augmentMsGrid(position),
                  ["msGridColumnSpan" as any]: this.augmentMsGrid(span),
                  ["msGridRow" as any]: row,
              };

        return {
            ...gridStyles,
            order: typeof order === "number" ? order : null,
            // Fixes issue found in firefox where columns that have overflow

const columns: string = `${this.props.margin} minmax(0, ${this.props.maxWidth}) ${
            this.props.margin
        }`;

        const attributes: React.HTMLAttributes = {
            ...this.unhandledProps(),
            className: super.generateClassNames(
                classNames(this.props.managedClasses.page)
            ),
        };

        return {
            ...attributes,
            style: {
                display:
                    this.props.cssGridPropertyName || canUseCssGrid()
                        ? "grid"
                        : "-ms-grid",
                gridTemplateColumns: columns,
                msGridColumns: columns,
                // attributes.style has to be spread here again in order to
                // merge the styles attribute, otherwise it is just overriden
                ...attributes.style,
            },
        };
    }
}

private renderChildren(): React.ReactNode | React.ReactNode[] {
        // We only need to communicate gutters size to ms-grid columns because
        // css grid gives us a css property to set for gutter. If we support
        // css grid, we can safely return children w/o gutter augmentation.
        if (canUseCssGrid()) {
            return this.props.children;
        }

        return React.Children.map(
            this.props.children,
            (child: React.ReactNode | React.ReactNode[]) => {
                if (
                    !child ||
                    (child as any).type !== Column ||
                    (child as any).props.gutter
                ) {
                    return child;
                }

                return React.cloneElement(
                    child as any,

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", { shiftKey: true, keyCode: KeyCodes.arrowLeft });

            expect(rendered.state().width).toBe(initialWidth - 10);
        });

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

            expect(rendered.state().width).toBe(initialWidth - 1);
        });

window.addEventListener = jest.fn((event: string, callback: any) => {
            map[event] = callback;
        });

        const rendered: any = mount(
            <dialog>
        );

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(0);

        // set visible prop
        rendered.setProps({ visible: true });

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(1);
    });
</dialog>

): void => {
        const rowCount: number = Object.keys(this.editData).length;
        switch (event.keyCode) {
            case KeyCodes.enter:
                if (rowIndex < rowCount - 1) {
                    // focus on the next row
                    this.focusOnRow(rowIndex + 1);
                    event.preventDefault();
                } else if (this.editData[rowKey] !== "") {
                    // create a new row if the current one is valid
                    this.createRow(rowCount);
                    event.preventDefault();
                }
                return;

            case KeyCodes.tab:
                if (
                    !event.shiftKey &&
                    rowIndex === rowCount - 1 &&
                    this.editData[rowKey] !== ""
                ) {
                    // create a new row if the current one is valid
                    this.createRow(rowCount);
                    event.preventDefault();
                }
                return;
        }
    };