ant-design-vue/components/button/__tests__/wave.test.js

80 lines
2.3 KiB
JavaScript

import Button from '../index';
import { mount } from '@vue/test-utils';
import { asyncExpect, sleep } from '../../../tests/utils';
describe('click wave effect', () => {
async function clickButton(wrapper) {
await asyncExpect(() => {
wrapper.find('.ant-btn').trigger('click');
});
wrapper.find('.ant-btn').element.dispatchEvent(new Event('transitionstart'));
await sleep(20);
wrapper.find('.ant-btn').element.dispatchEvent(new Event('animationend'));
await sleep(20);
}
it('should have click wave effect for primary button', async () => {
const wrapper = mount({
render() {
return <Button type="primary">button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
'true',
);
});
it('should have click wave effect for default button', async () => {
const wrapper = mount({
render() {
return <Button>button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
'true',
);
});
it('should not have click wave effect for link type button', async () => {
const wrapper = mount({
render() {
return <Button type="link">button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
undefined,
);
});
it('should not have click wave effect for text type button', async () => {
const wrapper = mount({
render() {
return <Button type="text">button</Button>;
},
});
await clickButton(wrapper);
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
undefined,
);
});
it('should handle transitionstart', async () => {
const wrapper = mount({
render() {
return <Button type="primary">button</Button>;
},
});
await clickButton(wrapper);
const buttonNode = wrapper.find('.ant-btn').element;
buttonNode.dispatchEvent(new Event('transitionstart'));
expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
'true',
);
wrapper.unmount();
buttonNode.dispatchEvent(new Event('transitionstart'));
});
});