diff --git a/packages/vant/src/area/demo/area-en.ts b/packages/vant/src/area/demo/area-en.ts
index 392f695ac..1a5dc1f19 100644
--- a/packages/vant/src/area/demo/area-en.ts
+++ b/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',
diff --git a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
index fb2b85d81..141bcfb83 100644
--- a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
+++ b/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"
>
- Cangnan
+ Lucheng
+
+
+ Choose
+
+
-
-
Bottom
@@ -122,11 +110,31 @@ exports[`should render two columns when columns-num prop is two 1`] = `
+
+
+
+
`;
-exports[`should reset selected option after calling the reset method 1`] = `
+exports[`should watch modelValue prop and render correctly 1`] = `
+
+
+ 北京市
+
+
+`;
+
+exports[`should watch modelValue prop and render correctly 2`] = `
`;
-exports[`should reset selected option after calling the reset method 2`] = `
-
-
- 北京市
-
-
-`;
-
-exports[`should watch value prop and render correctly 1`] = `
-
-
- 北京市
-
-
-`;
-
-exports[`should watch value prop and render correctly 2`] = `
-
-
- 天津市
-
-
-`;
-
-exports[`should watch value prop and render correctly 3`] = `
+exports[`should watch modelValue prop and render correctly 3`] = `
{
+test('should emit confirm event after click the confirm button', async () => {
const wrapper = mount(Area, {
props: {
areaList,
},
});
- wrapper.find('.van-picker__confirm').trigger('click');
- expect(wrapper.emitted('confirm')[0]).toEqual([firstOption, [0, 0, 0]]);
+ await wrapper.find('.van-picker__confirm').trigger('click');
+ const params = wrapper.emitted('confirm')?.[0];
+ expect(params?.[0].selectedValues).toEqual(['110000', '110100', '110101']);
});
-test('should emit cancel event after click the cancel button', () => {
- const onCancel = jest.fn();
+test('should emit cancel event after click the cancel button', async () => {
const wrapper = mount(Area, {
props: {
areaList,
- onCancel,
},
});
- wrapper.find('.van-picker__cancel').trigger('click');
- expect(onCancel).toHaveBeenLastCalledWith(firstOption, [0, 0, 0]);
+ await wrapper.find('.van-picker__cancel').trigger('click');
+ const params = wrapper.emitted('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);
-});
-
-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();
+ const params = wrapper.emitted('change')?.[0];
+ expect(params?.[0].selectedValues).toEqual(['120000', '120100', '120101']);
});
test('should render two columns when columns-num prop is two', async () => {