react-expand-animated
Version:
The expand component that animate the height of child component when toggling
93 lines (55 loc) • 2.05 kB
JSX
import React from 'react';
import { render, mount } from 'enzyme';
import Expand from './Expand';
describe('Expand', () => {
beforeEach(() => {
jest.useFakeTimers();
});
it('when render expand with children --> then render default Expand with children', () => {
const wrapper = render(<Expand>Hello</Expand>);
expect(wrapper).toMatchSnapshot();
});
it('when render expand with open=true --> then render Expand with open styles', () => {
const wrapper = render(<Expand open>Open true</Expand>);
expect(wrapper).toMatchSnapshot();
});
it('when toggle open from false to true --> then change Expand styles from close to open', () => {
const wrapper = mount(<Expand>Toggle</Expand>);
expect(wrapper).toMatchSnapshot();
wrapper.setProps({ open: true });
jest.runOnlyPendingTimers();
wrapper.update();
expect(wrapper).toMatchSnapshot();
jest.runOnlyPendingTimers();
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
it('when toggle three times --> then Expand styles is open', () => {
const wrapper = mount(<Expand>Toggle</Expand>);
wrapper.setProps({ open: true });
jest.runAllTimers();
wrapper.setProps({ open: false });
jest.runAllTimers();
wrapper.setProps({ open: true });
jest.runAllTimers();
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
it('when set props two times true --> then Expand styles is open', () => {
const wrapper = mount(<Expand>Toggle</Expand>);
wrapper.setProps({ open: true });
jest.runAllTimers();
wrapper.setProps({ open: true });
jest.runAllTimers();
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
it('when component unmounted --> then clear timeout', () => {
const wrapper = mount(<Expand>Toggle</Expand>);
wrapper.setProps({ open: true });
const { timeout } = wrapper.instance();
expect(timeout).toBeTruthy();
wrapper.unmount();
expect(clearTimeout).toHaveBeenCalledWith(timeout);
});
});