diff --git a/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap index 3256494..593d81e 100644 --- a/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-vue2-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap @@ -440,3 +440,374 @@ exports[`test datePicker style and type 2`] = ` " `; + +exports[`test datePicker style and type test datePicker style and date 1`] = ` +"
+
+
+ 2021 +
+
+ +
+ 04-08 星期四 +
+ +
+
+
+ +
+
+
+
+ +
2021 四月
+ +
+
+ +
+
    +
  • 日
    • +
  • 一
    • +
  • 二
    • +
  • 三
    • +
  • 四
    • +
  • 五
    • +
  • 六
    • +
+
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
+
+ +
+
+ +
+
" +`; + +exports[`test datePicker style and type test datePicker style and month 1`] = ` +"
+
+
+ 2021 +
+
+ +
+ 四月 +
+ +
+
+
+ +
+
+
+
+ +
2021
+ +
+
+ +
    +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
+ +
+
+ +
+
" +`; diff --git a/packages/varlet-vue2-ui/src/date-picker/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/date-picker/__tests__/index.spec.js index d635217..5f11410 100644 --- a/packages/varlet-vue2-ui/src/date-picker/__tests__/index.spec.js +++ b/packages/varlet-vue2-ui/src/date-picker/__tests__/index.spec.js @@ -2,7 +2,7 @@ import DatePicker from '..' import VarDatePicker from '../DatePicker' import { mount } from '@vue/test-utils' import Vue from 'vue' -import { delay, mockConsole } from '../../utils/jest' +import { delay, mockConsole, triggerDrag } from '../../utils/jest' import dayjs from 'dayjs/esm' const [currentYear, currentMonth] = dayjs().format('YYYY-MM').split('-') @@ -12,6 +12,62 @@ test('test datePicker plugin', () => { expect(Vue.component(DatePicker.name)).toBeTruthy() }) +describe('test datePicker style and type', () => { + test('test datePicker style and date', async () => { + const template = ` + + ` + const wrapper = mount({ + components: { + [VarDatePicker.name]: VarDatePicker, + }, + data() { + return { + date: '2021-04-08', + } + }, + template, + }) + + await delay(0) + + expect(wrapper.html()).toMatchSnapshot() + }) + test('test datePicker style and month', async () => { + const template = ` + + ` + const wrapper = mount({ + components: { + [VarDatePicker.name]: VarDatePicker, + }, + data() { + return { + date: '2021-04', + } + }, + template, + }) + + await delay(0) + + expect(wrapper.html()).toMatchSnapshot() + }) +}) + test('test datePicker style and type', async () => { const template = ` { }) await delay(0) - expect(wrapper.find('.var-day-picker__head').find('li').text()).toBe('三') + expect(wrapper.findComponent('.var-day-picker__head').findComponent('li').text()).toBe('三') }) test('test max and min', async () => { @@ -82,18 +138,18 @@ test('test max and min', async () => { }) await delay(0) - expect(wrapper.find('.var-picker-header__value').text()).toBe('2021 四月') + expect(wrapper.findComponent('.var-picker-header__value').text()).toBe('2021 四月') - await wrapper.find('.var-picker-header').find('button').trigger('click') + await wrapper.findComponent('.var-picker-header').findComponent('button').trigger('click') await delay(200) - expect(wrapper.find('.var-picker-header__value').text()).toBe('2021 四月') + expect(wrapper.findComponent('.var-picker-header__value').text()).toBe('2021 四月') - await wrapper.find('.var-picker-header__value').trigger('click') + await wrapper.findComponent('.var-picker-header__value').trigger('click') await delay(200) - await wrapper.find('.var-picker-header__value').trigger('click') + await wrapper.findComponent('.var-picker-header__value').trigger('click') await delay(200) - expect(wrapper.find('.var-year-picker__panel').findAll('li').length).toBe(1) + expect(wrapper.findComponent('.var-year-picker__panel').findAll('li').length).toBe(1) }) test('test datePicker v-model', async () => { @@ -113,22 +169,22 @@ test('test datePicker v-model', async () => { }) await delay(0) - await wrapper.find('.var-picker-header').find('button').trigger('click') + await wrapper.findComponent('.var-picker-header').findComponent('button').trigger('click') await delay(200) - await wrapper.find('.var-month-picker__content').find('ul').find('button').trigger('click') + await wrapper.findComponent('.var-month-picker__content').findComponent('ul').findComponent('button').trigger('click') expect(wrapper.vm.date).toBe('2020-01') - await wrapper.find('.var-picker-header__value').trigger('click') + await wrapper.findComponent('.var-picker-header__value').trigger('click') await delay(200) - await wrapper.find('.var-year-picker__panel').find('li').trigger('click') + await wrapper.findComponent('.var-year-picker__panel').findComponent('li').trigger('click') await delay(200) - await wrapper.find('.var-month-picker__content').find('ul').find('button').trigger('click') + await wrapper.findComponent('.var-month-picker__content').findComponent('ul').findComponent('button').trigger('click') expect(wrapper.vm.date).not.toBe('2021-01') await wrapper.setData({ type: 'date', date: '2021-05-19' }) - await wrapper.find('.var-picker-header').find('button').trigger('click') + await wrapper.findComponent('.var-picker-header').findComponent('button').trigger('click') await delay(200) - await wrapper.find('.var-day-picker__button--usable').trigger('click') + await wrapper.findComponent('.var-day-picker__button--usable').trigger('click') expect(wrapper.vm.date).toBe('2021-04-01') }) @@ -197,10 +253,9 @@ test('test datePicker range prop', async () => { await wrapper.setData({ type: 'month', date: null }) await wrapper.setData({ type: 'month', date: ['2021-05', '2021-06'] }) await delay(0) - - const lis = wrapper.find('.var-month-picker__content').find('ul').findAll('li') - await lis.at(0).find('button').trigger('click') - await lis.at(2).find('button').trigger('click') + const lis = wrapper.findComponent('.var-month-picker__content').findComponent('ul').findAll('li') + await lis.at(0).findComponent('button').trigger('click') + await lis.at(2).findComponent('button').trigger('click') expect(wrapper.vm.date).toEqual([`${currentYear}-01`, `${currentYear}-03`]) expect(fn).toHaveBeenCalledTimes(1) @@ -224,16 +279,40 @@ test('test datePicker readonly', async () => { }) await delay(0) - await wrapper.find('.var-month-picker__content').find('ul').find('button').trigger('click') + await wrapper.findComponent('.var-month-picker__content').findComponent('ul').findComponent('button').trigger('click') await delay(200) expect(wrapper.vm.date).toBe('2021-05') await wrapper.setData({ type: 'date', date: '2021-05-19' }) - await wrapper.find('.var-day-picker__button--usable').trigger('click') + await wrapper.findComponent('.var-day-picker__button--usable').trigger('click') await delay(200) expect(wrapper.vm.date).toBe('2021-05-19') }) +// test('test datePicker touchable prop', async () => { +// const wrapper = mount({ +// components: { +// [VarDatePicker.name]: VarDatePicker, +// }, +// data() { +// return { +// date: '2021-04-08', +// type: 'date', +// } +// }, +// template: ``, +// }) + +// const pickBodyEl = wrapper.findComponent('.var-date-picker-body') +// const headerEl = wrapper.findComponent('.var-picker-header__value') + +// await triggerDrag(pickBodyEl, 0, 100) +// expect(headerEl.text()).toBe('2021 四月') +// await triggerDrag(pickBodyEl, 100, 0) +// await delay(300) +// expect(headerEl.text()).toBe('2021 三月') +// }) + test('test value legal', async () => { const fn = jest.fn() const { mockRestore } = mockConsole('error', fn) diff --git a/packages/varlet-vue2-ui/src/tabs/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/tabs/__tests__/index.spec.js index ed3b626..63efffc 100644 --- a/packages/varlet-vue2-ui/src/tabs/__tests__/index.spec.js +++ b/packages/varlet-vue2-ui/src/tabs/__tests__/index.spec.js @@ -185,7 +185,14 @@ test('test tabs disabled', async () => { }) test('test tabs relation tabsItems', async () => { - const wrapper = mount(Wrapper) + const onClick = jest.fn() + const onChange = jest.fn() + const wrapper = mount(Wrapper, { + propsData: { + onClick, + onChange, + }, + }) await delay(100) expect(wrapper.html()).toMatchSnapshot()