ant-design/components/modal/__tests__/confirm.test.js

200 lines
5.7 KiB
JavaScript
Raw Normal View History

import Modal from '..';
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
import { destroyFns } from '../Modal';
2017-10-09 13:23:20 +08:00
const { confirm } = Modal;
describe('Modal.confirm triggers callbacks correctly', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => {
errorSpy.mockReset();
document.body.innerHTML = '';
});
afterAll(() => {
errorSpy.mockRestore();
});
function $$(className) {
return document.body.querySelectorAll(className);
}
function open(args) {
confirm({
title: 'Want to delete these items?',
content: 'some descriptions',
...args,
});
}
it('trigger onCancel once when click on cancel button', () => {
const onCancel = jest.fn();
const onOk = jest.fn();
open({
onCancel,
onOk,
});
// first Modal
$$('.ant-btn')[0].click();
expect(onCancel.mock.calls.length).toBe(1);
expect(onOk.mock.calls.length).toBe(0);
});
it('trigger onOk once when click on ok button', () => {
const onCancel = jest.fn();
const onOk = jest.fn();
open({
onCancel,
onOk,
});
// second Modal
$$('.ant-btn-primary')[0].click();
expect(onCancel.mock.calls.length).toBe(0);
expect(onOk.mock.calls.length).toBe(1);
});
it('should allow Modal.comfirm without onCancel been set', () => {
open();
// Third Modal
$$('.ant-btn')[0].click();
expect(errorSpy).not.toHaveBeenCalled();
});
it('should allow Modal.comfirm without onOk been set', () => {
open();
// Fourth Modal
$$('.ant-btn-primary')[0].click();
expect(errorSpy).not.toHaveBeenCalled();
});
if (process.env.REACT !== '15') {
it('shows animation when close', () => {
jest.useFakeTimers();
open();
$$('.ant-btn')[0].click();
expect($$('.ant-modal-confirm')).toHaveLength(1);
jest.runAllTimers();
expect($$('.ant-modal-confirm')).toHaveLength(0);
jest.useRealTimers();
});
}
it('ok only', () => {
open({ okCancel: false });
expect($$('.ant-btn')).toHaveLength(1);
expect($$('.ant-btn')[0].innerHTML).toContain('OK');
});
2018-05-25 20:59:17 +08:00
it('allows extra props on buttons', () => {
open({ okButtonProps: { disabled: true }, cancelButtonProps: { 'data-test': 'baz' } });
expect($$('.ant-btn')).toHaveLength(2);
expect($$('.ant-btn')[0].attributes['data-test'].value).toBe('baz');
expect($$('.ant-btn')[1].disabled).toBe(true);
});
2018-05-25 20:59:17 +08:00
it('trigger onCancel once when click on cancel button', () => {
jest.useFakeTimers();
2018-12-07 20:02:01 +08:00
['info', 'success', 'warning', 'error'].forEach(type => {
2018-05-25 20:59:17 +08:00
Modal[type]({
title: 'title',
content: 'content',
});
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
2018-05-25 20:59:17 +08:00
$$('.ant-btn')[0].click();
jest.runAllTimers();
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
2018-05-25 20:59:17 +08:00
});
jest.useRealTimers();
});
2018-08-25 21:58:40 +08:00
it('could be update', () => {
jest.useFakeTimers();
2018-12-07 20:02:01 +08:00
['info', 'success', 'warning', 'error'].forEach(type => {
2018-08-25 21:58:40 +08:00
const instance = Modal[type]({
title: 'title',
content: 'content',
});
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
2018-08-25 21:58:40 +08:00
instance.update({
title: 'new title',
content: 'new content',
});
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
2018-08-25 21:58:40 +08:00
instance.destroy();
jest.runAllTimers();
});
jest.useRealTimers();
});
it('could be destroy', () => {
jest.useFakeTimers();
2018-12-07 20:02:01 +08:00
['info', 'success', 'warning', 'error'].forEach(type => {
2018-08-25 21:58:40 +08:00
const instance = Modal[type]({
title: 'title',
content: 'content',
});
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
2018-08-25 21:58:40 +08:00
instance.destroy();
jest.runAllTimers();
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
2018-08-25 21:58:40 +08:00
});
jest.useRealTimers();
});
it('could be Modal.destroyAll', () => {
jest.useFakeTimers();
2019-01-07 09:40:55 +08:00
['info', 'success', 'warning', 'error'].forEach(type => {
Modal[type]({
title: 'title',
content: 'content',
});
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
});
Modal.destroyAll();
2019-01-07 09:40:55 +08:00
['info', 'success', 'warning', 'error'].forEach(type => {
jest.runAllTimers();
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
});
jest.useRealTimers();
});
it('prefixCls', () => {
open({ prefixCls: 'custom-modal' });
expect($$('.custom-modal-mask')).toHaveLength(1);
expect($$('.custom-modal-wrap')).toHaveLength(1);
expect($$('.custom-modal-confirm')).toHaveLength(1);
expect($$('.custom-modal-confirm-body-wrapper')).toHaveLength(1);
});
it('should be Modal.confirm without mask', () => {
open({ mask: false });
expect($$('.ant-modal-mask')).toHaveLength(0);
});
it('destroyFns should reduce when instance.destroy', () => {
jest.useFakeTimers();
Modal.destroyAll(); // clear destroyFns
jest.runAllTimers();
const instances = [];
['info', 'success', 'warning', 'error'].forEach(type => {
const instance = Modal[type]({
title: 'title',
content: 'content',
});
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
instances.push(instance);
});
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
const { length } = instances;
instances.forEach((instance, index) => {
expect(destroyFns.length).toBe(length - index);
instance.destroy();
jest.runAllTimers();
expect(destroyFns.length).toBe(length - index - 1);
New Component: Typography (#14250) * text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
2019-02-19 11:42:05 +08:00
});
jest.useRealTimers();
});
});