vant components

test/unit/specs/actionsheet.spec.js

@@ -0,0 +1,118 @@
+import ActionSheet from 'packages/actionsheet';
+import { mount } from 'avoriaz';
+
+describe('ActionSheet', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {}
+    });
+
+    expect(wrapper.hasClass('van-actionsheet')).to.be.true;
+    expect(wrapper.contains('.van-actionsheet__list')).to.be.true;
+    expect(wrapper.instance().actions.length).to.equal(0);
+    expect(wrapper.instance().overlay).to.be.true;
+    expect(wrapper.instance().closeOnClickOverlay).to.be.true;
+  });
+
+  it('create displayed actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        value: true
+      }
+    });
+
+    expect(wrapper.instance().currentValue).to.be.true;
+  });
+
+  it('create title type actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        title: 'test'
+      }
+    });
+
+    expect(wrapper.hasClass('van-actionsheet--withtitle')).to.be.true;
+    expect(wrapper.contains('.van-actionsheet__header')).to.be.true;
+    expect(wrapper.contains('.van-actionsheet__content')).to.be.true;
+  });
+
+  it('create actions actionsheet', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        actions: [
+          {
+            name: '有赞E卡',
+            subname: '（剩余260.50元）'
+          },
+          {
+            name: '信用卡支付',
+            loading: true
+          }
+        ]
+      }
+    });
+
+    const actionItems = wrapper.find('.van-actionsheet__item');
+
+    expect(actionItems.length).to.equal(2);
+    expect(actionItems[0].contains('.van-actionsheet__name')).to.be.true;
+    expect(actionItems[0].contains('.van-actionsheet__subname')).to.be.true;
+    expect(actionItems[1].contains('.van-actionsheet__loading')).to.be.true;
+  });
+
+  it('handle actionsheet item click with callback', () => {
+    let called = false;
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        actions: [
+          {
+            name: '有赞E卡',
+            callback: () => {
+              called = true;
+            }
+          }
+        ]
+      }
+    });
+
+    const actionItem = wrapper.find('.van-actionsheet__item')[0];
+    actionItem.simulate('click');
+    expect(called).to.be.true;
+  });
+
+  it('create actionsheet with cancel button', () => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        cancelText: 'cancel'
+      }
+    });
+
+    const cancelButton = wrapper.find('.van-actionsheet__button')[0];
+    expect(wrapper.contains('.van-actionsheet__button')).to.be.true;
+    expect(cancelButton.text()).to.equal('cancel');
+  });
+
+  it('toggle actionsheet value from v-model', (done) => {
+    wrapper = mount(ActionSheet, {
+      propsData: {
+        value: false
+      }
+    });
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    expect(wrapper.data().currentValue).to.be.false;
+
+    wrapper.vm.value = true;
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().currentValue).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+});

test/unit/specs/badge.spec.js

@@ -0,0 +1,29 @@
+import { mount } from 'avoriaz';
+import BadgeTestComponent from '../components/badge';
+
+describe('BadgeGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a badge-group', () => {
+    wrapper = mount(BadgeTestComponent);
+
+    expect(wrapper.hasClass('van-badge-group')).to.be.true;
+
+    expect(wrapper.vNode.child.activeKey).to.equal(0);
+    expect(wrapper.vNode.child.badges.length).to.equal(2);
+  });
+
+  it('emit a click event when click badge', () => {
+    wrapper = mount(BadgeTestComponent);
+
+    const badge = wrapper.find('.van-badge')[0];
+    const eventStub = sinon.stub(badge.vNode.child, '$emit');
+    badge.simulate('click');
+
+    expect(eventStub.calledWith('click')).to.be.true;
+  });
+});
+

test/unit/specs/button.spec.js

