mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

test: migrate part of Avatar tests (#37266)

Browse Source 
* test: migrate part of Avatar tests

* test: migrate part of Avatar tests

* test: migrate part of Avatar tests
This commit is contained in:
lijianan 2022-08-28 22:41:44 +08:00 committed by GitHub
parent 3a508567cd
commit 6546b8287c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
components/avatar/__tests__/Avatar.test.js → components/avatar/__tests__/Avatar.test.tsx
View File

@ -1,5 +1,4 @@
import { mount } from 'enzyme'; import React, { useState } from 'react';
import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils'; import { act } from 'react-dom/test-utils';
import Avatar from '..'; import Avatar from '..';
@ -15,10 +14,10 @@ describe('Avatar Render', () => {
rtlTest(Avatar); rtlTest(Avatar);
const sizes = { xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }; const sizes = { xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 };
let originOffsetWidth; let originOffsetWidth: PropertyDescriptor['get'];
beforeAll(() => { beforeAll(() => {
// Mock offsetHeight // Mock offsetHeight
originOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth').get; originOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth')?.get;
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
get() { get() {
if (this.className === 'ant-avatar-string') { if (this.className === 'ant-avatar-string') {
@ -37,61 +36,41 @@ describe('Avatar Render', () => {
}); });
it('Render long string correctly', () => { it('Render long string correctly', () => {
const wrapper = mount(<Avatar>TestString</Avatar>); const { container } = render(<Avatar>TestString</Avatar>);
const children = wrapper.find('.ant-avatar-string'); expect(container.querySelectorAll('.ant-avatar-string').length).toBe(1);
expect(children.length).toBe(1);
}); });
it('should render fallback string correctly', () => { it('should render fallback string correctly', () => {
const div = global.document.createElement('div'); const div = global.document.createElement('div');
global.document.body.appendChild(div); global.document.body.appendChild(div);
const { container } = render(<Avatar src="http://error.url">Fallback</Avatar>);
const wrapper = mount(<Avatar src="http://error.url">Fallback</Avatar>, { attachTo: div }); fireEvent.error(container.querySelector('img')!);
wrapper.find('img').simulate('error'); const children = container.querySelectorAll('.ant-avatar-string');
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1); expect(children.length).toBe(1);
expect(children.text()).toBe('Fallback'); expect(children[0].innerHTML).toBe('Fallback');
wrapper.detach();
global.document.body.removeChild(div); global.document.body.removeChild(div);
}); });
it('should handle onError correctly', () => { it('should handle onError correctly', () => {
const LOAD_FAILURE_SRC = 'http://error.url'; const LOAD_FAILURE_SRC = 'http://error.url/';
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random'; const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const Foo: React.FC = () => {
const div = global.document.createElement('div'); const [avatarSrc, setAvatarSrc] = useState<typeof LOAD_FAILURE_SRC | typeof LOAD_SUCCESS_SRC>(
global.document.body.appendChild(div); LOAD_FAILURE_SRC,
);
class Foo extends React.Component { const onError = (): boolean => {
state = { setAvatarSrc(LOAD_SUCCESS_SRC);
src: LOAD_FAILURE_SRC,
};
handleImgError = () => {
this.setState({
src: LOAD_SUCCESS_SRC,
});
return false; return false;
}; };
return <Avatar src={avatarSrc} onError={onError} />;
render() { };
const { src } = this.state; const { container } = render(<Foo />);
return <Avatar src={src} onError={this.handleImgError} />; expect(container.querySelector('img')?.src).toBe(LOAD_FAILURE_SRC);
}
}
const wrapper = mount(<Foo />, { attachTo: div });
expect(div.querySelector('img').getAttribute('src')).toBe(LOAD_FAILURE_SRC);
// mock img load Error, since jsdom do not load resource by default // mock img load Error, since jsdom do not load resource by default
// https://github.com/jsdom/jsdom/issues/1816 // https://github.com/jsdom/jsdom/issues/1816
wrapper.find('img').simulate('error'); fireEvent.error(container.querySelector('img')!);
expect(container.querySelector('img')?.src).toBe(LOAD_SUCCESS_SRC);
expect(wrapper.render()).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
expect(div.querySelector('img').getAttribute('src')).toBe(LOAD_SUCCESS_SRC);
wrapper.detach();
global.document.body.removeChild(div);
}); });
it('should show image on success after a failure state', () => { it('should show image on success after a failure state', () => {
@ -102,23 +81,24 @@ describe('Avatar Render', () => {
global.document.body.appendChild(div); global.document.body.appendChild(div);
// simulate error src url // simulate error src url
const wrapper = mount(<Avatar src={LOAD_FAILURE_SRC}>Fallback</Avatar>, { attachTo: div }); const { container, rerender } = render(<Avatar src={LOAD_FAILURE_SRC}>Fallback</Avatar>);
wrapper.find('img').simulate('error');
expect(wrapper.render()).toMatchSnapshot(); fireEvent.error(container.querySelector('img')!);
expect(wrapper.find('.ant-avatar-string').length).toBe(1);
expect(container.firstChild).toMatchSnapshot();
expect(container.querySelectorAll('.ant-avatar-string').length).toBe(1);
// children should show, when image load error without onError return false // children should show, when image load error without onError return false
expect(wrapper.find('.ant-avatar-string').prop('style')).not.toHaveProperty('opacity', 0); expect(container.querySelector<HTMLDivElement>('.ant-avatar-string')?.style).not.toHaveProperty(
'opacity',
0,
);
// simulate successful src url // simulate successful src url
wrapper.setProps({ src: LOAD_SUCCESS_SRC }); rerender(<Avatar src={LOAD_SUCCESS_SRC}>Fallback</Avatar>);
wrapper.update();
expect(wrapper.render()).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
expect(wrapper.find('.ant-avatar-image').length).toBe(1); expect(container.querySelectorAll('.ant-avatar-image').length).toBe(1);
// cleanup
wrapper.detach();
global.document.body.removeChild(div); global.document.body.removeChild(div);
}); });
@ -128,10 +108,7 @@ describe('Avatar Render', () => {
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
get() { get() {
if (this.className === 'ant-avatar-string') { return this.className === 'ant-avatar-string' ? 100 : 40;
return 100;
}
return 40;
}, },
}); });
@ -140,8 +117,8 @@ describe('Avatar Render', () => {
}); });
it('should calculate scale of avatar children correctly with gap', () => { it('should calculate scale of avatar children correctly with gap', () => {
const wrapper = mount(<Avatar gap={2}>Avatar</Avatar>); const { container } = render(<Avatar gap={2}>Avatar</Avatar>);
expect(wrapper.find('.ant-avatar-string').render()).toMatchSnapshot(); expect(container.querySelector('.ant-avatar-string')).toMatchSnapshot();
}); });
it('should warning when pass a string as icon props', () => { it('should warning when pass a string as icon props', () => {
@ -157,15 +134,15 @@ describe('Avatar Render', () => {
}); });
it('support size is number', () => { it('support size is number', () => {
const wrapper = mount(<Avatar size={100}>TestString</Avatar>); const { container } = render(<Avatar size={100}>TestString</Avatar>);
expect(wrapper.render()).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
Object.entries(sizes).forEach(([key, value]) => { Object.entries(sizes).forEach(([key, value]) => {
it(`adjusts component size to ${value} when window size is ${key}`, () => { it(`adjusts component size to ${value} when window size is ${key}`, () => {
const wrapper = global.document.createElement('div'); const wrapper = global.document.createElement('div');
useBreakpoint.mockReturnValue({ [key]: true }); (useBreakpoint as any).mockReturnValue({ [key]: true });
act(() => { act(() => {
ReactDOM.render(<Avatar size={sizes} />, wrapper); ReactDOM.render(<Avatar size={sizes} />, wrapper);
}); });
@ -176,49 +153,47 @@ describe('Avatar Render', () => {
it('support onMouseEnter', () => { it('support onMouseEnter', () => {
const onMouseEnter = jest.fn(); const onMouseEnter = jest.fn();
const { container } = render(<Avatar onMouseEnter={onMouseEnter}>TestString</Avatar>); const { container } = render(<Avatar {...{ onMouseEnter }}>TestString</Avatar>);
fireEvent.mouseEnter(container.firstChild); fireEvent.mouseEnter(container.firstChild!);
expect(onMouseEnter).toHaveBeenCalled(); expect(onMouseEnter).toHaveBeenCalled();
}); });
it('fallback', () => { it('fallback', () => {
const div = global.document.createElement('div'); const div = global.document.createElement('div');
global.document.body.appendChild(div); global.document.body.appendChild(div);
const wrapper = mount( const { container } = render(
<Avatar shape="circle" src="http://error.url"> <Avatar shape="circle" src="http://error.url">
A A
</Avatar>, </Avatar>,
{ attachTo: div },
); );
wrapper.find('img').simulate('error'); fireEvent.error(container.querySelector('img')!);
wrapper.update(); expect(container.firstChild).toMatchSnapshot();
expect(wrapper.render()).toMatchSnapshot();
wrapper.detach();
global.document.body.removeChild(div); global.document.body.removeChild(div);
}); });
it('should exist crossorigin attribute', () => { it('should exist crossorigin attribute', () => {
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random'; const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const wrapper = mount( const crossOrigin = 'anonymous';
<Avatar src={LOAD_SUCCESS_SRC} crossOrigin="anonymous"> const { container } = render(
<Avatar src={LOAD_SUCCESS_SRC} crossOrigin={crossOrigin}>
crossorigin crossorigin
</Avatar>, </Avatar>,
); );
expect(wrapper.html().includes('crossorigin')).toEqual(true); expect(container.querySelector('img')?.crossOrigin).toBeTruthy();
expect(wrapper.find('img').prop('crossOrigin')).toEqual('anonymous'); expect(container.querySelector('img')?.crossOrigin).toEqual(crossOrigin);
}); });
it('should not exist crossorigin attribute', () => { it('should not exist crossorigin attribute', () => {
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random'; const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const wrapper = mount(<Avatar src={LOAD_SUCCESS_SRC}>crossorigin</Avatar>); const { container } = render(<Avatar src={LOAD_SUCCESS_SRC}>crossorigin</Avatar>);
expect(wrapper.html().includes('crossorigin')).toEqual(false); expect(container.querySelector('img')?.crossOrigin).toBeFalsy();
expect(wrapper.find('img').prop('crossOrigin')).toEqual(undefined); expect(container.querySelector('img')?.crossOrigin).toEqual('');
}); });
it('clickable', async () => { it('clickable', () => {
const onClick = jest.fn(); const onClick = jest.fn();
const { container } = render(<Avatar onClick={onClick}>TestString</Avatar>); const { container } = render(<Avatar onClick={onClick}>TestString</Avatar>);
fireEvent.click(container.querySelector('.ant-avatar-string')); fireEvent.click(container.querySelector('.ant-avatar-string')!);
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
}); });

0
components/avatar/__tests__/__snapshots__/Avatar.test.js.snap → components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
View File

0
components/avatar/__tests__/__snapshots__/demo.test.js.snap → components/avatar/__tests__/__snapshots__/demo.test.ts.snap
View File

0
components/avatar/__tests__/demo.test.js → components/avatar/__tests__/demo.test.ts
View File