mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

test: refactor test cases of Timeline with testing library (#35654)

Browse Source 
* test: refactor test cases of TimeLine

* fix: lint errors
This commit is contained in:
Zack Chang 2022-05-20 19:47:36 +08:00 committed by GitHub
parent f55778cf59
commit 042c718976
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
components/timeline/__tests__/index.test.js
View File

@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme';
import TimeLine from '..'; import TimeLine from '..';
import mountTest from '../../../tests/shared/mountTest'; import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils';
const { Item } = TimeLine; const { Item } = TimeLine;
const wrapperFactory = (timeLineProps = {}, labelItems = null) => const renderFactory = (timeLineProps = {}, labelItems = null) =>
mount( render(
<TimeLine type="editable-card" {...timeLineProps}> <TimeLine type="editable-card" {...timeLineProps}>
<Item key="1">foo</Item> <Item key="1">foo</Item>
<Item key="2">bar</Item> <Item key="2">bar</Item>
@ -22,22 +22,19 @@ describe('TimeLine', () => {
rtlTest(TimeLine); rtlTest(TimeLine);
rtlTest(TimeLine.Item); rtlTest(TimeLine.Item);
describe('renders items without passing any props correctly', () => { it('renders items without passing any props correctly', () => {
const wrapper = wrapperFactory(); const { container } = renderFactory();
it('has 3 timeline item', () => { // has 3 timeline item
expect(wrapper.find('li.ant-timeline-item')).toHaveLength(3); expect(container.querySelectorAll('li.ant-timeline-item')).toHaveLength(3);
});
it('has only 1 timeline item is marked as the last item', () => { // has only 1 timeline item is marked as the last item
expect(wrapper.find('li.ant-timeline-item-last')).toHaveLength(1); expect(container.querySelectorAll('li.ant-timeline-item-last')).toHaveLength(1);
});
it('its last item is marked as the last item', () => { // its last item is marked as the last item
expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe( expect(container.querySelectorAll('li.ant-timeline-item')[2]).toHaveClass(
true, 'ant-timeline-item-last',
); );
});
}); });
describe('renders pending item', () => { describe('renders pending item', () => {
@ -45,66 +42,69 @@ describe('TimeLine', () => {
const pendingDot = <i>dot</i>; const pendingDot = <i>dot</i>;
it('has one extra timeline item', () => { it('has one extra timeline item', () => {
const wrapper = wrapperFactory({ pending }); const { container } = renderFactory({ pending });
expect(wrapper.find('li.ant-timeline-item')).toHaveLength(4); expect(container.querySelectorAll('li.ant-timeline-item')).toHaveLength(4);
}); });
it('has extra pending timeline item', () => { it('has extra pending timeline item', () => {
const wrapper = wrapperFactory({ pending }); const { container } = renderFactory({ pending });
expect(wrapper.find('li.ant-timeline-item-pending')).toHaveLength(1); expect(container.querySelectorAll('li.ant-timeline-item-pending')).toHaveLength(1);
}); });
it("renders the pending timeline item as long as it receive a truthy prop value to 'pending'", () => { it("renders the pending timeline item as long as it receive a truthy prop value to 'pending'", () => {
const wrapper = wrapperFactory({ pending: true }); const { container } = renderFactory({ pending: true });
expect(wrapper.find('li.ant-timeline-item-pending')).toBeTruthy(); expect(container.querySelector('li.ant-timeline-item-pending')).toBeTruthy();
}); });
it('its last item is marked as the pending item', () => { it('its last item is marked as the pending item', () => {
const wrapper = wrapperFactory({ pending }); const { container } = renderFactory({ pending });
expect( const items = container.querySelectorAll('li.ant-timeline-item');
wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-pending'), expect(items[items.length - 1]).toHaveClass('ant-timeline-item-pending');
).toBe(true);
}); });
it('its second to last item is marked as the last item', () => { it('its second to last item is marked as the last item', () => {
const wrapper = wrapperFactory({ pending }); const { container } = renderFactory({ pending });
const items = wrapper.find('li.ant-timeline-item'); const items = container.querySelectorAll('li.ant-timeline-item');
expect(items.at(items.length - 2).hasClass('ant-timeline-item-last')).toBe(true); expect(items[items.length - 2]).toHaveClass('ant-timeline-item-last');
}); });
it('has the correct pending node', () => { it('has the correct pending node', () => {
const wrapper = wrapperFactory({ pending }); const { container, getByText } = renderFactory({ pending });
expect(wrapper.find('li.ant-timeline-item-pending').contains(pending)).toBe(true); expect(container.querySelector('li.ant-timeline-item-pending')).toContainElement(
getByText('pending...'),
);
}); });
it('has the correct pending dot node', () => { it('has the correct pending dot node', () => {
const wrapper = wrapperFactory({ pending, pendingDot }); const { container, getByText } = renderFactory({ pending, pendingDot });
expect(wrapper.find('li.ant-timeline-item-pending').contains(pendingDot)).toBe(true); expect(container.querySelector('li.ant-timeline-item-pending')).toContainElement(
getByText('dot'),
);
}); });
it("has no pending dot if without passing a truthy 'pending' prop", () => { it("has no pending dot if without passing a truthy 'pending' prop", () => {
const wrapper = wrapperFactory({ pendingDot }); const { queryByText } = renderFactory({ pendingDot });
expect(wrapper.find('li.ant-timeline-item-pending').contains(pendingDot)).toBe(false); expect(queryByText('dot')).toBeFalsy();
}); });
}); });
describe('the item rendering sequence is controlled by reverse', () => { describe('the item rendering sequence is controlled by reverse', () => {
const getTextContents = nodeList => Array.from(nodeList).map(node => node.textContent);
it('items is in order when prop reverse is false', () => { it('items is in order when prop reverse is false', () => {
const wrapper = wrapperFactory({ reverse: false }); const { container } = renderFactory({ reverse: false });
expect(wrapper.find('.ant-timeline-item-content').map(w => w.text())).toEqual([ const textContents = getTextContents(
'foo', container.querySelectorAll('.ant-timeline-item-content'),
'bar', );
'baz', expect(textContents).toEqual(['foo', 'bar', 'baz']);
]);
}); });
it('items is reversed when prop reverse is true', () => { it('items is reversed when prop reverse is true', () => {
const wrapper = wrapperFactory({ reverse: true }); const { container } = renderFactory({ reverse: true });
expect(wrapper.find('.ant-timeline-item-content').map(w => w.text())).toEqual([ const textContents = getTextContents(
'baz', container.querySelectorAll('.ant-timeline-item-content'),
'bar', );
'foo', expect(textContents).toEqual(['baz', 'bar', 'foo']);
]);
}); });
}); });
@ -112,29 +112,28 @@ describe('TimeLine', () => {
const pending = <div>pending...</div>; const pending = <div>pending...</div>;
it('its last item is marked as the last item', () => { it('its last item is marked as the last item', () => {
const wrapper = wrapperFactory({ pending, reverse: true }); const { container } = renderFactory({ pending, reverse: true });
expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe( const items = container.querySelectorAll('li.ant-timeline-item');
true, expect(items[items.length - 1]).toHaveClass('ant-timeline-item-last');
);
}); });
it('its first item is marked as the pending item', () => { it('its first item is marked as the pending item', () => {
const wrapper = wrapperFactory({ pending, reverse: true }); const { container } = renderFactory({ pending, reverse: true });
expect( expect(container.querySelector('li.ant-timeline-item')).toHaveClass(
wrapper.find('li.ant-timeline-item').first().hasClass('ant-timeline-item-pending'), 'ant-timeline-item-pending',
).toBe(true); );
}); });
}); });
it('renders Timeline item with label correctly', () => { it('renders Timeline item with label correctly', () => {
const label = '2020-01-01'; const label = '2020-01-01';
const wrapper = wrapperFactory( const { container } = renderFactory(
{}, {},
<Item key="1" label={label}> <Item key="1" label={label}>
foo foo
</Item>, </Item>,
); );
expect(wrapper.find('.ant-timeline-label')).toHaveLength(1); expect(container.querySelectorAll('.ant-timeline-label')).toHaveLength(1);
expect(wrapper.find('.ant-timeline-item-label').text()).toBe(label); expect(container.querySelector('.ant-timeline-item-label')).toHaveTextContent(label);
}); });
}); });