Merge branch 'feature/add_test' into 'master'

Feature/add test



See merge request !16

package.json

@@ -47,6 +47,7 @@
   "devDependencies": {
     "2webpack2": "^1.2.1",
     "autoprefixer": "^6.7.5",
+    "avoriaz": "^1.9.1",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.17.0",
     "babel-eslint": "^6.1.2",

packages/switch/src/switch.vue

@@ -8,6 +8,7 @@
 </template>
 
 <script>
+import ZanLoading from 'packages/loading';
 /**
  * zan-switch
  * @module components/switch
@@ -21,6 +22,9 @@
  */
 export default {
   name: 'zan-switch',
+  components: {
+    'zan-loading': ZanLoading
+  },
   props: {
     checked: {
       type: Boolean,

test/unit/creater.js

@@ -1,57 +0,0 @@
-import Vue from 'vue';
-
-let id = 0;
-
-class Creater {
-  constructor(Compo, propsData) {
-    let Ctor = Vue.extend(Compo);
-    this.vue = new Ctor({ propsData });
-    this.el = null;
-  }
-
-  mount() {
-    const elem = exports.createElm();
-    this.vue.$mount(elem);
-    this.el = this.vue.$el;
-  }
-
-  triggerEvent(name, ...opts) {
-    let eventName;
-    let elem = this.el;
-
-    if (/^mouse|click/.test(name)) {
-      eventName = 'MouseEvents';
-    } else if (/^key/.test(name)) {
-      eventName = 'KeyboardEvent';
-    } else {
-      eventName = 'HTMLEvents';
-    }
-    const evt = document.createEvent(eventName);
-
-    evt.initEvent(name, ...opts);
-    elem.dispatchEvent
-      ? elem.dispatchEvent(evt)
-      : elem.fireEvent('on' + name, evt);
-
-    return elem;
-  }
-
-  destroy() {
-    this.el &&
-    this.el.parentNode &&
-    this.el.parentNode.removeChild(this.el);
-  }
-}
-
-exports.createElm = function() {
-  const elm = document.createElement('div');
-
-  elm.id = 'app' + ++id;
-  document.body.appendChild(elm);
-
-  return elm;
-};
-
-exports.createVue = function(Compo, propsData = {}) {
-  return new Creater(Compo, propsData);
-};

test/unit/specs/actionsheet.spec.js

@@ -1,16 +1,17 @@
-import { createVue } from '../creater';
 import ActionSheet from 'packages/actionsheet';
+import { mount } from 'avoriaz';
 
 describe('ActionSheet', () => {
-  let vm;
+  let wrapper;
   afterEach(() => {
-    vm && vm.destroy();
+    wrapper && wrapper.destroy();
   });
 
   it('create', () => {
-    vm = createVue(ActionSheet);
-    vm.mount();
+    wrapper = mount(ActionSheet, {
+      propsData: {}
+    });
 
-    expect(vm.el.classList.contains('zan-actionsheet')).to.true;
+    expect(wrapper.hasClass('zan-actionsheet')).to.be.true;
   });
 });

test/unit/specs/card.spec.js

@@ -1,20 +1,19 @@
-import { createVue } from '../creater';
 import Card from 'packages/card';
+import { mount } from 'avoriaz';
 
 describe('Card', () => {
-  let vm;
+  let wrapper;
   afterEach(() => {
-    vm && vm.destroy();
+    wrapper && wrapper.destroy();
   });
 
   it('create', () => {
-    vm = createVue(Card, {
-      title: 'card',
-      desc: 'card',
-      thumb: 'https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg'
+    wrapper = mount(Card, {
+      propsData: {
+        thumb: 'thumb'
+      }
     });
-    vm.mount();
 
-    expect(vm.el.classList.contains('zan-card')).to.true;
+    expect(wrapper.hasClass('zan-card')).to.be.true;
   });
 });

test/unit/specs/cell.spec.js

@@ -1,16 +1,17 @@
-import { createVue } from '../creater';
 import CellGroup from 'packages/cell-group';
+import { mount } from 'avoriaz';
 
-describe('Cell', () => {
-  let vm;
+describe('CellGroup', () => {
+  let wrapper;
   afterEach(() => {
-    vm && vm.destroy();
+    wrapper && wrapper.destroy();
   });
 
-  it('cell group create', () => {
-    vm = createVue(CellGroup);
-    vm.mount();
+  it('create', () => {
+    wrapper = mount(CellGroup, {
+      propsData: {}
+    });
 
-    expect(vm.el.classList.contains('zan-cell-group')).to.true;
+    expect(wrapper.hasClass('zan-cell-group')).to.be.true;
   });
 });

test/unit/specs/checkbox.spec.js

@@ -1,16 +1,17 @@
-import { createVue } from '../creater';
 import Checkbox from 'packages/checkbox';
+import { mount } from 'avoriaz';
 
 describe('Checkbox', () => {
-  let vm;
+  let wrapper;
   afterEach(() => {
-    vm && vm.destroy();
+    wrapper && wrapper.destroy();
   });
 
   it('create', () => {
-    vm = createVue(Checkbox);
-    vm.mount();
+    wrapper = mount(Checkbox, {
+      propsData: {}
+    });
 
-    expect(vm.el.classList.contains('zan-checkbox')).to.true;
+    expect(wrapper.hasClass('zan-checkbox')).to.be.true;
   });
 });

test/unit/specs/field.spec.js

@@ -1,16 +1,17 @@
-import { createVue } from '../creater';
 import Field from 'packages/field';
+import { mount } from 'avoriaz';
 
 describe('Field', () => {
-  let vm;
+  let wrapper;
   afterEach(() => {
-    vm && vm.destroy();
+    wrapper && wrapper.destroy();
   });
 
   it('create', () => {
-    vm = createVue(Field);
-    vm.mount();
+    wrapper = mount(Field, {
+      propsData: {}
+    });
 
-    expect(vm.el.classList.contains('zan-field')).to.true;
+    expect(wrapper.hasClass('zan-field')).to.be.true;
   });
 });

test/unit/specs/loading.spec.js

@@ -0,0 +1,67 @@
+import Loading from 'packages/loading';
+import { mount } from 'avoriaz';
+
+describe('Loading', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create default', () => {
+    wrapper = mount(Loading);
+
+    expect(wrapper.hasClass('zan-loading')).to.be.true;
+  });
+
+  it('create gradient-circle black', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'gradient-circle',
+        color: 'black'
+      }
+    });
+    const spinner = wrapper.find('.zan-loading__spinner')[0];
+
+    expect(spinner.hasClass('zan-loading__spinner--gradient-circle')).to.be.true;
+    expect(spinner.hasClass('zan-loading__spinner--black')).to.be.true;
+  });
+
+  it('create gradient-circle white', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'gradient-circle',
+        color: 'white'
+      }
+    });
+    const spinner = wrapper.find('.zan-loading__spinner')[0];
+
+    expect(spinner.hasClass('zan-loading__spinner--gradient-circle')).to.be.true;
+    expect(spinner.hasClass('zan-loading__spinner--white')).to.be.true;
+  });
+
+  it('create circle black', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'circle',
+        color: 'black'
+      }
+    });
+    const spinner = wrapper.find('.zan-loading__spinner')[0];
+
+    expect(spinner.hasClass('zan-loading__spinner--circle')).to.be.true;
+    expect(spinner.hasClass('zan-loading__spinner--black')).to.be.true;
+  });
+
+  it('create circle white', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'circle',
+        color: 'white'
+      }
+    });
+    const spinner = wrapper.find('.zan-loading__spinner')[0];
+
+    expect(spinner.hasClass('zan-loading__spinner--circle')).to.be.true;
+    expect(spinner.hasClass('zan-loading__spinner--white')).to.be.true;
+  });
+});

