@primer/components/lib/utils/testing.d.ts

Primer react components

import React from 'react';
import renderer from 'react-test-renderer';
import enzyme from 'enzyme';
declare type ComputedStyles = Record<string, string | Record<string, string>>;
export declare const COMPONENT_DISPLAY_NAME_REGEX: RegExp;
export declare function mount(component: React.ReactElement): enzyme.ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
declare global {
    namespace jest {
        interface Matchers<R> {
            toImplementSxBehavior: () => boolean;
            toSetExports: (exports: Record<string, string>) => boolean;
        }
    }
}
/**
 * Render the component (a React.createElement() or JSX expression)
 * into its intermediate object representation with 'type',
 * 'props', and 'children' keys
 *
 * The returned object can be matched with expect().toEqual(), e.g.
 *
 * ```js
 * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
 * ```
 */
export declare function render(component: React.ReactElement, theme?: {
    animation: {
        easeOutCubic: string;
    };
    borderWidths: (string | number)[];
    breakpoints: string[];
    fonts: {
        normal: any;
        mono: any;
    };
    fontSizes: string[];
    fontWeights: {
        light: number;
        normal: number;
        semibold: number;
        bold: number;
    };
    lineHeights: {
        condensedUltra: number;
        condensed: number;
        default: number;
    };
    radii: string[];
    sizes: {
        small: string;
        medium: string;
        large: string;
        xlarge: string;
    };
    space: string[];
    colorSchemes: Record<"light" | "light_high_contrast" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
        canvasDefaultTransparent: string;
        marketingIcon: {
            primary: string;
            secondary: string;
        };
        diffBlob: {
            addition: {
                numText: string;
                fg: string;
                numBg: string;
                lineBg: string;
                wordBg: string;
            };
            deletion: {
                numText: string;
                fg: string;
                numBg: string;
                lineBg: string;
                wordBg: string;
            };
            hunk: {
                numBg: string;
            };
            expander: {
                icon: string;
            };
            selectedLineHighlightMixBlendMode: string;
        };
        diffstat: {
            deletionBorder: string;
            additionBorder: string;
            additionBg: string;
        };
        searchKeyword: {
            hl: string;
        };
        prettylights: {
            syntax: {
                comment: string;
                constant: string;
                entity: string;
                storageModifierImport: string;
                entityTag: string;
                keyword: string;
                string: string;
                variable: string;
                brackethighlighterUnmatched: string;
                invalidIllegalText: string;
                invalidIllegalBg: string;
                carriageReturnText: string;
                carriageReturnBg: string;
                stringRegexp: string;
                markupList: string;
                markupHeading: string;
                markupItalic: string;
                markupBold: string;
                markupDeletedText: string;
                markupDeletedBg: string;
                markupInsertedText: string;
                markupInsertedBg: string;
                markupChangedText: string;
                markupChangedBg: string;
                markupIgnoredText: string;
                markupIgnoredBg: string;
                metaDiffRange: string;
                brackethighlighterAngle: string;
                sublimelinterGutterMark: string;
                constantOtherReferenceLink: string;
            };
        };
        codemirror: {
            text: string;
            bg: string;
            guttersBg: string;
            guttermarkerText: string;
            guttermarkerSubtleText: string;
            linenumberText: string;
            cursor: string;
            selectionBg: string;
            activelineBg: string;
            matchingbracketText: string;
            linesBg: string;
            syntax: {
                comment: string;
                constant: string;
                entity: string;
                keyword: string;
                storage: string;
                string: string;
                support: string;
                variable: string;
            };
        };
        checks: {
            bg: string;
            runBorderWidth: string;
            containerBorderWidth: string;
            textPrimary: string;
            textSecondary: string;
            textLink: string;
            btnIcon: string;
            btnHoverIcon: string;
            btnHoverBg: string;
            inputText: string;
            inputPlaceholderText: string;
            inputFocusText: string;
            inputBg: string;
            inputShadow: string;
            donutError: string;
            donutPending: string;
            donutSuccess: string;
            donutNeutral: string;
            dropdownText: string;
            dropdownBg: string;
            dropdownBorder: string;
            dropdownShadow: string;
            dropdownHoverText: string;
            dropdownHoverBg: string;
            dropdownBtnHoverText: string;
            dropdownBtnHoverBg: string;
            scrollbarThumbBg: string;
            headerLabelText: string;
            headerLabelOpenText: string;
            headerBorder: string;
            headerIcon: string;
            lineText: string;
            lineNumText: string;
            lineTimestampText: string;
            lineHoverBg: string;
            lineSelectedBg: string;
            lineSelectedNumText: string;
            lineDtFmText: string;
            lineDtFmBg: string;
            gateBg: string;
            gateText: string;
            gateWaitingText: string;
            stepHeaderOpenBg: string;
            stepErrorText: string;
            stepWarningText: string;
            loglineText: string;
            loglineNumText: string;
            loglineDebugText: string;
            loglineErrorText: string;
            loglineErrorNumText: string;
            loglineErrorBg: string;
            loglineWarningText: string;
            loglineWarningNumText: string;
            loglineWarningBg: string;
            loglineCommandText: string;
            loglineSectionText: string;
            ansi: {
                black: string;
                blackBright: string;
                white: string;
                whiteBright: string;
                gray: string;
                red: string;
                redBright: string;
                green: string;
                greenBright: string;
                yellow: string;
                yellowBright: string;
                blue: string;
                blueBright: string;
                magenta: string;
                magentaBright: string;
                cyan: string;
                cyanBright: string;
            };
        };
        project: {
            headerBg: string;
            sidebarBg: string;
            gradientIn: string;
            gradientOut: string;
        };
        mktg: {
            btn: {
                bg: string;
                shadow: {
                    outline: string;
                    focus: string;
                    hover: string;
                    hoverMuted: string;
                };
            };
        };
        avatar: {
            bg: string;
            border: string;
            stackFade: string;
            stackFadeMore: string;
            childShadow: string;
        };
        topicTag: {
            border: string;
        };
        selectMenu: {
            backdropBorder: string;
            tapHighlight: string;
            tapFocusBg: string;
        };
        overlay: {
            shadow: string;
        };
        header: {
            text: string;
            bg: string;
            logo: string;
        };
        headerSearch: {
            bg: string;
            border: string;
        };
        sidenav: {
            selectedBg: string;
        };
        menu: {
            bgActive: string;
        };
        input: {
            disabledBg: string;
        };
        timeline: {
            badgeBg: string;
        };
        ansi: {
            black: string;
            blackBright: string;
            white: string;
            whiteBright: string;
            gray: string;
            red: string;
            redBright: string;
            green: string;
            greenBright: string;
            yellow: string;
            yellowBright: string;
            blue: string;
            blueBright: string;
            magenta: string;
            magentaBright: string;
            cyan: string;
            cyanBright: string;
        };
        btn: {
            text: string;
            bg: string;
            border: string;
            shadow: string;
            insetShadow: string;
            hoverBg: string;
            hoverBorder: string;
            activeBg: string;
            activeBorder: string;
            selectedBg: string;
            focusBg: string;
            focusBorder: string;
            focusShadow: string;
            shadowActive: string;
            shadowInputFocus: string;
            counterBg: string;
            primary: {
                text: string;
                bg: string;
                border: string;
                shadow: string;
                insetShadow: string;
                hoverBg: string;
                hoverBorder: string;
                selectedBg: string;
                selectedShadow: string;
                disabledText: string;
                disabledBg: string;
                disabledBorder: string;
                focusBg: string;
                focusBorder: string;
                focusShadow: string;
                icon: string;
                counterBg: string;
            };
            outline: {
                text: string;
                hoverText: string;
                hoverBg: string;
                hoverBorder: string;
                hoverShadow: string;
                hoverInsetShadow: string;
                hoverCounterBg: string;
                selectedText: string;
                selectedBg: string;
                selectedBorder: string;
                selectedShadow: string;
                disabledText: string;
                disabledBg: string;
                disabledCounterBg: string;
                focusBorder: string;
                focusShadow: string;
                counterBg: string;
            };
            danger: {
                text: string;
                hoverText: string;
                hoverBg: string;
                hoverBorder: string;
                hoverShadow: string;
                hoverInsetShadow: string;
                hoverCounterBg: string;
                selectedText: string;
                selectedBg: string;
                selectedBorder: string;
                selectedShadow: string;
                disabledText: string;
                disabledBg: string;
                disabledCounterBg: string;
                focusBorder: string;
                focusShadow: string;
                counterBg: string;
                icon: string;
                hoverIcon: string;
            };
        };
        underlinenav: {
            icon: string;
            borderHover: string;
        };
        actionListItem: {
            inlineDivider: string;
            default: {
                hoverBg: string;
                activeBg: string;
                selectedBg: string;
            };
            danger: {
                hoverBg: string;
                activeBg: string;
                hoverText: string;
            };
        };
        fg: {
            default: string;
            muted: string;
            subtle: string;
            onEmphasis: string;
        };
        canvas: {
            default: string;
            overlay: string;
            inset: string;
            subtle: string;
        };
        border: {
            default: string;
            muted: string;
            subtle: string;
        };
        shadow: {
            small: string;
            medium: string;
            large: string;
            extraLarge: string;
        };
        neutral: {
            emphasisPlus: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        accent: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        success: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        attention: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        severe: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        danger: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        done: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        sponsors: {
            fg: string;
            emphasis: string;
            muted: string;
            subtle: string;
        };
        primer: {
            fg: {
                disabled: string;
            };
            canvas: {
                backdrop: string;
                sticky: string;
            };
            border: {
                active: string;
                contrast: string;
            };
            shadow: {
                highlight: string;
                inset: string;
                focus: string;
            };
        };
        scale: {
            black: string;
            white: string;
            gray: string[];
            blue: string[];
            green: string[];
            yellow: string[];
            orange: string[];
            red: string[];
            purple: string[];
            pink: string[];
            coral: string[];
        };
    }>>>;
}): renderer.ReactTestRendererJSON;
/**
 * Render the component (a React.createElement() or JSX expression)
 * using react-test-renderer and return the root node
 * ```
 */