@@ -0,0 +1,135 @@
+import Button from 'packages/button';
+import ZanLoading from 'packages/loading';
+import { mount } from 'avoriaz';
+
+describe('Button', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a simple button', () => {
+    wrapper = mount(Button);
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--default')).to.be.true;
+    expect(wrapper.hasClass('van-button--normal')).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('click')).to.be.true;
+  });
+
+  it('create a primary button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        type: 'primary'
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--primary')).to.be.true;
+  });
+
+  it('create a danger button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        type: 'danger'
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--danger')).to.be.true;
+  });
+
+  it('create a large button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        size: 'large'
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--large')).to.be.true;
+  });
+
+  it('create a small button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        size: 'small'
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--small')).to.be.true;
+  });
+
+  it('create a mini button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        size: 'mini'
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--mini')).to.be.true;
+  });
+
+  it('create a block button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        block: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--block')).to.be.true;
+  });
+
+  it('create a bottom action button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        bottomAction: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--bottom-action')).to.be.true;
+  });
+
+  it('create a disabled button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(wrapper.hasClass('van-button--disabled')).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.called).to.be.false;
+  });
+
+  it('create a loading button', () => {
+    wrapper = mount(Button, {
+      propsData: {
+        loading: true
+      }
+    });
+    const loading = wrapper.find(ZanLoading)[0];
+
+    expect(wrapper.hasClass('van-button')).to.be.true;
+    expect(loading.isVueComponent).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.called).to.be.false;
+  });
+});

test/unit/specs/card.spec.js

@@ -0,0 +1,19 @@
+import Card from 'packages/card';
+import { mount } from 'avoriaz';
+
+describe('Card', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create', () => {
+    wrapper = mount(Card, {
+      propsData: {
+        thumb: 'thumb'
+      }
+    });
+
+    expect(wrapper.hasClass('van-card')).to.be.true;
+  });
+});

test/unit/specs/cell.spec.js

@@ -0,0 +1,52 @@
+import CellGroup from 'packages/cell-group';
+import Cell from 'packages/cell';
+import { mount } from 'avoriaz';
+
+describe('CellGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a cell-group', () => {
+    wrapper = mount(CellGroup, {
+      propsData: {}
+    });
+
+    expect(wrapper.hasClass('van-cell-group')).to.be.true;
+  });
+});
+
+describe('Cell', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create', () => {
+    wrapper = mount(Cell);
+
+    expect(wrapper.hasClass('van-cell')).to.be.true;
+  });
+
+  it('create a required cell', () => {
+    wrapper = mount(Cell, {
+      propsData: {
+        required: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-cell')).to.be.true;
+    expect(wrapper.hasClass('van-cell--required')).to.be.true;
+  });
+
+  it('emit a click event', () => {
+    wrapper = mount(Cell);
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('click')).to.be.true;
+  });
+});

test/unit/specs/checkbox.spec.js

