Skip to content

Commit f32da7e

Browse files
author
梁朝飞
committed
feat: add unit test
1 parent 6eb0782 commit f32da7e

File tree

1 file changed

+32
-15
lines changed

1 file changed

+32
-15
lines changed

tests/index.test.tsx

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -451,39 +451,56 @@ describe('rc-segmented', () => {
451451
offsetParentSpy.mockRestore();
452452
});
453453
});
454-
describe('render segmented with CSSMotion: vertical', () => {
455-
it('quick switch', () => {
454+
describe('Segmented component vertical layout animation', () => {
455+
it('should apply correct styles during animation for vertical layout', () => {
456456
const offsetParentSpy = jest
457457
.spyOn(HTMLElement.prototype, 'offsetParent', 'get')
458-
.mockImplementation(() => {
459-
return container;
460-
});
458+
.mockImplementation(() => container);
459+
460+
const handleValueChange = jest.fn();
461461
const { container } = render(
462462
<Segmented
463+
options={['Option 1', 'Option 2', 'Option 3']}
464+
onChange={(value) => handleValueChange(value)}
463465
vertical
464-
options={['IOS', 'Android', 'Web3']}
465-
defaultValue="Android"
466466
/>,
467467
);
468468

469-
// >>> Click: Web3
469+
// Initial state check
470+
expectMatchChecked(container, [true, false, false]);
471+
expect(container.querySelectorAll('.rc-segmented-item')[0]).toHaveClass(
472+
'rc-segmented-item-selected',
473+
);
474+
475+
// Click: Option 3
470476
fireEvent.click(
471477
container.querySelectorAll('.rc-segmented-item-input')[2],
472478
);
479+
expect(handleValueChange).toBeCalledWith('Option 3');
480+
expectMatchChecked(container, [false, false, true]);
473481

474-
// Motion to active
475-
act(() => {
476-
jest.runAllTimers();
477-
});
482+
// Thumb animation start for vertical layout
478483
expect(container.querySelector('.rc-segmented-thumb')).toHaveClass(
479-
'rc-segmented-thumb-motion-appear-active',
484+
'rc-segmented-thumb-motion',
480485
);
481486

482487
exceptThumbHaveStyle(container, {
483-
'--thumb-active-top': '0px',
484-
'--thumb-active-width': '0px',
488+
'--thumb-start-top': '0px',
489+
'--thumb-start-height': '0px', // Example height
485490
});
486491

492+
// Simulate animation end
493+
act(() => {
494+
jest.runAllTimers();
495+
});
496+
fireEvent.animationEnd(container.querySelector('.rc-segmented-thumb')!);
497+
act(() => {
498+
jest.runAllTimers();
499+
});
500+
501+
// Final check for thumb position
502+
exceptThumbHaveStyle(container, {});
503+
487504
offsetParentSpy.mockRestore();
488505
});
489506
});

0 commit comments

Comments
 (0)