export declare function renderRoot(component: React.ReactElement): renderer.ReactTestInstance;
/**
 * Get the HTML class names rendered by the component instance
 * as an array.
 *
 * ```js
 * expect(renderClasses(<div className='a b' />))
 *   .toEqual(['a', 'b'])
 * ```
 */
export declare function renderClasses(component: React.ReactElement): string;
/**
 * Returns true if a node renders with a single class.
 */
export declare function rendersClass(node: React.ReactElement, klass: string): boolean;
export declare function px(value: number | string): string;
export declare function percent(value: number | string): string;
export declare function renderStyles(node: React.ReactElement): ComputedStyles;
export declare function getComputedStyles(className: string): ComputedStyles;
/**
 * This provides a layer of compatibility between the render() function from
 * react-test-renderer and Enzyme's mount()
 */
export declare function getProps(node: React.ReactElement): any;
export declare function getClassName(node: React.ReactElement): any;
export declare function getClasses(node: React.ReactElement): any;
export declare function loadCSS(path: string): Promise<HTMLStyleElement>;
export declare function unloadCSS(path: string): true | undefined;
interface Options {
    skipAs?: boolean;
    skipSx?: boolean;
}
interface BehavesAsComponent {
    Component: React.ComponentType<any>;
    toRender?: () => React.ReactElement;
    options?: Options;
}
export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
export declare function checkExports(path: string, exports: Record<any, any>): void;
export declare function checkStoriesForAxeViolations(name: string): void;
export {};