test: update test cases

components/date-picker/test/demo.spec.js

@@ -4,7 +4,7 @@ import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
 import {mount} from '@vue/test-utils'
 
-describe('DatePicker', () => {
+describe('DatePicker - Demo', () => {
   test(`Date selection`, done => {
     const wrapper = mount(Demo0)
     setTimeout(() => {

components/date-picker/test/index.spec.js

@@ -0,0 +1,139 @@
+import {DatePicker} from 'mand-mobile'
+import sinon from 'sinon'
+import {mount} from '@vue/test-utils'
+
+describe('DatePicker - Operation', () => {
+  let wrapper
+
+  afterEach(() => {
+    wrapper && wrapper.destroy()
+  })
+
+  it('create a date picker', done => {
+    const date = new Date()
+    wrapper = mount(DatePicker, {
+      propsData: {
+        isView: true,
+        minDate: new Date('2013/9/9'),
+        maxDate: new Date('2020/9/9'),
+        defaultDate: date,
+        todayText: '今天',
+      },
+    })
+    const eventSpy = sinon.spy(wrapper.vm, '$emit')
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.md-picker-column-item').length).toEqual(3)
+      setTimeout(() => {
+        expect(eventSpy.calledWith('initialed')).toBe(true)
+        expect(wrapper.vm.getFormatDate('yyyy-MM-dd')).toEqual(
+          `${date.getFullYear()}-${date.getMonth() + 1 < 10
+            ? '0' + (date.getMonth() + 1)
+            : date.getMonth() + 1}-${date.getDate() < 10 ? '0' + date.getDate() : date.getDate()}`,
+        )
+        done()
+      }, 50)
+    })
+  })
+
+  it('create a time picker', done => {
+    const date = new Date()
+    wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'time',
+        unitText: ['', '', '', 'h', 'm'],
+        halfDayText: ['AM', 'PM'],
+        isView: true,
+        defaultDate: date,
+        maxDate: new Date('2018/9/9'),
+      },
+    })
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.md-picker-column-item').length).toEqual(2)
+      done()
+    })
+  })
+
+  it('create a datetime picker', done => {
+    const date = new Date()
+    wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'datetime',
+        isView: true,
+        defaultDate: date,
+        minDate: new Date('2020/9/9'),
+      },
+    })
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.md-picker-column-item').length).toEqual(5)
+      done()
+    })
+  })
+
+  it('create a custom picker', done => {
+    const date = new Date()
+    wrapper = mount(DatePicker, {
+      propsData: {
+        type: 'custom',
+        value: true,
+        customTypes: ['dd', 'hh', 'mm'],
+        isTwelveHours: true,
+      },
+    })
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.md-picker-column-item').length).toEqual(3)
+      wrapper.vm.isPickerShow = false
+      done()
+    })
+  })
+
+  it('create a popup picker', done => {
+    const date = new Date()
+    const minDate = new Date(date.getTime() - 60 * 60 * 24)
+    const maxDate = new Date(date.getTime() - 60 * 60 * 24)
+    wrapper = mount(DatePicker, {
+      propsData: {
+        value: false,
+      },
+    })
+    wrapper.setProps({value: true})
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.md-picker-column-item').length).toEqual(3)
+      wrapper.setProps({
+        defaultDate: date,
+        minDate,
+        maxDate,
+      })
+      const cancel = wrapper.find('.md-popup-cancel')
+      cancel.trigger('click')
+      setTimeout(() => {
+        wrapper.setProps({value: true})
+        const confirm = wrapper.find('.md-popup-confirm')
+        confirm.trigger('click')
+        setTimeout(() => {
+          done()
+        }, 300)
+      }, 300)
+    })
+  })
+
+  it('defaultDate = maxDate', done => {
+    const date = new Date()
+    wrapper = mount(DatePicker, {
+      propsData: {
+        isView: true,
+        type: 'datetime',
+        defaultDate: date,
+        maxDate: date,
+      },
+    })
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.findAll('.md-picker-column-item').length).toEqual(5)
+      done()
+    })
+  })
+})

components/dialog/test/index.spec.js

@@ -1,30 +1,44 @@
 import {Dialog} from 'mand-mobile'
 import sinon from 'sinon'
+import {mount} from '@vue/test-utils'
 
