From 8c49b6890d9e1969769fed5f74b84be26d20a7fb Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 2 Nov 2022 20:09:00 +0800 Subject: [PATCH] test(Calendar): add unit test for calendar --- .../__snapshots__/index.test.jsx.snap | 582 ++++++++++++++++++ src/calendar/__test__/index.test.jsx | 151 +++++ src/calendar/calendar.vue | 9 +- 3 files changed, 740 insertions(+), 2 deletions(-) create mode 100644 src/calendar/__test__/__snapshots__/index.test.jsx.snap create mode 100644 src/calendar/__test__/index.test.jsx diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap new file mode 100644 index 000000000..616dc2425 --- /dev/null +++ b/src/calendar/__test__/__snapshots__/index.test.jsx.snap @@ -0,0 +1,582 @@ +// Vitest Snapshot v1 + +exports[`calendar > props > : format 1`] = ` +
+ +
+ + +
+ + +
+ + + +
+ +
+
+ + 请选择日期 + +
+ + + +
+ +
+ 日 +
+
+ 一 +
+
+ 二 +
+
+ 三 +
+
+ 四 +
+
+ 五 +
+
+ 六 +
+ +
+
+ + +
+ 2022 年 1 月 +
+
+ +
+ + + 1 +
+ ¥60 +
+ +
+
+ + + 2 +
+ ¥60 +
+ +
+
+ + + 3 +
+ ¥60 +
+ +
+
+ + + 4 +
+ ¥60 +
+ +
+
+ + + 5 +
+ ¥60 +
+ +
+
+ + + 6 +
+ ¥60 +
+ +
+
+ + + 7 +
+ ¥60 +
+ +
+
+ + + 8 +
+ ¥60 +
+ +
+
+ + + 9 +
+ ¥60 +
+ +
+
+ + + 10 +
+ ¥60 +
+ +
+
+ + + 11 +
+ ¥60 +
+ +
+
+ + + 12 +
+ ¥60 +
+ +
+
+ + + 13 +
+ ¥60 +
+ +
+
+ + + 14 +
+ ¥60 +
+ +
+
+ + + 15 +
+ ¥60 +
+ +
+
+ + + 16 +
+ ¥60 +
+ +
+
+ + + 17 +
+ ¥60 +
+ +
+
+ + + 18 +
+ ¥60 +
+ +
+
+ + + 19 +
+ ¥60 +
+ +
+
+ + + 20 +
+ ¥60 +
+ +
+
+ + + 21 +
+ ¥60 +
+ +
+
+ + + 22 +
+ ¥60 +
+ +
+
+ + + 23 +
+ ¥60 +
+ +
+
+ + + 24 +
+ ¥60 +
+ +
+
+ + + 25 +
+ ¥60 +
+ +
+
+ + + 26 +
+ ¥60 +
+ +
+
+ + + 27 +
+ ¥60 +
+ +
+
+ + + 28 +
+ ¥60 +
+ +
+
+ + + 29 +
+ ¥60 +
+ +
+
+ + + 30 +
+ ¥60 +
+ +
+
+ + + 31 +
+ ¥60 +
+ +
+ +
+ + +
+
+ + + +
+
+ +
+ +
+ +
+`; diff --git a/src/calendar/__test__/index.test.jsx b/src/calendar/__test__/index.test.jsx new file mode 100644 index 000000000..0da27e99e --- /dev/null +++ b/src/calendar/__test__/index.test.jsx @@ -0,0 +1,151 @@ +import { ref } from 'vue'; +import { mount } from '@vue/test-utils'; +import { describe, it, expect, vi } from 'vitest'; +import Button from '../../button/index'; +import Calendar from '../calendar.vue'; + +const prefix = 't' +const name = `${prefix}-calendar`; + +const raw = '日一二三四五六'; +const year = 2022; +const month = 0; +const data = 15; +const minDate = new Date(year, month, 1); +const maxDate = new Date(year, month, 31); +const value = new Date(year, month, data); +const confirmBtn = 'confirmBtn' + +describe('calendar', () => { + describe('props', () => { + it(': visible', async () => { + const wrapper = mount(Calendar, { + props: { + visible: false + } + }) + await wrapper.setProps({ + visible: true + }) + }); + + it(': title', async () => { + const title = ''; + const wrapper = mount() + const $title = wrapper.find(`.${name}__title`) + expect($title.text()).toEqual(title || '请选择日期') + }); + + it(': confirmBtn', async () => { + const wrapper = mount() + const $confirmBtn = wrapper.find(`.${name}__footer`) + expect($confirmBtn.text()).toEqual(confirmBtn) + }); + + it(': firstDayOfWeek', async () => { + const firstDayOfWeek = 1; + const wrapper = mount() + const $firstDay = wrapper.find(`.${name}__days-item`) + expect($firstDay.text()).toEqual(raw.split('')[firstDayOfWeek]); + }); + + it(': type', async () => { + // type = 'range' + const onSelect = vi.fn(); + const time = ref(''); + const onConfirm = vi.fn((e) => { + time.value = new Date(e).toLocaleDateString() + }); + const wrapper = mount() + const $dates = wrapper.findAll(`.t-calendar__dates-item`); + expect($dates).toHaveLength(31); + + // 默认日期是2022/1/15， 模拟点选第2项，和第8项 + const selectFirstIndex = 2; + const selectLastIndex = 8; + await $dates[selectFirstIndex].trigger('click'); + await $dates[selectLastIndex].trigger('click'); + expect(onSelect).toHaveBeenCalledTimes(2); + + // confirm + const $button = wrapper.findComponent(Button); + await $button.trigger('click') + + // TODO：区间选择器时，返回的应该是数组，但测试环境下只有单条 Date 对象数据 + expect(time.value).toEqual(`${year}/${month + 1}/${selectLastIndex + 1}`); + + // TODO: && type = 'multiple' + + // 覆盖 type = '' 情况 + const wrapper1 = mount() + + }); + + it(': format', async () => { + const suffix = '¥60'; // 每一个日期后均自定义 suffix = '¥60' + const format = (day) => { + day.suffix = suffix; + return day; + }; + const wrapper = mount() + expect(wrapper.element).toMatchSnapshot(); + const $dates = wrapper.findAll(`.${name}__dates-item-suffix`); + $dates.forEach((item) => { + expect(item.text()).toEqual(suffix) + }) + }); + + }); + + describe('slots', () => { + it(': confirmBtn', async () => { + const wrapper = mount(, { + slots: { + confirmBtn, + } + }) + const $confirmBtn = wrapper.find(`.${name}__footer`) + expect($confirmBtn.text()).toEqual(confirmBtn); + }); + }); + + describe('events', () => { + it(': onConfirm', async () => { + const time = ref(''); + const onConfirm = vi.fn((e) => { + time.value = new Date(e).toLocaleDateString() + }); + const wrapper = mount() + const $button = wrapper.findComponent(Button); + await $button.trigger('click') + expect(onConfirm).toHaveBeenCalledTimes(1); + expect(time.value).toEqual(`${year}/${month + 1}/${data}`); + }); + + it(': onSelect', async () => { + const time = ref(''); + const onConfirm = vi.fn((e) => { + time.value = new Date(e).toLocaleDateString() + }); + + const selectTime = ref(''); + const onSelect = vi.fn((e) => { + selectTime.value = new Date(e).toLocaleDateString() + }); + const wrapper = mount() + const $dates = wrapper.findAll(`.${name}__dates-item`); + expect($dates).toHaveLength(31); + + // 默认日期是2022/1/15， 模拟点选第2项，触发 onSelect 事件，此时选中日期为2022/1/3 + const selectIndex = 2; + await $dates[selectIndex].trigger('click'); + expect(onSelect).toHaveBeenCalledTimes(1); + expect(selectTime.value).toEqual(`${year}/${month + 1}/${selectIndex + 1}`); + + const $button = wrapper.findComponent(Button); + await $button.trigger('click') + expect(onConfirm).toHaveBeenCalledTimes(1); + expect(selectTime).toEqual(time); + }); + }); +}) diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue index 493e5358b..bc9cd34b8 100644 --- a/src/calendar/calendar.vue +++ b/src/calendar/calendar.vue @@ -58,7 +58,8 @@ @@ -226,7 +231,7 @@ const months = computed(() => { }); const confirmBtn = computed(() => { - if (props.confirmBtn === 'string' || props.confirmBtn === '') return { content: props.confirmBtn || '确认' }; + if (typeof props.confirmBtn === 'string' || props.confirmBtn === '') return { content: props.confirmBtn || '确认' }; return props.confirmBtn; });