@patreon/studio/module/utilities/testing-helpers.jsx

Patreon Studio Design System

import { render } from '@testing-library/react';
import mapValues from 'lodash/mapValues';
import React, { useState } from 'react';
import { StudioProvider } from '../components/StudioProvider';
import { breakpoints } from './breakpoint-definitions';
import { IS_HAPPO } from './env';
/**
 * Uses `@testing-library/react` to render components with the theme.
 */
export const renderWithTheme = (children, config) => render(<StudioProvider tokenColorMode={config?.tokenColorMode}>{children}</StudioProvider>);
/**
 * Generates export for happo tests.
 * @param children
 * @example
 * export const example = happo(<Box {...props} />)
 */
export const happo = (children) => function Happo() {
    return <React.Fragment>{children}</React.Fragment>;
};
/**
 * Utility for testing responsive style rules.
 * @example
 * expect(wrapper).toHaveStyleRule('width', '100%', testBreakpoint.md)
 */
export const testBreakpoint = Object.assign(mapValues(breakpoints, (width) => ({
    media: `(min-width:${width}rem)`,
})), { xs: {} });
/**
 * This is generated png image for use in happo tests
 */
export const happoTestImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAkCAYAAADPRbkKAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAAwoAMABAAAAAEAAAAkAAAAAG2ff3QAAABcSURBVFjD7c+xEYAwDARBuSdyWlNrxBQlV0D044hVfqPfVV1TwXV3ZX2U1wIAAAAAAAAACAAzGaCeNxtwXwAAAAAAAAAAxwHzBagQEOYrew4AAAAAAADwG8CcAGwzS5HboVt+QgAAAABJRU5ErkJggg==`;
/**
 * The `happoCompatibleState` function is a utility for creating stories
 * that are compatible with both Storybook and Happo. This papers over the
 * differences between the two environments by providing a consistent API
 * for managing basic state.
 */
export function happoCompatibleState(story, initialState) {
    if (IS_HAPPO) {
        return function Render() {
            return story({
                isOpen: initialState?.isOpen ?? true,
                setIsOpen: () => null,
                selectedItem: initialState?.selectedItem ?? 0,
                setSelectedItem: () => null,
            });
        };
    }
    return function Render() {
        const [isOpen, setIsOpen] = useState(initialState?.isOpen ?? false);
        const [selectedItem, setSelectedItem] = useState(initialState?.selectedItem ?? 0);
        return story({ isOpen, setIsOpen, selectedItem, setSelectedItem });
    };
}
//# sourceMappingURL=testing-helpers.jsx.map