Slider: add test

Author: Leopoldthecoder

.eslintrc

@@ -1,4 +1,11 @@
 {
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  },
   "plugins": ['vue'],
   "extends": 'elemefe',
   "parserOptions": {

build/cooking.test.js

@@ -1,24 +1,23 @@
 var path = require('path');
 var cooking = require('cooking');
 var config = require('./config');
-var projectRoot = path.resolve(__dirname, '../');
 var ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
 cooking.set({
   entry: './src/index.js',
-  extends: ['vue2'],
+  extends: ['vue2', 'lint'],
   minimize: false,
   alias: config.alias,
   postcss: config.postcss,
   sourceMap: '#inline-source-map'
 });
 
-cooking.add('vue.loaders.js', 'isparta');
+cooking.add('vue.loaders.js', 'isparta-loader!eslint-loader');
 cooking.add('loader.js.exclude', config.jsexclude);
 cooking.add('preLoader.js', {
   test: /\.js$/,
-  loader: 'isparta-loader',
-  include: path.resolve(projectRoot, 'src')
+  loader: 'isparta-loader!eslint-loader',
+  exclude: config.jsexclude
 });
 
 cooking.add('plugins.process', new ProgressBarPlugin());

packages/slider/src/main.vue

@@ -15,7 +15,12 @@
       :class="{ 'show-input': showInput }"
       @click="onSliderClick" ref="slider">
       <div class="el-slider__bar" :style="{ width: currentPosition }"></div>
-      <div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" ref="button">
+      <div
+        class="el-slider__button-wrapper"
+        @mouseenter="hovering = true"
+        @mouseleave="hovering = false"
+        @mousedown="onButtonDown"
+        :style="{left: currentPosition}" ref="button">
         <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
       </div>
       <transition name="popper-fade">
@@ -77,6 +82,9 @@
         showTip: false,
         hovering: false,
         dragging: false,
+        startX: 0,
+        currentX: 0,
+        startPos: 0,
         popper: null,
         newPos: null,
         oldValue: this.value,
@@ -174,6 +182,36 @@
         if (!isNaN(this.value)) {
           this.setPosition((this.value - this.min) * 100 / (this.max - this.min));
         }
+      },
+
+      onDragStart(event) {
+        this.dragging = true;
+        this.startX = event.clientX;
+        this.startPos = parseInt(this.currentPosition, 10);
+      },
+
+      onDragging(event) {
+        if (this.dragging) {
+          this.currentX = event.clientX;
+          var diff = (this.currentX - this.startX) / this.$sliderWidth * 100;
+          this.newPos = this.startPos + diff;
+          this.setPosition(this.newPos);
+        }
+      },
+
+      onDragEnd() {
+        if (this.dragging) {
+          this.dragging = false;
+          this.setPosition(this.newPos);
+          window.removeEventListener('mousemove', this.onDragging);
+          window.removeEventListener('mouseup', this.onDragEnd);
+        }
+      },
+
+      onButtonDown(event) {
+        this.onDragStart(event);
+        window.addEventListener('mousemove', this.onDragging);
+        window.addEventListener('mouseup', this.onDragEnd);
       }
     },
 
@@ -198,47 +236,15 @@
       }
     },
 
