github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: update date-picker & config-provider

pull/2682/head
tanjinzhou 2020-07-29 15:34:19 +08:00
parent 8ae91150aa
commit cde476a1f7
11 changed files with 855 additions and 890 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit 9445b4c0199f6bb0db5ef2bcd78756f8745c8709
Subproject commit 2cbc6d48fd3de73954f1cb9689d9ac5b2dd8355c

2
components/button/button.jsx
View File

@ -178,6 +178,6 @@ export default {
return buttonNode;
}
return <Wave>{buttonNode}</Wave>;
return <Wave ref="wave">{buttonNode}</Wave>;
},
};

29
components/config-provider/__tests__/index.test.js
View File

@ -2,14 +2,17 @@ import { mount } from '@vue/test-utils';
import ConfigProvider from '..';
import Button from '../../button';
import mountTest from '../../../tests/shared/mountTest';
import { sleep } from '../../../tests/utils';
describe('ConfigProvider', () => {
mountTest({
render() {
return (
<ConfigProvider>
<div />
</ConfigProvider>
<div>
<ConfigProvider>
<div />
</ConfigProvider>
</div>
);
},
});
@ -20,25 +23,33 @@ describe('ConfigProvider', () => {
render() {
return (
<ConfigProvider csp={csp}>
<Button />
<Button ref="button" />
</ConfigProvider>
);
},
});
expect(wrapper.findComponent('Wave').vm.csp).toBe(csp);
expect(wrapper.findComponent({ ref: 'button' }).vm.$refs.wave.csp.nonce).toBe(csp.nonce);
});
it('autoInsertSpaceInButton', () => {
it('autoInsertSpaceInButton', async () => {
const wrapper = mount({
data() {
return {
autoInsertSpaceInButton: false,
};
},
render() {
return (
<ConfigProvider autoInsertSpaceInButton={false}>
<Button>确定</Button>
<ConfigProvider autoInsertSpaceInButton={this.autoInsertSpaceInButton}>
<Button ref="button">确定</Button>
</ConfigProvider>
);
},
});
expect(wrapper.findComponent('AButton').text()).toBe('确定');
expect(wrapper.find('.ant-btn').text()).toBe('确定');
wrapper.vm.autoInsertSpaceInButton = true;
await sleep();
expect(wrapper.find('.ant-btn').text()).toBe('确 定');
});
});

4
components/config-provider/index.jsx
View File

