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

A React UI Library by RetailMeNot

// VENDOR
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import { ThemeProvider } from '@xstyled/styled-components';
import { shallow, mount } from 'enzyme';
// ANCHOR
import { RootTheme } from '../theme';
import { Skeleton } from './Skeleton.component';
describe('Component: Skeleton', () => {
    it('should be defined.', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Skeleton, null)));
        const wrapper = mount(subject);
        const component = shallow(subject);
        expect(subject).toBeDefined();
        expect(wrapper).toBeDefined();
        expect(component).toBeDefined();
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should render in textOnly mode when given only text', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Skeleton, null, "This is some sample text")));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should wrap over nontext children and hide them', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Skeleton, null,
                React.createElement("div", null, "hide me!"))));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should display just the children when not loading', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement(Skeleton, { loading: false },
                React.createElement("div", null, "show me!"))));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it('should support multiple color schemes', () => {
        const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
            React.createElement("div", null,
                React.createElement(Skeleton, { colorStart: "accent.dark", colorEnd: "accent.light" }, "Apple"),
                React.createElement(Skeleton, { colorStart: "accent.dark", colorEnd: "accent.light" }, "Apple"),
                React.createElement(Skeleton, { colorStart: "secondary.dark", colorEnd: "secondary.light" }, "Banana"))));
        const tree = renderer.create(subject).toJSON();
        expect(tree).toMatchSnapshot();
    });
});
//# sourceMappingURL=Skeleton.component.spec.js.map