@@ -0,0 +1,131 @@
+import { mount } from 'avoriaz';
+import Checkbox from 'packages/checkbox';
+import CheckboxTestComponent from '../components/checkbox';
+
+describe('CheckboxGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a checkbox-group', () => {
+    wrapper = mount(CheckboxTestComponent);
+
+    expect(wrapper.hasClass('van-checkbox-group')).to.be.true;
+
+    expect(wrapper.vNode.child.value.length).to.equal(2);
+    expect(wrapper.vNode.child.disabled).to.be.false;
+  });
+
+  it('emit a change event', (done) => {
+    wrapper = mount(CheckboxTestComponent);
+
+    expect(wrapper.vNode.child.value.length).to.equal(2);
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    wrapper.setData({
+      'result': ['a']
+    });
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vNode.child.value.length).to.equal(1);
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
+  it('click on checked checkbox', (done) => {
+    wrapper = mount(CheckboxTestComponent);
+
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    const firstCheckboxLabel = wrapper.find('.van-checkbox')[0].find('.van-checkbox__label')[0];
+    firstCheckboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('click on unchecked checkbox', (done) => {
+    wrapper = mount(CheckboxTestComponent);
+
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
+    lastCheckboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+});
+
+describe('Checkbox', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a checkbox', () => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: false,
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
+    expect(wrapper.instance().currentValue).to.be.false;
+    expect(wrapper.instance().isDisabled).to.be.false;
+    expect(wrapper.instance().isChecked).to.be.false;
+  });
+
+  it('click on a checkbox', (done) => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: false,
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    checkboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('click on a disabled checkbox', () => {
+    wrapper = mount(Checkbox, {
+      propsData: {
+        value: false,
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-checkbox')).to.be.true;
+    expect(wrapper.hasClass('van-checkbox--disabled')).to.be.true;
+    expect(wrapper.instance().currentValue).to.be.false;
+    expect(wrapper.instance().isDisabled).to.be.true;
+
+    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    checkboxLabel.simulate('click');
+
+    expect(wrapper.instance().currentValue).to.be.false;
+  });
+});

test/unit/specs/field.spec.js

@@ -0,0 +1,118 @@
+import Field from 'packages/field';
+import { mount } from 'avoriaz';
+
+describe('Field', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a text field', () => {
+    wrapper = mount(Field, {
+      propsData: {
+        type: 'text',
+        autosize: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-field')).to.be.true;
+    expect(wrapper.propsData().type).to.equal('text');
+  });
+
+  it('create a text field with initialize value', (done) => {
+    wrapper = mount(Field, {
+      propsData: {
+        value: 'test'
+      }
+    });
+
+    expect(wrapper.hasClass('van-field')).to.be.true;
+    expect(wrapper.data().currentValue).to.equal('test');
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    wrapper.vm.value = 'test2';
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().currentValue).to.equal('test2');
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('focus on input', (done) => {
+    wrapper = mount(Field, {
+      propsData: {
+        value: ''
+      }
+    });
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    const input = wrapper.find('.van-field__control')[0];
+    input.simulate('focus');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledWith('focus'));
+      done();
+    });
+  });
+
+  it('input something to field', (done) => {
+    wrapper = mount(Field, {
+      propsData: {
+        value: ''
+      }
+    });
+
+    const input = wrapper.find('.van-field__control')[0];
+
+    input.element.value = 'test';
+    input.simulate('input');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().currentValue).to.equal('test');
+      done();
+    });
+  });
+
+  it('create a textarea field', () => {
+    wrapper = mount(Field, {
+      propsData: {
+        type: 'textarea',
+        autosize: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-field')).to.be.true;
+    expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
+  });
+
+  it('create a autosize textarea field', (done) => {
+    wrapper = mount(Field, {
+      propsData: {
+        type: 'textarea',
+        autosize: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-field')).to.be.true;
+    expect(wrapper.hasClass('van-field--autosize')).to.be.true;
+
+    const textarea = wrapper.find('.van-field__control')[0];
+    const textareaElement = textarea.element;
+    const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
+          parseInt(textareaElement.style.paddingTop, 10)) || 0;
+
+    textareaElement.value = 'test';
+    textarea.simulate('input');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().currentValue).to.equal('test');
+      expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
+      done();
+    });
+  });
+});

test/unit/specs/icon.spec.js

@@ -0,0 +1,35 @@
+import Icon from 'packages/icon';
+import { mount } from 'avoriaz';
+
+describe('Icon', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a icon', () => {
+    wrapper = mount(Icon, {
+      propsData: {
+        name: 'arrow'
+      }
+    });
+
+    expect(wrapper.hasClass('van-icon')).to.be.true;
+    expect(wrapper.hasClass('van-icon-arrow')).to.be.true;
+  });
+
+  it('emit a click event', () => {
+    wrapper = mount(Icon, {
+      propsData: {
+        name: 'arrow'
+      }
+    });
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.simulate('click');
+
+    expect(eventStub.calledOnce).to.be.true;
+    expect(eventStub.calledWith('click')).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('van-loading')).to.be.true;
+  });
+
+  it('create gradient-circle black', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'gradient-circle',
+        color: 'black'
+      }
+    });
+    const spinner = wrapper.find('.van-loading__spinner')[0];
+
+    expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
+  });
+
+  it('create gradient-circle white', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'gradient-circle',
+        color: 'white'
+      }
+    });
+    const spinner = wrapper.find('.van-loading__spinner')[0];
+
+    expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
+  });
+
+  it('create circle black', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'circle',
+        color: 'black'
+      }
+    });
+    const spinner = wrapper.find('.van-loading__spinner')[0];
+
+    expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
+  });
+
+  it('create circle white', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        type: 'circle',
+        color: 'white'
+      }
+    });
+    const spinner = wrapper.find('.van-loading__spinner')[0];
+
+    expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
+    expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
+  });
+});

