[improvement] DatetimePicker: split into two components (#3995)

src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter prop 1`] = `
+<div class="van-picker van-date-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`formatter prop 1`] = `
+<div class="van-picker van-date-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010 year</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 month</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 month</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25 day</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">45 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-date-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -166,7 +166,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-date-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -247,7 +247,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-date-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -293,7 +293,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-time-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -386,7 +386,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-datetime-picker">
+    <div class="van-picker van-time-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>

src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`filter prop 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`format initial value 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`formatter prop 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`max-hour & max-minute 1`] = `
+<div class="van-picker van-time-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;

src/datetime-picker/test/date-picker.spec.js

@@ -0,0 +1,112 @@
+import DatePicker from '../DatePicker';
+import { mount, later, triggerDrag } from '../../../test/utils';
+
+function filter(type, options) {
+  const mod = type === 'year' ? 10 : 5;
+  return options.filter(option => option % mod === 0);
+}
+
+function formatter(type, value) {
+  return `${value} ${type}`;
+}
+
+test('filter prop', () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      filter,
+      value: new Date(2019, 10, 1, 0, 0)
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('formatter prop', async () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      filter,
+      formatter,
+      value: new Date(2019, 10, 1, 0, 0)
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+  await later();
+
+  expect(wrapper.emitted('change')[0][0].getValues()).toEqual([
+    '2020 year',
+    '05 month',
+    '05 day',
+    '00 hour',
+    '00 minute'
+  ]);
+});
+
+test('confirm event', () => {
+  const date = new Date(2019, 10, 1, 0, 0);
+
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: date
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019);
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2029);
+});
+
+test('cancel event', () => {
+  const wrapper = mount(DatePicker);
+
+  wrapper.find('.van-picker__cancel').trigger('click');
+  expect(wrapper.emitted('cancel')).toBeTruthy();
+});
+
+test('max-date prop', () => {
+  const maxDate = new Date(2010, 5, 0, 0, 0);
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: new Date(2020, 10, 30, 30, 30),
+      maxDate
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(maxDate);
+});
+
+test('min-date prop', () => {
+  const minDate = new Date(2030, 0, 0, 0, 0);
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: new Date(2020, 0, 0, 0, 0),
+      minDate
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(minDate);
+});
+
+test('dynamic set value', () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      value: new Date(2019, 1, 1)
+    }
+  });
+
+  wrapper.setProps({ value: new Date(2019, 1, 1) });
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.setProps({ value: new Date(2025, 1, 1) });
+  wrapper.find('.van-picker__confirm').trigger('click');
+
+  expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2019);
+  expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
+});

src/datetime-picker/test/time-picker.spec.js

@@ -0,0 +1,94 @@
+import TimePicker from '../TimePicker';
+import { mount, later, triggerDrag } from '../../../test/utils';
+
+function filter(type, options) {
+  const mod = type === 'minute' ? 10 : 5;
+  return options.filter(option => option % mod === 0);
+}
+
+function formatter(type, value) {
+  return `${value} ${type}`;
+}
+
+test('format initial value', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      minHour: 22,
+      minMinute: 58
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('max-hour & max-minute', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      value: '23:59',
+      maxHour: 2,
+      maxMinute: 2
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('filter prop', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      filter,
+      value: '12:00'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('formatter prop', async () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      filter,
+      formatter,
+      value: '12:00'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker-column ul').trigger('transitionend');
+  await later();
+
+  expect(wrapper.emitted('change')[0][0].getValues()).toEqual(['20 hour', '00 minute']);
+});
+
+test('confirm event', () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      value: '12:00'
+    }
+  });
+
+  triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('23:00');
+});
+
+test('cancel event', () => {
+  const wrapper = mount(TimePicker);
+
+  wrapper.find('.van-picker__cancel').trigger('click');
+  expect(wrapper.emitted('cancel')).toBeTruthy();
+});
+
+test('dynamic set value', () => {
+  const wrapper = mount(TimePicker);
+
+  wrapper.setProps({ value: '00:00' });
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.setProps({ value: '22:30' });
+  wrapper.find('.van-picker__confirm').trigger('click');
+
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
+  expect(wrapper.emitted('confirm')[1][0]).toEqual('22:30');
+});