/
Timeline.test.tsx
51 lines (44 loc) · 1.66 KB
/
Timeline.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React from 'react';
import { render } from '@testing-library/react';
import { itSupportsSystemProps } from '@mantine/tests';
import { Timeline } from './Timeline';
import { TimelineItem } from './TimelineItem/TimelineItem';
const defaultProps = {
children: [
<Timeline.Item key="1" title="Hello" bullet="$">
1
</Timeline.Item>,
<Timeline.Item key="2">2</Timeline.Item>,
<Timeline.Item key="3">3</Timeline.Item>,
],
};
describe('@mantine/core/Timeline', () => {
itSupportsSystemProps({
component: Timeline,
props: defaultProps,
excludePadding: true,
displayName: '@mantine/core/Timeline',
refType: HTMLDivElement,
providerName: 'Timeline',
});
it('handles active item correctly', () => {
const { container: secondActive } = render(<Timeline {...defaultProps} active={1} />);
const { container: thirdActive } = render(<Timeline {...defaultProps} active={2} />);
expect(secondActive.querySelectorAll('.mantine-Timeline-item[data-active]')).toHaveLength(2);
expect(secondActive.querySelectorAll('.mantine-Timeline-item[data-line-active]')).toHaveLength(
1
);
expect(thirdActive.querySelectorAll('.mantine-Timeline-item[data-active]')).toHaveLength(3);
expect(thirdActive.querySelectorAll('.mantine-Timeline-item[data-line-active]')).toHaveLength(
2
);
});
it('supports getting Timeline ref', () => {
const ref = React.createRef<HTMLDivElement>();
render(<Timeline ref={ref} {...defaultProps} />);
expect(ref.current instanceof HTMLDivElement).toBe(true);
});
it('exposes TimelineItem as Timeline.Item', () => {
expect(Timeline.Item).toBe(TimelineItem);
});
});