test(Area): update test cases

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();
+});