test/unit/specs/popup.spec.js

@@ -0,0 +1,49 @@
+import Popup from 'packages/popup';
+import { mount } from 'avoriaz';
+
+describe('Popup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a popup', () => {
+    wrapper = mount(Popup, {
+      propsData: {
+        position: 'bottom'
+      }
+    });
+
+    expect(wrapper.hasClass('van-popup')).to.be.true;
+    expect(wrapper.instance().currentTransition).to.equal('popup-slide-bottom');
+  });
+
+  it('create a show popup', (done) => {
+    wrapper = mount(Popup, {
+      propsData: {
+        value: false
+      }
+    });
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    expect(wrapper.data().currentValue).to.be.false;
+
+    wrapper.vm.value = true;
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().currentValue).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('toggle popup show', () => {
+    wrapper = mount(Popup, {
+      propsData: {
+        value: true
+      }
+    });
+
+    expect(wrapper.data().currentValue).to.be.true;
+  });
+});

test/unit/specs/progress.spec.js

@@ -0,0 +1,82 @@
+import Progress from 'packages/progress';
+import { mount } from 'avoriaz';
+
+describe('Progress', () => {
+  let wrapper;
+  let bar;
+  let pivot;
+  const initProgressBar = function(propsData) {
+    wrapper = mount(Progress, {
+      propsData: propsData
+    });
+    bar = wrapper.find('.van-progress__bar__finished-portion')[0];
+    pivot = wrapper.find('.van-progress__bar__pivot')[0];
+  };
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create active 3% progress bar', () => {
+    initProgressBar({ percentage: 3 });
+
+    expect(wrapper.hasClass('van-progress')).to.be.true;
+    expect(bar.is('span')).to.be.true;
+    expect(bar.hasStyle('width', '3%'));
+
+    expect(pivot.is('span')).to.be.true;
+    expect(pivot.hasStyle('left', '0%'));
+    expect(pivot.hasStyle('marginLeft', '0'));
+    expect(pivot.text()).to.equal('3%');
+  });
+
+  it('create active 35% progress bar', () => {
+    initProgressBar({ percentage: 35 });
+
+    expect(wrapper.hasClass('van-progress')).to.be.true;
+    expect(bar.is('span')).to.be.true;
+    expect(bar.hasStyle('width', '35%'));
+
+    expect(pivot.is('span')).to.be.true;
+    expect(pivot.hasStyle('left', '35%'));
+    expect(pivot.hasStyle('marginLeft', '-14px'));
+    expect(pivot.text()).to.equal('35%');
+  });
+
+  it('create active 98% progress bar', () => {
+    initProgressBar({ percentage: 98 });
+
+    expect(wrapper.hasClass('van-progress')).to.be.true;
+    expect(bar.is('span')).to.be.true;
+    expect(bar.hasStyle('width', '98%'));
+
+    expect(pivot.is('span')).to.be.true;
+    expect(pivot.hasStyle('left', '100%'));
+    expect(pivot.hasStyle('marginLeft', '-28px'));
+    expect(pivot.text()).to.equal('98%');
+  });
+
+  it('create inactive 35% progress bar', () => {
+    initProgressBar({ percentage: 35, inactive: true });
+
+    expect(pivot.hasStyle('backgroundColor', '#cacaca'));
+  });
+
+  it('create progress bar with custom text', () => {
+    initProgressBar({ percentage: 35, pivotText: 'pivotText' });
+
+    expect(pivot.text()).to.equal('pivotText');
+  });
+
+  it('create progress bar with custom color', () => {
+    initProgressBar({ percentage: 35, color: 'red' });
+
+    expect(pivot.hasStyle('backgroundColor', 'red'));
+  });
+
+  it('create progress bar with text color', () => {
+    initProgressBar({ percentage: 35, textColor: 'red' });
+
+    expect(pivot.hasStyle('color', 'red'));
+  });
+});

