ant-design/components/timeline/__tests__/index.test.tsx
叶枫 502dac12aa
docs: format code ()
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

280 lines
8.9 KiB
TypeScript

import React from 'react';
import type { TimelineProps } from '..';
import TimeLine from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render } from '../../../tests/utils';
const renderFactory = (timeLineProps: TimelineProps) =>
render(
<TimeLine
{...timeLineProps}
items={[
{
children: 'foo',
},
{
children: 'bar',
},
{
children: 'baz',
},
]}
/>,
);
describe('TimeLine', () => {
mountTest(TimeLine);
mountTest(TimeLine.Item);
rtlTest(TimeLine);
rtlTest(TimeLine.Item);
describe('render TimeLine.Item', () => {
it('TimeLine.Item should correctly', () => {
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render(
<TimeLine reverse>
<TimeLine.Item>foo</TimeLine.Item>
<TimeLine.Item>bar</TimeLine.Item>
<TimeLine.Item>baz</TimeLine.Item>
</TimeLine>,
);
// has 3 timeline item
expect(container.querySelectorAll('li.ant-timeline-item')).toHaveLength(3);
// has only 1 timeline item is marked as the last item
expect(container.querySelectorAll('li.ant-timeline-item-last')).toHaveLength(1);
// its last item is marked as the last item
expect(container.querySelectorAll('li.ant-timeline-item')[2]).toHaveClass(
'ant-timeline-item-last',
);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Timeline] `Timeline.Item` is deprecated. Please use `items` instead.',
);
errSpy.mockRestore();
});
it('has extra pending timeline item', () => {
const { container } = render(
<TimeLine pending={<div>pending...</div>} reverse mode="alternate">
<TimeLine.Item>foo</TimeLine.Item>
<TimeLine.Item position="right">bar</TimeLine.Item>
<TimeLine.Item position="left">baz</TimeLine.Item>
</TimeLine>,
);
expect(container.querySelectorAll('li.ant-timeline-item-pending')).toHaveLength(1);
});
it("has no pending dot if without passing a truthy 'pending' prop", () => {
const { queryByText } = render(
<TimeLine pendingDot={<i>dot</i>} reverse>
<TimeLine.Item>foo</TimeLine.Item>
<TimeLine.Item>bar</TimeLine.Item>
<TimeLine.Item position="right">baz</TimeLine.Item>
</TimeLine>,
);
expect(queryByText('dot')).toBeFalsy();
});
});
it('renders items without passing any props correctly', () => {
const { container } = renderFactory({});
// has 3 timeline item
expect(container.querySelectorAll('li.ant-timeline-item')).toHaveLength(3);
// has only 1 timeline item is marked as the last item
expect(container.querySelectorAll('li.ant-timeline-item-last')).toHaveLength(1);
// its last item is marked as the last item
expect(container.querySelectorAll('li.ant-timeline-item')[2]).toHaveClass(
'ant-timeline-item-last',
);
});
describe('renders pending item', () => {
const pending = <div>pending...</div>;
const pendingDot = <i>dot</i>;
it('has one extra timeline item', () => {
const { container } = renderFactory({ pending });
expect(container.querySelectorAll('li.ant-timeline-item')).toHaveLength(4);
});
it('has extra pending timeline item', () => {
const { container } = renderFactory({ pending });
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'", () => {
const { container } = renderFactory({ pending: true });
expect(container.querySelector('li.ant-timeline-item-pending')).toBeTruthy();
});
it('its last item is marked as the pending item', () => {
const { container } = renderFactory({ pending });
const items = container.querySelectorAll('li.ant-timeline-item');
expect(items[items.length - 1]).toHaveClass('ant-timeline-item-pending');
});
it('its second to last item is marked as the last item', () => {
const { container } = renderFactory({ pending });
const items = container.querySelectorAll('li.ant-timeline-item');
expect(items[items.length - 2]).toHaveClass('ant-timeline-item-last');
});
it('has the correct pending node', () => {
const { container, getByText } = renderFactory({ pending });
expect(container.querySelector('li.ant-timeline-item-pending')).toContainElement(
getByText('pending...'),
);
});
it('has the correct pending dot node', () => {
const { container, getByText } = renderFactory({ pending, pendingDot });
expect(container.querySelector('li.ant-timeline-item-pending')).toContainElement(
getByText('dot'),
);
});
it("has no pending dot if without passing a truthy 'pending' prop", () => {
const { queryByText } = renderFactory({ pendingDot });
expect(queryByText('dot')).toBeFalsy();
});
});
describe('the item rendering sequence is controlled by reverse', () => {
const getTextContents = (nodeList: NodeListOf<HTMLDivElement>) =>
Array.from(nodeList).map((node) => node?.textContent);
it('items is in order when prop reverse is false', () => {
const { container } = renderFactory({ reverse: false });
const textContents = getTextContents(
container.querySelectorAll('.ant-timeline-item-content'),
);
expect(textContents).toEqual(['foo', 'bar', 'baz']);
});
it('items is reversed when prop reverse is true', () => {
const { container } = renderFactory({ reverse: true });
const textContents = getTextContents(
container.querySelectorAll('.ant-timeline-item-content'),
);
expect(textContents).toEqual(['baz', 'bar', 'foo']);
});
});
describe('renders items reversely and with pending item', () => {
const pending = <div>pending...</div>;
it('its last item is marked as the last item', () => {
const { container } = renderFactory({ pending, reverse: true });
const items = container.querySelectorAll('li.ant-timeline-item');
expect(items[items.length - 1]).toHaveClass('ant-timeline-item-last');
});
it('its first item is marked as the pending item', () => {
const { container } = renderFactory({ pending, reverse: true });
expect(container.querySelector('li.ant-timeline-item')).toHaveClass(
'ant-timeline-item-pending',
);
});
});
it('renders Timeline item with label correctly', () => {
const label = '2020-01-01';
const { container } = render(
<TimeLine
items={[
{
label,
children: 'foo',
},
{
children: 'bar',
},
{
children: 'baz',
},
]}
/>,
);
expect(container.querySelectorAll('.ant-timeline-label')).toHaveLength(1);
expect(container.querySelector('.ant-timeline-item-label')).toHaveTextContent(label);
});
it('TimeLine className should correctly', () => {
const { container } = renderFactory({ className: 'timelineBox' });
expect(container.querySelector('.ant-timeline')).toHaveClass('timelineBox');
expect(container.querySelectorAll('li.ant-timeline-item')[0]).not.toHaveClass('timelineBox');
});
it('TimeLineItem className should correctly', () => {
const { container } = render(
<TimeLine
items={[
{
className: 'test',
children: 'foo',
},
]}
/>,
);
expect(container.querySelector('.test')).not.toBeNull();
});
describe('prop: color', () => {
const presetColors = ['blue', 'red', 'green', 'gray'];
presetColors.forEach((color) => {
it(`className should have a preset color ${color}`, () => {
const { container } = render(
<TimeLine
items={[
{
color,
children: 'foo',
},
]}
/>,
);
expect(container.querySelector('.ant-timeline-item-head')).toHaveClass(
`ant-timeline-item-head-${color}`,
);
});
});
// other non-preset colors
const nonPresetColors = ['rgb(255, 0, 0)', 'rgba(255, 0, 0, 0.5)', '#ff0000', '#f00'].filter(
(color) => !presetColors.includes(color),
);
// https://github.com/ant-design/ant-design/issues/39386
nonPresetColors.forEach((color) => {
it(`className should not have a non-preset color ${color}`, () => {
const { container } = render(
<TimeLine
items={[
{
color,
children: 'foo',
},
]}
/>,
);
expect(container.querySelector('.ant-timeline-item-head')).not.toHaveClass(
`ant-timeline-item-head-${color}`,
);
});
});
});
});