add cascader test

examples/docs/en-US/cascader.md

@@ -425,7 +425,7 @@ Search and select options directly.
 <el-cascader
   placeholder="Please select"
   :options="options"
-  show-search
+  filterable
 ></el-cascader>
 <script>
   module.exports = {
@@ -478,7 +478,7 @@ Search and select options directly.
 | disabled  | 是否禁用    | boolean   |  — | false   |
 | allowClear  | whether allow clear    | boolean   |  — | false   |
 | expand-trigger  | trigger mode of expandind the current item | string | click / hover | 'click'   |
-| showSearch  | whether the options can be searched | boolean | — | — |
+| filterable  | whether the options can be searched | boolean | — | — |
 | size  | size | string | large / small / mini | — |
 
 ### Events

examples/docs/zh-CN/cascader.md

@@ -10,16 +10,16 @@
             label: 'Hangzhou',
             children: [{
               value: 'xihu',
-              label: 'West Lake',
-            }],
+              label: 'West Lake'
+            }]
           }, {
             value: 'ningbo',
             label: 'NingBo',
             children: [{
               value: 'jiangbei',
-              label: 'Jiang Bei',
-            }],
-          }],
+              label: 'Jiang Bei'
+            }]
+          }]
         }, {
           value: 'jiangsu',
           label: 'Jiangsu',
@@ -28,9 +28,9 @@
             label: 'Nanjing',
             children: [{
               value: 'zhonghuamen',
-              label: 'Zhong Hua Men',
-            }],
-          }],
+              label: 'Zhong Hua Men'
+            }]
+          }]
         }],
         optionsWithDisabled: [{
           value: 'zhejiang',
@@ -41,16 +41,16 @@
             label: 'Hangzhou',
             children: [{
               value: 'xihu',
-              label: 'West Lake',
-            }],
+              label: 'West Lake'
+            }]
           }, {
             value: 'ningbo',
             label: 'NingBo',
             children: [{
               value: 'jiangbei',
-              label: 'Jiang Bei',
-            }],
-          }],
+              label: 'Jiang Bei'
+            }]
+          }]
         }, {
           value: 'jiangsu',
           label: 'Jiangsu',
@@ -59,9 +59,9 @@
             label: 'Nanjing',
             children: [{
               value: 'zhonghuamen',
-              label: 'Zhong Hua Men',
-            }],
-          }],
+              label: 'Zhong Hua Men'
+            }]
+          }]
         }],
         selectedOptions: [],
         selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
@@ -429,7 +429,7 @@
 <el-cascader
   placeholder="请选择"
   :options="options"
-  show-search
+  filterable
 ></el-cascader>
 <script>
   module.exports = {
@@ -482,7 +482,7 @@
 | disabled  | 是否禁用    | boolean   |  — | false   |
 | allowClear  | 是否支持清除    | boolean   |  — | false   |
 | expand-trigger  | 次级菜单的展开方式 | string | click / hover | 'click'   |
-| showSearch  | 是否支持搜索选项 | boolean | — | — |
+| filterable  | 是否支持搜索选项 | boolean | — | — |
 | size  | 尺寸 | string | large / small / mini | — |
 
 ### Events

packages/cascader/src/main.vue

@@ -15,7 +15,7 @@
     v-clickoutside="handleClickoutside"
   >
     <el-input
-      :readonly="!showSearch"
+      :readonly="!filterable"
       :placeholder="displayValue ? undefined : placeholder"
       v-model="inputValue"
       @change="handleInputChange"
@@ -100,7 +100,7 @@ export default {
       type: String,
       default: 'click'
     },
-    showSearch: Boolean,
+    filterable: Boolean,
     size: String
   },
 
@@ -111,7 +111,7 @@ export default {
       menuVisible: false,
       inputHover: false,
       inputValue: '',
-      flatOptions: this.showSearch && this.flattenOptions(this.options)
+      flatOptions: this.filterable && this.flattenOptions(this.options)
     };
   },
 
@@ -125,6 +125,9 @@ export default {
     currentValue(value) {
       this.displayValue = value.join('/');
       this.dispatch('ElFormItem', 'el.form.change', [value]);
+    },
+    options(value) {
+      this.menu.options = value;
     }
   },
 

test/unit/specs/cascader.spec.js