test/unit/specs/quantity.spec.js

@@ -0,0 +1,116 @@
+import Quantity from 'packages/quantity';
+import { mount } from 'avoriaz';
+
+describe('Quantity', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a quantity', () => {
+    wrapper = mount(Quantity, {
+      propsData: {
+        defaultValue: 1
+      }
+    });
+
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
+    expect(wrapper.data().currentValue).to.equal(1);
+
+    const plusButton = wrapper.find('.van-quantity__plus')[0];
+    plusButton.simulate('click');
+
+    expect(wrapper.data().currentValue).to.equal(2);
+
+    const minusButton = wrapper.find('.van-quantity__minus')[0];
+    minusButton.simulate('click');
+    expect(wrapper.data().currentValue).to.equal(1);
+  });
+
+  it('create a disabled quantity', (done) => {
+    wrapper = mount(Quantity, {
+      propsData: {
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
+    const minusButton = wrapper.find('.van-quantity__minus')[0];
+    expect(minusButton.hasClass('van-quantity__minus--disabled')).to.be.true;
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    minusButton.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledWith('overlimit'));
+      done();
+    });
+
+    const plusButton = wrapper.find('.van-quantity__plus')[0];
+    expect(plusButton.hasClass('van-quantity__plus--disabled')).to.be.true;
+
+    plusButton.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledWith('overlimit'));
+      done();
+    });
+  });
+
+  it('update quantity value use v-model', (done) => {
+    wrapper = mount(Quantity, {
+      propsData: {
+        value: 1
+      }
+    });
+
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    wrapper.vm.value = 2;
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledWith('input'));
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
+  it('correct value when value is not correct', (done) => {
+    wrapper = mount(Quantity, {
+      propsData: {
+        value: 50,
+        max: 30
+      }
+    });
+
+    expect(wrapper.hasClass('van-quantity')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('handle when input change', (done) => {
+    wrapper = mount(Quantity, {
+      propsData: {
+        value: 1
+      }
+    });
+
+    const input = wrapper.find('.van-quantity__input')[0];
+    input.element.value = 2;
+    input.simulate('input');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().currentValue).to.equal(2);
+      done();
+    });
+  });
+});

test/unit/specs/radio.spec.js

