import React from 'react'; import { mount } from 'enzyme'; import TimeLine from '..'; import mountTest from '../../../tests/shared/mountTest'; const { Item } = TimeLine; const wrapperFactory = (timeLineProps = {}) => mount( foo bar baz , ); describe('TimeLine', () => { mountTest(TimeLine); mountTest(TimeLine.Item); describe('renders items without passing any props correctly', () => { const wrapper = wrapperFactory(); it('has 3 timeline item', () => { expect(wrapper.find('li.ant-timeline-item')).toHaveLength(3); }); it('has only 1 timeline item is marked as the last item', () => { expect(wrapper.find('li.ant-timeline-item-last')).toHaveLength(1); }); it('its last item is marked as the last item', () => { expect( wrapper .find('li.ant-timeline-item') .last() .hasClass('ant-timeline-item-last'), ).toBe(true); }); }); describe('renders pending item', () => { const pending =
pending...
; const pendingDot = dot; it('has one extra timeline item', () => { const wrapper = wrapperFactory({ pending }); expect(wrapper.find('li.ant-timeline-item')).toHaveLength(4); }); it('has extra pending timeline item', () => { const wrapper = wrapperFactory({ pending }); expect(wrapper.find('li.ant-timeline-item-pending')).toHaveLength(1); }); it("renders the pending timeline item as long as it receive a truthy prop value to 'pending'", () => { const wrapper = wrapperFactory({ pending: true }); expect(wrapper.find('li.ant-timeline-item-pending')).toBeTruthy(); }); it('its last item is marked as the pending item', () => { const wrapper = wrapperFactory({ pending }); expect( wrapper .find('li.ant-timeline-item') .last() .hasClass('ant-timeline-item-pending'), ).toBe(true); }); it('its second to last item is marked as the last item', () => { const wrapper = wrapperFactory({ pending }); const items = wrapper.find('li.ant-timeline-item'); expect(items.at(items.length - 2).hasClass('ant-timeline-item-last')).toBe(true); }); it('has the correct pending node', () => { const wrapper = wrapperFactory({ pending }); expect(wrapper.find('li.ant-timeline-item-pending').contains(pending)).toBe(true); }); it('has the correct pending dot node', () => { const wrapper = wrapperFactory({ pending, pendingDot }); expect(wrapper.find('li.ant-timeline-item-pending').contains(pendingDot)).toBe(true); }); it("has no pending dot if without passing a truthy 'pending' prop", () => { const wrapper = wrapperFactory({ pendingDot }); expect(wrapper.find('li.ant-timeline-item-pending').contains(pendingDot)).toBe(false); }); }); describe('the item rendering sequence is controlled by reverse', () => { it('items is in order when prop reverse is false', () => { const wrapper = wrapperFactory({ reverse: false }); expect(wrapper.find('.ant-timeline-item-content').map(w => w.text())).toEqual([ 'foo', 'bar', 'baz', ]); }); it('items is reversed when prop reverse is true', () => { const wrapper = wrapperFactory({ reverse: true }); expect(wrapper.find('.ant-timeline-item-content').map(w => w.text())).toEqual([ 'baz', 'bar', 'foo', ]); }); }); describe('renders items reversely and with pending item', () => { const pending =
pending...
; it('its last item is marked as the last item', () => { const wrapper = wrapperFactory({ pending, reverse: true }); expect( wrapper .find('li.ant-timeline-item') .last() .hasClass('ant-timeline-item-last'), ).toBe(true); }); it('its first item is marked as the pending item', () => { const wrapper = wrapperFactory({ pending, reverse: true }); expect( wrapper .find('li.ant-timeline-item') .first() .hasClass('ant-timeline-item-pending'), ).toBe(true); }); }); });