test/unit/specs/switch.spec.js

@@ -1,83 +1,100 @@
 import Switch from 'packages/switch';
-import { createVue } from '../creater';
+import ZanLoading from 'packages/loading';
+import { mount } from 'avoriaz';
+// import { stub } from 'sinon';
 
 describe('Switch', () => {
-  let vm;
+  let wrapper;
+
   afterEach(() => {
-    vm && vm.destroy();
+    wrapper && wrapper.destroy();
   });
 
-  it('create', () => {
-    vm = createVue(Switch, {
-      checked: true
+  it('create on switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        checked: true
+      }
     });
-    vm.mount();
 
-    expect(vm.el.classList.contains('zan-switch')).to.true;
-    expect(vm.el.classList.contains('zan-switch--on')).to.true;
+    expect(wrapper.hasClass('zan-switch')).to.be.true;
+    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
   });
 
   it('create off switch', () => {
-    vm = createVue(Switch, {
-      checked: false
-    });
-    vm.mount();
-
-    expect(vm.el.classList.contains('zan-switch')).to.true;
-  });
-
-  it('switch click default', done => {
-    vm = createVue({
-      data() {
-        return {
-          checked: false
-        };
-      },
-      components: {
-        'zan-switch': Switch
-      },
-      template: `
-        <zan-switch :checked="checked"></zan-switch>
-      `
-    });
-    vm.mount();
-    expect(vm.el.classList.contains('zan-switch')).to.true;
-    expect(vm.el.classList.contains('zan-switch--off')).to.true;
-    vm.el.click();
-
-    setTimeout(() => {
-      expect(vm.el.classList.contains('zan-switch--off')).to.true;
-      done();
-    });
-  });
-
-  it('switch click', done => {
-    vm = createVue({
-      data() {
-        return {
-          checked: false
-        };
-      },
-      components: {
-        'zan-switch': Switch
-      },
-      template: `
-        <zan-switch :checked="checked" :onChange="handleClick"></zan-switch>
-      `,
-      methods: {
-        handleClick(e) {
-          this.checked = !this.checked;
-        }
+    wrapper = mount(Switch, {
+      propsData: {
+        checked: false
       }
     });
-    vm.mount();
-    expect(vm.el.classList.contains('zan-switch')).to.true;
-    expect(vm.el.classList.contains('zan-switch--off')).to.true;
-    vm.el.click();
 
-    setTimeout(() => {
-      expect(vm.el.classList.contains('zan-switch--on')).to.true;
-      done();
+    expect(wrapper.hasClass('zan-switch')).to.be.true;
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+  });
+
+  it('create loading switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        loading: true
+      }
     });
+    const loading = wrapper.find(ZanLoading)[0];
+
+    expect(wrapper.hasClass('zan-switch')).to.be.true;
+    expect(loading.isVueComponent).to.be.true;
+  });
+
+  it('loading switch should be unclickable', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        loading: true,
+        checked: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('zan-switch--on')).to.be.true;
+  });
+
+  it('create disabled switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('zan-switch')).to.be.true;
+    expect(wrapper.hasClass('zan-switch--disabled')).to.be.true;
+  });
+
+  it('disabled switch should be unclickable', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        disabled: true,
+        checked: false
+      }
+    });
+
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+  });
+
+  it('click event should fire change event', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        checked: false
+      },
+      methods: {
+
+      }
+    });
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    expect(wrapper.hasClass('zan-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('change')).to.be.true;
   });
 });