@@ -0,0 +1,139 @@
+import { mount } from 'avoriaz';
+import Radio from 'packages/radio';
+import RadioTestComponent from '../components/radio';
+
+describe('RadioGroup', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a radio-group', () => {
+    wrapper = mount(RadioTestComponent);
+
+    expect(wrapper.hasClass('van-radio-group')).to.be.true;
+
+    expect(wrapper.vNode.child.value).to.equal('1');
+    expect(wrapper.vNode.child.disabled).to.be.false;
+  });
+
+  it('emit a change event', (done) => {
+    wrapper = mount(RadioTestComponent);
+
+    expect(wrapper.vNode.child.value).to.equal('1');
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    wrapper.setData({
+      'radio': '2'
+    });
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vNode.child.value).to.equal('2');
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
+  it('click on unchecked radio', (done) => {
+    wrapper = mount(RadioTestComponent);
+
+    const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    const uncheckedRadioLabel = wrapper.find('.van-radio')[1].find('.van-radio__label')[0];
+    uncheckedRadioLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+});
+
+describe('Radio', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a radio', () => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '1',
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-radio')).to.be.true;
+    expect(wrapper.hasClass('van-radio--disabled')).to.be.false;
+    expect(wrapper.instance().currentValue).to.equal('1');
+    expect(wrapper.instance().isDisabled).to.be.false;
+  });
+
+  it('click on a radio', (done) => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '1',
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-radio')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    wrapper.simulate('click');
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('click'));
+      done();
+    });
+  });
+
+  it('click on a radio label', (done) => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '1',
+        disabled: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-radio')).to.be.true;
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    const checkboxLabel = wrapper.find('.van-radio__label')[0];
+    checkboxLabel.simulate('click');
+
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+
+  it('click on a disabled radio', () => {
+    wrapper = mount(Radio, {
+      propsData: {
+        value: '1',
+        name: '2',
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-radio')).to.be.true;
+    expect(wrapper.hasClass('van-radio--disabled')).to.be.true;
+    expect(wrapper.instance().currentValue).to.equal('1');
+    expect(wrapper.instance().isDisabled).to.be.true;
+
+    const checkboxLabel = wrapper.find('.van-radio__label')[0];
+    checkboxLabel.simulate('click');
+
+    expect(wrapper.instance().currentValue).to.equal('1');
+  });
+});

test/unit/specs/search.spec.js

@@ -0,0 +1,95 @@
+import Search from 'packages/search';
+import { mount } from 'avoriaz';
+
+describe('Search', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a quantity', () => {
+    wrapper = mount(Search);
+
+    expect(wrapper.hasClass('van-search')).to.be.true;
+    expect(wrapper.data().focusStatus).to.be.false;
+    expect(wrapper.data().isFocus).to.be.false;
+  });
+
+  it('focus on input', () => {
+    wrapper = mount(Search);
+
+    const input = wrapper.find('.van-search__input')[0];
+    input.simulate('focus');
+
+    expect(wrapper.data().isFocus).to.be.true;
+  });
+
+  it('emit change event', (done) => {
+    wrapper = mount(Search);
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+    wrapper.setData({ value: 'test' });
+    wrapper.update();
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().value).to.be.equal('test');
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
+  it('handle clean click', () => {
+    wrapper = mount(Search);
+
+    wrapper.setData({ value: 'test' });
+    expect(wrapper.data().value).to.be.equal('test');
+
+    const input = wrapper.find('.van-search__input')[0];
+    input.simulate('focus');
+
+    const cleanBtn = wrapper.find('.van-icon-clear')[0];
+    cleanBtn.simulate('click');
+    expect(wrapper.data().value).to.equal('');
+    expect(wrapper.data().focusStatus).to.be.true;
+  });
+
+  it('handle cancel click', (done) => {
+    wrapper = mount(Search);
+
+    wrapper.setData({ value: 'test' });
+    expect(wrapper.data().value).to.be.equal('test');
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    const input = wrapper.find('.van-search__input')[0];
+    input.simulate('focus');
+
+    const cancelBtn = wrapper.find('.van-search__cancel')[0];
+    cancelBtn.simulate('click');
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.data().value).to.be.equal('');
+      expect(wrapper.data().focusStatus).to.be.false;
+      expect(wrapper.data().isFocus).to.be.false;
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('change'));
+      done();
+    });
+  });
+
+  it('emit a search event', (done) => {
+    wrapper = mount(Search);
+
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    const input = wrapper.find('.van-search__input')[0];
+    input.simulate('keyup.enter');
+
+    wrapper.vm.$nextTick(() => {
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('search'));
+      done();
+    });
+  });
+});

test/unit/specs/steps.spec.js

@@ -0,0 +1,28 @@
+import Steps from 'packages/steps';
+import { mount } from 'avoriaz';
+import StepsTestComponent from '../components/steps';
+
+describe('Steps', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a steps', () => {
+    wrapper = mount(Steps);
+
+    expect(wrapper.hasClass('van-steps')).to.be.true;
+    expect(wrapper.data().steps.length).to.equal(0);
+  });
+
+  it('create a steps with step', () => {
+    wrapper = mount(StepsTestComponent);
+
+    const finishStep = wrapper.find('.van-step')[0];
+    expect(finishStep.hasClass('van-step--finish')).to.be.true;
+
+    const proccessStep = wrapper.find('.van-step')[1];
+    expect(proccessStep.hasClass('van-step--process')).to.be.true;
+  });
+});

test/unit/specs/switch.spec.js

