mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-24 21:11:18 +08:00
test: move test cases to testing lib for Switch (#36326)
* add * test: wave * fix: type
This commit is contained in:
parent
201a66793f
commit
efe6d7c8a1
@ -1,10 +1,9 @@
|
|||||||
import { mount } from 'enzyme';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Switch from '..';
|
import Switch from '..';
|
||||||
import focusTest from '../../../tests/shared/focusTest';
|
import focusTest from '../../../tests/shared/focusTest';
|
||||||
import mountTest from '../../../tests/shared/mountTest';
|
import mountTest from '../../../tests/shared/mountTest';
|
||||||
import rtlTest from '../../../tests/shared/rtlTest';
|
import rtlTest from '../../../tests/shared/rtlTest';
|
||||||
import { sleep } from '../../../tests/utils';
|
import { sleep, fireEvent, render } from '../../../tests/utils';
|
||||||
import { resetWarned } from '../../_util/warning';
|
import { resetWarned } from '../../_util/warning';
|
||||||
|
|
||||||
describe('Switch', () => {
|
describe('Switch', () => {
|
||||||
@ -13,17 +12,18 @@ describe('Switch', () => {
|
|||||||
rtlTest(Switch);
|
rtlTest(Switch);
|
||||||
|
|
||||||
it('should has click wave effect', async () => {
|
it('should has click wave effect', async () => {
|
||||||
const wrapper = mount(<Switch />);
|
const { container } = render(<Switch />);
|
||||||
wrapper.find('.ant-switch').getDOMNode().click();
|
fireEvent.click(container.querySelector('.ant-switch')!);
|
||||||
await sleep(0);
|
await sleep(0);
|
||||||
expect(wrapper.find('button').getDOMNode().getAttribute('ant-click-animating')).toBe('true');
|
expect(container.querySelector('button')!.getAttribute('ant-click-animating')).toBe('true');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('warning if set `value`', () => {
|
it('warning if set `value`', () => {
|
||||||
resetWarned();
|
resetWarned();
|
||||||
|
|
||||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||||
mount(<Switch value />);
|
const props = { value: true } as any;
|
||||||
|
render(<Switch {...props} />);
|
||||||
expect(errorSpy).toHaveBeenCalledWith(
|
expect(errorSpy).toHaveBeenCalledWith(
|
||||||
'Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?',
|
'Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?',
|
||||||
);
|
);
|
@ -1,27 +0,0 @@
|
|||||||
import { mount } from 'enzyme';
|
|
||||||
import React from 'react';
|
|
||||||
import Switch from '..';
|
|
||||||
import { sleep } from '../../../tests/utils';
|
|
||||||
|
|
||||||
describe('click wave effect', () => {
|
|
||||||
async function click(wrapper) {
|
|
||||||
wrapper.find('.ant-switch').getDOMNode().click();
|
|
||||||
wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('transitionstart'));
|
|
||||||
await sleep(20);
|
|
||||||
wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('animationend'));
|
|
||||||
await sleep(20);
|
|
||||||
}
|
|
||||||
|
|
||||||
it('should have click wave effect', async () => {
|
|
||||||
const wrapper = mount(<Switch />);
|
|
||||||
await click(wrapper);
|
|
||||||
const waveInstance = wrapper.find('InternalWave').instance();
|
|
||||||
const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
|
|
||||||
await click(wrapper);
|
|
||||||
expect(resetEffect).toHaveBeenCalledTimes(1);
|
|
||||||
const event = new Event('animationend');
|
|
||||||
Object.assign(event, { animationName: 'fadeEffect' });
|
|
||||||
wrapper.find('.ant-switch').getDOMNode().dispatchEvent(event);
|
|
||||||
resetEffect.mockRestore();
|
|
||||||
});
|
|
||||||
});
|
|
27
components/switch/__tests__/wave.test.tsx
Normal file
27
components/switch/__tests__/wave.test.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Switch from '..';
|
||||||
|
import { sleep, render, fireEvent } from '../../../tests/utils';
|
||||||
|
|
||||||
|
describe('click wave effect', () => {
|
||||||
|
async function click(container: HTMLElement) {
|
||||||
|
fireEvent.click(container.querySelector('.ant-switch')!);
|
||||||
|
container.querySelector('.ant-switch')!.dispatchEvent(new Event('transitionstart'));
|
||||||
|
await sleep(20);
|
||||||
|
container.querySelector('.ant-switch')!.dispatchEvent(new Event('animationend'));
|
||||||
|
await sleep(20);
|
||||||
|
}
|
||||||
|
|
||||||
|
it('should have click wave effect', async () => {
|
||||||
|
const { container } = render(<Switch />);
|
||||||
|
await click(container);
|
||||||
|
await click(container);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
container.querySelector('.ant-switch')!.getAttribute('ant-switch-click-animating'),
|
||||||
|
).toBeFalsy();
|
||||||
|
|
||||||
|
const event = new Event('animationend');
|
||||||
|
Object.assign(event, { animationName: 'fadeEffect' });
|
||||||
|
container.querySelector('.ant-switch')!.dispatchEvent(event);
|
||||||
|
});
|
||||||
|
});
|
@ -10,7 +10,10 @@ import warning from '../_util/warning';
|
|||||||
import Wave from '../_util/wave';
|
import Wave from '../_util/wave';
|
||||||
|
|
||||||
export type SwitchSize = 'small' | 'default';
|
export type SwitchSize = 'small' | 'default';
|
||||||
export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
|
export type SwitchChangeEventHandler = (
|
||||||
|
checked: boolean,
|
||||||
|
event: React.MouseEvent<HTMLButtonElement>,
|
||||||
|
) => void;
|
||||||
export type SwitchClickEventHandler = SwitchChangeEventHandler;
|
export type SwitchClickEventHandler = SwitchChangeEventHandler;
|
||||||
|
|
||||||
export interface SwitchProps {
|
export interface SwitchProps {
|
||||||
@ -37,7 +40,7 @@ interface CompoundedComponent
|
|||||||
__ANT_SWITCH: boolean;
|
__ANT_SWITCH: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Switch = React.forwardRef<unknown, SwitchProps>(
|
const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
|
||||||
(
|
(
|
||||||
{
|
{
|
||||||
prefixCls: customizePrefixCls,
|
prefixCls: customizePrefixCls,
|
||||||
|
2
typings/custom-typings.d.ts
vendored
2
typings/custom-typings.d.ts
vendored
@ -24,8 +24,6 @@ declare module 'rc-checkbox';
|
|||||||
|
|
||||||
declare module 'rc-rate';
|
declare module 'rc-rate';
|
||||||
|
|
||||||
declare module 'rc-switch';
|
|
||||||
|
|
||||||
declare module '*.json' {
|
declare module '*.json' {
|
||||||
const value: any;
|
const value: any;
|
||||||
export const version: string;
|
export const version: string;
|
||||||
|
Loading…
Reference in New Issue
Block a user