@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
62 lines • 3.25 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 { Collapse } from './';
import { ArrowBack } from '../Icon';
describe('Component: Collapse', () => {
it('should match its snapshot.', () => {
const subject = (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(Collapse, null)));
const component = shallow(subject);
expect(subject).toBeDefined();
expect(component).toBeDefined();
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
it('should show content when isOpen is true.', () => {
const subject = React.createElement(Collapse, { isOpen: true }, "Hello World!");
const component = shallow(subject);
expect(component.find('.anchor-collapse-content').exists()).toBeTruthy();
});
it('should not show content by default.', () => {
const subject = React.createElement(Collapse, null, "Hello World!");
const component = shallow(subject);
expect(component.find('.anchor-collapse-content').exists()).toBeFalsy();
});
it('should use custom openedText as closedText if no closedText is given.', () => {
const sampleText = 'No Toggling Text';
const subject = (React.createElement(Collapse, { openedText: sampleText, isOpen: true }, "Hello World!"));
const component = shallow(subject);
expect(component.find('.anchor-collapse-button').contains(sampleText)).toBeTruthy();
});
it('should toggle content when the button is clicked.', () => {
const subject = React.createElement(Collapse, null, "Hello World!");
const wrapper = mount(subject);
const toggleButton = wrapper.find('.anchor-collapse-button');
toggleButton.simulate('click');
expect(wrapper.find('.anchor-collapse-content').exists()).toBeTruthy();
});
it('should use different closed icon when passed as a prop.', () => {
const subject = (React.createElement(Collapse, { closedIcon: React.createElement(ArrowBack, null) }, "Hello World!"));
const wrapper = mount(subject);
expect(wrapper.find('.anchor-icon.arrow-back').exists()).toBeTruthy();
});
it('should use different opened icon when passed as a prop.', () => {
const subject = (React.createElement(Collapse, { openedIcon: React.createElement(ArrowBack, null), isOpen: true }, "Hello World!"));
const wrapper = mount(subject);
expect(wrapper.find('.anchor-icon.arrow-back').exists()).toBeTruthy();
});
it('should keep closed content in the dom when removeInactive is false.', () => {
const subject = (React.createElement(Collapse, { isOpen: false, removeInactive: false }, "Hello World!"));
const component = shallow(subject);
expect(component.find('.anchor-collapse-content').exists()).toBeTruthy();
const tree = renderer.create(subject).toJSON();
expect(tree).toMatchSnapshot();
});
});
//# sourceMappingURL=Collapse.component.spec.js.map