ant-design/components/button/__tests__/wave.test.tsx
lijianan 4e45276c4e
refactor[Wave]: CC => FC (#39705)
* fix

* refactor[Wave]: CC => FC

* fix lint

* fix

* fix

* fix

* add test case

* add test case

* fix test

* fix test

* test case

* add test case

* fix

* fix

* fix

* fix

* raname

* fix

* test case

* test case

* test case

* fix test

* test case

* refactor: Use React way

* test: coverage

* chore: clean up

* rerun fail ci

* fix: React 17 error

* test: fix test case

* test: fix test case

* fix borderRadius

* test: fix test case

* chore: clean up

* chore: clean up

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2022-12-28 23:20:22 +08:00

54 lines
1.8 KiB
TypeScript

import userEvent from '@testing-library/user-event';
import React from 'react';
import Button from '..';
import { fireEvent, render } from '../../../tests/utils';
jest.mock('rc-util/lib/Dom/isVisible', () => {
const mockFn = () => true;
return mockFn;
});
describe('click wave effect', () => {
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.clearAllTimers();
jest.useRealTimers();
document.body.innerHTML = '';
});
async function clickButton(container: HTMLElement) {
const element = container.firstChild;
// https://github.com/testing-library/user-event/issues/833
await userEvent.setup({ advanceTimers: jest.advanceTimersByTime }).click(element as Element);
fireEvent(element!, new Event('transitionstart'));
fireEvent(element!, new Event('animationend'));
}
it('should have click wave effect for primary button', async () => {
const { container } = render(<Button type="primary">button</Button>);
await clickButton(container);
expect(document.querySelector('.ant-wave')).toBeTruthy();
});
it('should have click wave effect for default button', async () => {
const { container } = render(<Button>button</Button>);
await clickButton(container);
expect(document.querySelector('.ant-wave')).toBeTruthy();
});
it('should not have click wave effect for link type button', async () => {
const { container } = render(<Button type="link">button</Button>);
await clickButton(container);
expect(document.querySelector('.ant-wave')).toBeFalsy();
});
it('should not have click wave effect for text type button', async () => {
const { container } = render(<Button type="text">button</Button>);
await clickButton(container);
expect(document.querySelector('.ant-wave')).toBeFalsy();
});
});