import { mount } from 'enzyme';
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Avatar from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
import useBreakpoint from '../../grid/hooks/useBreakpoint';
jest.mock('../../grid/hooks/useBreakpoint');
describe('Avatar Render', () => {
mountTest(Avatar);
rtlTest(Avatar);
const sizes = { xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 };
let originOffsetWidth;
beforeAll(() => {
// Mock offsetHeight
originOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth').get;
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
get() {
if (this.className === 'ant-avatar-string') {
return 100;
}
return 80;
},
});
});
afterAll(() => {
// Restore Mock offsetHeight
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
get: originOffsetWidth,
});
});
it('Render long string correctly', () => {
const wrapper = mount(TestString);
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1);
});
it('should render fallback string correctly', () => {
const div = global.document.createElement('div');
global.document.body.appendChild(div);
const wrapper = mount(Fallback, { attachTo: div });
wrapper.find('img').simulate('error');
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1);
expect(children.text()).toBe('Fallback');
wrapper.detach();
global.document.body.removeChild(div);
});
it('should handle onError correctly', () => {
const LOAD_FAILURE_SRC = 'http://error.url';
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const div = global.document.createElement('div');
global.document.body.appendChild(div);
class Foo extends React.Component {
state = {
src: LOAD_FAILURE_SRC,
};
handleImgError = () => {
this.setState({
src: LOAD_SUCCESS_SRC,
});
return false;
};
render() {
const { src } = this.state;
return ;
}
}
const wrapper = mount(, { attachTo: div });
expect(div.querySelector('img').getAttribute('src')).toBe(LOAD_FAILURE_SRC);
// mock img load Error, since jsdom do not load resource by default
// https://github.com/jsdom/jsdom/issues/1816
wrapper.find('img').simulate('error');
expect(wrapper.render()).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', () => {
const LOAD_FAILURE_SRC = 'http://error.url';
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const div = global.document.createElement('div');
global.document.body.appendChild(div);
// simulate error src url
const wrapper = mount(Fallback, { attachTo: div });
wrapper.find('img').simulate('error');
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.find('.ant-avatar-string').length).toBe(1);
// children should show, when image load error without onError return false
expect(wrapper.find('.ant-avatar-string').prop('style')).not.toHaveProperty('opacity', 0);
// simulate successful src url
wrapper.setProps({ src: LOAD_SUCCESS_SRC });
wrapper.update();
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.find('.ant-avatar-image').length).toBe(1);
// cleanup
wrapper.detach();
global.document.body.removeChild(div);
});
it('should calculate scale of avatar children correctly', () => {
const { container, rerender } = render(Avatar);
expect(container.querySelector('.ant-avatar-string')).toMatchSnapshot();
Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
get() {
if (this.className === 'ant-avatar-string') {
return 100;
}
return 40;
},
});
rerender(xx);
expect(container.querySelector('.ant-avatar-string')).toMatchSnapshot();
});
it('should calculate scale of avatar children correctly with gap', () => {
const wrapper = mount(Avatar);
expect(wrapper.find('.ant-avatar-string').render()).toMatchSnapshot();
});
it('should warning when pass a string as icon props', () => {
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render();
expect(warnSpy).not.toHaveBeenCalled();
render();
expect(warnSpy).toHaveBeenCalledWith(
`Warning: [antd: Avatar] \`icon\` is using ReactNode instead of string naming in v4. Please check \`user\` at https://ant.design/components/icon`,
);
warnSpy.mockRestore();
});
it('support size is number', () => {
const wrapper = mount(TestString);
expect(wrapper.render()).toMatchSnapshot();
});
Object.entries(sizes).forEach(([key, value]) => {
it(`adjusts component size to ${value} when window size is ${key}`, () => {
const wrapper = global.document.createElement('div');
useBreakpoint.mockReturnValue({ [key]: true });
act(() => {
ReactDOM.render(, wrapper);
});
expect(wrapper).toMatchSnapshot();
});
});
it('support onMouseEnter', () => {
const onMouseEnter = jest.fn();
const { container } = render(TestString);
fireEvent.mouseEnter(container.firstChild);
expect(onMouseEnter).toHaveBeenCalled();
});
it('fallback', () => {
const div = global.document.createElement('div');
global.document.body.appendChild(div);
const wrapper = mount(
A
,
{ attachTo: div },
);
wrapper.find('img').simulate('error');
wrapper.update();
expect(wrapper.render()).toMatchSnapshot();
wrapper.detach();
global.document.body.removeChild(div);
});
it('should exist crossorigin attribute', () => {
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const wrapper = mount(
crossorigin
,
);
expect(wrapper.html().includes('crossorigin')).toEqual(true);
expect(wrapper.find('img').prop('crossOrigin')).toEqual('anonymous');
});
it('should not exist crossorigin attribute', () => {
const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
const wrapper = mount(crossorigin);
expect(wrapper.html().includes('crossorigin')).toEqual(false);
expect(wrapper.find('img').prop('crossOrigin')).toEqual(undefined);
});
it('clickable', async () => {
const onClick = jest.fn();
const { container } = render(TestString);
fireEvent.click(container.querySelector('.ant-avatar-string'));
expect(onClick).toHaveBeenCalled();
});
});