@primer/components 0.0.0-202111114525 → 0.0.0-2021111164412

package/lib/utils/testing.d.ts

@@ -0,0 +1,545 @@
+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 {};