@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
262 lines • 14.8 kB
JavaScript
// VENDOR
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import { shallow, mount } from 'enzyme';
import { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { Star } from '..';
import { RootTheme } from '../theme';
// COMPONENT
import { Button } from './Button.component';
describe('Component: Button', () => {
it('should be defined', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, null, "Test")));
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();
});
describe('Variant: Primary', () => {
it('should render a filled button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should have a disabled state', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", disabled: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render properly when flipped', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", flip: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render properly when flipped and circular', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", flip: true, circular: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should have a revealed state when flipped', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", flip: true, revealed: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render hovered, active and focused states', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", forceHover: true }, "Text"),
React.createElement(Button, { variant: "filled", forceActive: true }, "Text"),
React.createElement(Button, { variant: "filled", forceFocus: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render with a prefix', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", prefix: React.createElement(Star, null) }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render with a suffix', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", suffix: React.createElement(Star, null) }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should accept a color theme', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", colorTheme: {
dark: '#444466',
base: '#666688',
light: '#8888aa',
} }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Variant: Outline', () => {
it('should render an outline button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "outline" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render hovered, active and focused states', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "outline", forceHover: true }, "Text"),
React.createElement(Button, { variant: "outline", forceActive: true }, "Text"),
React.createElement(Button, { variant: "outline", forceFocus: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should be disableable', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "outline", disabled: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Variant: Minimal', () => {
it('should render an minimal button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "minimal" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render hovered, active and focused states', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "minimal", forceHover: true }, "Text"),
React.createElement(Button, { variant: "minimal", forceActive: true }, "Text"),
React.createElement(Button, { variant: "minimal", forceFocus: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should be disableable', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "minimal", disabled: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Reverse', () => {
describe('Variant: Primary', () => {
it('should render a filled button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", reverse: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render hovered, active and focused states', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", reverse: true, forceHover: true }, "Text"),
React.createElement(Button, { variant: "filled", reverse: true, forceActive: true }, "Text"),
React.createElement(Button, { variant: "filled", reverse: true, forceFocus: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should have a disabled state', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "filled", reverse: true, disabled: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Variant: Outline', () => {
it('should render an outline button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "outline", reverse: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render hovered, active and focused states', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "outline", reverse: true, forceHover: true }, "Text"),
React.createElement(Button, { variant: "outline", reverse: true, forceActive: true }, "Text"),
React.createElement(Button, { variant: "outline", reverse: true, forceFocus: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should be disableable', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "outline", reverse: true, disabled: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Variant: Minimal', () => {
it('should render an minimal button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "minimal", reverse: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render hovered, active and focused states', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "minimal", reverse: true, forceHover: true }, "Text"),
React.createElement(Button, { variant: "minimal", reverse: true, forceActive: true }, "Text"),
React.createElement(Button, { variant: "minimal", reverse: true, forceFocus: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should be disableable', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { variant: "minimal", reverse: true, disabled: true }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
});
describe('Sizes', () => {
it('should render an lg button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { size: "lg" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render a md button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { size: "md" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render an sm button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { size: "sm" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render an xs button', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { size: "xs" }, "Text")));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Icon Only', () => {
it('should render icon-only using a prefix', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { prefix: React.createElement(Star, null) })));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render icon-only using a suffix', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { suffix: React.createElement(Star, null) })));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should render a circular icon', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Button, { prefix: React.createElement(Star, null), circular: true })));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Theme Provided', () => {
it('should use custom size variants from theme', () => {
const CustomTheme = Object.assign(Object.assign({}, RootTheme), { buttons: Object.assign(Object.assign({}, RootTheme.buttons), { sizes: {
humongous: {
minWidth: 30,
height: 8,
affixSpacing: 3,
padding: 4,
contentPadding: 5,
fontSize: 1.5,
},
} }) });
const subject = (React.createElement(ThemeProvider, { theme: CustomTheme },
React.createElement(Button, { size: "humongous" })));
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
});
//# sourceMappingURL=Button.component.spec.js.map