Steps: add test (#561)

examples/docs/zh-cn/upload.md

@@ -46,7 +46,7 @@
 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
 ```html
 <el-upload
-  action="http://jsonplaceholder.typicode.com/posts/"
+  action="//jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove">
   <el-button size="small" type="primary">点击上传</el-button>
@@ -74,7 +74,7 @@
 ::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
 ```html
 <el-upload
-  action="http://jsonplaceholder.typicode.com/posts/"
+  action="//jsonplaceholder.typicode.com/posts/"
   type="drag"
   :multiple="true"
   :on-preview="handlePreview"
@@ -108,7 +108,7 @@
 ::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
 ```html
 <el-upload
-  action="http://jsonplaceholder.typicode.com/posts/"
+  action="//jsonplaceholder.typicode.com/posts/"
   type="drag"
   :thumbnail-mode="true"
   :on-preview="handlePreview"

packages/theme-default/src/step.css

@@ -36,14 +36,14 @@
       @when horizontal {
         top: 15px;
         height: 2px;
-        left: 32px;
+        left: 30px;
         right: 0;
       }
 
       @when vertical {
         width: 2px;
         box-sizing: border-box;
-        top: 32px;
+        top: 30px;
         bottom: 0;
       }
     }

test/unit/specs/steps.spec.js

@@ -0,0 +1,120 @@
+import { createVue } from '../util';
+import Vue from 'vue';
+
+describe('Steps', () => {
+  it('create', () => {
+    const vm = createVue(`
+      <el-steps>
+        <el-step title="step1"></el-step>
+        <el-step title="step2"></el-step>
+        <el-step title="step3"></el-step>
+      </el-steps>
+    `);
+
+    expect(vm.$el.querySelectorAll('.el-step')).to.length(3);
+  });
+
+  it('space', done => {
+    const vm = createVue(`
+      <el-steps>
+        <el-step title="step1"></el-step>
+        <el-step title="step2"></el-step>
+        <el-step title="step3"></el-step>
+        <el-step title="step4"></el-step>
+      </el-steps>
+    `);
+
+    const vm2 = createVue(`
+      <el-steps :space="100">
+        <el-step title="step1"></el-step>
+        <el-step title="step2"></el-step>
+        <el-step title="step3"></el-step>
+        <el-step title="step4"></el-step>
+      </el-steps>
+    `);
+
+    Vue.nextTick(_ => {
+      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.width').equal('25%');
+      expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.width').equal('100px');
+      done();
+    });
+  });
+
+  it('processStatus', done => {
+    const vm = createVue(`
+      <el-steps :active="1" process-status="error">
+        <el-step title="step1"></el-step>
+        <el-step title="step2"></el-step>
+        <el-step title="step3"></el-step>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
+      done();
+    });
+  });
+
+  it('finishStatus', done => {
+    const vm = createVue(`
+      <el-steps :active="1" finish-status="error">
+        <el-step title="abc"></el-step>
+        <el-step title="abc2"></el-step>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(1);
+      done();
+    });
+  });
+
+  it('active', done => {
+    const vm = createVue({
+      template: `
+        <el-steps :active="active" finish-status="error">
+          <el-step title="abc"></el-step>
+          <el-step title="abc2"></el-step>
+        </el-steps>
+      `,
+
+      data() {
+        return { active: 0 };
+      }
+    });
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(0);
+      vm.active = 2;
+      vm.$nextTick(_ => {
+        expect(vm.$el.querySelectorAll('.el-step__head.is-error')).to.length(2);
+        done();
+      });
+    });
+  });
+
+  it('create vertical', () => {
+    const vm = createVue(`
+      <el-steps direction="vertical">
+        <el-step title="aaa"></el-step>
+        <el-step title="bbb"></el-step>
+      </el-steps>
+    `);
+
+    expect(vm.$el.querySelector('.is-vertical')).to.exist;
+  });
+
+  it('vertical:height', done => {
+    const vm = createVue(`
+      <el-steps direction="vertical" :space="200">
+        <el-step title="aaa"></el-step>
+        <el-step title="bbb"></el-step>
+      </el-steps>
+    `);
+
+    vm.$nextTick(_ => {
+      expect(vm.$el.querySelector('.el-step')).have.deep.property('style.height').equal('200px');
+      done();
+    });
+  });
+});