@ -1,6 +1,6 @@
import { reactive, provide } from 'vue';
import PropTypes from '../_util/vue-types';
import { getComponent } from '../_util/props-util';
import { getComponent, getSlot } from '../_util/props-util';
import defaultRenderEmpty from './renderEmpty';
import LocaleProvider, { ANT_MARK } from '../locale-provider';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
@ -58,7 +58,7 @@ const ConfigProvider = {
renderProvider(legacyLocale) {
return (
<LocaleProvider locale={this.locale || legacyLocale} _ANT_MARK__={ANT_MARK}>
{this.$slots.default ? this.$slots.default() : null}
{getSlot(this)}
</LocaleProvider>
);
},

140
components/date-picker/__tests__/RangePicker.test.js
View File

@ -30,20 +30,13 @@ describe('RangePicker', () => {
open: true,
},
sync: false,
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.setProps({ value: [birthday, birthday] });
});
const rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(rangeCalendarWrapper.html()).toMatchSnapshot();
expect(document.body.innerHTML).toMatchSnapshot();
});
});
@ -65,27 +58,18 @@ describe('RangePicker', () => {
);
},
},
{ sync: false },
);
const rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
rangeCalendarWrapper.find('.ant-calendar-range-quick-selector .ant-tag').trigger('click');
$$('.ant-calendar-range-quick-selector .ant-tag')[0].click();
});
await asyncExpect(() => {
expect(rangeCalendarWrapper.html()).toMatchSnapshot();
expect(wrapper.html()).toMatchSnapshot();
});
});
it('highlight range when hover presetted range', async () => {
const wrapper = mount(
mount(
{
render() {
return (
@ -100,38 +84,22 @@ describe('RangePicker', () => {
);
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
let rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
rangeCalendarWrapper
.find('.ant-calendar-range-quick-selector .ant-tag')
.trigger('mouseenter');
$$('.ant-calendar-range-quick-selector .ant-tag')[0].dispatchEvent(
new MouseEvent('mouseenter'),
);
});
rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(rangeCalendarWrapper.findAll('.ant-calendar-selected-day').length).toBe(2);
expect($$('.ant-calendar-selected-day').length).toBe(2);
});
});
it('should trigger onCalendarChange when change value', async () => {
const onCalendarChangeFn = jest.fn();
const wrapper = mount(
mount(
{
render() {
return (
@ -143,21 +111,10 @@ describe('RangePicker', () => {
);
},
},
{ sync: false },
);
const rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
rangeCalendarWrapper
.findAll('.ant-calendar-cell')
.at(15)
.trigger('click');
$$('.ant-calendar-cell')[15].click();
});
expect(onCalendarChangeFn).toHaveBeenCalled();
});
@ -172,72 +129,49 @@ describe('RangePicker', () => {
open: true,
},
sync: false,
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.setProps({ value: [] });
});
const rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(() => {
const cell = rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15);
cell.trigger('click');
cell.trigger('click');
const cell = $$('.ant-calendar-cell')[15];
cell.click();
cell.click();
}).not.toThrow();
});
});
// issue: https://github.com/ant-design/ant-design/issues/7077
it('should not throw error when select after clear', async () => {
const wrapper = mount(RangePicker, {
mount(RangePicker, {
props: {
getCalendarContainer: trigger => trigger,
open: true,
},
sync: false,
attachTo: 'body',
});
let rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
const cell = rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15);
cell.trigger('click');
cell.trigger('click');
const cell = $$('.ant-calendar-cell')[15];
cell.click();
cell.click();
});
$$('.ant-calendar-picker-clear')[0].click();
$$('.ant-calendar-picker-input')[0].click();
wrapper.find('.ant-calendar-picker-clear').trigger('click');
wrapper.find('.ant-calendar-picker-input').trigger('click');
rangeCalendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(() => {
const cell = rangeCalendarWrapper.findAll('.ant-calendar-cell').at(15);
cell.trigger('click');
cell.trigger('click');
const cell = $$('.ant-calendar-cell')[15];
cell.click();
cell.click();
}).not.toThrow();
});
});
it('clear hover value after panel close', async () => {
const wrapper = mount(
mount(
{
render() {
return (
@ -250,7 +184,7 @@ describe('RangePicker', () => {
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
wrapper.find('.ant-calendar-picker-input').trigger('click');
$$('.ant-calendar-picker-input')[0].click();
});
await asyncExpect(() => {
$$('.ant-calendar-cell')[25].click();
@ -258,7 +192,7 @@ describe('RangePicker', () => {
document.dispatchEvent(new MouseEvent('mousedown'));
}, 500);
await asyncExpect(() => {
wrapper.find('.ant-calendar-picker-input').trigger('click');
$$('.ant-calendar-picker-input')[0].click();
});
await asyncExpect(() => {
expect(
@ -285,19 +219,19 @@ describe('RangePicker', () => {
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.find('.ant-calendar-picker-input').trigger('click');
$$('.ant-calendar-picker-input')[0].click();
});
await asyncExpect(() => {
$$('.ant-calendar-range-quick-selector .ant-tag')[0].click();
}, 500);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-calendar-range-picker-input').at(0).element.value).toBe(
expect(wrapper.findAll('.ant-calendar-range-picker-input')[0].element.value).toBe(
range[0].format(format),
);
});
await asyncExpect(() => {
const inputs = wrapper.findAll('.ant-calendar-range-picker-input');
expect(inputs.at(inputs.length - 1).element.value).toBe(range[1].format(format));
expect(inputs[inputs.length - 1].element.value).toBe(range[1].format(format));
});
await asyncExpect(() => {});
});
@ -314,19 +248,19 @@ describe('RangePicker', () => {
attachTo: 'body',
});
await asyncExpect(() => {
wrapper.find('.ant-calendar-picker-input').trigger('click');
$$('.ant-calendar-picker-input')[0].click();
});
await asyncExpect(() => {
$$('.ant-calendar-range-quick-selector .ant-tag')[0].click();
}, 500);
await asyncExpect(() => {
expect(wrapper.findAll('.ant-calendar-range-picker-input').at(0).element.value).toBe(
expect(wrapper.findAll('.ant-calendar-range-picker-input')[0].element.value).toBe(
range[0].format(format),
);
});
await asyncExpect(() => {
const inputs = wrapper.findAll('.ant-calendar-range-picker-input');
expect(inputs.at(inputs.length - 1).element.value).toBe(range[1].format(format));
expect(inputs[inputs.length - 1].element.value).toBe(range[1].format(format));
});
});
});

1405
components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap
View File

File diff suppressed because it is too large Load Diff

2
components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span>`;
exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><!----><span style="display: inline-block; width: 100%;"><input readonly="" placeholder="Select date" class="ant-calendar-picker-input ant-input"><!----><span class="ant-calendar-picker-icon"><!----></span></span></span>`;

2
components/date-picker/__tests__/__snapshots__/other.test.js.snap
View File

@ -56,7 +56,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
<div>
<!---->
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft" style="left: -999px; top: -1002px;">
<div class="ant-calendar ant-calendar-picker-container-content ant-calendar-week-number" tabindex="0">
<!---->
<div class="ant-calendar-panel">

3
components/date-picker/__tests__/other.test.js
View File

@ -4,6 +4,7 @@ import moment from 'moment';
import DatePicker from '../';
import LocaleProvider from '../../locale-provider';
import locale from '../../locale-provider/zh_CN';
import { sleep } from '../../../tests/utils';
const { MonthPicker, WeekPicker } = DatePicker;
@ -68,7 +69,7 @@ describe('MonthPicker and WeekPicker', () => {
await asyncExpect(() => {
wrapper.setProps({ value: birthday, open: true });
});
await sleep(50);
await asyncExpect(() => {
expect(document.body.innerHTML).toMatchSnapshot();
});

154
components/date-picker/__tests__/showTime.test.js
View File

@ -2,35 +2,29 @@ import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils';
import moment from 'moment';
import DatePicker from '../';
import { $$ } from './utils';
import { sleep } from '../../../tests/utils';
const { RangePicker } = DatePicker;
describe('DatePicker with showTime', () => {
beforeEach(() => {
document.body.outerHTML = '';
});
it('should trigger onChange when select value', async () => {
const onChangeFn = jest.fn();
const onOpenChangeFn = jest.fn();
const wrapper = mount(
mount(
{
render() {
return <DatePicker showTime open onChange={onChangeFn} onOpenChange={onOpenChangeFn} />;
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
const calendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
calendarWrapper
.findAll('.ant-calendar-date')
.at(0)
.trigger('click');
$$('.ant-calendar-date')[0].click();
});
await asyncExpect(() => {
expect(onChangeFn).toHaveBeenCalled();
@ -42,7 +36,7 @@ describe('DatePicker with showTime', () => {
const onOkFn = jest.fn();
const onOpenChangeFn = jest.fn();
const onChangeFn = jest.fn();
const wrapper = mount(
mount(
{
render() {
return (
@ -57,19 +51,11 @@ describe('DatePicker with showTime', () => {
);
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
const calendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
calendarWrapper.find('.ant-calendar-ok-btn').trigger('click');
$$('.ant-calendar-ok-btn')[0].click();
});
await asyncExpect(() => {
expect(onOkFn).toHaveBeenCalled();
@ -81,25 +67,17 @@ describe('DatePicker with showTime', () => {
it('should trigger onChange when click Now link', async () => {
const onOpenChangeFn = jest.fn();
const onChangeFn = jest.fn();
const wrapper = mount(
mount(
{
render() {
return <DatePicker showTime open onChange={onChangeFn} onOpenChange={onOpenChangeFn} />;
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
const calendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
calendarWrapper.find('.ant-calendar-today-btn').trigger('click');
$$('.ant-calendar-today-btn')[0].click();
});
await asyncExpect(() => {
expect(onOpenChangeFn).toHaveBeenCalledWith(false);
@ -108,40 +86,35 @@ describe('DatePicker with showTime', () => {
});
it('should have correct className when use12Hours is true', async () => {
const wrapper = mount(
mount(
{
render() {
return <DatePicker showTime={{ use12Hours: true }} open />;
},
},
{ sync: false },
);
const calendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
expect(calendarWrapper.findAll('.ant-calendar-time-picker-column-4').length).toBe(0);
expect($$('.ant-calendar-time-picker-column-4').length).toBe(0);
});
calendarWrapper
.findAll('.ant-calendar-time-picker-btn')
.at(0)
.trigger('click');
$$('.ant-calendar-today')[0].click();
await sleep();
$$('.ant-calendar-time-picker-btn')[0].click();
await asyncExpect(() => {
expect(calendarWrapper.findAll('.ant-calendar-time-picker-column-4').length).toBe(1);
expect($$('.ant-calendar-time-picker-column-4').length).toBe(1);
});
});
});
describe('RangePicker with showTime', () => {
beforeEach(() => {
document.body.outerHTML = '';
});
it('should trigger onChange when select value', async () => {
const onChangeFn = jest.fn();
const onOpenChangeFn = jest.fn();
const wrapper = mount(
mount(
{
render() {
return <RangePicker showTime open onChange={onChangeFn} onOpenChange={onOpenChangeFn} />;
@ -150,37 +123,31 @@ describe('RangePicker with showTime', () => {
{ sync: false },
);
const calendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
await asyncExpect(() => {
expect(calendarWrapper.find('.ant-calendar-time-picker-btn').classes()).toContain(
'ant-calendar-time-picker-btn-disabled',
);
expect(calendarWrapper.find('.ant-calendar-ok-btn').classes()).toContain(
'ant-calendar-ok-btn-disabled',
);
expect(
$$('.ant-calendar-time-picker-btn')[0]
.getAttribute('class')
.split(' '),
).toContain('ant-calendar-time-picker-btn-disabled');
expect(
$$('.ant-calendar-ok-btn')[0]
.getAttribute('class')
.split(' '),
).toContain('ant-calendar-ok-btn-disabled');
});
calendarWrapper
.findAll('.ant-calendar-date')
.at(10)
.trigger('click');
calendarWrapper
.findAll('.ant-calendar-date')
.at(11)
.trigger('click');
$$('.ant-calendar-date')[10].click();
$$('.ant-calendar-date')[11].click();
await asyncExpect(() => {
expect(calendarWrapper.find('.ant-calendar-time-picker-btn').classes()).not.toContain(
'ant-calendar-time-picker-btn-disabled',
);
expect(calendarWrapper.find('.ant-calendar-ok-btn').classes()).not.toContain(
'ant-calendar-ok-btn-disabled',
);
expect(
$$('.ant-calendar-time-picker-btn')[0]
.getAttribute('class')
.split(' '),
).not.toContain('ant-calendar-time-picker-btn-disabled');
expect(
$$('.ant-calendar-ok-btn')[0]
.getAttribute('class')
.split(' '),
).not.toContain('ant-calendar-ok-btn-disabled');
});
expect(onChangeFn).toHaveBeenCalled();
expect(onOpenChangeFn).not.toHaveBeenCalled();
@ -190,7 +157,7 @@ describe('RangePicker with showTime', () => {
const onOkFn = jest.fn();
const onChangeFn = jest.fn();
const onOpenChangeFn = jest.fn();
const wrapper = mount(
mount(
{
render() {
return (
@ -204,29 +171,14 @@ describe('RangePicker with showTime', () => {
);
},
},
{ sync: false },
);
const calendarWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
calendarWrapper
.findAll('.ant-calendar-date')
.at(10)
.trigger('click');
calendarWrapper
.findAll('.ant-calendar-date')
.at(11)
.trigger('click');
$$('.ant-calendar-date')[10].click();
$$('.ant-calendar-date')[11].click();
});
onChangeFn.mockClear();
calendarWrapper.find('.ant-calendar-ok-btn').trigger('click');
$$('.ant-calendar-ok-btn')[0].click();
expect(onOkFn).toHaveBeenCalled();
expect(onOpenChangeFn).toHaveBeenCalledWith(false);
expect(onChangeFn).not.toHaveBeenCalled();

2
tests/shared/mountTest.js
View File

@ -3,7 +3,7 @@ export default function mountTest(Component) {
describe(`mount and unmount`, () => {
// https://github.com/ant-design/ant-design/pull/18441
it(`component could be updated and unmounted without errors`, () => {
const wrapper = mount(Component, { sync: false });
const wrapper = mount(Component, { sync: false, attachTo: 'body' });
expect(() => {
wrapper.vm.$forceUpdate();
wrapper.unmount();