diff --git a/src/area/test/__snapshots__/index.legacy.js.snap b/src/area/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index e29ea9587..000000000
--- a/src/area/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,407 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`change option 1`] = `
-
-`;
-
-exports[`change option 2`] = `
-
-`;
-
-exports[`change option 3`] = `
-
-`;
-
-exports[`columns-num prop 1`] = `
-
-`;
-
-exports[`columns-top、columns-bottom slot 1`] = `
-
-`;
-
-exports[`reset method 1`] = `
-
-`;
-
-exports[`reset method 2`] = `
-
-`;
-
-exports[`title slot 1`] = `
-
-
Custom Title
-
-
-
-
+
+
+
+
+ Top
+
+ Bottom
+
+
+ Custom Title
+
+
+`;
+
+exports[`should render two columns when columns-num prop is two 1`] = `
+
+
+
+
+
+
+
+
+ -
+
+ 北京市
+
+
+ -
+
+ 天津市
+
+
+
+
+
+
+ -
+
+ 北京市
+
+
+ -
+
+ 县
+
+
+
+
+
+
+
+
+
+
+ 天津市
+
+
+`;
+
+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`] = `
+
+
+ 北京市
+
+
+`;
diff --git a/src/area/test/index.legacy.js b/src/area/test/index.legacy.js
deleted file mode 100644
index cc2ab165b..000000000
--- a/src/area/test/index.legacy.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import Area from '..';
-import areaList from '../demo/area-simple';
-import { mount, later, triggerDrag } from '../../../test';
-
-const firstOption = [
- { code: '110000', name: '北京市' },
- { code: '110100', name: '北京市' },
- { code: '110101', name: '东城区' },
-];
-
-const secondOption = [
- { code: '120000', name: '天津市' },
- { code: '120100', name: '天津市' },
- { code: '120101', name: '和平区' },
-];
-
-test('confirm & cancel event', async () => {
- const onConfirm = jest.fn();
- const onCancel = jest.fn();
- const wrapper = mount(Area, {
- props: {
- areaList,
- },
- listeners: {
- confirm: onConfirm,
- cancel: onCancel,
- },
- });
-
- await later();
-
- wrapper.find('.van-picker__confirm').trigger('click');
- wrapper.find('.van-picker__cancel').trigger('click');
-
- expect(onConfirm).toHaveBeenCalledWith(firstOption, [0, 0, 0]);
- expect(onCancel).toHaveBeenCalledWith(firstOption, [0, 0, 0]);
-});
-
-test('watch areaList & code', async () => {
- const wrapper = mount(Area, {
- props: {
- areaList,
- },
- });
-
- expect(wrapper.html()).toMatchSnapshot();
- wrapper.setProps({ value: '110117' });
-
- await later();
- expect(wrapper.html()).toMatchSnapshot();
-
- wrapper.setProps({
- value: '',
- });
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('change option', () => {
- const onChange = jest.fn();
- const wrapper = mount(Area, {
- props: {
- areaList,
- },
- listeners: {
- change: onChange,
- },
- });
-
- const columns = wrapper.findAll('.van-picker-column');
- expect(wrapper.html()).toMatchSnapshot();
-
- triggerDrag(columns[0], 0, -100);
- columns[0].find('ul').trigger('transitionend');
- expect(wrapper.html()).toMatchSnapshot();
-
- triggerDrag(columns[2], 0, -100);
- columns[2].find('ul').trigger('transitionend');
- expect(wrapper.html()).toMatchSnapshot();
-
- expect(onChange.mock.calls[0][1]).toEqual(secondOption);
-});
-
-test('getValues method', () => {
- const wrapper = mount(Area, {
- props: {
- areaList,
- },
- created() {
- expect(this.getValues()).toEqual([]);
- },
- });
-
- expect(wrapper.vm.getValues()).toEqual(firstOption);
-});
-
-test('reset method', async () => {
- const wrapper = mount(Area, {
- props: {
- areaList,
- value: '120225',
- },
- });
-
- await later();
- expect(wrapper.html()).toMatchSnapshot();
- wrapper.vm.reset();
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('columns-num prop', async () => {
- const wrapper = mount(Area, {
- props: {
- areaList,
- columnsNum: 3,
- },
- });
-
- wrapper.setProps({
- columnsNum: 2,
- });
-
- await later();
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('title slot', async () => {
- const wrapper = mount(Area, {
- slots: {
- title: () => 'Custom Title',
- },
- });
-
- await later();
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('columns-top、columns-bottom slot', async () => {
- const wrapper = mount(Area, {
- slots: {
- 'columns-top': 'Top',
- 'columns-bottom': 'Bottom',
- },
- });
-
- await later();
- expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/area/test/index.spec.js b/src/area/test/index.spec.js
new file mode 100644
index 000000000..bf1a78cf0
--- /dev/null
+++ b/src/area/test/index.spec.js
@@ -0,0 +1,145 @@
+import Area from '..';
+import areaList from '../demo/area-simple';
+import { mount, later, triggerDrag } from '../../../test';
+
+const firstOption = [
+ { 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');
+ expect(wrapper.emitted('confirm')[0]).toEqual([firstOption, [0, 0, 0]]);
+});
+
+test('should emit cancel event after click the cancel button', () => {
+ const onCancel = jest.fn();
+ const wrapper = mount(Area, {
+ props: {
+ areaList,
+ onCancel,
+ },
+ });
+
+ wrapper.find('.van-picker__cancel').trigger('click');
+ expect(onCancel).toHaveBeenLastCalledWith(firstOption, [0, 0, 0]);
+});
+
+test('should watch value prop and render correctly', async () => {
+ const wrapper = mount(Area, {
+ props: {
+ areaList,
+ },
+ });
+
+ await later();
+ expect(
+ wrapper.find('.van-picker-column__item--selected').html()
+ ).toMatchSnapshot();
+ await wrapper.setProps({ value: '120225' });
+
+ await later();
+ expect(
+ wrapper.find('.van-picker-column__item--selected').html()
+ ).toMatchSnapshot();
+
+ await wrapper.setProps({ value: '' });
+ expect(
+ wrapper.find('.van-picker-column__item--selected').html()
+ ).toMatchSnapshot();
+});
+
+test('should emit change event after dragging options', () => {
+ const wrapper = mount(Area, {
+ props: {
+ areaList,
+ },
+ });
+
+ const columns = wrapper.findAll('.van-picker-column');
+ triggerDrag(columns[0], 0, -100);
+ columns[0].find('ul').trigger('transitionend');
+ 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();
+});
+
+test('should render two columns when columns-num prop is two', async () => {
+ const wrapper = mount(Area, {
+ props: {
+ areaList,
+ columnsNum: 3,
+ },
+ });
+
+ expect(wrapper.findAll('.van-picker-column').length).toEqual(3);
+
+ await wrapper.setProps({ columnsNum: 2 });
+ expect(wrapper.findAll('.van-picker-column').length).toEqual(2);
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render title slot correctly', () => {
+ const wrapper = mount(Area, {
+ slots: {
+ title: () => 'Custom Title',
+ },
+ });
+
+ expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot();
+});
+
+test('should render columns-top、columns-bottom slot correctly', () => {
+ const wrapper = mount(Area, {
+ slots: {
+ 'columns-top': () => 'Top',
+ 'columns-bottom': () => 'Bottom',
+ },
+ });
+
+ expect(wrapper.html()).toMatchSnapshot();
+});