2018-11-12 20:31:58 +08:00
|
|
|
import raf from 'raf';
|
2019-03-09 11:06:18 +08:00
|
|
|
import React from 'react';
|
|
|
|
import { mount } from 'enzyme';
|
2019-05-27 18:53:44 +08:00
|
|
|
import KeyCode from 'rc-util/lib/KeyCode';
|
2018-11-12 20:31:58 +08:00
|
|
|
import delayRaf from '../raf';
|
2017-02-08 14:44:43 +08:00
|
|
|
import throttleByAnimationFrame from '../throttleByAnimationFrame';
|
2018-06-14 22:33:35 +08:00
|
|
|
import getDataOrAriaProps from '../getDataOrAriaProps';
|
2019-03-09 11:06:18 +08:00
|
|
|
import Wave from '../wave';
|
2019-05-27 18:53:44 +08:00
|
|
|
import TransButton from '../transButton';
|
|
|
|
import openAnimation from '../openAnimation';
|
2017-02-08 14:44:43 +08:00
|
|
|
|
|
|
|
describe('Test utils function', () => {
|
2017-11-13 10:46:22 +08:00
|
|
|
beforeAll(() => {
|
|
|
|
jest.useFakeTimers();
|
|
|
|
});
|
|
|
|
|
2017-11-09 20:33:25 +08:00
|
|
|
afterAll(() => {
|
|
|
|
jest.useRealTimers();
|
|
|
|
});
|
2017-11-13 10:46:22 +08:00
|
|
|
|
2017-02-08 14:44:43 +08:00
|
|
|
it('throttle function should work', () => {
|
|
|
|
const callback = jest.fn();
|
|
|
|
const throttled = throttleByAnimationFrame(callback);
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(callback).not.toHaveBeenCalled();
|
2017-02-08 14:44:43 +08:00
|
|
|
|
|
|
|
throttled();
|
|
|
|
throttled();
|
|
|
|
|
|
|
|
jest.runAllTimers();
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(callback).toHaveBeenCalled();
|
2017-02-08 14:44:43 +08:00
|
|
|
expect(callback.mock.calls.length).toBe(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('throttle function should be canceled', () => {
|
|
|
|
const callback = jest.fn();
|
|
|
|
const throttled = throttleByAnimationFrame(callback);
|
|
|
|
|
|
|
|
throttled();
|
|
|
|
throttled.cancel();
|
|
|
|
|
|
|
|
jest.runAllTimers();
|
2019-04-03 15:54:26 +08:00
|
|
|
expect(callback).not.toHaveBeenCalled();
|
2017-02-08 14:44:43 +08:00
|
|
|
});
|
2018-06-12 03:18:41 +08:00
|
|
|
|
2018-06-14 22:33:35 +08:00
|
|
|
describe('getDataOrAriaProps', () => {
|
2018-06-12 03:18:41 +08:00
|
|
|
it('returns all data-* properties from an object', () => {
|
|
|
|
const props = {
|
|
|
|
onClick: () => {},
|
|
|
|
isOpen: true,
|
|
|
|
'data-test': 'test-id',
|
|
|
|
'data-id': 1234,
|
|
|
|
};
|
2018-06-14 22:33:35 +08:00
|
|
|
const results = getDataOrAriaProps(props);
|
2018-06-12 03:18:41 +08:00
|
|
|
expect(results).toEqual({
|
|
|
|
'data-test': 'test-id',
|
|
|
|
'data-id': 1234,
|
|
|
|
});
|
|
|
|
});
|
2018-06-14 22:33:35 +08:00
|
|
|
|
|
|
|
it('does not return data-__ properties from an object', () => {
|
|
|
|
const props = {
|
|
|
|
onClick: () => {},
|
|
|
|
isOpen: true,
|
|
|
|
'data-__test': 'test-id',
|
|
|
|
'data-__id': 1234,
|
|
|
|
};
|
|
|
|
const results = getDataOrAriaProps(props);
|
|
|
|
expect(results).toEqual({});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns all aria-* properties from an object', () => {
|
|
|
|
const props = {
|
|
|
|
onClick: () => {},
|
|
|
|
isOpen: true,
|
|
|
|
'aria-labelledby': 'label-id',
|
|
|
|
'aria-label': 'some-label',
|
|
|
|
};
|
|
|
|
const results = getDataOrAriaProps(props);
|
|
|
|
expect(results).toEqual({
|
|
|
|
'aria-labelledby': 'label-id',
|
|
|
|
'aria-label': 'some-label',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns role property from an object', () => {
|
|
|
|
const props = {
|
|
|
|
onClick: () => {},
|
|
|
|
isOpen: true,
|
|
|
|
role: 'search',
|
|
|
|
};
|
|
|
|
const results = getDataOrAriaProps(props);
|
|
|
|
expect(results).toEqual({ role: 'search' });
|
|
|
|
});
|
2018-06-12 03:18:41 +08:00
|
|
|
});
|
2018-11-12 20:31:58 +08:00
|
|
|
|
2018-12-07 16:17:45 +08:00
|
|
|
it('delayRaf', done => {
|
2018-11-12 20:31:58 +08:00
|
|
|
jest.useRealTimers();
|
|
|
|
|
|
|
|
let bamboo = false;
|
|
|
|
delayRaf(() => {
|
|
|
|
bamboo = true;
|
|
|
|
}, 3);
|
|
|
|
|
2019-04-28 23:52:35 +08:00
|
|
|
// Do nothing, but insert in the frame
|
|
|
|
// https://github.com/ant-design/ant-design/issues/16290
|
|
|
|
delayRaf(() => {}, 3);
|
|
|
|
|
2018-11-12 20:31:58 +08:00
|
|
|
// Variable bamboo should be false in frame 2 but true in frame 4
|
|
|
|
raf(() => {
|
|
|
|
expect(bamboo).toBe(false);
|
|
|
|
|
|
|
|
// Frame 2
|
|
|
|
raf(() => {
|
|
|
|
expect(bamboo).toBe(false);
|
|
|
|
|
|
|
|
// Frame 3
|
|
|
|
raf(() => {
|
|
|
|
// Frame 4
|
|
|
|
raf(() => {
|
|
|
|
expect(bamboo).toBe(true);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-12-02 15:31:40 +08:00
|
|
|
|
2019-03-09 11:06:18 +08:00
|
|
|
describe('wave', () => {
|
|
|
|
it('bindAnimationEvent should return when node is null', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Wave>
|
2019-08-15 15:52:36 +08:00
|
|
|
<button type="button" disabled>
|
|
|
|
button
|
|
|
|
</button>
|
2019-03-09 11:06:18 +08:00
|
|
|
</Wave>,
|
|
|
|
).instance();
|
|
|
|
expect(wrapper.bindAnimationEvent()).toBe(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('bindAnimationEvent.onClick should return when children is hidden', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Wave>
|
2019-08-15 15:52:36 +08:00
|
|
|
<button type="button" style={{ display: 'none' }}>
|
|
|
|
button
|
|
|
|
</button>
|
2019-03-09 11:06:18 +08:00
|
|
|
</Wave>,
|
|
|
|
).instance();
|
|
|
|
expect(wrapper.bindAnimationEvent()).toBe(undefined);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('bindAnimationEvent.onClick should return when children is input', () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Wave>
|
|
|
|
<input />
|
|
|
|
</Wave>,
|
|
|
|
).instance();
|
|
|
|
expect(wrapper.bindAnimationEvent()).toBe(undefined);
|
|
|
|
});
|
2019-05-27 18:53:44 +08:00
|
|
|
|
|
|
|
it('should not throw when click it', () => {
|
|
|
|
expect(() => {
|
2019-06-19 19:09:08 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Wave>
|
|
|
|
<div />
|
|
|
|
</Wave>,
|
|
|
|
);
|
2019-05-27 18:53:44 +08:00
|
|
|
wrapper.simulate('click');
|
|
|
|
}).not.toThrow();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not throw when no children', () => {
|
|
|
|
expect(() => mount(<Wave />)).not.toThrow();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('TransButton', () => {
|
|
|
|
it('can be focus/blur', () => {
|
2019-06-19 19:09:08 +08:00
|
|
|
const wrapper = mount(<TransButton>TransButton</TransButton>);
|
2019-05-27 18:53:44 +08:00
|
|
|
expect(typeof wrapper.instance().focus).toBe('function');
|
|
|
|
expect(typeof wrapper.instance().blur).toBe('function');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should trigger onClick when press enter', () => {
|
|
|
|
const onClick = jest.fn();
|
|
|
|
const preventDefault = jest.fn();
|
2019-06-19 19:09:08 +08:00
|
|
|
const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
|
2019-05-27 18:53:44 +08:00
|
|
|
wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
|
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
|
|
|
|
expect(preventDefault).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('openAnimation', () => {
|
|
|
|
it('should support openAnimation', () => {
|
|
|
|
const done = jest.fn();
|
|
|
|
const domNode = document.createElement('div');
|
|
|
|
expect(typeof openAnimation.enter).toBe('function');
|
|
|
|
expect(typeof openAnimation.leave).toBe('function');
|
|
|
|
expect(typeof openAnimation.appear).toBe('function');
|
|
|
|
const appear = openAnimation.appear(domNode, done);
|
|
|
|
const enter = openAnimation.enter(domNode, done);
|
|
|
|
const leave = openAnimation.leave(domNode, done);
|
|
|
|
expect(typeof appear.stop).toBe('function');
|
|
|
|
expect(typeof enter.stop).toBe('function');
|
|
|
|
expect(typeof leave.stop).toBe('function');
|
|
|
|
expect(done).toHaveBeenCalled();
|
|
|
|
});
|
2019-03-09 11:06:18 +08:00
|
|
|
});
|
2017-02-08 14:44:43 +08:00
|
|
|
});
|