@@ -0,0 +1,130 @@
+import Switch from 'packages/switch';
+import Vue from 'vue';
+import ZanLoading from 'packages/loading';
+import { mount } from 'avoriaz';
+
+describe('Switch', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create on switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        value: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
+  });
+
+  it('create off switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        value: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+  });
+
+  it('create loading switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        loading: true
+      }
+    });
+    const loading = wrapper.find(ZanLoading)[0];
+
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(loading.isVueComponent).to.be.true;
+  });
+
+  it('loading switch should be unclickable', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        loading: true,
+        value: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
+  });
+
+  it('create disabled switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        disabled: true
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch')).to.be.true;
+    expect(wrapper.hasClass('van-switch--disabled')).to.be.true;
+  });
+
+  it('disabled switch should be unclickable', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        disabled: true,
+        value: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+  });
+
+  it('click should toggle the switch', () => {
+    wrapper = mount(Switch, {
+      propsData: {
+        value: false
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('van-switch--on')).to.be.true;
+  });
+
+  it('click should call callback function', () => {
+    const stub = sinon.stub();
+    wrapper = mount(Switch, {
+      propsData: {
+        value: false,
+        onChange: stub
+      }
+    });
+
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    expect(stub.calledOnce).to.be.true;
+    expect(stub.calledWith(true));
+  });
+
+  it('toggle switch value from v-model', function(done) {
+    wrapper = mount(Switch, {
+      propsData: {
+        value: false
+      }
+    });
+    const eventStub = sinon.stub(wrapper.vm, '$emit');
+
+    expect(wrapper.hasClass('van-switch--off')).to.be.true;
+    wrapper.vm.value = true;
+    wrapper.update();
+    Vue.nextTick(() => {
+      expect(wrapper.hasClass('van-switch--on')).to.be.true;
+      expect(eventStub.calledOnce).to.be.true;
+      expect(eventStub.calledWith('input'));
+      done();
+    });
+  });
+});

test/unit/specs/tabs.spec.js

@@ -0,0 +1,41 @@
+import Tabs from 'packages/tabs';
+import { mount } from 'avoriaz';
+// import TabsTestComponent from '../components/tabs';
+
+describe('Tabs', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a empty card tabs', () => {
+    wrapper = mount(Tabs, {
+      propsData: {
+        type: 'card'
+      }
+    });
+
+    expect(wrapper.hasClass('van-tabs')).to.be.true;
+    expect(wrapper.hasClass('van-tabs--card')).to.be.true;
+  });
+
+  it('create a tabs with four tab', () => {
+    // wrapper = mount(TabsTestComponent);
+
+    // expect(wrapper.hasClass('van-tabs')).to.be.true;
+    // expect(wrapper.hasClass('van-tabs--line')).to.be.true;
+
+    // const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
+
+    // const tabTitle = wrapper.find('.van-tab__pane')[2];
+    // tabTitle.simulate('click');
+
+    // wrapper.vm.$nextTick(() => {
+    //   // expect(.curActive).to.equal(2);
+    //   console.log(wrapper.vNode.child);
+    //   expect(eventStub.calledWith('click'));
+    //   done();
+    // });
+  });
+});

test/unit/specs/toast.spec.js

@@ -0,0 +1,36 @@
+// import Toast from 'packages/toast';
+// import { mount } from 'avoriaz';
+
+// describe('Toast', () => {
+//   // it('create simple toast', () => {
+//   //   Toast('a message');
+//   //   var toast = document.querySelector('.van-toast');
+
+//   //   expect(toast).not.to.be.underfined;
+
+//   //   setTimeout(() => {
+//   //     expect(toast.hidden).to.be.true;
+//   //   }, 301);
+//   // });
+
+//   // it('create loading toast', () => {
+//   //   Toast.loading('');
+//   //   var toast = document.querySelector('.van-toast');
+
+//   //   expect(toast).not.to.be.underfined;
+
+//   //   setTimeout(() => {
+//   //     expect(toast.hidden).to.be.true;
+//   //   }, 301);
+//   // });
+//   // it('create loading toast', () => {
+//   //   Toast.success('');
+//   //   var toast = document.querySelector('.van-toast');
+
+//   //   expect(toast).not.to.be.underfined;
+
+//   //   setTimeout(() => {
+//   //     expect(toast.hidden).to.be.true;
+//   //   }, 301);
+//   // });
+// });

test/unit/specs/uploader.spec.js

