Skip to content

Commit c51cf9c

Browse files
author
梁朝飞
committed
feat: add unit test
1 parent 624e2c5 commit c51cf9c

File tree

2 files changed

+181
-32
lines changed

2 files changed

+181
-32
lines changed

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,67 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`rc-segmented Segmented vertical layout animations basic 1`] = `
4+
<div
5+
aria-label="segmented control"
6+
class="rc-segmented"
7+
role="listbox"
8+
>
9+
<div
10+
class="rc-segmented-group"
11+
>
12+
<label
13+
class="rc-segmented-item rc-segmented-item-selected"
14+
>
15+
<input
16+
checked=""
17+
class="rc-segmented-item-input"
18+
type="radio"
19+
/>
20+
<div
21+
aria-selected="true"
22+
class="rc-segmented-item-label"
23+
role="option"
24+
title="iOS"
25+
>
26+
iOS
27+
</div>
28+
</label>
29+
<label
30+
class="rc-segmented-item"
31+
>
32+
<input
33+
class="rc-segmented-item-input"
34+
type="radio"
35+
/>
36+
<div
37+
aria-selected="false"
38+
class="rc-segmented-item-label"
39+
role="option"
40+
title="Android"
41+
>
42+
Android
43+
</div>
44+
</label>
45+
<label
46+
class="rc-segmented-item"
47+
>
48+
<input
49+
class="rc-segmented-item-input"
50+
type="radio"
51+
/>
52+
<div
53+
aria-selected="false"
54+
class="rc-segmented-item-label"
55+
role="option"
56+
title="Web3"
57+
>
58+
Web3
59+
</div>
60+
</label>
61+
</div>
62+
</div>
63+
`;
64+
365
exports[`rc-segmented render empty segmented 1`] = `
466
<div
567
aria-label="segmented control"

‎tests/index.test.tsx

Lines changed: 119 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -452,59 +452,146 @@ describe('rc-segmented', () => {
452452
});
453453
});
454454
describe('Segmented vertical layout animations', () => {
455-
it('should apply correct styles on vertical layout with calcThumbStyle', () => {
455+
it('basic', () => {
456+
const offsetParentSpy = jest
457+
.spyOn(HTMLElement.prototype, 'offsetParent', 'get')
458+
.mockImplementation(() => {
459+
return container;
460+
});
456461
const handleValueChange = jest.fn();
457-
const { container } = render(
462+
const { container, asFragment } = render(
458463
<Segmented
459464
options={['iOS', 'Android', 'Web3']}
460-
vertical
461465
onChange={(value) => handleValueChange(value)}
462466
/>,
463467
);
468+
expect(asFragment().firstChild).toMatchSnapshot();
464469

470+
expectMatchChecked(container, [true, false, false]);
471+
expect(container.querySelectorAll('.rc-segmented-item')[0]).toHaveClass(
472+
'rc-segmented-item-selected',
473+
);
474+
475+
// >>> Click: Web3
465476
fireEvent.click(
466477
container.querySelectorAll('.rc-segmented-item-input')[2],
467478
);
479+
expect(handleValueChange).toBeCalledWith('Web3');
480+
expectMatchChecked(container, [false, false, true]);
468481

469-
// Verify styles on thumb for vertical layout
470-
exceptThumbHaveStyle(container, {});
471-
});
472-
473-
it('should apply correct styles on onAppearStart for vertical layout', () => {
474-
const handleValueChange = jest.fn();
475-
const { container } = render(
476-
<Segmented
477-
options={['iOS', 'Android', 'Web3']}
478-
vertical
479-
onChange={(value) => handleValueChange(value)}
480-
/>,
482+
expect(container.querySelectorAll('.rc-segmented-thumb')[0]).toHaveClass(
483+
'rc-segmented-thumb-motion',
481484
);
482485

486+
// thumb appeared at `iOS`
487+
exceptThumbHaveStyle(container, {
488+
'--thumb-start-top': '0px',
489+
'--thumb-start-height': '0px',
490+
});
491+
492+
// Motion => active
493+
act(() => {
494+
jest.runAllTimers();
495+
});
496+
497+
// Motion enter end
498+
fireEvent.animationEnd(container.querySelector('.rc-segmented-thumb')!);
499+
act(() => {
500+
jest.runAllTimers();
501+
});
502+
503+
// thumb should disappear
504+
expect(container.querySelector('.rc-segmented-thumb')).toBeFalsy();
505+
506+
// >>> Click: Android
483507
fireEvent.click(
484508
container.querySelectorAll('.rc-segmented-item-input')[1],
485509
);
510+
expect(handleValueChange).toBeCalledWith('Android');
511+
expectMatchChecked(container, [false, true, false]);
486512

487-
// Verify styles on thumb for vertical layout
488-
exceptThumbHaveStyle(container, {});
489-
});
490-
491-
it('should apply correct styles on onAppearActive for vertical layout', () => {
492-
const handleValueChange = jest.fn();
493-
const { container } = render(
494-
<Segmented
495-
options={['iOS', 'Android', 'Web3']}
496-
vertical
497-
onChange={(value) => handleValueChange(value)}
498-
/>,
513+
// thumb should move
514+
expect(container.querySelector('.rc-segmented-thumb')).toHaveClass(
515+
'rc-segmented-thumb-motion',
499516
);
500517

501-
fireEvent.click(
502-
container.querySelectorAll('.rc-segmented-item-input')[0],
503-
);
518+
// thumb appeared at `Web3`
519+
exceptThumbHaveStyle(container, {
520+
'--thumb-start-top': '180px',
521+
'--thumb-start-height': '0px',
522+
});
523+
524+
// Motion appear end
525+
act(() => {
526+
jest.runAllTimers();
527+
});
528+
exceptThumbHaveStyle(container, {
529+
'--thumb-active-top': '62px',
530+
'--thumb-active-height': '0px',
531+
});
532+
fireEvent.animationEnd(container.querySelector('.rc-segmented-thumb')!);
533+
act(() => {
534+
jest.runAllTimers();
535+
});
504536

505-
// Verify styles on thumb for vertical layout
506-
exceptThumbHaveStyle(container, {});
537+
// thumb should disappear
538+
expect(container.querySelector('.rc-segmented-thumb')).toBeFalsy();
539+
540+
offsetParentSpy.mockRestore();
507541
});
542+
543+
// it('should apply correct styles on onAppearStart for vertical layout', () => {
544+
// const handleValueChange = jest.fn();
545+
// const { container } = render(
546+
// <Segmented
547+
// options={['iOS', 'Android', 'Web3']}
548+
// vertical
549+
// onChange={(value) => handleValueChange(value)}
550+
// />,
551+
// );
552+
553+
// // 模拟点击 'Android' 选项，触发垂直布局下的 onAppearStart 动画
554+
// fireEvent.click(
555+
// container.querySelectorAll('.rc-segmented-item-input')[1],
556+
// );
557+
558+
// // 验证 thumb 在垂直布局下的开始动画样式
559+
// exceptThumbHaveStyle(container, {
560+
// '--thumb-start-top': '180px',
561+
// '--thumb-start-height': '76px',
562+
// });
563+
// });
564+
565+
// it('should apply correct styles on onAppearActive for vertical layout', () => {
566+
// const handleValueChange = jest.fn();
567+
// const { container } = render(
568+
// <Segmented
569+
// options={['iOS', 'Android', 'Web3']}
570+
// vertical
571+
// onChange={(value) => handleValueChange(value)}
572+
// />,
573+
// );
574+
575+
// // 模拟点击 'iOS' 选项，触发垂直布局下的 onAppearActive 动画
576+
// fireEvent.click(
577+
// container.querySelectorAll('.rc-segmented-item-input')[0],
578+
// );
579+
580+
// // 验证 thumb 在垂直布局下的活跃动画样式
581+
// exceptThumbHaveStyle(container, {
582+
// '--thumb-active-top': '180px',
583+
// '--thumb-active-height': '76px',
584+
// });
585+
// fireEvent.animationEnd(container.querySelector('.rc-segmented-thumb')!);
586+
// act(() => {
587+
// jest.runAllTimers();
588+
// });
589+
590+
// // thumb should disappear
591+
// expect(container.querySelector('.rc-segmented-thumb')).toBeFalsy();
592+
593+
// offsetParentSpy1.mockRestore();
594+
// });
508595
});
509596

510597
it('render segmented with options null/undefined', () => {

0 commit comments

Comments
 (0)