@retailmenot/anchor/ts/Typography/Typography.component.spec.js

A React UI Library by RetailMeNot

// VENDOR
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import { Typography } from './Typography.component';
import styled, { css, ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../theme';
import { themeMerge } from '../utils/themeMerge';
const themeWithCssBlockVariant = themeMerge({
    typography: {
        as: {
            h5: css `
                background-color: blue;
            `,
        },
        scale: {
            24: css `
                background-color: green;
            `,
        },
    },
});
describe('Component: Typography', () => {
    it('match its snapshot', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, null, "Test text")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should render all text elements', () => {
        [
            'p',
            'span',
            'h1',
            'h2',
            'h3',
            'h4',
            'h5',
            'h6',
            'blockquote',
            'address',
            'code',
            'pre',
        ].forEach((element) => {
            expect(mount(React.createElement(ThemeProvider, { theme: RootTheme },
                React.createElement(Typography, { as: element }, "Test text"))).exists(element)).toBeTruthy();
        });
    });
    it('should a span by default', () => {
        expect(mount(React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, null, "Test text"))).exists('span')).toBeTruthy();
    });
    it('should accept a custom size', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, { size: 2 }, "Text")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should accept a custom lineHeight', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, { lineHeight: 3 }, "Text")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should accept a custom display', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, { display: "block" }, "Text")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should be extendable via styled', () => {
        const RedText = styled(Typography) `
            color: red;
        `;
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(RedText, null, "I should be red!")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should be extendable via styled', () => {
        const RedText = styled(Typography) `
            color: red;
        `;
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(RedText, { as: "h1" }, "I should be an h1 and be red!")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should be allow for custom classNames to be added', () => {
        const RedText = styled(Typography) `
            color: red;
        `;
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, { className: "customClass" }, "Typography customClass"),
            React.createElement(RedText, { className: "customClass" }, "RedText customClass"),
            React.createElement(RedText, { as: "h1", className: "customClass" }, "RedText h1 customClass")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('scale should take precendence over as variants', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Typography, { className: "customClass", as: "h5", scale: 32 }, "Typography customClass")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should work with css block as-variants', () => {
        const subject = (React.createElement(ThemeProvider, { theme: themeWithCssBlockVariant },
            React.createElement(Typography, { className: "customClass", as: "h5" }, "Typography customClass")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should work with css block scale variants', () => {
        const subject = (React.createElement(ThemeProvider, { theme: themeWithCssBlockVariant },
            React.createElement(Typography, { className: "customClass", scale: 24 }, "Typography customClass")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('scale should still take precendence with css block as-variants', () => {
        const subject = (React.createElement(ThemeProvider, { theme: themeWithCssBlockVariant },
            React.createElement(Typography, { className: "customClass", as: "h5", scale: 32 }, "Typography customClass")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
});
//# sourceMappingURL=Typography.component.spec.js.map