test(Area): update all test cases

packages/vant/src/area/demo/area-en.ts

@@ -41,7 +41,7 @@ export const areaListEn = {
     330226: 'Ninghai',
     330281: 'Yuyao',
     330282: 'Cixi',
-    330327: 'Cangnan',
+    330302: 'Lucheng',
     330328: 'Wencheng',
     330329: 'Shuntai',
     330381: 'Ruian',

packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap

@@ -290,7 +290,7 @@ exports[`should render demo and match snapshot 1`] = `
               class="van-picker-column__item van-picker-column__item--selected"
           >
             <div class="van-ellipsis">
-              Cangnan
+              Lucheng
             </div>
           </li>
           <li role="button"
@@ -487,12 +487,30 @@ exports[`should render demo and match snapshot 1`] = `
         <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
             class="van-picker-column__wrapper"
         >
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item van-picker-column__item--selected"
+          >
+            <div class="van-ellipsis">
+              Choose
+            </div>
+          </li>
         </ul>
       </div>
       <div class="van-picker-column">
         <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
             class="van-picker-column__wrapper"
         >
+          <li role="button"
+              style="height: 44px;"
+              tabindex="0"
+              class="van-picker-column__item van-picker-column__item--selected"
+          >
+            <div class="van-ellipsis">
+              Choose
+            </div>
+          </li>
         </ul>
       </div>
       <div class="van-picker__mask"

packages/vant/src/area/test/__snapshots__/index.spec.ts.snap

@@ -24,18 +24,6 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
       >
       </ul>
     </div>
-    <div class="van-picker-column">
-      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
-          class="van-picker-column__wrapper"
-      >
-      </ul>
-    </div>
-    <div class="van-picker-column">
-      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
-          class="van-picker-column__wrapper"
-      >
-      </ul>
-    </div>
   </div>
   Bottom
 </div>
@@ -122,11 +110,31 @@ exports[`should render two columns when columns-num prop is two 1`] = `
         </li>
       </ul>
     </div>
+    <div class="van-picker__mask"
+         style="background-size: 100% 110px;"
+    >
+    </div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame"
+         style="height: 44px;"
+    >
+    </div>
   </div>
 </div>
 `;
 
-exports[`should reset selected option after calling the reset method 1`] = `
+exports[`should watch modelValue prop and render correctly 1`] = `
+<li role="button"
+    style="height: 44px;"
+    tabindex="0"
+    class="van-picker-column__item van-picker-column__item--selected"
+>
+  <div class="van-ellipsis">
+    北京市
+  </div>
+</li>
+`;
+
+exports[`should watch modelValue prop and render correctly 2`] = `
 <li role="button"
     style="height: 44px;"
     tabindex="0"
@@ -138,43 +146,7 @@ exports[`should reset selected option after calling the reset method 1`] = `
 </li>
 `;
 
-exports[`should reset selected option after calling the reset method 2`] = `
+exports[`should watch modelValue prop and render correctly 3`] = `
-<li role="button"
-    style="height: 44px;"
-    tabindex="0"
-    class="van-picker-column__item van-picker-column__item--selected"
->
-  <div class="van-ellipsis">
-    北京市
-  </div>
-</li>
-`;
-
-exports[`should watch value prop and render correctly 1`] = `
-<li role="button"
-    style="height: 44px;"
-    tabindex="0"
-    class="van-picker-column__item van-picker-column__item--selected"
->
-  <div class="van-ellipsis">
-    北京市
-  </div>
-</li>
-`;
-
-exports[`should watch value prop and render correctly 2`] = `
-<li role="button"
-    style="height: 44px;"
-    tabindex="0"
-    class="van-picker-column__item van-picker-column__item--selected"
->
-  <div class="van-ellipsis">
-    天津市
-  </div>
-</li>
-`;
-
-exports[`should watch value prop and render correctly 3`] = `
 <li role="button"
     style="height: 44px;"
     tabindex="0"

packages/vant/src/area/test/index.spec.ts

@@ -1,44 +1,37 @@
 import { Area } from '..';
 import { areaList } from '../demo/area-simple';
 import { mount, later, triggerDrag } from '../../../test';
+import {
+  PickerCancelEventParams,
+  PickerChangeEventParams,
+  PickerConfirmEventParams,
+} from '../../picker';
 
-const firstOption = [
+test('should emit confirm event after click the confirm button', async () => {
-  { code: '110000', name: '北京市' },
-  { code: '110100', name: '北京市' },
-  { code: '110101', name: '东城区' },
-];
-
-const secondOption = [
-  { code: '120000', name: '天津市' },
-  { code: '120100', name: '天津市' },
-  { code: '120101', name: '和平区' },
-];
-
-test('should emit confirm event after click the confirm button', () => {
   const wrapper = mount(Area, {
     props: {
       areaList,
     },
   });
 
-  wrapper.find('.van-picker__confirm').trigger('click');
+  await wrapper.find('.van-picker__confirm').trigger('click');
-  expect(wrapper.emitted('confirm')[0]).toEqual([firstOption, [0, 0, 0]]);
+  const params = wrapper.emitted<PickerConfirmEventParams[]>('confirm')?.[0];
+  expect(params?.[0].selectedValues).toEqual(['110000', '110100', '110101']);
 });
 
-test('should emit cancel event after click the cancel button', () => {
+test('should emit cancel event after click the cancel button', async () => {
-  const onCancel = jest.fn();
   const wrapper = mount(Area, {
     props: {
       areaList,
-      onCancel,
     },
   });
 
-  wrapper.find('.van-picker__cancel').trigger('click');
+  await wrapper.find('.van-picker__cancel').trigger('click');
-  expect(onCancel).toHaveBeenLastCalledWith(firstOption, [0, 0, 0]);
+  const params = wrapper.emitted<PickerCancelEventParams[]>('cancel')?.[0];
+  expect(params?.[0].selectedValues).toEqual(['110000', '110100', '110101']);
 });
 
-test('should watch value prop and render correctly', async () => {
+test('should watch modelValue prop and render correctly', async () => {
   const wrapper = mount(Area, {
     props: {
       areaList,
@@ -49,14 +42,13 @@ test('should watch value prop and render correctly', async () => {
   expect(
     wrapper.find('.van-picker-column__item--selected').html()
   ).toMatchSnapshot();
-  await wrapper.setProps({ value: '120225' });
 
-  await later();
+  await wrapper.setProps({ modelValue: '120225' });
   expect(
     wrapper.find('.van-picker-column__item--selected').html()
   ).toMatchSnapshot();
 
-  await wrapper.setProps({ value: '' });
+  await wrapper.setProps({ modelValue: '' });
   expect(
     wrapper.find('.van-picker-column__item--selected').html()
   ).toMatchSnapshot();
@@ -75,37 +67,8 @@ test('should emit change event after dragging options', () => {
   triggerDrag(columns[2], 0, -100);
   columns[2].find('ul').trigger('transitionend');
 
-  expect(wrapper.emitted('change')[0][0]).toEqual(secondOption);
+  const params = wrapper.emitted<PickerChangeEventParams[]>('change')?.[0];
-});
+  expect(params?.[0].selectedValues).toEqual(['120000', '120100', '120101']);
-
-test('should return current values when calling getValues method', () => {
-  const wrapper = mount(Area, {
-    props: {
-      areaList,
-    },
-  });
-
-  expect(wrapper.vm.getValues()).toEqual(firstOption);
-});
-
-test('should reset selected option after calling the reset method', async () => {
-  const wrapper = mount(Area, {
-    props: {
-      areaList,
-      value: '120225',
-    },
-  });
-
-  await later();
-  expect(
-    wrapper.find('.van-picker-column__item--selected').html()
-  ).toMatchSnapshot();
-
-  wrapper.vm.reset();
-  await later();
-  expect(
-    wrapper.find('.van-picker-column__item--selected').html()
-  ).toMatchSnapshot();
 });
 
 test('should render two columns when columns-num prop is two', async () => {