Skip to content

Commit

Permalink
feat: DatePicker增加visible和defaultVisible后完善单元测试 (#1163)
Browse files Browse the repository at this point in the history
  • Loading branch information
@IceApriler
IceApriler committed Apr 22, 2024
1 parent 008d9a7 commit 40711ce
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 21 deletions.
67 changes: 46 additions & 21 deletions tests/alipay/DatePicker/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import fmtEvent from 'compiled-alipay/_util/fmtEvent';
import dayjs from 'dayjs';
import { describe, expect, it } from 'vitest';
import { createDatePicker } from './utils';
import { sleep } from 'tests/utils';

const date = [
dayjs().get('year'),
Expand All @@ -23,16 +24,16 @@ describe('DatePicker', () => {
});

it('测试 onVisibleChange 事件', async () => {
const { onVisibleChange, callMethod } = createDatePicker();
await callMethod('onVisibleChange', true);
const { onVisibleChange, callVisibleChange } = createDatePicker();
await callVisibleChange(true);
expect(onVisibleChange.mock.lastCall).toEqual([true, fmtEvent({})]);
await callMethod('onVisibleChange', false);
await callVisibleChange(false);
expect(onVisibleChange.mock.lastCall).toEqual([false, fmtEvent({})]);
});

it('测试 onOk 事件', async () => {
const { onOk, callMethod } = createDatePicker();
await callMethod('onVisibleChange', true);
const { onOk, callMethod, callVisibleChange } = createDatePicker();
await callVisibleChange(true);
await callMethod('onChange', [2023, 1, 2]);
await callMethod('onOk');
expect(onOk.mock.lastCall).toEqual([
Expand All @@ -43,17 +44,17 @@ describe('DatePicker', () => {
});

it('当前时间不在 min max 范围', async () => {
const { instance, callMethod } = createDatePicker({
const { instance, callVisibleChange } = createDatePicker({
min: new Date('2020-01-01'),
max: new Date('2021-01-01'),
});
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
expect(instance.getData().currentValue).toEqual([2020, 1, 1]);
});

it('测试 columns', async () => {
const { instance, callMethod } = createDatePicker();
await callMethod('onVisibleChange', true);
const { instance, callVisibleChange } = createDatePicker();
await callVisibleChange(true);
expect(instance.getData().currentValue).toEqual(date);
expect(instance.getData().columns.length).toEqual(3);
expect(instance.getData().columns[0]).toEqual(
Expand Down Expand Up @@ -84,22 +85,22 @@ describe('DatePicker', () => {
});

it('非受控模式修改', async () => {
const { instance, changeSelect, callOk, callMethod } = createDatePicker({
const { instance, changeSelect, callOk, callVisibleChange } = createDatePicker({
defaultValue: dayjs('2023-01-01').toDate(),
});
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
expect(instance.getData().formattedValueText).toEqual('2023/01/01');
await changeSelect([2023, 2, 1]);
await callOk();
expect(instance.getData().formattedValueText).toEqual('2023/02/01');
});

it('测试当 defaultValue 为字符串格式化的问题', async () => {
const { instance, callMethod } = createDatePicker({
const { instance, callVisibleChange } = createDatePicker({
defaultValue: '2023-01-01',
});
expect(instance.getData().formattedValueText).toEqual('2023/01/01');
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
expect(instance.getData().columns.length).toEqual(3);
});

Expand All @@ -118,13 +119,13 @@ describe('DatePicker', () => {
});

it('测试 min max', async () => {
const { instance, changeSelect, callOk, callMethod } = createDatePicker({
const { instance, changeSelect, callOk, callVisibleChange } = createDatePicker({
min: dayjs('2023-01-20').toDate(),
max: dayjs('2023-05-15').toDate(),
defaultValue: dayjs('2023-02-01').toDate(),
});
expect(instance.getData().formattedValueText).toEqual('2023/02/01');
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
expect(
instance.getData().columns.map((o) => {
return o.map((p) => `${p.label}`).join(',');
Expand Down Expand Up @@ -167,12 +168,12 @@ describe('DatePicker', () => {

describe('受控模式', () => {
it('测试', async () => {
const { callMethod, instance, changeSelect, callOk, onOk } =
const { callVisibleChange, instance, changeSelect, callOk, onOk } =
createDatePicker({
value: '2023-01-01',
defaultValue: dayjs('2023-01-02').toDate(),
});
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
expect(instance.getData().formattedValueText).toEqual('2023/01/01');
await changeSelect([2023, 2, 1]);
expect(instance.getData().currentValue).toEqual([2023, 2, 1]);
Expand All @@ -187,15 +188,39 @@ describe('受控模式', () => {
});
});

describe('visible 受控模式', () => {
it('visible 优先级大于 defaultVisible', async () => {
const { instance, onVisibleChange, callVisibleChange } = createDatePicker({
visible: false,
defaultVisible: true,
});
expect(instance.getData().state.visible).toEqual(false);
await callVisibleChange(true);
expect(instance.getData().state.visible).toEqual(false);
expect(onVisibleChange).toBeCalledWith(true, fmtEvent({}));
});
it('visible 受控', async () => {
const { instance } = createDatePicker({
visible: false,
});
expect(instance.getData().state.visible).toEqual(false);
instance.setProps({
visible: true,
});
await sleep(100);
expect(instance.getData().state.visible).toEqual(true);
});
});

describe('各个精度', () => {
async function getColumnText(precision: string) {
const { instance, callMethod } = createDatePicker({
const { instance, callVisibleChange } = createDatePicker({
defaultValue: dayjs('2023-01-01').toDate(),
min: dayjs('2023-01-20').toDate(),
max: dayjs('2024-12-10').toDate(),
precision: precision as any,
});
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
return instance
.getData()
.columns.map((o) => {
Expand All @@ -205,14 +230,14 @@ describe('各个精度', () => {
}

it('测试 onFormatLabel', async () => {
const { instance, callMethod } = createDatePicker({
const { instance, callVisibleChange } = createDatePicker({
defaultValue: dayjs('2023-01-01').toDate(),
min: '2023-01-20',
max: dayjs('2024-12-10').toDate(),
onFormatLabel: (v, v2) => `${v} ${v2}`,
precision: 'year',
});
await callMethod('onVisibleChange', true);
await callVisibleChange(true);
expect(
instance
.getData()
Expand Down
6 changes: 6 additions & 0 deletions tests/alipay/DatePicker/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ export const createDatePicker = (props?: Partial<IDatePickerProps>) => {
...(props || {}),
});

async function callVisibleChange(visible) {
instance.callMethod('onVisibleChange', visible);
await sleep(100);
}

async function changeSelect(value) {
instance.callMethod('onChange', value);
await sleep(20);
Expand All @@ -27,6 +32,7 @@ export const createDatePicker = (props?: Partial<IDatePickerProps>) => {
}

return {
callVisibleChange,
changeSelect,
callOk,
onOk,
Expand Down

0 comments on commit 40711ce

Please sign in to comment.