-describe('Dialog - Static Methods', () => {
+describe('Dialog - Operation', () => {
   let wrapper, vm
 
   afterEach(() => {
-    wrapper && wrapper.destroy()
+    // wrapper && wrapper.destroy()
     vm && vm.$destroy()
   })
 
-  test('generate a confirm dialog', () => {
+  it('basic dialog', () => {
+    let show = true
+    wrapper = mount(Dialog, {
+      propsData: {
+        value: show,
+        appendTo: null,
+        btns: [{text: '123'}],
+      },
+    })
+    wrapper.find('.md-dialog-btn').trigger('click')
+  })
+
+  it('generate a confirm dialog', () => {
     vm = Dialog.confirm({})
     expect(vm.btns.length).toBe(2)
   })
 
-  test('generate a alert dialog', () => {
+  it('generate a alert dialog', () => {
     vm = Dialog.alert({})
     expect(vm.btns.length).toBe(1)
   })
 
-  test('generate a succeed dialog', () => {
+  it('generate a succeed dialog', () => {
     vm = Dialog.succeed({})
     expect(vm.icon).toBe('success-color')
+    vm.$el.querySelector('.md-dialog-btn').click()
   })
 
-  test('generate a failed dialog', done => {
+  it('generate a failed dialog', done => {
     vm = Dialog.failed({})
     const eventSpy = sinon.spy(vm, '$emit')
     vm.value = false
@@ -35,7 +49,7 @@ describe('Dialog - Static Methods', () => {
     }, 300)
   })
 
-  test('close all dialogs', done => {
+  it('close all dialogs', done => {
     const d1 = Dialog.confirm({})
     const d2 = Dialog.succeed({})
     const eventStub1 = sinon.stub(d1, '$emit')

components/drop-menu/test/index.spec.js

@@ -2,14 +2,14 @@ import {DropMenu} from 'mand-mobile'
 import sinon from 'sinon'
 import {mount} from '@vue/test-utils'
 
-describe('DropMenu - Click & Events', () => {
+describe('DropMenu - Operation', () => {
   let wrapper
 
   afterEach(() => {
     wrapper && wrapper.destroy()
   })
 
-  test('drop-menu bar item click', done => {
+  it('drop-menu bar item click', done => {
     wrapper = mount(DropMenu, {
       propsData: {
         data: [
@@ -23,6 +23,7 @@ describe('DropMenu - Click & Events', () => {
             ],
           },
         ],
+        defaultValue: ['world'],
       },
     })
     const barItem = wrapper.find('.bar-item')
@@ -36,11 +37,13 @@ describe('DropMenu - Click & Events', () => {
 
       const listItem = wrapper.findAll('.md-radio-item')
       expect(listItem.length).toBe(1)
+      barItem.trigger('click')
+      wrapper.setProps({data: []})
       done()
     })
   })
 
-  test('drop-menu list item click', done => {
+  it('drop-menu list item click', done => {
     wrapper = mount(DropMenu, {
       propsData: {
         data: [
@@ -71,7 +74,7 @@ describe('DropMenu - Click & Events', () => {
     }, 350)
   })
 
-  test('drop-menu events', done => {
+  it('drop-menu events', done => {
     wrapper = mount(DropMenu, {
       propsData: {
         data: [

components/field/test/index.spec.js

@@ -0,0 +1,27 @@
+import {FieldItem} from 'mand-mobile'
+import sinon from 'sinon'
+import {shallowMount} from '@vue/test-utils'
+
+describe('Field - Operation', () => {
+  let wrapper
+
+  afterEach(() => {
+    wrapper && wrapper.destroy()
+  })
+
+  it('field item click event', () => {
+    let clicked = false
+    wrapper = shallowMount(FieldItem, {
+      listeners: {
+        click() {
+          clicked = true
+        },
+      },
+    })
+    const eventSpy = sinon.spy(wrapper.vm, '$emit')
+
+    wrapper.find('.md-field-item').trigger('click')
+    expect(eventSpy.calledWith('click')).toBe(true)
+    expect(clicked).toBe(true)
+  })
+})

components/icon/test/demo.spec.js

@@ -4,7 +4,7 @@ import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
 import {renderToString} from '@vue/server-test-utils'
 
-describe('Icon', () => {
+describe('Icon - Demo', () => {
   test(`Font icon`, () => {
     expect(renderToString(Demo0)).toMatchSnapshot()
   })

components/icon/test/index.spec.js

@@ -0,0 +1,30 @@
+import {Icon} from 'mand-mobile'
+import sinon from 'sinon'
+import {shallowMount} from '@vue/test-utils'
+
+describe('Icon - Operation', () => {
+  let wrapper
+
+  afterEach(() => {
+    wrapper && wrapper.destroy()
+  })
+
+  it('icon click event', () => {
+    let clicked = false
+    wrapper = shallowMount(Icon, {
+      propsData: {
+        name: 'success-color',
+      },
+      listeners: {
+        click() {
+          clicked = true
+        },
+      },
+    })
+    const eventSpy = sinon.spy(wrapper.vm, '$emit')
+
+    wrapper.find('.md-icon').trigger('click')
+    expect(eventSpy.calledWith('click')).toBe(true)
+    expect(clicked).toBe(true)
+  })
+})