improve tests (#3033)

examples/docs/en-US/cascader.md

@@ -474,7 +474,8 @@ There are two ways to expand child option items.
             label: 'Design Documentation'
           }]
         }],
-        selectedOptions: []
+        selectedOptions: [],
+        selectedOptions2: []
       };
     },
     methods: {

examples/docs/zh-CN/cascader.md

@@ -505,7 +505,8 @@
             label: '组件交互文档'
           }]
         }],
-        selectedOptions: []
+        selectedOptions: [],
+        selectedOptions2: []
       };
     },
     methods: {

packages/color-picker/src/components/sv-panel.vue

@@ -47,11 +47,9 @@
         this.cursorTop = (100 - value) * height / 100;
 
         this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
-      }
       },
 
-    mounted() {
-      const handleDrag = (event) => {
+      handleDrag(event) {
         const el = this.$el;
         const rect = el.getBoundingClientRect();
 
@@ -69,14 +67,16 @@
           saturation: left / rect.width * 100,
           value: 100 - top / rect.height * 100
         });
-      };
+      }
+    },
 
+    mounted() {
       draggable(this.$el, {
         drag: (event) => {
-          handleDrag(event);
+          this.handleDrag(event);
         },
         end: (event) => {
-          handleDrag(event);
+          this.handleDrag(event);
         }
       });
 

packages/theme-default/src/color-picker.css

@@ -209,6 +209,7 @@
       padding: 6px;
       border: 1px solid #bfcbd9;
       border-radius: 4px;
+      font-size: 0;
     }
 
     @descendent color {
@@ -237,7 +238,7 @@
     @descendent empty {
       font-size: 12px;
       vertical-align: middle;
-      margin-top: -2px;
+      margin-top: 4px;
       color: #666;
     }
 
@@ -248,6 +249,7 @@
       margin-left: 8px;
       width: 12px;
       color: #888;
+      font-size: 12px;
     }
 
     @descendent panel {

test/unit/specs/carousel.spec.js

@@ -138,7 +138,7 @@ describe('Carousel', () => {
       vm = createVue({
         template: `
         <div>
-          <el-carousel :autoplay="false" trigger="click">
+          <el-carousel :autoplay="false" trigger="click" ref="carousel">
             <el-carousel-item v-for="item in 3"></el-carousel-item>
           </el-carousel>
         </div>
@@ -147,9 +147,11 @@ describe('Carousel', () => {
 
       setTimeout(() => {
         const items = vm.$el.querySelectorAll('.el-carousel__item');
+        const carousel = vm.$refs.carousel;
         vm.$el.querySelectorAll('.el-carousel__indicator')[2].click();
         setTimeout(() => {
           expect(items[2].classList.contains('is-active')).to.true;
+          carousel.handleButtonEnter('right');
           vm.$el.querySelector('.el-carousel__arrow--right').click();
           setTimeout(() => {
             expect(items[0].classList.contains('is-active')).to.true;

test/unit/specs/color-picker.spec.js

@@ -11,7 +11,7 @@ describe('ColorPicker', () => {
     if (dropdown && dropdown.parentNode) dropdown.parentNode.removeChild(dropdown);
   });
 
-  it('should works', () => {
+  it('should work', () => {
     vm = createTest(ColorPicker, true);
     expect(vm.$el).to.exist;
   });
@@ -133,5 +133,87 @@ describe('ColorPicker', () => {
       }, 30);
     }, ANIMATION_TIME);
   });
+
+  it('should change hue when clicking the hue bar', (done) => {
+    const vm = createVue({
+      template: `
+        <el-color-picker v-model="color"></el-color-picker>
+      `,
+
+      data() {
+        return {
+          color: '#f00'
+        };
+      }
+    }, true);
+
+    const trigger = vm.$el.querySelector('.el-color-picker__trigger');
+    trigger.click();
+
+    setTimeout(() => {
+      const hueBar = document.querySelector('.el-color-hue-slider');
+      hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });
+      vm.$nextTick(() => {
+        const picker = vm.$children[0];
+        expect(picker.color._hue > 0).to.true;
+        done();
+      });
+    }, ANIMATION_TIME);
+  });
+
+  it('should change alpha when clicking the alpha bar', (done) => {
+    const vm = createVue({
+      template: `
+        <el-color-picker v-model="color" show-alpha></el-color-picker>
+      `,
+
+      data() {
+        return {
+          color: '#f00'
+        };
+      }
+    }, true);
+
+    const trigger = vm.$el.querySelector('.el-color-picker__trigger');
+    trigger.click();
+
+    setTimeout(() => {
+      const alphaBar = document.querySelector('.el-color-alpha-slider');
+      alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });
+      vm.$nextTick(() => {
+        const picker = vm.$children[0];
+        expect(picker.color._alpha < 1).to.true;
+        done();
+      });
+    }, ANIMATION_TIME);
+  });
+
+  it('should change saturation and value when clicking the sv-panel', (done) => {
+    const vm = createVue({
+      template: `
+        <el-color-picker v-model="color" color-format="hsv"></el-color-picker>
+      `,
+
+      data() {
+        return {
+          color: 'hsv(0, 50%, 50%)'
+        };
+      }
+    }, true);
+
+    const trigger = vm.$el.querySelector('.el-color-picker__trigger');
+    trigger.click();
+
+    setTimeout(() => {
+      const svPanel = document.querySelector('.el-color-svpanel');
+      svPanel.__vue__.handleDrag({ clientX: 0, clientY: 0 });
+      vm.$nextTick(() => {
+        const picker = vm.$children[0];
+        expect(picker.color._saturation !== 50).to.true;
+        expect(picker.color._value !== 50).to.true;
+        done();
+      });
+    }, ANIMATION_TIME);
+  });
 });
 

test/unit/specs/menu.spec.js

@@ -146,7 +146,8 @@ describe('Menu', () => {
       });
     });
   });
-  describe('submenu', () => {
+  describe('submenu', function() {
+    this.timeout(3000);
     it('toggle', done => {
       vm = createVue({
         template: `