Skip to content

Commit e2d2c50

Browse files
Wxh16144Wxh16144
committed
test: add case
1 parent 6707138 commit e2d2c50

2 files changed

Lines changed: 230 additions & 1 deletion

File tree

‎tests/__snapshots__/index.spec.tsx.snap‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`collapse props items should work 1`] = `
4+
<div
5+
class="rc-collapse"
6+
>
7+
<div
8+
class="rc-collapse-item"
9+
>
10+
<div
11+
aria-disabled="false"
12+
aria-expanded="false"
13+
class="rc-collapse-header"
14+
role="button"
15+
tabindex="0"
16+
>
17+
<div
18+
class="rc-collapse-expand-icon"
19+
>
20+
<i
21+
class="arrow"
22+
/>
23+
</div>
24+
<span
25+
class="rc-collapse-header-text"
26+
>
27+
title
28+
</span>
29+
</div>
30+
</div>
31+
<div
32+
class="rc-collapse-item rc-collapse-item-disabled"
33+
>
34+
<div
35+
aria-disabled="true"
36+
aria-expanded="false"
37+
class="rc-collapse-header"
38+
role="button"
39+
tabindex="-1"
40+
>
41+
<div
42+
class="rc-collapse-expand-icon"
43+
>
44+
<i
45+
class="arrow"
46+
/>
47+
</div>
48+
<span
49+
class="rc-collapse-header-text"
50+
>
51+
title 2
52+
</span>
53+
</div>
54+
</div>
55+
</div>
56+
`;
57+
58+
exports[`collapse props items should work with nested 1`] = `
59+
<div
60+
class="rc-collapse"
61+
>
62+
<div
63+
class="rc-collapse-item"
64+
>
65+
<div
66+
aria-disabled="false"
67+
aria-expanded="false"
68+
class="rc-collapse-header"
69+
role="button"
70+
tabindex="0"
71+
>
72+
<div
73+
class="rc-collapse-expand-icon"
74+
>
75+
<i
76+
class="arrow"
77+
/>
78+
</div>
79+
<span
80+
class="rc-collapse-header-text"
81+
>
82+
title
83+
</span>
84+
</div>
85+
</div>
86+
<div
87+
class="rc-collapse-item rc-collapse-item-disabled"
88+
>
89+
<div
90+
aria-disabled="true"
91+
aria-expanded="false"
92+
class="rc-collapse-header"
93+
role="button"
94+
tabindex="-1"
95+
>
96+
<div
97+
class="rc-collapse-expand-icon"
98+
>
99+
<i
100+
class="arrow"
101+
/>
102+
</div>
103+
<span
104+
class="rc-collapse-header-text"
105+
>
106+
title 2
107+
</span>
108+
</div>
109+
</div>
110+
<div
111+
class="rc-collapse-item"
112+
>
113+
<div
114+
aria-disabled="false"
115+
aria-expanded="false"
116+
class="rc-collapse-header"
117+
role="button"
118+
tabindex="0"
119+
>
120+
<div
121+
class="rc-collapse-expand-icon"
122+
>
123+
<i
124+
class="arrow"
125+
/>
126+
</div>
127+
<span
128+
class="rc-collapse-header-text"
129+
>
130+
title 3
131+
</span>
132+
</div>
133+
</div>
134+
</div>
135+
`;

‎tests/index.spec.tsx‎

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
33
import KeyCode from 'rc-util/lib/KeyCode';
44
import React, { Fragment } from 'react';
55
import Collapse, { Panel } from '../src/index';
6-
import type { CollapseProps } from '../src/interface';
6+
import type { CollapseProps, ItemType } from '../src/interface';
77

88
describe('collapse', () => {
99
let changeHook: jest.Mock<any, any> | null;
@@ -690,4 +690,98 @@ describe('collapse', () => {
690690
);
691691
expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
692692
});
693+
694+
describe('props items', () => {
695+
const items: ItemType[] = [
696+
{
697+
header: 'title',
698+
children: 'content',
699+
},
700+
{
701+
header: 'title 2',
702+
children: 'content 2',
703+
collapsible: 'disabled',
704+
},
705+
];
706+
707+
it('should work', () => {
708+
const { container } = render(<Collapse items={items} />);
709+
expect(container.firstChild).toMatchSnapshot();
710+
});
711+
712+
it('should work with onItemClick', () => {
713+
const onItemClick = jest.fn();
714+
const { container } = render(
715+
<Collapse
716+
items={[
717+
...items,
718+
{
719+
header: 'title 3',
720+
onItemClick,
721+
},
722+
]}
723+
/>,
724+
);
725+
fireEvent.click(container.querySelectorAll('.rc-collapse-header')[2]);
726+
expect(onItemClick).toHaveBeenCalled();
727+
expect(onItemClick).lastCalledWith('2');
728+
});
729+
730+
it('should work with collapsible', () => {
731+
const onItemClick = jest.fn();
732+
const onChangeFn = jest.fn();
733+
const { container } = render(
734+
<Collapse
735+
onChange={onChangeFn}
736+
items={[
737+
...items,
738+
{
739+
header: 'title 3',
740+
onItemClick,
741+
collapsible: 'icon',
742+
},
743+
]}
744+
/>,
745+
);
746+
747+
fireEvent.click(container.querySelectorAll('.rc-collapse-header')[2]);
748+
expect(onItemClick).not.toHaveBeenCalled();
749+
750+
fireEvent.click(
751+
container.querySelector('.rc-collapse-item:nth-child(3) .rc-collapse-expand-icon'),
752+
);
753+
expect(onItemClick).toHaveBeenCalled();
754+
expect(onChangeFn).toBeCalledTimes(1);
755+
expect(onChangeFn).lastCalledWith(['2']);
756+
});
757+
758+
it('should work with custom icon', () => {
759+
const { container } = render(
760+
<Collapse
761+
items={[
762+
{
763+
header: 'title',
764+
expandIcon: () => <span className="custom-icon">i</span>,
765+
},
766+
]}
767+
/>,
768+
);
769+
expect(container.querySelector('.custom-icon')).toBeTruthy();
770+
});
771+
772+
it('should work with nested', () => {
773+
const { container } = render(
774+
<Collapse
775+
items={[
776+
...items,
777+
{
778+
header: 'title 3',
779+
children: <Collapse items={items} />,
780+
},
781+
]}
782+
/>,
783+
);
784+
expect(container.firstChild).toMatchSnapshot();
785+
});
786+
});
693787
});

0 commit comments

Comments
 (0)