diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/switch/__tests__/__snapshots__/demo.test.js.snap rename to components/switch/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/switch/__tests__/__snapshots__/index.test.js.snap b/components/switch/__tests__/__snapshots__/index.test.tsx.snap similarity index 100% rename from components/switch/__tests__/__snapshots__/index.test.js.snap rename to components/switch/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/switch/__tests__/demo.test.js b/components/switch/__tests__/demo.test.ts similarity index 100% rename from components/switch/__tests__/demo.test.js rename to components/switch/__tests__/demo.test.ts diff --git a/components/switch/__tests__/index.test.js b/components/switch/__tests__/index.test.tsx similarity index 68% rename from components/switch/__tests__/index.test.js rename to components/switch/__tests__/index.test.tsx index 8f0ee630fa..f5b9835864 100644 --- a/components/switch/__tests__/index.test.js +++ b/components/switch/__tests__/index.test.tsx @@ -1,10 +1,9 @@ -import { mount } from 'enzyme'; import React from 'react'; import Switch from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { sleep } from '../../../tests/utils'; +import { sleep, fireEvent, render } from '../../../tests/utils'; import { resetWarned } from '../../_util/warning'; describe('Switch', () => { @@ -13,17 +12,18 @@ describe('Switch', () => { rtlTest(Switch); it('should has click wave effect', async () => { - const wrapper = mount(); - wrapper.find('.ant-switch').getDOMNode().click(); + const { container } = render(); + fireEvent.click(container.querySelector('.ant-switch')!); 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`', () => { resetWarned(); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - mount(); + const props = { value: true } as any; + render(); expect(errorSpy).toHaveBeenCalledWith( 'Warning: [antd: Switch] `value` is not a valid prop, do you mean `checked`?', ); diff --git a/components/switch/__tests__/wave.test.js b/components/switch/__tests__/wave.test.js deleted file mode 100644 index 79014d25cf..0000000000 --- a/components/switch/__tests__/wave.test.js +++ /dev/null @@ -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(); - 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(); - }); -}); diff --git a/components/switch/__tests__/wave.test.tsx b/components/switch/__tests__/wave.test.tsx new file mode 100644 index 0000000000..6d18ac3f74 --- /dev/null +++ b/components/switch/__tests__/wave.test.tsx @@ -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(); + 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); + }); +}); diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 3bfa6ca364..c519de18e0 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -10,7 +10,10 @@ import warning from '../_util/warning'; import Wave from '../_util/wave'; export type SwitchSize = 'small' | 'default'; -export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void; +export type SwitchChangeEventHandler = ( + checked: boolean, + event: React.MouseEvent, +) => void; export type SwitchClickEventHandler = SwitchChangeEventHandler; export interface SwitchProps { @@ -37,7 +40,7 @@ interface CompoundedComponent __ANT_SWITCH: boolean; } -const Switch = React.forwardRef( +const Switch = React.forwardRef( ( { prefixCls: customizePrefixCls, diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index 76112ff63a..e5c2274ab8 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -24,8 +24,6 @@ declare module 'rc-checkbox'; declare module 'rc-rate'; -declare module 'rc-switch'; - declare module '*.json' { const value: any; export const version: string;