@@ -0,0 +1,117 @@
+import Uploader from 'packages/uploader';
+import { mount } from 'avoriaz';
+
+describe('Uploader', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('enabled', () => {
+    wrapper = mount(Uploader, {
+      propsData: {
+        disabled: false
+      }
+    });
+
+    expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [] }})).to.equal(undefined);
+  });
+});
+describe('Uploader', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('disabled', () => {
+    wrapper = mount(Uploader, {
+      propsData: {
+        disabled: true
+      }
+    });
+
+    expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [] }})).to.equal(undefined);
+  });
+});
+describe('Uploader', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('before read', () => {
+    wrapper = mount(Uploader, {
+      propsData: {
+        disabled: false,
+        beforeRead: () => {
+          return false;
+        }
+      }
+    });
+
+    expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '')] }})).to.equal(undefined);
+  });
+});
+describe('Uploader', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('read text', () => {
+    wrapper = mount(Uploader, {
+      propsData: {
+        disabled: false,
+        resultType: 'text',
+        afterRead: (file) => {
+          console.log(file);
+        }
+      }
+    });
+
+    expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '/Users')] }})).to.equal(undefined);
+  });
+});
+describe('Uploader', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('read text no after hook', () => {
+    wrapper = mount(Uploader, {
+      propsData: {
+        disabled: false,
+        resultType: 'text'
+      }
+    });
+
+    expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '/Users')] }})).to.equal(undefined);
+  });
+});
+describe('Uploader', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('read dataUrl', () => {
+    wrapper = mount(Uploader, {
+      propsData: {
+        disabled: false,
+        resultType: 'dataUrl',
+        afterRead: (file) => {
+          console.log(file);
+        }
+      }
+    });
+
+    expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '/Users')] }})).to.equal(undefined);
+  });
+});

test/unit/specs/waterfall.spec.js

@@ -0,0 +1,72 @@
+import Waterfall from '../components/waterfall';
+import { mount } from 'avoriaz';
+
+describe('Waterfall', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create', (done) => {
+    const waterfallLowerSpy = sinon.spy();
+    wrapper = mount(Waterfall, {
+      attachToDocument: true,
+      propsData: {
+        disabled: false,
+        list: [],
+        onWaterfallLower: waterfallLowerSpy
+      }
+    });
+
+    setTimeout(() => {
+      expect(waterfallLowerSpy.called).to.be.true;
+      done();
+    }, 500);
+  });
+
+  it('test waterfall lower function', (done) => {
+    const waterfallLowerSpy = sinon.spy(function() {
+      wrapper.vm.list = wrapper.vm.list.concat([{ id: 1 }, { id: 2 }, { id: 3 }]);
+      wrapper.vm.disabled = true;
+    });
+    wrapper = mount(Waterfall, {
+      attachToDocument: true,
+      propsData: {
+        disabled: false,
+        list: [{ id: 10 }],
+        onWaterfallLower: waterfallLowerSpy
+      }
+    });
+
+    setTimeout(() => {
+      const item = wrapper.find('.waterfall-item');
+      expect(waterfallLowerSpy.calledOnce).to.be.true;
+      expect(item.length).to.equal(4);
+      expect(item[item.length - 1].text()).to.equal('3');
+      done();
+    }, 500);
+  });
+
+  it('test waterfall upper function', (done) => {
+    const waterfallUpperSpy = sinon.spy(function() {
+      wrapper.vm.list.unshift({ id: 1 }, { id: 2 }, { id: 3 });
+      wrapper.vm.disabled = true;
+    });
+    wrapper = mount(Waterfall, {
+      attachToDocument: true,
+      propsData: {
+        disabled: false,
+        list: [{ id: 10 }],
+        onWaterfallUpper: waterfallUpperSpy
+      }
+    });
+
+    setTimeout(() => {
+      const item = wrapper.find('.waterfall-item');
+      expect(waterfallUpperSpy.calledOnce).to.be.true;
+      expect(item.length).to.equal(4);
+      expect(item[0].text()).to.equal('1');
+      done();
+    }, 500);
+  });
+});