From e5aea71b99fd8ca437d41dc8f2f4b348556bdac1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 29 Sep 2019 12:33:24 +0800 Subject: [PATCH 1/2] :white_check_mark: increase upload test cov --- components/upload/Upload.tsx | 2 +- .../__snapshots__/uploadlist.test.js.snap | 96 +++++++++++++++++++ components/upload/__tests__/dragger.test.js | 28 ++++++ components/upload/__tests__/upload.test.js | 56 ++++++++++- .../upload/__tests__/uploadlist.test.js | 31 ++++++ components/upload/utils.tsx | 7 +- 6 files changed, 214 insertions(+), 6 deletions(-) create mode 100644 components/upload/__tests__/dragger.test.js diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index fa4a6ba59b..900c529308 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -98,7 +98,7 @@ class Upload extends React.Component { fileList: nextFileList, }); // fix ie progress - if (!(window as any).FormData) { + if (!(window as any).File || process.env.TEST_IE) { this.autoUpdateProgress(0, targetItem); } }; diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index 20a9c10202..3ee248adbc 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -934,3 +934,99 @@ exports[`Upload List should non-image format file preview 1`] = ` `; + +exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = ` + +
+ + + + +
+
+
+
+ + + image + + + image + + +
+
+
+
+
+ + + image + + + image + + +
+
+
+ +`; diff --git a/components/upload/__tests__/dragger.test.js b/components/upload/__tests__/dragger.test.js new file mode 100644 index 0000000000..a44d0e6574 --- /dev/null +++ b/components/upload/__tests__/dragger.test.js @@ -0,0 +1,28 @@ +/* eslint-disable react/no-string-refs, react/prefer-es6-class */ +import React from 'react'; +import { mount } from 'enzyme'; +import Upload from '..'; +import { setup, teardown } from './mock'; +import mountTest from '../../../tests/shared/mountTest'; + +describe('Upload.Dragger', () => { + mountTest(Upload.Dragger); + + beforeEach(() => setup()); + afterEach(() => teardown()); + + it('support drag file with over style', () => { + const wrapper = mount( + +
+ , + ); + + wrapper.find('.ant-upload-drag-container').simulate('dragover', { + target: { + files: [{ file: 'foo.png' }], + }, + }); + expect(wrapper.find('.ant-upload-drag').hasClass('ant-upload-drag-hover')).toBe(true); + }); +}); diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index 483df22595..e225c52dc9 100644 --- a/components/upload/__tests__/upload.test.js +++ b/components/upload/__tests__/upload.test.js @@ -10,7 +10,6 @@ import mountTest from '../../../tests/shared/mountTest'; describe('Upload', () => { mountTest(Upload); - mountTest(Upload.Dragger); beforeEach(() => setup()); afterEach(() => teardown()); @@ -62,6 +61,61 @@ describe('Upload', () => { }); }); + it('should update progress in IE', done => { + const originSetInterval = window.setInterval; + process.env.TEST_IE = true; + Object.defineProperty(window, 'setInterval', { + value: fn => fn(), + }); + const props = { + action: 'http://upload.com', + onChange: ({ file }) => { + if (file.status !== 'uploading') { + process.env.TEST_IE = undefined; + Object.defineProperty(window, 'setInterval', { + value: originSetInterval, + }); + done(); + } + }, + }; + + const wrapper = mount( + + + , + ); + wrapper.find('input').simulate('change', { + target: { + files: [{ file: 'foo.png' }], + }, + }); + }); + + it('beforeUpload can be falsy', done => { + const props = { + action: 'http://upload.com', + beforeUpload: false, + onChange: ({ file }) => { + if (file.status !== 'uploading') { + done(); + } + }, + }; + + const wrapper = mount( + + + , + ); + + wrapper.find('input').simulate('change', { + target: { + files: [{ file: 'foo.png' }], + }, + }); + }); + it('upload promise return file in beforeUpload', done => { const data = jest.fn(); const props = { diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index 0f0b73c968..a6c3764403 100644 --- a/components/upload/__tests__/uploadlist.test.js +++ b/components/upload/__tests__/uploadlist.test.js @@ -366,6 +366,37 @@ describe('Upload List', () => { expect(wrapper.render()).toMatchSnapshot(); }); + it('should support showRemoveIcon and showPreviewIcon', () => { + const list = [ + { + name: 'image', + status: 'uploading', + uid: '-4', + url: 'https://cdn.xxx.com/aaa', + }, + { + name: 'image', + status: 'done', + uid: '-5', + url: 'https://cdn.xxx.com/aaa', + }, + ]; + + const wrapper = mount( + + + , + ); + expect(wrapper.render()).toMatchSnapshot(); + }); + // https://github.com/ant-design/ant-design/issues/7762 it('work with form validation', () => { let errors; diff --git a/components/upload/utils.tsx b/components/upload/utils.tsx index 479dc555e1..fda980c966 100644 --- a/components/upload/utils.tsx +++ b/components/upload/utils.tsx @@ -58,16 +58,15 @@ export function removeFileItem(file: UploadFile, fileList: UploadFile[]) { } // ==================== Default Image Preview ==================== -const extname = (url: string) => { - if (!url) { - return ''; - } +const extname = (url: string = '') => { const temp = url.split('/'); const filename = temp[temp.length - 1]; const filenameWithoutSuffix = filename.split(/#|\?/)[0]; return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0]; }; + const isImageFileType = (type: string): boolean => !!type && type.indexOf('image/') === 0; + export const isImageUrl = (file: UploadFile): boolean => { if (isImageFileType(file.type)) { return true; From e07bba91fafe21776b50f0ca30aaf5c865f90519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Sun, 29 Sep 2019 04:56:56 -0500 Subject: [PATCH 2/2] chore: replace resizeObserver with `rc-resize-observer` (#19057) * replace resizeObserver with rc-resize-observer * fix affix lint * fix es lint --- components/_util/__tests__/util.test.js | 45 --------- components/_util/resizeObserver.tsx | 91 ------------------- components/affix/__tests__/Affix.test.js | 2 +- components/affix/index.tsx | 3 +- components/input/TextArea.tsx | 2 +- .../__snapshots__/index.test.js.snap | 8 +- components/typography/Base.tsx | 2 +- package.json | 1 + 8 files changed, 10 insertions(+), 144 deletions(-) delete mode 100644 components/_util/resizeObserver.tsx diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.js index 2a86219337..039aa18efd 100644 --- a/components/_util/__tests__/util.test.js +++ b/components/_util/__tests__/util.test.js @@ -9,8 +9,6 @@ import triggerEvent from '../triggerEvent'; import Wave from '../wave'; import TransButton from '../transButton'; import openAnimation from '../openAnimation'; -import ResizeObserver from '../resizeObserver'; -import { spyElementPrototype } from '../../__tests__/util/domHook'; describe('Test utils function', () => { beforeAll(() => { @@ -226,47 +224,4 @@ describe('Test utils function', () => { expect(done).toHaveBeenCalled(); }); }); - - describe('ResizeObserver', () => { - let domMock; - - beforeAll(() => { - domMock = spyElementPrototype(HTMLDivElement, 'getBoundingClientRect', () => { - return { - width: 1128 + Math.random(), - height: 903 + Math.random(), - }; - }); - }); - - afterAll(() => { - domMock.mockRestore(); - }); - - it('should not trigger `onResize` if size shaking', () => { - const onResize = jest.fn(); - let divNode; - - const wrapper = mount( - -
{ - divNode = node; - }} - /> - , - ); - - // First trigger - wrapper.instance().onResize([{ target: divNode }]); - onResize.mockReset(); - - // Repeat trigger should not trigger outer `onResize` with shaking - for (let i = 0; i < 10; i += 1) { - wrapper.instance().onResize([{ target: divNode }]); - } - - expect(onResize).not.toHaveBeenCalled(); - }); - }); }); diff --git a/components/_util/resizeObserver.tsx b/components/_util/resizeObserver.tsx deleted file mode 100644 index 8efec93e18..0000000000 --- a/components/_util/resizeObserver.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from 'react'; -import { findDOMNode } from 'react-dom'; -import ResizeObserver from 'resize-observer-polyfill'; - -type DomElement = Element | null; - -interface ResizeObserverProps { - children?: React.ReactNode; - disabled?: boolean; - onResize?: () => void; -} - -interface ResizeObserverState { - height: number; - width: number; -} - -class ReactResizeObserver extends React.Component { - resizeObserver: ResizeObserver | null = null; - - state = { - width: 0, - height: 0, - }; - - componentDidMount() { - this.onComponentUpdated(); - } - - componentDidUpdate() { - this.onComponentUpdated(); - } - - componentWillUnmount() { - this.destroyObserver(); - } - - onComponentUpdated() { - const { disabled } = this.props; - const element = findDOMNode(this) as DomElement; - if (!this.resizeObserver && !disabled && element) { - // Add resize observer - this.resizeObserver = new ResizeObserver(this.onResize); - this.resizeObserver.observe(element); - } else if (disabled) { - // Remove resize observer - this.destroyObserver(); - } - } - - onResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => { - const { onResize } = this.props; - - const { target } = entries[0]; - - const { width, height } = target.getBoundingClientRect(); - - /** - * Resize observer trigger when content size changed. - * In most case we just care about element size, - * let's use `boundary` instead of `contentRect` here to avoid shaking. - */ - const fixedWidth = Math.floor(width); - const fixedHeight = Math.floor(height); - - if (this.state.width !== fixedWidth || this.state.height !== fixedHeight) { - this.setState({ - width: fixedWidth, - height: fixedHeight, - }); - - if (onResize) { - onResize(); - } - } - }; - - destroyObserver() { - if (this.resizeObserver) { - this.resizeObserver.disconnect(); - this.resizeObserver = null; - } - } - - render() { - const { children = null } = this.props; - return children; - } -} - -export default ReactResizeObserver; diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js index f9531e81b8..2caa5f4348 100644 --- a/components/affix/__tests__/Affix.test.js +++ b/components/affix/__tests__/Affix.test.js @@ -182,7 +182,7 @@ describe('Affix Render', () => { // Mock trigger resize updateCalled.mockReset(); wrapper - .find('ReactResizeObserver') + .find('ResizeObserver') .at(index) .instance() .onResize([{ target: { getBoundingClientRect: () => ({ width: 99, height: 99 }) } }]); diff --git a/components/affix/index.tsx b/components/affix/index.tsx index e1b025a708..b974914a01 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { polyfill } from 'react-lifecycles-compat'; import classNames from 'classnames'; import omit from 'omit.js'; +import ResizeObserver from 'rc-resize-observer'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame'; -import ResizeObserver from '../_util/resizeObserver'; import warning from '../_util/warning'; import { @@ -35,6 +35,7 @@ export interface AffixProps { target?: () => Window | HTMLElement | null; prefixCls?: string; className?: string; + children: React.ReactElement; } enum AffixStatus { diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 2fe065f35f..830830e0fd 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import omit from 'omit.js'; import classNames from 'classnames'; import { polyfill } from 'react-lifecycles-compat'; +import ResizeObserver from 'rc-resize-observer'; import calculateNodeHeight from './calculateNodeHeight'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import ResizeObserver from '../_util/resizeObserver'; import raf from '../_util/raf'; export interface AutoSizeType { diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap index 9791dfe62a..c9bfa9f3dc 100644 --- a/components/input/__tests__/__snapshots__/index.test.js.snap +++ b/components/input/__tests__/__snapshots__/index.test.js.snap @@ -332,7 +332,7 @@ exports[`TextArea should support disabled 1`] = ` `; @@ -351,7 +351,7 @@ exports[`TextArea should support maxLength 1`] = ` `; diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index 91d88c36b3..e0ac416a82 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -4,11 +4,11 @@ import { polyfill } from 'react-lifecycles-compat'; import toArray from 'rc-util/lib/Children/toArray'; import copy from 'copy-to-clipboard'; import omit from 'omit.js'; +import ResizeObserver from 'rc-resize-observer'; import { withConfigConsumer, ConfigConsumerProps, configConsumerProps } from '../config-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import warning from '../_util/warning'; import TransButton from '../_util/transButton'; -import ResizeObserver from '../_util/resizeObserver'; import raf from '../_util/raf'; import isStyleSupport from '../_util/styleChecker'; import Icon from '../icon'; diff --git a/package.json b/package.json index d766f714f6..3aae59ee4a 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "rc-pagination": "~1.20.5", "rc-progress": "~2.5.0", "rc-rate": "~2.5.0", + "rc-resize-observer": "^0.1.0", "rc-select": "~9.2.0", "rc-slider": "~8.6.11", "rc-steps": "~3.5.0",