@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
66 lines • 3.44 kB
JavaScript
// REACT
import * as React from 'react';
import * as renderer from 'react-test-renderer';
// VENDOR
import { shallow, mount } from 'enzyme';
import { ThemeProvider } from '@xstyled/styled-components';
// COMPONENT
import { RootTheme } from '../../theme';
import { CollapseGroup } from './CollapseGroup.component';
import { Collapse } from '../Collapse.component';
describe('Component: CollapseGroup', () => {
it('should match its snapshot.', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(CollapseGroup, { variant: "comfortable" },
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, null, "Hello World"))));
const component = shallow(subject);
expect(subject).toBeDefined();
expect(component).toBeDefined();
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it("should show only one Collapse component's content when accordion is true.", () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(CollapseGroup, { accordion: true, openIndex: 1 },
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, null, "Hello World"))));
const wrapper = mount(subject);
const toggleButton = wrapper.find('.anchor-collapse-button').first();
toggleButton.simulate('click');
expect(wrapper.find('StyledCollapse.anchor-collapse.open')).toHaveLength(1);
});
// eslint-disable-next-line: max-line-length
it("should assign props specified on the component to child Collapse child component's, and override them.", () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(CollapseGroup, { variant: "comfortable" },
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, { variant: "none" }, "Hello World"),
React.createElement(Collapse, null, "Hello World"))));
const component = mount(subject);
expect(component.find('StyledCollapse.anchor-collapse.comfortable')).toHaveLength(3);
});
it('should remove the bottom border of Collapse child components.', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(CollapseGroup, null,
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, null, "Hello World"),
React.createElement(Collapse, null, "Hello World"))));
const wrapper = mount(subject);
expect(wrapper
.find('StyledCollapse.anchor-collapse')
.at(0)
.hasClass('no-bottom-border')).toEqual(true);
expect(wrapper
.find('StyledCollapse.anchor-collapse')
.at(1)
.hasClass('no-bottom-border')).toEqual(true);
expect(wrapper
.find('StyledCollapse.anchor-collapse')
.at(2)
.hasClass('no-bottom-border')).toEqual(false);
});
});
//# sourceMappingURL=CollapseGroup.component.spec.js.map