types: test cases typing

src/cascader/test/index.spec.ts

@@ -0,0 +1,170 @@
+import Cascader from '..';
+import { mount , later } from '../../../test';
+
+import options from '../demo/area-en-US';
+
+test('should emit change event when active option changed', async () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      options,
+    },
+  });
+
+  await later();
+  wrapper.find('.van-cascader__option').trigger('click');
+
+  const firstOption = options[0];
+  expect(wrapper.emitted('change')[0]).toEqual([
+    {
+      value: firstOption.value,
+      tabIndex: 0,
+      selectedOptions: [firstOption],
+    },
+  ]);
+
+  await later();
+  wrapper
+    .findAll('.van-cascader__options')[1]
+    .find('.van-cascader__option')
+    .trigger('click');
+  const secondOption = options[0].children[0];
+  expect(wrapper.emitted('change')[1]).toEqual([
+    {
+      value: secondOption.value,
+      tabIndex: 1,
+      selectedOptions: [firstOption, secondOption],
+    },
+  ]);
+});
+
+test('should emit finish event when all options is selected', async () => {
+  const option = { value: '1', text: 'foo' };
+  const wrapper = mount(Cascader, {
+    props: {
+      options: [option],
+    },
+  });
+
+  await later();
+  wrapper.find('.van-cascader__option').trigger('click');
+  expect(wrapper.emitted('finish')[0]).toEqual([
+    {
+      value: option.value,
+      tabIndex: 0,
+      selectedOptions: [option],
+    },
+  ]);
+});
+
+test('should emit close event when close icon is clicked', () => {
+  const wrapper = mount(Cascader);
+  wrapper.find('.van-cascader__close-icon').trigger('click');
+  expect(wrapper.emitted('close')[0]).toBeTruthy();
+});
+
+test('should not render close icon when closeable is false', () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      closeable: false,
+    },
+  });
+  expect(wrapper.find('.van-cascader__close-icon').exists()).toBeFalsy();
+});
+
+test('should render title slot correctly', () => {
+  const wrapper = mount(Cascader, {
+    slots: {
+      title: () => 'Custom Title',
+    },
+  });
+  expect(wrapper.find('.van-cascader__title').html()).toMatchSnapshot();
+});
+
+// TODO
+// test('should select correct option when value changed', async () => {
+//   const wrapper = mount(Cascader, {
+//     props: {
+//       options,
+//     },
+//   });
+
+//   await later();
+//   await wrapper.setProps({ modelValue: '330304' });
+//   await later();
+//   const selectedOptions = wrapper.findAll('.van-cascader__option--selected');
+//   const lastSelectedOption = selectedOptions[selectedOptions.length - 1];
+//   expect(lastSelectedOption.html()).toMatchSnapshot();
+// });
+
+test('should reset selected options when value is set to emtpy', async () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      options,
+      modelValue: '330304',
+    },
+  });
+
+  await wrapper.setProps({ modelValue: '' });
+  expect(wrapper.find('.van-cascader__option--selected').exists()).toBeFalsy();
+});
+
+test('should update tabs when previous tab is clicked', async () => {
+  const wrapper = mount(Cascader, {
+    props: {
+      options,
+      modelValue: '330304',
+    },
+  });
+
+  await later();
+  wrapper.findAll('.van-cascader__option')[1].trigger('click');
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should allow to custom field names', async () => {
+  const fieldNames = {
+    text: 'name',
+    value: 'code',
+    children: 'items',
+  };
+  const options = [
+    {
+      name: 'Zhejiang',
+      code: '330000',
+      items: [{ name: 'Hangzhou', code: '330100' }],
+    },
+  ];
+  const wrapper = mount(Cascader, {
+    props: {
+      options,
+      fieldNames,
+    },
+  });
+
+  await later();
+  wrapper.find('.van-cascader__option').trigger('click');
+
+  const firstOption = options[0];
+  expect(wrapper.emitted('change')[0]).toEqual([
+    {
+      value: firstOption.code,
+      tabIndex: 0,
+      selectedOptions: [firstOption],
+    },
+  ]);
+
+  await later();
+  wrapper
+    .findAll('.van-cascader__options')[1]
+    .find('.van-cascader__option')
+    .trigger('click');
+  const secondOption = options[0].items[0];
+  expect(wrapper.emitted('change')[1]).toEqual([
+    {
+      value: secondOption.code,
+      tabIndex: 1,
+      selectedOptions: [firstOption, secondOption],
+    },
+  ]);
+});