ant-design/components/upload/__tests__/uploadlist.test.tsx

1545 lines
48 KiB
TypeScript
Raw Normal View History

import React from 'react';
import Upload from '..';
2022-10-31 10:16:51 +08:00
import { act, fireEvent, render, waitFakeTimer, waitFor } from '../../../tests/utils';
import Form from '../../form';
import UploadList from '../UploadList';
import { previewImage } from '../utils';
2018-05-31 22:37:09 +08:00
import { setup, teardown } from './mock';
import { errorRequest, successRequest } from './requests';
import type { FormInstance } from '../../form';
import type { UploadFile, UploadProps } from '..';
import type { UploadListProps, UploadLocale } from '../interface';
const fileList: UploadProps['fileList'] = [
2018-12-07 16:17:45 +08:00
{
uid: '-1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
{
uid: '-2',
name: 'yyy.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
];
describe('Upload List', () => {
// Mock for rc-util raf
window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
window.cancelAnimationFrame = id => window.clearTimeout(id);
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
// jsdom not support `createObjectURL` yet. Let's handle this.
const originCreateObjectURL = window.URL.createObjectURL;
window.URL.createObjectURL = jest.fn(() => '');
// Mock dom
let size = { width: 0, height: 0 };
function setSize(width: number, height: number) {
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
size = { width, height };
}
const mockWidthGet = jest.spyOn(Image.prototype, 'width', 'get');
const mockHeightGet = jest.spyOn(Image.prototype, 'height', 'get');
const mockSrcSet = jest.spyOn(Image.prototype, 'src', 'set');
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
let drawImageCallback: jest.Mock | null = null;
function hookDrawImageCall(callback: jest.Mock) {
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
drawImageCallback = callback;
}
const mockGetCanvasContext = jest.spyOn(HTMLCanvasElement.prototype, 'getContext');
const mockToDataURL = jest.spyOn(HTMLCanvasElement.prototype, 'toDataURL');
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
// HTMLCanvasElement.prototype
2022-10-31 10:16:51 +08:00
beforeEach(() => {
jest.useFakeTimers();
return setup();
});
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
afterEach(() => {
teardown();
drawImageCallback = null;
2022-10-31 10:16:51 +08:00
jest.clearAllTimers();
jest.useRealTimers();
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
});
let open: jest.MockInstance<any, any[]>;
beforeAll(() => {
open = jest.spyOn(window, 'open').mockImplementation(() => null);
mockWidthGet.mockImplementation(() => size.width);
mockHeightGet.mockImplementation(() => size.height);
mockSrcSet.mockImplementation(function fn() {
if (this.onload) {
this.onload();
}
});
mockGetCanvasContext.mockReturnValue({
drawImage(...args) {
if (drawImageCallback) {
drawImageCallback(...args);
}
},
} as RenderingContext);
mockToDataURL.mockReturnValue('data:image/png;base64,');
});
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
afterAll(() => {
window.URL.createObjectURL = originCreateObjectURL;
mockWidthGet.mockRestore();
mockHeightGet.mockRestore();
mockSrcSet.mockRestore();
mockGetCanvasContext.mockRestore();
mockToDataURL.mockRestore();
open.mockRestore();
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
});
2018-05-31 22:37:09 +08:00
// https://github.com/ant-design/ant-design/issues/4653
it('should use file.thumbUrl for <img /> in priority', () => {
const { container: wrapper, unmount } = render(
<Upload defaultFileList={fileList} listType="picture">
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
);
fileList.forEach((file, i) => {
const linkNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail')[i];
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
expect(linkNode.getAttribute('href')).toBe(file.url);
expect(imgNode.getAttribute('src')).toBe(file.thumbUrl);
});
unmount();
});
// https://github.com/ant-design/ant-design/issues/7269
it('should remove correct item when uid is 0', async () => {
2018-12-07 16:17:45 +08:00
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
];
const { container, unmount } = render(
<Upload defaultFileList={list as UploadProps['defaultFileList']}>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
);
expect(container.querySelectorAll('.ant-upload-list-item').length).toBe(2);
fireEvent.click(
container.querySelectorAll('.ant-upload-list-item')[0].querySelector('.anticon-delete')!,
);
// Upload use Promise to wait remove action. Let's wait this also.
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
// Progress motion to done
// React 17 will reach deadline, so we need check if already done
if (container.querySelector('.ant-upload-animate-leave-active')) {
fireEvent.animationEnd(container.querySelector('.ant-upload-animate-leave-active')!);
}
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(container.querySelectorAll('.ant-upload-list-text-container')).toHaveLength(1);
unmount();
});
2017-10-10 15:59:13 +08:00
it('should be uploading when upload a file', async () => {
const done = jest.fn();
let wrapper: ReturnType<typeof render>;
let latestFileList: UploadFile<any>[] | null = null;
const onChange: UploadProps['onChange'] = async ({ file, fileList: eventFileList }) => {
expect(eventFileList === latestFileList).toBeFalsy();
if (file.status === 'uploading') {
await Promise.resolve();
expect(wrapper.container.firstChild).toMatchSnapshot();
}
2017-10-15 17:30:50 +08:00
if (file.status === 'done') {
done();
2017-10-15 17:30:50 +08:00
}
latestFileList = eventFileList;
2017-10-15 17:30:50 +08:00
};
wrapper = render(
2017-10-15 17:30:50 +08:00
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
onChange={onChange}
customRequest={successRequest}
>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
2017-10-15 17:30:50 +08:00
);
fireEvent.change(wrapper.container.querySelector('input')!, {
target: { files: [{ name: 'foo.png' }] },
2017-10-15 17:30:50 +08:00
});
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(done).toHaveBeenCalled();
wrapper.unmount();
2017-10-15 17:30:50 +08:00
});
it('handle error', async () => {
const onChange = jest.fn();
const {
container: wrapper,
unmount,
baseElement,
} = render(
2017-10-15 17:30:50 +08:00
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
onChange={onChange}
customRequest={errorRequest}
>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
2017-10-10 15:59:13 +08:00
);
fireEvent.change(wrapper.querySelector('input')!, {
target: { files: [{ name: 'foo.png' }] },
2017-10-10 15:59:13 +08:00
});
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
// Wait twice since `errorRequest` also use timeout for mock
expect(onChange).toHaveBeenLastCalledWith(
expect.objectContaining({
file: expect.objectContaining({ status: 'error' }),
}),
);
if (wrapper.querySelector('.ant-upload-animate-appear-active')) {
fireEvent.animationEnd(wrapper.querySelector('.ant-upload-animate-appear-active')!);
}
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(wrapper.firstChild).toMatchSnapshot();
// Error message
fireEvent.mouseEnter(wrapper.querySelector('.ant-upload-list-item')!);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(baseElement.querySelector('.ant-tooltip')).not.toHaveClass('.ant-tooltip-hidden');
unmount();
2017-10-10 15:59:13 +08:00
});
it('does concat fileList when beforeUpload returns false', async () => {
const handleChange = jest.fn();
const ref = React.createRef<any>();
const { container: wrapper, unmount } = render(
<Upload
ref={ref}
listType="picture"
defaultFileList={fileList}
onChange={handleChange}
beforeUpload={() => false}
>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
);
fireEvent.change(wrapper.querySelector('input')!, {
target: { files: [{ name: 'foo.png' }] },
});
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(ref.current.fileList.length).toBe(fileList.length + 1);
expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3);
unmount();
});
it('In the case of listType=picture, the error status does not show the download.', () => {
(global as any).testName =
'In the case of listType=picture, the error status does not show the download.';
const file = { status: 'error', uid: 'file' };
const { container: wrapper, unmount } = render(
<Upload
listType="picture"
fileList={[file] as UploadProps['fileList']}
showUploadList={{ showDownloadIcon: true }}
>
<button type="button">upload</button>
</Upload>,
);
// Has error item className
fireEvent.mouseEnter(wrapper.querySelector('.ant-upload-list-item-error')!);
expect(wrapper.querySelectorAll('div.ant-upload-list-item i.anticon-download').length).toBe(0);
unmount();
});
it('In the case of listType=picture-card, the error status does not show the download.', () => {
(global as any).testName =
'In the case of listType=picture-card, the error status does not show the download.';
const file = { status: 'error', uid: 'file' };
const { container: wrapper, unmount } = render(
<Upload
listType="picture-card"
fileList={[file] as UploadProps['fileList']}
showUploadList={{ showDownloadIcon: true }}
>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper.querySelectorAll('div.ant-upload-list-item i.anticon-download').length).toBe(0);
unmount();
});
it('In the case of listType=text, the error status does not show the download.', () => {
const file = { status: 'error', uid: 'file' };
const { container: wrapper, unmount } = render(
<Upload
listType="text"
fileList={[file] as UploadProps['fileList']}
showUploadList={{ showDownloadIcon: true }}
>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper.querySelectorAll('div.ant-upload-list-item i.anticon-download').length).toBe(0);
unmount();
});
2017-12-04 15:59:23 +08:00
it('should support onPreview', () => {
const handlePreview = jest.fn();
const { container: wrapper, unmount } = render(
2018-12-07 16:17:45 +08:00
<Upload listType="picture-card" defaultFileList={fileList} onPreview={handlePreview}>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
2017-12-04 15:59:23 +08:00
);
fireEvent.click(wrapper.querySelectorAll('.anticon-eye')[0]);
expect(handlePreview).toHaveBeenCalledWith(fileList[0]);
fireEvent.click(wrapper.querySelectorAll('.anticon-eye')[1]);
expect(handlePreview).toHaveBeenCalledWith(fileList[1]);
unmount();
2017-12-04 15:59:23 +08:00
});
it('should support onRemove', async () => {
const handleRemove = jest.fn();
const handleChange = jest.fn();
const { container: wrapper, unmount } = render(
2017-12-04 15:59:23 +08:00
<Upload
listType="picture-card"
defaultFileList={fileList}
onRemove={handleRemove}
onChange={handleChange}
>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
2017-12-04 15:59:23 +08:00
);
fireEvent.click(wrapper.querySelectorAll('.anticon-delete')[0]);
expect(handleRemove).toHaveBeenCalledWith(fileList[0]);
fireEvent.click(wrapper.querySelectorAll('.anticon-delete')[1]);
expect(handleRemove).toHaveBeenCalledWith(fileList[1]);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(handleChange).toHaveBeenCalledTimes(2);
unmount();
2017-12-04 15:59:23 +08:00
});
it('should support onDownload', async () => {
const handleDownload = jest.fn();
const { container: wrapper, unmount } = render(
<Upload
listType="picture-card"
defaultFileList={[
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]}
onDownload={handleDownload}
showUploadList={{
showDownloadIcon: true,
}}
>
<button type="button">upload</button>
</Upload>,
);
fireEvent.click(wrapper.querySelectorAll('.anticon-download')[0]);
2022-10-31 10:16:51 +08:00
expect(handleDownload).toHaveBeenCalled();
unmount();
});
it('should support no onDownload', async () => {
const { container: wrapper, unmount } = render(
<Upload
listType="picture-card"
defaultFileList={[
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]}
showUploadList={{
showDownloadIcon: true,
}}
>
<button type="button">upload</button>
</Upload>,
);
fireEvent.click(wrapper.querySelectorAll('.anticon-download')[0]);
unmount();
});
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
describe('should generate thumbUrl from file', () => {
[
{ width: 100, height: 200, name: 'height large than width' },
{ width: 200, height: 100, name: 'width large than height' },
].forEach(({ width, height, name }) => {
it(name, async () => {
setSize(width, height);
const onDrawImage = jest.fn();
hookDrawImageCall(onDrawImage);
const handlePreview = jest.fn();
const newFileList: UploadProps['fileList'] = [...fileList];
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
const newFile = {
...fileList[0],
uid: '-3',
originFileObj: new File([], 'xxx.png', { type: 'image/png' }),
};
delete newFile.thumbUrl;
newFileList.push(newFile as UploadFile);
const ref = React.createRef<any>();
const { unmount } = render(
<Upload
ref={ref}
listType="picture-card"
defaultFileList={newFileList}
onPreview={handlePreview}
>
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
<button type="button">upload</button>
</Upload>,
);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
expect(ref.current.fileList[2].thumbUrl).not.toBe(undefined);
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
expect(onDrawImage).toHaveBeenCalled();
// Offset check
const [, offsetX, offsetY] = onDrawImage.mock.calls[0];
expect((width > height ? offsetX : offsetY) === 0).toBeTruthy();
unmount();
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
});
});
2017-12-04 15:59:23 +08:00
});
it('should non-image format file preview', () => {
const list = [
{
name: 'not-image',
status: 'done',
uid: '-3',
url: 'https://cdn.xxx.com/aaa.zip',
thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
originFileObj: new File([], 'aaa.zip'),
},
{
name: 'image',
status: 'done',
uid: '-4',
url: 'https://cdn.xxx.com/aaa',
},
{
name: 'not-image',
status: 'done',
uid: '-5',
url: 'https://cdn.xxx.com/aaa.xx',
},
{
name: 'not-image',
status: 'done',
uid: '-6',
url: 'https://cdn.xxx.com/aaa.png/xx.xx',
},
{
name: 'image',
status: 'done',
uid: '-7',
url: 'https://cdn.xxx.com/xx.xx/aaa.png',
},
{
name: 'image',
status: 'done',
uid: '-8',
url: 'https://cdn.xxx.com/xx.xx/aaa.png',
thumbUrl: 'data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
},
{
name: 'image',
status: 'done',
uid: '-9',
url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=123',
},
{
name: 'image',
status: 'done',
uid: '-10',
url: 'https://cdn.xxx.com/xx.xx/aaa.png#anchor',
},
{
name: 'image',
status: 'done',
uid: '-11',
url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot',
},
{
name: 'image',
status: 'done',
uid: '-12',
url: 'https://publish-pic-cpu.baidu.com/1296beb3-50d9-4276-885f-52645cbb378e.jpeg@w_228%2ch_152',
type: 'image/png',
},
];
const { container: wrapper, unmount } = render(
<Upload listType="picture" defaultFileList={list as UploadProps['defaultFileList']}>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
);
expect(wrapper.firstChild).toMatchSnapshot();
unmount();
});
it('not crash when uploading not provides percent', async () => {
const { unmount } = render(
<Upload
listType="picture"
defaultFileList={
[{ name: 'bamboo.png', status: 'uploading' }] as UploadProps['defaultFileList']
}
/>,
);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
unmount();
});
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 { container: wrapper, unmount } = render(
<Upload
listType="picture"
defaultFileList={list as UploadProps['defaultFileList']}
showUploadList={{
showRemoveIcon: false,
showPreviewIcon: false,
}}
>
<button type="button">upload</button>
2018-12-07 16:17:45 +08:00
</Upload>,
);
expect(wrapper.firstChild).toMatchSnapshot();
unmount();
});
2021-01-16 18:06:26 +08:00
it('should support custom onClick in custom icon', async () => {
const handleRemove = jest.fn();
const handleChange = jest.fn();
const myClick = jest.fn();
const { container: wrapper, unmount } = render(
<Upload
listType="picture-card"
defaultFileList={fileList}
onRemove={handleRemove}
onChange={handleChange}
showUploadList={{
showRemoveIcon: true,
2020-02-19 13:20:43 +08:00
removeIcon: (
<i className="custom-delete" onClick={myClick}>
RM
</i>
),
}}
>
<button type="button">upload</button>
</Upload>,
);
fireEvent.click(wrapper.querySelectorAll('.custom-delete')[0]);
expect(handleRemove).toHaveBeenCalledWith(fileList[0]);
expect(myClick).toHaveBeenCalled();
fireEvent.click(wrapper.querySelectorAll('.custom-delete')[1]);
expect(handleRemove).toHaveBeenCalledWith(fileList[1]);
expect(myClick).toHaveBeenCalled();
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(handleChange).toHaveBeenCalledTimes(2);
unmount();
});
it('should support removeIcon and downloadIcon', () => {
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 { container: wrapper, unmount } = render(
<Upload
listType="picture"
defaultFileList={list as UploadProps['defaultFileList']}
showUploadList={{
showRemoveIcon: true,
showDownloadIcon: true,
showPreviewIcon: true,
removeIcon: <i>RM</i>,
downloadIcon: <i>DL</i>,
previewIcon: <i>PV</i>,
}}
>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper.firstChild).toMatchSnapshot();
unmount();
const { container: wrapper2, unmount: unmount2 } = render(
<Upload
listType="picture"
defaultFileList={list as UploadProps['defaultFileList']}
showUploadList={{
showRemoveIcon: true,
showDownloadIcon: true,
showPreviewIcon: true,
removeIcon: () => <i>RM</i>,
downloadIcon: () => <i>DL</i>,
previewIcon: () => <i>PV</i>,
}}
>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper2.firstChild).toMatchSnapshot();
unmount2();
});
// https://github.com/ant-design/ant-design/issues/7762
it('work with form validation', async () => {
let formRef: FormInstance;
const TestForm: React.FC = () => {
const [form] = Form.useForm();
formRef = form;
return (
<Form form={form}>
<Form.Item
name="file"
valuePropName="fileList"
getValueFromEvent={e => e.fileList}
rules={[
{
required: true,
2022-10-31 10:16:51 +08:00
async validator(_, value) {
if (!value || value.length === 0) {
2022-10-31 10:16:51 +08:00
throw new Error('file required');
}
},
},
]}
>
<Upload beforeUpload={() => false}>
<button type="button">upload</button>
</Upload>
</Form.Item>
</Form>
);
};
const { container, unmount } = render(<TestForm />);
fireEvent.submit(container.querySelector('form')!);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(formRef!.getFieldError(['file'])).toEqual(['file required']);
fireEvent.change(container.querySelector('input')!, {
target: { files: [{ name: 'foo.png' }] },
});
fireEvent.submit(container.querySelector('form')!);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(formRef!.getFieldError(['file'])).toEqual([]);
unmount();
});
2019-03-07 09:57:20 +08:00
it('return when prop onPreview not exists', () => {
const ref = React.createRef<any>();
const { unmount } = render(
<UploadList ref={ref} locale={undefined as unknown as UploadLocale} />,
);
expect(ref.current?.handlePreview?.()).toBe(undefined);
unmount();
2019-03-07 09:57:20 +08:00
});
it('return when prop onDownload not exists', () => {
const file = new File([''], 'test.txt', { type: 'text/plain' });
const items = [{ uid: 'upload-list-item', url: '' }];
const ref = React.createRef<any>();
const showUploadList = { showUploadList: { showDownloadIcon: true } };
const { unmount } = render(
<UploadList
ref={ref}
items={items as UploadListProps['items']}
locale={{ downloadFile: '' }}
{...showUploadList}
2020-02-24 13:10:29 +08:00
/>,
);
expect(ref.current?.handleDownload?.(file)).toBe(undefined);
unmount();
});
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
it('previewFile should work correctly', async () => {
2019-03-07 12:38:14 +08:00
const items = [{ uid: 'upload-list-item', url: '' }];
const previewFunc = jest.fn(previewImage);
const { container: wrapper, unmount } = render(
<Upload
fileList={items as UploadProps['fileList']}
previewFile={previewFunc}
locale={{ previewFile: '' }}
listType="picture-card"
/>,
);
fireEvent.change(wrapper.querySelector('input')!, {
target: { files: [{ name: 'foo.png' }] },
});
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(wrapper.querySelector('.ant-upload-list-item-thumbnail')?.getAttribute('href')).toBe(
null,
);
unmount();
2019-03-07 09:57:20 +08:00
});
it('downloadFile should work correctly', async () => {
const downloadFunc = jest.fn();
const items = [{ uid: 'upload-list-item', name: 'test', url: '', status: 'done' }];
const { container: wrapper, unmount } = render(
<UploadList
showDownloadIcon
listType="picture-card"
items={items as UploadListProps['items']}
onDownload={downloadFunc}
locale={{ downloadFile: 'Download file' }}
/>,
);
// Not throw
const btn = wrapper.querySelector('.ant-btn');
expect(btn?.getAttribute('title')).toBe('Download file');
fireEvent.click(btn!);
expect(downloadFunc).toHaveBeenCalled();
unmount();
});
2019-03-07 12:38:14 +08:00
it('extname should work correctly when url not exists', () => {
const items = [{ uid: 'upload-list-item', url: '' }];
const { container: wrapper, unmount } = render(
<UploadList
listType="picture-card"
items={items as UploadListProps['items']}
locale={{ previewFile: '' }}
/>,
2019-03-07 12:38:14 +08:00
);
expect(wrapper.querySelectorAll('.ant-upload-list-item-thumbnail').length).toBe(1);
unmount();
2019-03-07 09:57:20 +08:00
});
2020-02-24 13:10:29 +08:00
it('extname should work correctly when url exists', done => {
const items = [{ status: 'done', uid: 'upload-list-item', url: '/example' }];
const { container: wrapper, unmount } = render(
<UploadList
listType="picture"
onDownload={file => {
expect(file.url).toBe('/example');
unmount();
done();
}}
items={items as UploadListProps['items']}
locale={{ downloadFile: '' }}
showDownloadIcon
/>,
);
fireEvent.click(wrapper.querySelector('div.ant-upload-list-item .anticon-download')!);
});
2019-03-07 09:57:20 +08:00
it('when picture-card is loading, icon should render correctly', () => {
const items = [{ status: 'uploading', uid: 'upload-list-item' }];
const { container: wrapper, unmount } = render(
<UploadList
listType="picture-card"
items={items as UploadListProps['items']}
locale={{ uploading: 'uploading' }}
/>,
2019-03-07 09:57:20 +08:00
);
expect(wrapper.querySelectorAll('.ant-upload-list-item-thumbnail')?.length).toBe(1);
expect(wrapper.querySelector('.ant-upload-list-item-thumbnail')?.textContent).toBe('uploading');
unmount();
2019-03-07 09:57:20 +08:00
});
it('onPreview should be called, when url exists', () => {
const onPreview = jest.fn();
const items = [{ thumbUrl: 'thumbUrl', url: 'url', uid: 'upload-list-item' }];
const {
container: wrapper,
rerender,
unmount,
} = render(
2019-03-07 09:57:20 +08:00
<UploadList
listType="picture-card"
items={items as UploadListProps['items']}
2019-03-07 09:57:20 +08:00
locale={{ uploading: 'uploading' }}
onPreview={onPreview}
/>,
);
fireEvent.click(wrapper.querySelector('.ant-upload-list-item-thumbnail')!);
expect(onPreview).toHaveBeenCalled();
fireEvent.click(wrapper.querySelector('.ant-upload-list-item-name')!);
expect(onPreview).toHaveBeenCalled();
rerender(
<UploadList
listType="picture-card"
items={[{ thumbUrl: 'thumbUrl', uid: 'upload-list-item' }] as UploadListProps['items']}
locale={{ uploading: 'uploading' }}
onPreview={onPreview}
/>,
);
fireEvent.click(wrapper.querySelector('.ant-upload-list-item-name')!);
expect(onPreview).toHaveBeenCalled();
unmount();
2019-03-07 09:57:20 +08:00
});
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
it('upload image file should be converted to the base64', async () => {
const mockFile = new File([''], 'foo.png', {
type: 'image/png',
});
const previewFunc = jest.fn(previewImage);
const { unmount } = render(
<Upload
fileList={[{ originFileObj: mockFile }] as UploadProps['fileList']}
previewFile={previewFunc}
locale={{ uploading: 'uploading' }}
listType="picture-card"
/>,
);
await waitFor(() => {
expect(previewFunc).toHaveBeenCalled();
});
await previewFunc(mockFile).then(dataUrl => {
expect(dataUrl).toEqual('data:image/png;base64,');
});
unmount();
});
it('upload svg file with <foreignObject> should not have CORS error', async () => {
const mockFile = new File(
[
'<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><foreignObject x="20" y="20" width="160" height="160"><div xmlns="http://www.w3.org/1999/xhtml">Test</div></foreignObject></svg>',
],
'bar.svg',
{ type: 'image/svg+xml' },
);
const previewFunc = jest.fn(previewImage);
const { unmount } = render(
<Upload
fileList={[{ originFileObj: mockFile }] as UploadProps['fileList']}
previewFile={previewFunc}
locale={{ uploading: 'uploading' }}
listType="picture-card"
/>,
);
await waitFor(() => {
expect(previewFunc).toHaveBeenCalled();
});
await previewFunc(mockFile).then(dataUrl => {
expect(dataUrl).toEqual('data:image/png;base64,');
});
unmount();
});
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
it("upload non image file shouldn't be converted to the base64", async () => {
const mockFile = new File([''], 'foo.7z', {
type: 'application/x-7z-compressed',
});
const previewFunc = jest.fn(previewImage);
const { unmount } = render(
<Upload
fileList={[{ originFileObj: mockFile }] as UploadProps['fileList']}
previewFile={previewFunc}
locale={{ uploading: 'uploading' }}
listType="picture-card"
/>,
);
await waitFor(() => {
expect(previewFunc).toHaveBeenCalled();
});
await previewFunc(mockFile).then(dataUrl => {
expect(dataUrl).toBe('');
});
unmount();
meger feature to master (#16421) * use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * :white_check_mark: Add test cases for hr_HR * :memo: update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2019-05-06 12:04:39 +08:00
});
describe('customize previewFile support', () => {
function test(name: string, renderInstance: () => File | Blob) {
it(name, async () => {
const mockThumbnail = 'mock-image';
const previewFile = jest.fn(() => Promise.resolve(mockThumbnail));
const file = {
...fileList?.[0],
originFileObj: renderInstance(),
};
delete file.thumbUrl;
const ref = React.createRef();
const { container: wrapper, unmount } = render(
<Upload
ref={ref}
listType="picture"
defaultFileList={[file] as UploadProps['defaultFileList']}
previewFile={previewFile}
>
2019-08-11 16:38:04 +08:00
<button type="button">button</button>
</Upload>,
);
expect(previewFile).toHaveBeenCalledWith(file.originFileObj);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(
wrapper.querySelector('.ant-upload-list-item-thumbnail img')?.getAttribute('src'),
).toBe(mockThumbnail);
unmount();
});
}
test('File', () => new File([], 'xxx.png'));
test('Blob', () => new Blob());
});
// https://github.com/ant-design/ant-design/issues/22958
describe('customize isImageUrl support', () => {
const list = [
...fileList,
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl:
'http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg@!panda_style?spm=a2c4g.11186623.2.17.4dc56b29BHokyg&file=example.jpg@!panda_style',
},
];
it('should not render <img /> when file.thumbUrl use "!" as separator', () => {
const { container: wrapper, unmount } = render(
<Upload listType="picture-card" fileList={list as UploadProps['fileList']}>
<button type="button">button</button>
</Upload>,
);
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img');
expect(imgNode.length).toBe(2);
unmount();
});
it('should render <img /> when custom imageUrl return true', () => {
const isImageUrl = jest.fn(() => true);
const { container: wrapper, unmount } = render(
<Upload
listType="picture-card"
fileList={list as UploadProps['fileList']}
isImageUrl={isImageUrl}
>
<button type="button">button</button>
</Upload>,
);
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img');
expect(isImageUrl).toHaveBeenCalled();
expect(imgNode.length).toBe(3);
unmount();
});
it('should not render <img /> when custom imageUrl return false', () => {
const isImageUrl = jest.fn(() => false);
const { container: wrapper, unmount } = render(
<Upload
listType="picture-card"
fileList={list as UploadProps['fileList']}
isImageUrl={isImageUrl}
>
<button type="button">button</button>
</Upload>,
);
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img');
expect(isImageUrl).toHaveBeenCalled();
expect(imgNode.length).toBe(0);
unmount();
});
});
describe('thumbUrl support for non-image', () => {
const nonImageFile = new File([''], 'foo.7z', { type: 'application/x-7z-compressed' });
it('should render <img /> when upload non-image file and configure thumbUrl in onChange', async () => {
const thumbUrl =
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
let wrapper: ReturnType<typeof render>;
const onChange = jest.fn<void, Record<'fileList', UploadProps['fileList']>[]>(
({ fileList: files }) => {
const newFileList = files?.map<UploadFile<any>>(item => ({ ...item, thumbUrl }));
wrapper.rerender(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={newFileList}
onChange={onChange}
customRequest={successRequest}
>
<button type="button">upload</button>
</Upload>,
);
},
);
wrapper = render(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={[]}
onChange={onChange}
customRequest={successRequest}
>
<button type="button">upload</button>
</Upload>,
);
const imgNode = wrapper.container.querySelectorAll('.ant-upload-list-item-thumbnail img');
expect(imgNode.length).toBe(0);
// Simulate change is a timeout change
fireEvent.change(wrapper.container.querySelector('input')!, {
target: { files: [nonImageFile] },
});
// Wait for `rc-upload` process file
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
// Basic called times
expect(onChange).toHaveBeenCalled();
// Check for images
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
const afterImgNode = wrapper.container.querySelectorAll(
'.ant-upload-list-item-thumbnail img',
);
expect(afterImgNode.length).toBeTruthy();
wrapper.unmount();
});
2022-10-31 10:16:51 +08:00
it('should not render <img /> when upload non-image file without thumbUrl in onChange', async () => {
(global as any).testName =
'should not render <img /> when upload non-image file without thumbUrl in onChange';
let wrapper: ReturnType<typeof render>;
2022-10-31 10:16:51 +08:00
const onChange = jest.fn<void, Record<'fileList', UploadProps['fileList']>[]>(
({ fileList: files }) => {
wrapper.rerender(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={files}
onChange={onChange}
customRequest={successRequest}
>
<button type="button">upload</button>
</Upload>,
);
},
);
wrapper = render(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={[]}
onChange={onChange}
customRequest={successRequest}
>
<button type="button">upload</button>
</Upload>,
);
const imgNode = wrapper.container.querySelectorAll('.ant-upload-list-item-thumbnail img');
expect(imgNode.length).toBe(0);
fireEvent.change(wrapper.container.querySelector('input')!, {
target: { files: [nonImageFile] },
});
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(onChange).toHaveBeenCalled();
expect(wrapper.container.querySelectorAll('.ant-upload-list-item-thumbnail img').length).toBe(
0,
);
});
});
it('[deprecated] should support transformFile', done => {
2022-10-31 10:16:51 +08:00
jest.useRealTimers();
let wrapper: ReturnType<typeof render>;
let lastFile: UploadFile;
const handleTransformFile = jest.fn();
const onChange: UploadProps['onChange'] = ({ file }) => {
if (file.status === 'done') {
expect(file).not.toBe(lastFile);
expect(handleTransformFile).toHaveBeenCalled();
wrapper.unmount();
done();
}
lastFile = file;
};
wrapper = render(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
transformFile={handleTransformFile}
onChange={onChange}
customRequest={successRequest}
>
<button type="button">upload</button>
</Upload>,
);
fireEvent.change(wrapper.container.querySelector('input')!, {
target: { files: [{ name: 'foo.png' }] },
});
});
it('should render button inside UploadList when listStyle is picture-card', () => {
const {
container: wrapper,
rerender,
unmount,
} = render(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={[
{
uid: '0',
name: 'xxx.png',
},
]}
showUploadList
>
<button className="trigger" type="button">
upload
</button>
</Upload>,
);
expect(wrapper.querySelectorAll('.ant-upload-list button.trigger').length).toBeGreaterThan(0);
rerender(
<Upload
action="http://jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={[
{
uid: '0',
name: 'xxx.png',
},
]}
showUploadList={false}
>
<button className="trigger" type="button">
upload
</button>
</Upload>,
);
expect(wrapper.querySelectorAll('.ant-upload-list button.trigger').length).toBe(0);
unmount();
});
// https://github.com/ant-design/ant-design/issues/26536
it('multiple file upload should keep the internal fileList async', async () => {
const uploadRef = React.createRef<any>();
const MyUpload: React.FC = () => {
const [testFileList, setTestFileList] = React.useState<UploadFile[]>([]);
return (
<Upload
ref={uploadRef}
fileList={testFileList}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
multiple
onChange={info => {
setTestFileList([...info.fileList]);
}}
>
<button type="button">Upload</button>
</Upload>
);
};
const { unmount } = render(<MyUpload />);
// Mock async update in a frame
merge Feature into master (#29758) * feat: add onCancel and onEnd option for editable (#29615) * feature: add onCancel and onEnd option for editable * doc: editable * doc: add EN doc * optimize: code Co-authored-by: chenliang <chenliang9@xiaomi.com> * feat: add parent class for different notification types (#29634) close #29417 * refactor: Upload use origin behavior (#29737) * refactor: Fallback of events * test: Fix test case * fix: Start file update logic * fix: remove status update * test: Remove wrapTest * test: Fix test case * chore: bump rc-upload * docs: About desc * feat: tab support moreIcon (#29744) * feat: Tabs support moreIcon * docs: Tabs support moreIcon * style: lint * docs: add english document * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.zh-CN.md * Update components/tabs/index.en-US.md Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: jueinin <1014397160@qq.com> Co-authored-by: chenliang <chenliang9@xiaomi.com> Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com> Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2021-03-13 23:46:32 +08:00
const fileNames = ['light', 'bamboo', 'little'];
await act(() => {
merge Feature into master (#29758) * feat: add onCancel and onEnd option for editable (#29615) * feature: add onCancel and onEnd option for editable * doc: editable * doc: add EN doc * optimize: code Co-authored-by: chenliang <chenliang9@xiaomi.com> * feat: add parent class for different notification types (#29634) close #29417 * refactor: Upload use origin behavior (#29737) * refactor: Fallback of events * test: Fix test case * fix: Start file update logic * fix: remove status update * test: Remove wrapTest * test: Fix test case * chore: bump rc-upload * docs: About desc * feat: tab support moreIcon (#29744) * feat: Tabs support moreIcon * docs: Tabs support moreIcon * style: lint * docs: add english document * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.zh-CN.md * Update components/tabs/index.en-US.md Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: jueinin <1014397160@qq.com> Co-authored-by: chenliang <chenliang9@xiaomi.com> Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com> Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2021-03-13 23:46:32 +08:00
uploadRef.current.onBatchStart(
fileNames.map(fileName => {
const file = new File([], fileName);
(file as any).uid = fileName;
return { file, parsedFile: file };
merge Feature into master (#29758) * feat: add onCancel and onEnd option for editable (#29615) * feature: add onCancel and onEnd option for editable * doc: editable * doc: add EN doc * optimize: code Co-authored-by: chenliang <chenliang9@xiaomi.com> * feat: add parent class for different notification types (#29634) close #29417 * refactor: Upload use origin behavior (#29737) * refactor: Fallback of events * test: Fix test case * fix: Start file update logic * fix: remove status update * test: Remove wrapTest * test: Fix test case * chore: bump rc-upload * docs: About desc * feat: tab support moreIcon (#29744) * feat: Tabs support moreIcon * docs: Tabs support moreIcon * style: lint * docs: add english document * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.zh-CN.md * Update components/tabs/index.en-US.md Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: jueinin <1014397160@qq.com> Co-authored-by: chenliang <chenliang9@xiaomi.com> Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com> Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2021-03-13 23:46:32 +08:00
}),
);
});
merge Feature into master (#29758) * feat: add onCancel and onEnd option for editable (#29615) * feature: add onCancel and onEnd option for editable * doc: editable * doc: add EN doc * optimize: code Co-authored-by: chenliang <chenliang9@xiaomi.com> * feat: add parent class for different notification types (#29634) close #29417 * refactor: Upload use origin behavior (#29737) * refactor: Fallback of events * test: Fix test case * fix: Start file update logic * fix: remove status update * test: Remove wrapTest * test: Fix test case * chore: bump rc-upload * docs: About desc * feat: tab support moreIcon (#29744) * feat: Tabs support moreIcon * docs: Tabs support moreIcon * style: lint * docs: add english document * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.zh-CN.md * Update components/tabs/index.en-US.md Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: jueinin <1014397160@qq.com> Co-authored-by: chenliang <chenliang9@xiaomi.com> Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com> Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2021-03-13 23:46:32 +08:00
expect(uploadRef.current.fileList).toHaveLength(fileNames.length);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
merge Feature into master (#29758) * feat: add onCancel and onEnd option for editable (#29615) * feature: add onCancel and onEnd option for editable * doc: editable * doc: add EN doc * optimize: code Co-authored-by: chenliang <chenliang9@xiaomi.com> * feat: add parent class for different notification types (#29634) close #29417 * refactor: Upload use origin behavior (#29737) * refactor: Fallback of events * test: Fix test case * fix: Start file update logic * fix: remove status update * test: Remove wrapTest * test: Fix test case * chore: bump rc-upload * docs: About desc * feat: tab support moreIcon (#29744) * feat: Tabs support moreIcon * docs: Tabs support moreIcon * style: lint * docs: add english document * Update components/tabs/index.zh-CN.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.en-US.md Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> * Update components/tabs/index.zh-CN.md * Update components/tabs/index.en-US.md Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: jueinin <1014397160@qq.com> Co-authored-by: chenliang <chenliang9@xiaomi.com> Co-authored-by: 不吃猫的鱼 <michael2ib1989@gmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: Tianyuan Zhang <tianyuan233.zhang@gmail.com> Co-authored-by: zty <zty.dev@outlook.com> Co-authored-by: zty <zty.dev@icloud.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
2021-03-13 23:46:32 +08:00
expect(uploadRef.current.fileList).toHaveLength(fileNames.length);
unmount();
});
it('itemRender', () => {
const onDownload = jest.fn();
const onRemove = jest.fn();
const onPreview = jest.fn();
const itemRender: UploadListProps['itemRender'] = (_, file, currFileList, actions) => {
const { name, status, uid, url } = file;
const index = currFileList.indexOf(file);
return (
<div className="custom-item-render">
<span>
{`uid:${uid} name: ${name} status: ${status} url: ${url} ${index + 1}/${
currFileList.length
}`}
</span>
<span onClick={actions.remove} className="custom-item-render-action-remove">
remove
</span>
<span onClick={actions.download} className="custom-item-render-action-download">
download
</span>
<span onClick={actions.preview} className="custom-item-render-action-preview">
preview
</span>
</div>
);
};
const { container: wrapper, unmount } = render(
<UploadList
onDownload={onDownload}
onPreview={onPreview}
onRemove={onRemove}
locale={{}}
items={fileList}
itemRender={itemRender}
/>,
);
expect(wrapper.firstChild).toMatchSnapshot();
fireEvent.click(wrapper.querySelectorAll('.custom-item-render-action-remove')[0]);
expect(onRemove.mock.calls[0][0]).toEqual(fileList[0]);
fireEvent.click(wrapper.querySelectorAll('.custom-item-render-action-download')[0]);
expect(onDownload.mock.calls[0][0]).toEqual(fileList[0]);
fireEvent.click(wrapper.querySelectorAll('.custom-item-render-action-preview')[0]);
expect(onPreview.mock.calls[0][0]).toEqual(fileList[0]);
unmount();
});
it('LIST_IGNORE should not add in list', async () => {
const beforeUpload = jest.fn(() => Upload.LIST_IGNORE);
const { container: wrapper, unmount } = render(<Upload beforeUpload={beforeUpload} />);
2022-10-31 10:16:51 +08:00
fireEvent.change(wrapper.querySelector('input')!, {
target: { files: [{ file: 'foo.png' }] },
});
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(beforeUpload).toHaveBeenCalled();
expect(wrapper.querySelectorAll('.ant-upload-list-text-container')).toHaveLength(0);
unmount();
});
it('Not crash when fileList is null', () => {
const defaultWrapper = render(
<Upload defaultFileList={null as unknown as UploadProps['defaultFileList']} />,
);
defaultWrapper.unmount();
const wrapper = render(<Upload fileList={null as unknown as UploadProps['defaultFileList']} />);
wrapper.unmount();
});
it('should not exist crossorigin attribute when does not set file.crossorigin in case of listType="picture"', () => {
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list as UploadProps['fileList']} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((_, i) => {
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
expect(imgNode.getAttribute('crossOrigin')).toBe(null);
});
unmount();
});
it('should exist crossorigin attribute when set file.crossorigin in case of listType="picture"', () => {
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: '',
},
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'anonymous',
},
{
uid: '2',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'use-credentials',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list as UploadProps['fileList']} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((file, i) => {
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
expect(imgNode.getAttribute('crossOrigin')).not.toBe(undefined);
expect(imgNode.getAttribute('crossOrigin')).toBe(file.crossOrigin);
});
unmount();
});
it('should not exist crossorigin attribute when does not set file.crossorigin in case of listType="picture-card"', () => {
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list as UploadProps['fileList']} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((_, i) => {
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
expect(imgNode.getAttribute('crossOrigin')).toBe(null);
});
unmount();
});
it('should exist crossorigin attribute when set file.crossorigin in case of listType="picture-card"', () => {
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: '',
},
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'anonymous',
},
{
uid: '2',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'use-credentials',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list as UploadProps['fileList']} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((file, i) => {
const imgNode = wrapper.querySelectorAll('.ant-upload-list-item-thumbnail img')[i];
expect(imgNode.getAttribute('crossOrigin')).not.toBe(undefined);
expect(imgNode.getAttribute('crossOrigin')).toBe(file.crossOrigin);
});
unmount();
});
describe('should not display upload file-select button when listType is picture-card and children is empty', () => {
it('when showUploadList is true', () => {
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
];
const { container: wrapper, unmount } = render(
<Upload fileList={list as UploadProps['defaultFileList']} listType="picture-card" />,
);
expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
expect(wrapper.querySelectorAll<HTMLDivElement>('.ant-upload-select')[0]?.style.display).toBe(
'none',
);
unmount();
});
// https://github.com/ant-design/ant-design/issues/36183
it('when showUploadList is false', () => {
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
},
];
const { container: wrapper, unmount } = render(
<Upload
fileList={list as UploadProps['fileList']}
showUploadList={false}
listType="picture-card"
/>,
);
expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
expect(wrapper.querySelectorAll<HTMLDivElement>('.ant-upload-select')[0]?.style.display).toBe(
'none',
);
unmount();
});
});
// https://github.com/ant-design/ant-design/issues/36286
it('remove should keep origin className', async () => {
const onChange = jest.fn();
const list = [
{
uid: '0',
name: 'xxx.png',
status: 'error',
},
];
const { container } = render(
<Upload
fileList={list as UploadProps['fileList']}
listType="picture-card"
onChange={onChange}
/>,
);
fireEvent.click(container.querySelector('.anticon-delete')!);
2022-10-31 10:16:51 +08:00
await waitFakeTimer();
expect(onChange).toHaveBeenCalledWith(
expect.objectContaining({
file: expect.objectContaining({ status: 'removed' }),
}),
);
expect(container.querySelector('.ant-upload-list-item-error')).toBeTruthy();
});
});