From 6546b8287c9ff4bd2071f820710b200b64931231 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Aug 2022 22:41:44 +0800 Subject: [PATCH] test: migrate part of Avatar tests (#37266) * test: migrate part of Avatar tests * test: migrate part of Avatar tests * test: migrate part of Avatar tests --- .../{Avatar.test.js => Avatar.test.tsx} | 137 +++++++----------- ...atar.test.js.snap => Avatar.test.tsx.snap} | 0 .../{demo.test.js.snap => demo.test.ts.snap} | 0 .../__tests__/{demo.test.js => demo.test.ts} | 0 4 files changed, 56 insertions(+), 81 deletions(-) rename components/avatar/__tests__/{Avatar.test.js => Avatar.test.tsx} (58%) rename components/avatar/__tests__/__snapshots__/{Avatar.test.js.snap => Avatar.test.tsx.snap} (100%) rename components/avatar/__tests__/__snapshots__/{demo.test.js.snap => demo.test.ts.snap} (100%) rename components/avatar/__tests__/{demo.test.js => demo.test.ts} (100%) diff --git a/components/avatar/__tests__/Avatar.test.js b/components/avatar/__tests__/Avatar.test.tsx similarity index 58% rename from components/avatar/__tests__/Avatar.test.js rename to components/avatar/__tests__/Avatar.test.tsx index efe50ad502..13b3624986 100644 --- a/components/avatar/__tests__/Avatar.test.js +++ b/components/avatar/__tests__/Avatar.test.tsx @@ -1,5 +1,4 @@ -import { mount } from 'enzyme'; -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { act } from 'react-dom/test-utils'; import Avatar from '..'; @@ -15,10 +14,10 @@ describe('Avatar Render', () => { rtlTest(Avatar); const sizes = { xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }; - let originOffsetWidth; + let originOffsetWidth: PropertyDescriptor['get']; beforeAll(() => { // Mock offsetHeight - originOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth').get; + originOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth')?.get; Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { get() { if (this.className === 'ant-avatar-string') { @@ -37,61 +36,41 @@ describe('Avatar Render', () => { }); it('Render long string correctly', () => { - const wrapper = mount(TestString); - const children = wrapper.find('.ant-avatar-string'); - expect(children.length).toBe(1); + const { container } = render(TestString); + expect(container.querySelectorAll('.ant-avatar-string').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'); + const { container } = render(Fallback); + fireEvent.error(container.querySelector('img')!); + const children = container.querySelectorAll('.ant-avatar-string'); expect(children.length).toBe(1); - expect(children.text()).toBe('Fallback'); - - wrapper.detach(); + expect(children[0].innerHTML).toBe('Fallback'); global.document.body.removeChild(div); }); 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 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, - }); + const Foo: React.FC = () => { + const [avatarSrc, setAvatarSrc] = useState( + LOAD_FAILURE_SRC, + ); + const onError = (): boolean => { + setAvatarSrc(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); + return ; + }; + const { container } = render(); + expect(container.querySelector('img')?.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); + fireEvent.error(container.querySelector('img')!); + expect(container.querySelector('img')?.src).toBe(LOAD_SUCCESS_SRC); + expect(container.firstChild).toMatchSnapshot(); }); it('should show image on success after a failure state', () => { @@ -102,23 +81,24 @@ describe('Avatar Render', () => { global.document.body.appendChild(div); // simulate error src url - const wrapper = mount(Fallback, { attachTo: div }); - wrapper.find('img').simulate('error'); + const { container, rerender } = render(Fallback); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find('.ant-avatar-string').length).toBe(1); + fireEvent.error(container.querySelector('img')!); + + expect(container.firstChild).toMatchSnapshot(); + expect(container.querySelectorAll('.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); + expect(container.querySelector('.ant-avatar-string')?.style).not.toHaveProperty( + 'opacity', + 0, + ); // simulate successful src url - wrapper.setProps({ src: LOAD_SUCCESS_SRC }); - wrapper.update(); + rerender(Fallback); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find('.ant-avatar-image').length).toBe(1); + expect(container.firstChild).toMatchSnapshot(); + expect(container.querySelectorAll('.ant-avatar-image').length).toBe(1); - // cleanup - wrapper.detach(); global.document.body.removeChild(div); }); @@ -128,10 +108,7 @@ describe('Avatar Render', () => { Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { get() { - if (this.className === 'ant-avatar-string') { - return 100; - } - return 40; + return this.className === 'ant-avatar-string' ? 100 : 40; }, }); @@ -140,8 +117,8 @@ describe('Avatar Render', () => { }); it('should calculate scale of avatar children correctly with gap', () => { - const wrapper = mount(Avatar); - expect(wrapper.find('.ant-avatar-string').render()).toMatchSnapshot(); + const { container } = render(Avatar); + expect(container.querySelector('.ant-avatar-string')).toMatchSnapshot(); }); it('should warning when pass a string as icon props', () => { @@ -157,15 +134,15 @@ describe('Avatar Render', () => { }); it('support size is number', () => { - const wrapper = mount(TestString); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(TestString); + expect(container.firstChild).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 }); + (useBreakpoint as any).mockReturnValue({ [key]: true }); act(() => { ReactDOM.render(, wrapper); }); @@ -176,49 +153,47 @@ describe('Avatar Render', () => { it('support onMouseEnter', () => { const onMouseEnter = jest.fn(); - const { container } = render(TestString); - fireEvent.mouseEnter(container.firstChild); + 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( + const { container } = render( A , - { attachTo: div }, ); - wrapper.find('img').simulate('error'); - wrapper.update(); - expect(wrapper.render()).toMatchSnapshot(); - wrapper.detach(); + fireEvent.error(container.querySelector('img')!); + expect(container.firstChild).toMatchSnapshot(); global.document.body.removeChild(div); }); it('should exist crossorigin attribute', () => { const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random'; - const wrapper = mount( - + const crossOrigin = 'anonymous'; + const { container } = render( + crossorigin , ); - expect(wrapper.html().includes('crossorigin')).toEqual(true); - expect(wrapper.find('img').prop('crossOrigin')).toEqual('anonymous'); + expect(container.querySelector('img')?.crossOrigin).toBeTruthy(); + expect(container.querySelector('img')?.crossOrigin).toEqual(crossOrigin); }); 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); + const { container } = render(crossorigin); + expect(container.querySelector('img')?.crossOrigin).toBeFalsy(); + expect(container.querySelector('img')?.crossOrigin).toEqual(''); }); - it('clickable', async () => { + it('clickable', () => { const onClick = jest.fn(); const { container } = render(TestString); - fireEvent.click(container.querySelector('.ant-avatar-string')); + fireEvent.click(container.querySelector('.ant-avatar-string')!); expect(onClick).toHaveBeenCalled(); }); }); diff --git a/components/avatar/__tests__/__snapshots__/Avatar.test.js.snap b/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap similarity index 100% rename from components/avatar/__tests__/__snapshots__/Avatar.test.js.snap rename to components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.ts.snap similarity index 100% rename from components/avatar/__tests__/__snapshots__/demo.test.js.snap rename to components/avatar/__tests__/__snapshots__/demo.test.ts.snap diff --git a/components/avatar/__tests__/demo.test.js b/components/avatar/__tests__/demo.test.ts similarity index 100% rename from components/avatar/__tests__/demo.test.js rename to components/avatar/__tests__/demo.test.ts