feat(Cascader): add field-names prop (#7933)

src/cascader/test/__snapshots__/demo.spec.js.snap

@@ -23,10 +23,6 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
-  </transition-stub>
-  <transition-stub>
-  </transition-stub>
 </div>
 <div>
   <div class="van-cell van-cell--clickable van-field"
@@ -50,10 +46,6 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
-  </transition-stub>
-  <transition-stub>
-  </transition-stub>
 </div>
 <div>
   <div class="van-cell van-cell--clickable van-field"
@@ -77,9 +69,28 @@ exports[`should render demo and match snapshot 1`] = `
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
   </div>
-  <transition-stub>
-  </transition-stub>
-  <transition-stub>
-  </transition-stub>
+</div>
+<div>
+  <div class="van-cell van-cell--clickable van-field"
+       role="button"
+       tabindex="0"
+  >
+    <div class="van-cell__title van-field__label">
+      <span>
+        Area
+      </span>
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body">
+        <input type="text"
+               class="van-field__control"
+               readonly
+               placeholder="Select Area"
+        >
+      </div>
+    </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
+  </div>
 </div>
 `;

src/cascader/test/index.spec.js

@@ -121,3 +121,50 @@ test('should update tabs when previous tab is clicked', async () => {
   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],
+    },
+  ]);
+});