@@ -1,5 +1,4 @@
-import { createTest, destroyVM } from '../util';
-import Cascader from 'packages/cascader';
+import { createVue, destroyVM, triggerEvent } from '../util';
 
 describe('Cascader', () => {
   let vm;
@@ -7,9 +6,457 @@ describe('Cascader', () => {
     destroyVM(vm);
   });
 
-  it('create', () => {
-    vm = createTest(Cascader, true);
-    expect(vm.$el).to.exist;
+  it('create', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    vm.$el.click();
+    setTimeout(_ => {
+      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
+
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      item1.click();
+      menu.$nextTick(_ => {
+        expect(menuElm.children.length).to.be.equal(2);
+        expect(item1.classList.contains('is-active')).to.be.true;
+
+        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        item2.click();
+
+        menu.$nextTick(_ => {
+          expect(menuElm.children.length).to.be.equal(3);
+          expect(item2.classList.contains('is-active')).to.be.true;
+
+          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          item3.click();
+
+          setTimeout(_ => {
+            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
+            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+            expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
+            expect(vm.selectedOptions[2]).to.be.equal('xihu');
+            done();
+          }, 500);
+        });
+      });
+    }, 300);
   });
-});
+  it('disabled options', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            disabled: true,
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    vm.$el.click();
+    setTimeout(_ => {
+      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
+
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      item1.click();
+      menu.$nextTick(_ => {
+        expect(menuElm.children.length).to.be.equal(1);
+        expect(item1.classList.contains('is-active')).to.be.false;
+        done();
+      });
+    }, 300);
+  });
+  it('default value', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: ['zhejiang', 'hangzhou', 'xihu']
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    vm.$el.click();
+    setTimeout(_ => {
+      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
+
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.children[0].querySelector('.el-cascader-menu__item');
+      const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+      const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+
+      expect(menuElm.children.length).to.be.equal(3);
+      expect(item1.classList.contains('is-active')).to.be.true;
+      expect(item2.classList.contains('is-active')).to.be.true;
+      expect(item3.classList.contains('is-active')).to.be.true;
+
+      document.body.click();
+      setTimeout(_ => {
+        expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
+        done();
+      }, 500);
+    }, 300);
+  });
+  it('expand by hover', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          expand-trigger="hover"
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    vm.$el.click();
+    setTimeout(_ => {
+      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
+
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      triggerEvent(item1, 'mouseenter');
+      menu.$nextTick(_ => {
+        expect(menuElm.children.length).to.be.equal(2);
+        expect(item1.classList.contains('is-active')).to.be.true;
+
+        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        triggerEvent(item2, 'mouseenter');
 
+        menu.$nextTick(_ => {
+          expect(menuElm.children.length).to.be.equal(3);
+          expect(item2.classList.contains('is-active')).to.be.true;
+
+          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          item3.click();
+
+          setTimeout(_ => {
+            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
+            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+            expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
+            expect(vm.selectedOptions[2]).to.be.equal('xihu');
+            done();
+          }, 500);
+        });
+      });
+    }, 300);
+  });
+  it('change on select', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          change-on-select
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    vm.$el.click();
+    setTimeout(_ => {
+      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
+
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      item1.click();
+      menu.$nextTick(_ => {
+        expect(menuElm.children.length).to.be.equal(2);
+        expect(item1.classList.contains('is-active')).to.be.true;
+        expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+
+        const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
+        item2.click();
+
+        menu.$nextTick(_ => {
+          expect(menuElm.children.length).to.be.equal(3);
+          expect(item2.classList.contains('is-active')).to.be.true;
+          expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
+
+          const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
+          item3.click();
+
+          setTimeout(_ => {
+            expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
+            expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+            expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
+            expect(vm.selectedOptions[2]).to.be.equal('xihu');
+            done();
+          }, 500);
+        });
+      });
+    }, 300);
+  });
+  it('filterable', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          filterable
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    expect(vm.$el).to.be.exist;
+    vm.$refs.cascader.inputValue = 'z';
+    vm.$el.click();
+
+    setTimeout(_ => {
+      expect(document.body.querySelector('.el-cascader-menus')).to.be.exist;
+
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      expect(menuElm.children.length).to.be.equal(1);
+      expect(menuElm.children[0].children.length).to.be.equal(1);
+      done();
+
+      item1.click();
+
+      setTimeout(_ => {
+        expect(document.body.querySelector('.el-cascader-menus').style.display).to.be.equal('none');
+        expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+        expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
+        expect(vm.selectedOptions[2]).to.be.equal('xihu');
+        done();
+      }, 500);
+    }, 300);
+  });
+});