-    mounted() {
-      var startX = 0;
-      var currentX = 0;
-      var startPos = 0;
-
-      var onDragStart = event => {
-        this.dragging = true;
-        startX = event.clientX;
-        startPos = parseInt(this.currentPosition, 10);
-      };
-
-      var onDragging = event => {
-        if (this.dragging) {
-          currentX = event.clientX;
-          var diff = (currentX - startX) / this.$sliderWidth * 100;
-          this.newPos = startPos + diff;
-          this.setPosition(this.newPos);
-        }
-      };
-
-      var onDragEnd = () => {
-        if (this.dragging) {
-          this.dragging = false;
-          this.setPosition(this.newPos);
-          window.removeEventListener('mousemove', onDragging);
-          window.removeEventListener('mouseup', onDragEnd);
-        }
-      };
-
-      this.$refs.button.addEventListener('mousedown', function(event) {
-        onDragStart(event);
-        window.addEventListener('mousemove', onDragging);
-        window.addEventListener('mouseup', onDragEnd);
-      });
-    },
-
     created() {
-      if (typeof this.value !== 'number' || this.value < this.min || this.value > this.max) {
+      if (typeof this.value !== 'number' || this.value < this.min) {
         this.$emit('input', this.min);
+      } else if (this.value > this.max) {
+        this.$emit('input', this.max);
       }
-      this.inputValue = this.inputValue || this.value;
+      this.$nextTick(() => {
+        this.inputValue = this.inputValue || this.value;
+      });
     },
 
     beforeDestroy() {

packages/switch/src/component.vue

@@ -80,6 +80,7 @@
     },
     computed: {
       hasText() {
+        /* istanbul ignore next */
         return this.onText || this.offText;
       }
     },
@@ -107,6 +108,7 @@
       }
     },
     mounted() {
+      /* istanbul ignore if */
       if (this.width === 0) {
         this.coreWidth = this.hasText ? 58 : 46;
       }

packages/upload/src/iframe-upload.vue

@@ -71,7 +71,7 @@ export default {
     getIframeHTML(domain) {
       let domainScript = '';
       if (domain) {
-        domainScript = `<script>document.domain="${domain}";<` + '/script>';
+        domainScript = '<script' + `>document.domain="${domain}";<` + '/script>';
       }
       return `
       <!DOCTYPE html>

test/unit/.eslintrc

@@ -0,0 +1,130 @@
+import { createTest, createVue } from '../util';
+import Slider from 'packages/slider';
+import Vue from 'vue';
+
+describe('Slider', () => {
+  it('create', () => {
+    const vm = createTest(Slider);
+    const popup = vm.$el.querySelector('.el-slider__pop');
+    expect(popup.textContent).to.equal('0');
+  });
+
+  it('should not exceed min and max', done => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value" :min="50">
+          </el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 50
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      vm.value = 40;
+      Vue.nextTick(() => {
+        expect(vm.value).to.equal(50);
+        vm.value = 120;
+        Vue.nextTick(() => {
+          expect(vm.value).to.equal(100);
+          done();
+        });
+      });
+    }, 100);
+  });
+
+  it('show tooltip', () => {
+    const vm = createTest(Slider);
+    const popup = vm.$el.querySelector('.el-slider__pop');
+    vm.onDragStart({ clientX: 0 });
+    expect(getComputedStyle(popup).display).to.not.equal('none');
+    vm.onDragEnd();
+    expect(popup.style.display).to.equal('none');
+  });
+
+  it('drag', done => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value"></el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      }
+    }, true);
+    const slider = vm.$children[0];
+    setTimeout(() => {
+      slider.onButtonDown({ clientX: 0 });
+      slider.onDragging({ clientX: 100 });
+      slider.onDragEnd();
+      expect(vm.value > 0).to.true;
+      done();
+    }, 150);
+  });
+
+  it('click', done => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value"></el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      }
+    }, true);
+    const slider = vm.$children[0];
+    setTimeout(() => {
+      slider.onSliderClick({ clientX: 100 });
+      setTimeout(() => {
+        expect(vm.value > 0).to.true;
+        done();
+      }, 150);
+    }, 150);
+  });
+
+  it('show input', done => {
+    const vm = createVue({
+      template: `
+        <div>
+          <el-slider v-model="value" show-input></el-slider>
+        </div>
+      `,
+
+      data() {
+        return {
+          value: 0
+        };
+      }
+    }, true);
+    setTimeout(() => {
+      const inputNumber = vm.$el.querySelector('.el-input-number').__vue__;
+      inputNumber.currentValue = 40;
+      setTimeout(() => {
+        expect(vm.value).to.equal(40);
+        done();
+      }, 150);
+    }, 150);
+  });
+
+  it('show stops', done => {
+    const vm = createTest(Slider, {
+      showStops: true,
+      step: 10
+    }, true);
+    const stops = vm.$el.querySelectorAll('.el-slider__stop');
+    expect(stops.length).to.equal(9);
+    done();
+  });
+});