test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

test: migrate part of utils tests (#37155)

Browse Source 
* test: migrate part of utils tests

* test: migrate part of utils tests

* test: migrate part of utils tests
This commit is contained in:
lijianan 2022-08-21 23:25:00 +08:00 committed by GitHub
parent 0a5b995e9c
commit dd31d7775a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 111 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/_util/__tests__/easings.test.js → components/_util/__tests__/easings.test.ts
View File

@ -2,7 +2,7 @@ import { easeInOutCubic } from '../easings';
describe('Test easings', () => {
it('easeInOutCubic return value', () => {
const nums = [];
const nums: number[] = [];
// eslint-disable-next-line no-plusplus
for (let index = 0; index < 5; index++) {
nums.push(easeInOutCubic(index, 1, 5, 4));

2
components/_util/__tests__/getScroll.test.js → components/_util/__tests__/getScroll.test.ts
View File

@ -41,7 +41,7 @@ describe('getScroll', () => {
});
it('getScroll documentElement', async () => {
const div = {};
const div: any = {};
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
div.scrollLeft = null;
div.scrollTop = null;

0
components/_util/__tests__/responsiveObserve.test.js → components/_util/__tests__/responsiveObserve.test.ts
View File

4
components/_util/__tests__/scrollTo.test.js → components/_util/__tests__/scrollTo.test.ts
View File

@ -2,7 +2,7 @@ import { sleep } from '../../../tests/utils';
import scrollTo from '../scrollTo';
describe('Test ScrollTo function', () => {
let dateNowMock;
let dateNowMock: jest.SpyInstance;
beforeEach(() => {
dateNowMock = jest
@ -16,7 +16,7 @@ describe('Test ScrollTo function', () => {
});
it('test scrollTo', async () => {
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
window.scrollY = y;
window.pageYOffset = y;
});

12
components/_util/__tests__/transButton.test.js
View File

@ -1,12 +0,0 @@
import { mount } from 'enzyme';
import React from 'react';
import TransButton from '../transButton';
describe('transButton component', () => {
it('disabled should update style', () => {
const wrapper = mount(<TransButton disabled />);
expect(wrapper.find('div').first().props().style).toEqual(
expect.objectContaining({ pointerEvents: 'none' }),
);
});
});

10
components/_util/__tests__/transButton.test.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import TransButton from '../transButton';
import { render } from '../../../tests/utils';
describe('transButton component', () => {
it('disabled should update style', () => {
const { container } = render(<TransButton disabled />);
expect(container.querySelector('div')?.style.pointerEvents).toBe('none');
});
});

26
components/_util/__tests__/useSyncState.test.js
View File

@ -1,26 +0,0 @@
import { mount } from 'enzyme';
import React from 'react';
import useSyncState from '../hooks/useSyncState';
describe('Table', () => {
it('useSyncState', () => {
const Test = () => {
const [getVal, setVal] = useSyncState('light');
return (
<span
onClick={() => {
setVal('bamboo');
}}
>
{getVal()}
</span>
);
};
const wrapper = mount(<Test />);
expect(wrapper.text()).toEqual('light');
wrapper.find('span').simulate('click');
expect(wrapper.text()).toEqual('bamboo');
});
});

17
components/_util/__tests__/useSyncState.test.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import useSyncState from '../hooks/useSyncState';
import { render, fireEvent } from '../../../tests/utils';
describe('Table', () => {
it('useSyncState', () => {
const Test: React.FC = () => {
const [getVal, setVal] = useSyncState('light');
return <span onClick={() => setVal('bamboo')}>{getVal()}</span>;
};
const { container } = render(<Test />);
expect(container.querySelector('span')?.innerHTML).toBe('light');
fireEvent.click(container.querySelector('span')!);
expect(container.querySelector('span')?.innerHTML).toBe('bamboo');
});
});

29
components/_util/__tests__/util.test.js → components/_util/__tests__/util.test.tsx
View File

@ -1,9 +1,8 @@
/* eslint-disable class-methods-use-this */
import { mount } from 'enzyme';
import KeyCode from 'rc-util/lib/KeyCode';
import raf from 'rc-util/lib/raf';
import React from 'react';
import { sleep } from '../../../tests/utils';
import { sleep, render, fireEvent } from '../../../tests/utils';
import getDataOrAriaProps from '../getDataOrAriaProps';
import delayRaf from '../raf';
import { isStyleSupport } from '../styleChecker';
@ -141,20 +140,24 @@ describe('Test utils function', () => {
describe('TransButton', () => {
it('can be focus/blur', () => {
const ref = React.createRef();
mount(<TransButton ref={ref}>TransButton</TransButton>);
expect(typeof ref.current.focus).toBe('function');
expect(typeof ref.current.blur).toBe('function');
const ref = React.createRef<any>();
render(<TransButton ref={ref}>TransButton</TransButton>);
expect(typeof ref.current?.focus).toBe('function');
expect(typeof ref.current?.blur).toBe('function');
});
it('should trigger onClick when press enter', () => {
const onClick = jest.fn();
const preventDefault = jest.fn();
const wrapper = mount(<TransButton onClick={onClick}>TransButton</TransButton>);
wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
expect(onClick).toHaveBeenCalled();
wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
expect(preventDefault).toHaveBeenCalled();
const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
// callback should trigger
fireEvent.keyUp(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
expect(onClick).toHaveBeenCalledTimes(1);
// callback should not trigger
fireEvent.keyDown(container.querySelector('div')!, { keyCode: KeyCode.ENTER });
expect(onClick).toHaveBeenCalledTimes(1);
});
});
@ -167,7 +170,7 @@ describe('Test utils function', () => {
it('isStyleSupport return false in service side', () => {
const spy = jest
.spyOn(window.document, 'documentElement', 'get')
.mockImplementation(() => undefined);
.mockImplementation(() => undefined as unknown as HTMLElement);
expect(isStyleSupport('color')).toBe(false);
expect(isStyleSupport('not-existed')).toBe(false);
spy.mockRestore();

4
components/_util/__tests__/warning.test.js → components/_util/__tests__/warning.test.ts
View File

@ -23,9 +23,7 @@ describe('Test warning', () => {
expect(value).toBe(undefined);
expect(spy).not.toHaveBeenCalled();
expect(() => {
noop();
}).not.toThrow();
expect(noop).not.toThrow();
});
describe('process.env.NODE_ENV !== "production"', () => {

109
components/_util/__tests__/wave.test.js → components/_util/__tests__/wave.test.tsx
View File

@ -1,7 +1,6 @@
import { mount } from 'enzyme';
import React from 'react';
import mountTest from '../../../tests/shared/mountTest';
import { render, sleep } from '../../../tests/utils';
import { render, sleep, fireEvent } from '../../../tests/utils';
import ConfigProvider from '../../config-provider';
import Wave from '../wave';
@ -18,139 +17,155 @@ describe('Wave component', () => {
it('isHidden works', () => {
const TEST_NODE_ENV = process.env.NODE_ENV;
process.env.NODE_ENV = 'development';
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<button type="button">button</button>
</Wave>,
);
expect(wrapper.find('button').getDOMNode().className).toBe('');
wrapper.find('button').getDOMNode().click();
expect(container.querySelector('button')?.className).toBe('');
container.querySelector('button')?.click();
expect(
wrapper.find('button').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
).toBe(false);
wrapper.unmount();
container.querySelector('button')?.hasAttribute('ant-click-animating-without-extra-node'),
).toBeFalsy();
unmount();
process.env.NODE_ENV = TEST_NODE_ENV;
});
it('isHidden is mocked', () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<button type="button">button</button>
</Wave>,
);
expect(wrapper.find('button').getDOMNode().className).toBe('');
wrapper.find('button').getDOMNode().click();
expect(container.querySelector('button')?.className).toBe('');
container.querySelector('button')?.click();
expect(
wrapper.find('button').getDOMNode().getAttribute('ant-click-animating-without-extra-node'),
container.querySelector('button')?.getAttribute('ant-click-animating-without-extra-node'),
).toBe('false');
wrapper.unmount();
unmount();
});
it('wave color is grey', async () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<button type="button" style={{ borderColor: 'rgb(0, 0, 0)' }}>
button
</button>
</Wave>,
);
wrapper.find('button').getDOMNode().click();
container.querySelector('button')?.click();
await sleep(0);
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('button')?.getRootNode() as HTMLButtonElement
).getElementsByTagName('style');
expect(styles.length).toBe(0);
wrapper.unmount();
unmount();
});
it('wave color is not grey', async () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<button type="button" style={{ borderColor: 'red' }}>
button
</button>
</Wave>,
);
wrapper.find('button').getDOMNode().click();
container.querySelector('button')?.click();
await sleep(200);
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('button')?.getRootNode() as HTMLButtonElement
).getElementsByTagName('style');
expect(styles.length).toBe(1);
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: red;');
wrapper.unmount();
unmount();
});
it('read wave color from border-top-color', async () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<div style={{ borderTopColor: 'blue' }}>button</div>
</Wave>,
);
wrapper.find('div').getDOMNode().click();
container.querySelector('div')?.click();
await sleep(0);
const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('div')?.getRootNode() as HTMLDivElement
).getElementsByTagName('style');
expect(styles.length).toBe(1);
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: blue;');
wrapper.unmount();
unmount();
});
it('read wave color from background color', async () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<div style={{ backgroundColor: 'green' }}>button</div>
</Wave>,
);
wrapper.find('div').getDOMNode().click();
container.querySelector('div')?.click();
await sleep(0);
const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('div')?.getRootNode() as HTMLDivElement
).getElementsByTagName('style');
expect(styles.length).toBe(1);
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: green;');
wrapper.unmount();
unmount();
});
it('read wave color from border firstly', async () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<div style={{ borderColor: 'yellow', backgroundColor: 'green' }}>button</div>
</Wave>,
);
wrapper.find('div').getDOMNode().click();
container.querySelector('div')?.click();
await sleep(0);
const styles = wrapper.find('div').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('div')?.getRootNode() as HTMLDivElement
).getElementsByTagName('style');
expect(styles.length).toBe(1);
expect(styles[0].innerHTML).toContain('--antd-wave-shadow-color: yellow;');
wrapper.unmount();
unmount();
});
it('hidden element with -leave className', async () => {
const wrapper = mount(
const { container, unmount } = render(
<Wave>
<button type="button" className="xx-leave">
button
</button>
</Wave>,
);
wrapper.find('button').getDOMNode().click();
container.querySelector('button')?.click();
await sleep(0);
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('button')?.getRootNode() as HTMLButtonElement
).getElementsByTagName('style');
expect(styles.length).toBe(0);
wrapper.unmount();
unmount();
});
it('ConfigProvider csp', async () => {
const wrapper = mount(
const { container, unmount } = render(
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Wave>
<button type="button">button</button>
</Wave>
</ConfigProvider>,
);
wrapper.find('button').getDOMNode().click();
container.querySelector('button')?.click();
await sleep(0);
const styles = wrapper.find('button').getDOMNode().getRootNode().getElementsByTagName('style');
const styles = (
container.querySelector('button')?.getRootNode() as HTMLButtonElement
).getElementsByTagName('style');
expect(styles[0].getAttribute('nonce')).toBe('YourNonceCode');
wrapper.unmount();
unmount();
});
it('bindAnimationEvent should return when node is null', () => {
const ref = React.createRef();
const ref = React.createRef<any>();
render(
<Wave ref={ref}>
<button type="button" disabled>
@ -162,7 +177,7 @@ describe('Wave component', () => {
});
it('bindAnimationEvent.onClick should return when children is hidden', () => {
const ref = React.createRef();
const ref = React.createRef<any>();
render(
<Wave ref={ref}>
<button type="button" style={{ display: 'none' }}>
@ -174,7 +189,7 @@ describe('Wave component', () => {
});
it('bindAnimationEvent.onClick should return when children is input', () => {
const ref = React.createRef();
const ref = React.createRef<any>();
render(
<Wave ref={ref}>
<input />
@ -185,16 +200,16 @@ describe('Wave component', () => {
it('should not throw when click it', () => {
expect(() => {
const wrapper = mount(
const { container } = render(
<Wave>
<div />
</Wave>,
);
wrapper.simulate('click');
fireEvent.click(container);
}).not.toThrow();
});
it('should not throw when no children', () => {
expect(() => mount(<Wave />)).not.toThrow();
expect(() => render(<Wave />)).not.toThrow();
});
});

2
components/_util/warning.ts
View File

@ -3,7 +3,7 @@ import rcWarning, { resetWarned } from 'rc-util/lib/warning';
export { resetWarned };
export function noop() {}
type Warning = (valid: boolean, component: string, message: string) => void;
type Warning = (valid: boolean, component: string, message?: string) => void;
// eslint-disable-next-line import/no-mutable-exports
let warning: Warning = noop;