simplify test config (#639)
This commit is contained in:
neverland
@@ -0,0 +1,143 @@
|
||||
import ActionSheet from 'packages/actionsheet';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
noStyle: {
|
||||
'.van-actionsheet': {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '微信'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const actionItem = wrapper.find('.van-actionsheet__item')[0];
|
||||
actionItem.trigger('click');
|
||||
expect(called).to.be.true;
|
||||
|
||||
const secondActionItem = wrapper.find('.van-actionsheet__item')[1];
|
||||
secondActionItem.trigger('click');
|
||||
});
|
||||
|
||||
it('create actionsheet with cancel button', () => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
cancelText: 'cancel'
|
||||
}
|
||||
});
|
||||
|
||||
const cancelButton = wrapper.find('.van-actionsheet__cancel')[0];
|
||||
expect(wrapper.contains('.van-actionsheet__cancel')).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');
|
||||
DOMChecker(wrapper, {
|
||||
style: {
|
||||
'.van-actionsheet': {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.value = true;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
DOMChecker(wrapper, {
|
||||
noStyle: {
|
||||
'.van-actionsheet': {
|
||||
display: 'none'
|
||||
}
|
||||
}
|
||||
});
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,391 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import AddressEdit from 'packages/address-edit';
|
||||
import AddressDetail from 'packages/address-edit/Detail';
|
||||
import areaList from '../../docs/demos/mock/area.json';
|
||||
|
||||
describe('AddressEdit', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a AddressEdit', () => {
|
||||
wrapper = mount(AddressEdit);
|
||||
expect(wrapper.hasClass('van-address-edit')).to.be.true;
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
|
||||
expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
|
||||
expect(
|
||||
wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()
|
||||
).to.equal('选择省份');
|
||||
expect(
|
||||
wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()
|
||||
).to.equal('选择城市');
|
||||
expect(
|
||||
wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()
|
||||
).to.equal('选择地区');
|
||||
});
|
||||
|
||||
it('create a AddressEdit with props', () => {
|
||||
const addressInfo = {
|
||||
name: '测试',
|
||||
tel: '123123213',
|
||||
province: '浙江省',
|
||||
city: '杭州市',
|
||||
county: '西湖区',
|
||||
address_detail: '详细地址',
|
||||
postal_code: '10000',
|
||||
is_default: true
|
||||
};
|
||||
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
showSearchResult: true,
|
||||
searchResult: []
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal(
|
||||
addressInfo.name
|
||||
);
|
||||
expect(wrapper.find('.van-field__control')[1].element.value).to.equal(
|
||||
addressInfo.tel
|
||||
);
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
|
||||
addressInfo.address_detail
|
||||
);
|
||||
expect(wrapper.find('.van-field__control')[3].element.value).to.equal(
|
||||
addressInfo.postal_code
|
||||
);
|
||||
expect(
|
||||
wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()
|
||||
).to.equal(addressInfo.province);
|
||||
expect(
|
||||
wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()
|
||||
).to.equal(addressInfo.city);
|
||||
expect(
|
||||
wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()
|
||||
).to.equal(addressInfo.county);
|
||||
expect(wrapper.find('.van-switch-cell').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('save AddressInfo', () => {
|
||||
const addressInfo = {
|
||||
name: '',
|
||||
tel: '123123213',
|
||||
province: '浙江省',
|
||||
city: '杭州市',
|
||||
county: '西湖区',
|
||||
address_detail: '详细地址',
|
||||
postal_code: '10000',
|
||||
is_default: true
|
||||
};
|
||||
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: addressInfo,
|
||||
showPostal: true,
|
||||
showSetDefault: true,
|
||||
showSearchResult: true,
|
||||
searchResult: []
|
||||
}
|
||||
});
|
||||
|
||||
const saveButton = wrapper.find('.van-button')[0];
|
||||
|
||||
// name empty
|
||||
wrapper.vm.addressInfo.name = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.true;
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.false;
|
||||
|
||||
// name too long
|
||||
wrapper.vm.addressInfo.name = '111111111111111111111111111';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.true;
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.false;
|
||||
|
||||
// tel empty
|
||||
wrapper.vm.addressInfo.name = '123';
|
||||
wrapper.vm.addressInfo.tel = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['tel']).to.be.true;
|
||||
wrapper.find('.van-field__control')[1].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['tel']).to.be.false;
|
||||
|
||||
// area_code empty
|
||||
wrapper.vm.addressInfo.tel = '13000000000';
|
||||
wrapper.vm.addressInfo.area_code = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['area_code']).to.be.true;
|
||||
|
||||
// area_code invalid
|
||||
wrapper.vm.addressInfo.tel = '13000000000';
|
||||
wrapper.vm.addressInfo.area_code = '-1';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['area_code']).to.be.true;
|
||||
|
||||
// address_detail empty
|
||||
wrapper.vm.addressInfo.area_code = '100000';
|
||||
wrapper.vm.addressInfo.address_detail = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
|
||||
wrapper.find('.van-field__control')[2].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
|
||||
|
||||
// address_detail too long
|
||||
let longAddress = '1';
|
||||
for (let i = 0; i < 300; i++) {
|
||||
longAddress += '1';
|
||||
}
|
||||
wrapper.vm.addressInfo.address_detail = longAddress;
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
|
||||
wrapper.find('.van-field__control')[2].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
|
||||
|
||||
// postal_code invalid
|
||||
wrapper.vm.addressInfo.address_detail = '123';
|
||||
wrapper.vm.addressInfo.postal_code = '123';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['postal_code']).to.be.true;
|
||||
wrapper.find('.van-field__control')[3].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
|
||||
|
||||
// valid result
|
||||
wrapper.vm.addressInfo.postal_code = '123456';
|
||||
saveButton.trigger('click');
|
||||
|
||||
// not show postal_code
|
||||
wrapper.vm.addressInfo.postal_code = '156';
|
||||
wrapper.vm.showPostal = false;
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
|
||||
});
|
||||
|
||||
it('show search result', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {},
|
||||
showSearchResult: true,
|
||||
searchResult: [
|
||||
{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
},
|
||||
{
|
||||
name: '黄龙万科中心H座'
|
||||
},
|
||||
{
|
||||
address: '杭州市西湖区'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__control')[2].trigger('focus');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const items = wrapper.find('.van-address-edit-detail__suggest-item');
|
||||
expect(items.length).to.equal(3);
|
||||
|
||||
items[0].trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
|
||||
'杭州市西湖区 黄龙万科中心'
|
||||
);
|
||||
|
||||
items[1].trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-field__control')[2].element.value).to.equal(
|
||||
'黄龙万科中心H座'
|
||||
);
|
||||
items[2].trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(
|
||||
wrapper.find('.van-field__control')[2].element.value
|
||||
).to.equal('杭州市西湖区');
|
||||
|
||||
wrapper.find('.van-field__control')[2].trigger('blur');
|
||||
setTimeout(() => {
|
||||
done();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('select area', () => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: {}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.onAreaConfirm([]);
|
||||
wrapper.vm.onAreaConfirm([{ code: -1 }]);
|
||||
wrapper.vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
|
||||
wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
|
||||
expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
|
||||
|
||||
wrapper.vm.onAreaConfirm([
|
||||
{ name: '浙江省' },
|
||||
{ name: '杭州市' },
|
||||
{ name: '西湖区', code: '123456' }
|
||||
]);
|
||||
expect(wrapper.vm.addressInfo['province']).to.equal('浙江省');
|
||||
expect(wrapper.vm.addressInfo['city']).to.equal('杭州市');
|
||||
expect(wrapper.vm.addressInfo['county']).to.equal('西湖区');
|
||||
expect(wrapper.vm.addressInfo['area_code']).to.equal('123456');
|
||||
});
|
||||
|
||||
it('delete address', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
areaList,
|
||||
isDeleting: true,
|
||||
addressInfo: {
|
||||
id: '123'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.find('.van-button')[1];
|
||||
deleteButton.trigger('click');
|
||||
wrapper.vm.onDeleteAddress();
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.vm.isDeleting = false;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
deleteButton.trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
|
||||
|
||||
wrapper.vm.$on('delete', () => {
|
||||
done();
|
||||
});
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
}, 300);
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('on change detail', done => {
|
||||
wrapper = mount(AddressEdit);
|
||||
|
||||
wrapper.vm.$on('change-detail', val => {
|
||||
expect(val).to.equal('123');
|
||||
done();
|
||||
});
|
||||
|
||||
const field = wrapper.find('.van-field__control')[2];
|
||||
field.element.value = '123';
|
||||
field.trigger('input');
|
||||
});
|
||||
|
||||
it('clear address detail in ios', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {
|
||||
address_detail: '123'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.isAndroid = false;
|
||||
wrapper.find('.van-field__control')[2].trigger('focus');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.addressInfo.address_detail).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('finish edit address detail in android', done => {
|
||||
wrapper = mount(AddressDetail, {
|
||||
propsData: {
|
||||
value: '123'
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
wrapper.setData({
|
||||
isAndroid: true
|
||||
});
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.value).to.equal('123');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('watch address info', done => {
|
||||
const addressInfo = {
|
||||
name: '123'
|
||||
};
|
||||
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
addressInfo: {}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.setProps({ addressInfo });
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentInfo.name).to.equal('123');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('set/get area code', done => {
|
||||
wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
areaList,
|
||||
addressInfo: {
|
||||
area_code: ''
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getArea()).to.eql([
|
||||
{ code: '-1', name: '选择省份' },
|
||||
{ code: '-1', name: '选择城市' },
|
||||
{ code: '-1', name: '选择地区' }
|
||||
]);
|
||||
|
||||
wrapper.vm.setAreaCode('110101');
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.currentInfo.area_code).to.eql('110101');
|
||||
expect(wrapper.vm.getArea()).to.eql([
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' }
|
||||
]);
|
||||
|
||||
wrapper.vm.$refs = [];
|
||||
wrapper.vm.setAreaCode('110102');
|
||||
expect(wrapper.vm.getArea()).to.eql([]);
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import AddressList from 'packages/address-list';
|
||||
|
||||
const list = [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
];
|
||||
|
||||
describe('AddressList', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a AddressList', () => {
|
||||
wrapper = mount(AddressList);
|
||||
expect(wrapper.hasClass('van-address-list')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a AddressList with three items', () => {
|
||||
wrapper = mount(AddressList, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
list
|
||||
}
|
||||
});
|
||||
expect(wrapper.find('.van-address-list__group .van-cell').length).to.equal(3);
|
||||
expect(wrapper.find('.van-icon-checked').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('listen to add & edit event', (done) => {
|
||||
wrapper = mount(AddressList, {
|
||||
propsData: {
|
||||
list
|
||||
}
|
||||
});
|
||||
|
||||
const add = sinon.spy();
|
||||
wrapper.vm.$on('add', add);
|
||||
wrapper.find('.van-address-list__add')[0].trigger('click');
|
||||
expect(add.calledOnce).to.be.true;
|
||||
|
||||
wrapper.vm.$on('edit', (item, index) => {
|
||||
expect(index).to.equal(0);
|
||||
done();
|
||||
});
|
||||
wrapper.find('.van-address-list__edit')[0].trigger('click');
|
||||
});
|
||||
|
||||
it('listen to select event', (done) => {
|
||||
wrapper = mount(AddressList, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
list
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('select', (item, index) => {
|
||||
expect(item.id).to.equal('3');
|
||||
done();
|
||||
});
|
||||
wrapper.find('.van-radio')[2].trigger('click');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,153 @@
|
||||
import Area from 'packages/area';
|
||||
import { mount } from 'avoriaz';
|
||||
import areaList from '../../docs/demos/mock/area.json';
|
||||
|
||||
describe('Area', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create an area', () => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-area')).to.be.true;
|
||||
});
|
||||
|
||||
it('create an area with default value', done => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList,
|
||||
value: '110101'
|
||||
}
|
||||
});
|
||||
|
||||
const confirmBtn = wrapper.find('.van-picker__confirm')[0];
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
confirmBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('confirm'));
|
||||
expect(wrapper.vm.$refs.picker.getColumnValue(2).code).to.equal('110101');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create an area and set value', done => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList,
|
||||
value: '110101'
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.$refs.picker.getColumnValue(2).code).to.equal('110101');
|
||||
wrapper.setProps({
|
||||
value: '110102'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.$refs.picker.getColumnValue(2).code).to.equal('110102');
|
||||
done();
|
||||
}, 50);
|
||||
}, 50);
|
||||
});
|
||||
|
||||
it('create an area with invalid areaList', () => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: null
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.columns.length).to.equal(0);
|
||||
});
|
||||
|
||||
it('create an area with columnsNum equal 2', () => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList,
|
||||
columnsNum: 2
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.columns.length).to.equal(2);
|
||||
});
|
||||
|
||||
it('create an area with columnsNum equal 1', () => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList,
|
||||
columnsNum: 1
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.columns.length).to.equal(1);
|
||||
});
|
||||
|
||||
it('create an area and click cancel', done => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList
|
||||
}
|
||||
});
|
||||
|
||||
const cancelBtn = wrapper.find('.van-picker__cancel')[0];
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
cancelBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('cancel'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('onChange method', () => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
areaList: areaList
|
||||
}
|
||||
});
|
||||
|
||||
let list = [];
|
||||
const setColumnValues = (index, arr) => {
|
||||
list = [...list, ...arr];
|
||||
};
|
||||
const code = { code: '110101' };
|
||||
|
||||
wrapper.vm.onChange({ setColumnValues }, [code], 0);
|
||||
wrapper.vm.onChange({ setColumnValues }, [code, code], 1);
|
||||
|
||||
expect(list.length).to.equal(33);
|
||||
});
|
||||
|
||||
it('getValues method', done => {
|
||||
wrapper = mount(Area, {
|
||||
propsData: {
|
||||
value: '110101',
|
||||
areaList: areaList
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.getValues()).to.eql([
|
||||
{ code: '110000', name: '北京市' },
|
||||
{ code: '110100', name: '北京市' },
|
||||
{ code: '110101', name: '东城区' }
|
||||
]);
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.vm.$refs = [];
|
||||
expect(wrapper.vm.getValues()).to.eql([]);
|
||||
done();
|
||||
}, 50);
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
@@ -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.trigger('click');
|
||||
|
||||
expect(eventStub.calledWith('click')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
import Button from 'packages/button';
|
||||
import VanLoading 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.trigger('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.trigger('click');
|
||||
|
||||
expect(eventStub.called).to.be.false;
|
||||
});
|
||||
|
||||
it('create a loading button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
const loading = wrapper.find(VanLoading)[0];
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(loading.isVueComponent).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.trigger('click');
|
||||
|
||||
expect(eventStub.called).to.be.false;
|
||||
});
|
||||
|
||||
it('create a primary loading button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'primary',
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--primary')).to.be.true;
|
||||
|
||||
const loading = wrapper.find(VanLoading)[0];
|
||||
expect(loading.isVueComponent).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,154 @@
|
||||
import CellSwipe from 'packages/cell-swipe';
|
||||
import { mount } from 'avoriaz';
|
||||
import { triggerTouch } from '../utils';
|
||||
|
||||
const defaultProps = {
|
||||
propsData: {
|
||||
leftWidth: 100,
|
||||
rightWidth: 100
|
||||
}
|
||||
};
|
||||
|
||||
describe('CellSwipe', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('render left or right part when has width', () => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
expect(wrapper.find('.van-cell-swipe__left').length).to.equal(1);
|
||||
expect(wrapper.find('.van-cell-swipe__right').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('not render left or right part when width is 0', () => {
|
||||
wrapper = mount(CellSwipe);
|
||||
expect(wrapper.find('.van-cell-swipe__left').length).to.equal(0);
|
||||
expect(wrapper.find('.van-cell-swipe__right').length).to.equal(0);
|
||||
});
|
||||
|
||||
it('drag and show left part', done => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
expect(wrapper.vm.startX).to.equal(0);
|
||||
expect(wrapper.vm.startY).to.equal(0);
|
||||
|
||||
triggerTouch(wrapper, 'touchmove', 50, 0);
|
||||
expect(wrapper.vm.offset).to.equal(50);
|
||||
|
||||
triggerTouch(wrapper, 'touchend', 50, 0);
|
||||
expect(wrapper.vm.offset).to.equal(100);
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.opened).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('drag and show right part', done => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', -50, 0);
|
||||
triggerTouch(wrapper, 'touchend', -50, 0);
|
||||
expect(wrapper.vm.offset).to.equal(-100);
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.opened).to.be.true;
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('drag and reset left part', () => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 10, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 30, 0);
|
||||
triggerTouch(wrapper, 'touchend', 30, 0);
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
});
|
||||
|
||||
it('drag and reset right part', () => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', -10, 0);
|
||||
triggerTouch(wrapper, 'touchmove', -30, 0);
|
||||
triggerTouch(wrapper, 'touchend', -30, 0);
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
});
|
||||
|
||||
it('drag distance out of ranges', () => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 1000, 0);
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
});
|
||||
|
||||
it('drag and hide left part', (done) => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 20, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 50, 0);
|
||||
triggerTouch(wrapper, 'touchend', 50, 0);
|
||||
expect(wrapper.vm.offset).to.equal(100);
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.opened).to.be.true;
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 1, 0);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
expect(wrapper.vm.opened).to.be.false;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('drag vertical', () => {
|
||||
wrapper = mount(CellSwipe, defaultProps);
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 0, 100);
|
||||
triggerTouch(wrapper, 'touchend', 0, 100);
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
});
|
||||
|
||||
it('on close prop', () => {
|
||||
let clickPosition;
|
||||
let instance;
|
||||
const onClose = (position, ins) => {
|
||||
clickPosition = position;
|
||||
instance = ins;
|
||||
};
|
||||
|
||||
wrapper = mount(CellSwipe, {
|
||||
propsData: {
|
||||
...defaultProps.propsData,
|
||||
onClose
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
wrapper.vm.onClick();
|
||||
expect(clickPosition).to.equal(undefined);
|
||||
|
||||
wrapper.vm.offset = 100;
|
||||
wrapper.trigger('click');
|
||||
expect(clickPosition).to.equal('cell');
|
||||
|
||||
wrapper.find('.van-cell-swipe__left')[0].trigger('click');
|
||||
expect(clickPosition).to.equal('left');
|
||||
|
||||
wrapper.find('.van-cell-swipe__right')[0].trigger('click');
|
||||
expect(clickPosition).to.equal('right');
|
||||
|
||||
instance.close();
|
||||
expect(wrapper.vm.offset).to.equal(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
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.trigger('click');
|
||||
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('click')).to.be.true;
|
||||
});
|
||||
|
||||
it('cell with url', () => {
|
||||
wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
url: '#test',
|
||||
replace: false
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
|
||||
expect(window.location.hash).to.equal('#test');
|
||||
window.location.hash = '';
|
||||
|
||||
const length = window.history.length;
|
||||
wrapper.vm.replace = true;
|
||||
wrapper.trigger('click');
|
||||
expect(window.location.hash).to.equal('#test');
|
||||
expect(window.history.length).to.equal(length);
|
||||
window.location.hash = '';
|
||||
});
|
||||
|
||||
it('cell with to', done => {
|
||||
wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
to: '/test',
|
||||
replace: false
|
||||
}
|
||||
});
|
||||
wrapper.vm.$router = {
|
||||
push(path) {
|
||||
wrapper.vm.replace = true;
|
||||
wrapper.trigger('click');
|
||||
},
|
||||
replace(path) {
|
||||
expect(path).to.equal('/test');
|
||||
done();
|
||||
}
|
||||
};
|
||||
|
||||
wrapper.trigger('click');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,197 @@
|
||||
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.trigger('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.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on unchecked item and checked options num beyond max', (done) => {
|
||||
wrapper = mount(CheckboxTestComponent);
|
||||
|
||||
wrapper.setData({
|
||||
'max': 2
|
||||
});
|
||||
|
||||
const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
|
||||
lastCheckboxLabel.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.result.indexOf('d')).to.equal(-1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on disabled item', (done) => {
|
||||
wrapper = mount(CheckboxTestComponent);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
const disabledLabel = wrapper.find('.van-checkbox')[2].find('.van-checkbox__label')[0];
|
||||
disabledLabel.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.false;
|
||||
expect(wrapper.vm.result.indexOf('c')).to.equal(-1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Checkbox', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a checkbox', () => {
|
||||
wrapper = mount(Checkbox, {
|
||||
propsData: {
|
||||
value: true,
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.vm.currentValue).to.be.true;
|
||||
expect(wrapper.vm.isDisabled).to.be.false;
|
||||
expect(wrapper.vm.isChecked).to.be.true;
|
||||
});
|
||||
|
||||
it('create a checkbox with name', () => {
|
||||
wrapper = mount(Checkbox, {
|
||||
propsData: {
|
||||
name: 'a',
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(!!wrapper.vm.isChecked).to.be.false;
|
||||
});
|
||||
|
||||
it('create a not boolean value checkbox', (done) => {
|
||||
wrapper = mount(Checkbox, {
|
||||
propsData: {
|
||||
value: 'test',
|
||||
name: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.vm.currentValue).to.equal('test');
|
||||
expect(wrapper.vm.isDisabled).to.be.false;
|
||||
expect(wrapper.vm.isChecked).to.be.true;
|
||||
|
||||
wrapper.vm.value = null;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentValue).to.equal(null);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
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.trigger('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.find('.van-checkbox--disabled').length).to.equal(1);
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
expect(wrapper.vm.isDisabled).to.be.true;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import Circle from 'packages/circle';
|
||||
|
||||
describe('Circle', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a circle', () => {
|
||||
wrapper = mount(Circle, {
|
||||
propsData: {
|
||||
text: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-circle')).to.be.true;
|
||||
expect(wrapper.find('.van-circle__text')[0].text()).to.equal('test');
|
||||
});
|
||||
|
||||
it('circle rate', done => {
|
||||
let currentRate = 0;
|
||||
wrapper = mount(Circle, {
|
||||
propsData: {
|
||||
rate: 0,
|
||||
value: 0,
|
||||
clockwise: false
|
||||
}
|
||||
});
|
||||
wrapper.vm.$on('input', rate => {
|
||||
currentRate = rate;
|
||||
});
|
||||
wrapper.vm.rate = 50;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(currentRate).to.equal(50);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('circle animation', done => {
|
||||
let currentRate = 0;
|
||||
wrapper = mount(Circle, {
|
||||
propsData: {
|
||||
rate: 0,
|
||||
value: 0,
|
||||
speed: 500,
|
||||
clockwise: false
|
||||
}
|
||||
});
|
||||
wrapper.vm.$on('input', rate => {
|
||||
currentRate = rate;
|
||||
});
|
||||
wrapper.vm.rate = 50;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(currentRate === 50).to.be.false;
|
||||
setTimeout(() => {
|
||||
expect(currentRate === 50).to.be.true;
|
||||
done();
|
||||
}, 200);
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
import ContactCard from 'packages/contact-card';
|
||||
import ContactList from 'packages/contact-list';
|
||||
import ContactEdit from 'packages/contact-edit';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('ContactCard', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a ContactCard', () => {
|
||||
wrapper = mount(ContactCard);
|
||||
expect(wrapper.hasClass('van-contact-card')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a add ContactCard', done => {
|
||||
wrapper = mount(ContactCard, {
|
||||
propsData: {
|
||||
type: 'add'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-contact-card')).to.be.true;
|
||||
expect(wrapper.find('.van-contact-card__text')[0].text()).to.equal('添加订单联系人信息');
|
||||
|
||||
wrapper.vm.addText = '测试文案';
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-contact-card__text')[0].text()).to.equal('测试文案');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a edit ContactCard', () => {
|
||||
wrapper = mount(ContactCard, {
|
||||
propsData: {
|
||||
type: 'edit',
|
||||
tel: '13000000000',
|
||||
name: '测试姓名'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-contact-card')).to.be.true;
|
||||
expect(wrapper.find('.van-contact-card__text div')[0].text()).to.equal('联系人：测试姓名');
|
||||
expect(wrapper.find('.van-contact-card__text div')[1].text()).to.equal('联系电话：13000000000');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContactList', () => {
|
||||
const list = [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000'
|
||||
}
|
||||
];
|
||||
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a ContactList', () => {
|
||||
wrapper = mount(ContactList);
|
||||
expect(wrapper.hasClass('van-contact-list')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a ContactList with three items', () => {
|
||||
wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
list
|
||||
}
|
||||
});
|
||||
expect(wrapper.find('.van-cell').length).to.equal(4);
|
||||
expect(wrapper.find('.van-icon-checked').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('listen to add & edit event', (done) => {
|
||||
wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
list
|
||||
}
|
||||
});
|
||||
|
||||
const add = sinon.spy();
|
||||
wrapper.vm.$on('add', add);
|
||||
wrapper.find('.van-contact-list__add')[0].trigger('click');
|
||||
expect(add.calledOnce).to.be.true;
|
||||
|
||||
wrapper.vm.$on('edit', (item, index) => {
|
||||
expect(index).to.equal(0);
|
||||
done();
|
||||
});
|
||||
wrapper.find('.van-contact-list__edit')[0].trigger('click');
|
||||
});
|
||||
|
||||
it('listen to select event', (done) => {
|
||||
wrapper = mount(ContactList, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
list
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('select', (item, index) => {
|
||||
expect(item.id).to.equal('3');
|
||||
done();
|
||||
});
|
||||
wrapper.find('.van-radio')[2].trigger('click');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ContactEdit', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a ContactEdit', () => {
|
||||
wrapper = mount(ContactEdit);
|
||||
expect(wrapper.hasClass('van-contact-edit')).to.be.true;
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
|
||||
expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
|
||||
});
|
||||
|
||||
it('create a ContactEdit with props', () => {
|
||||
const contactInfo = {
|
||||
name: '测试',
|
||||
tel: '123123213'
|
||||
};
|
||||
|
||||
wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
contactInfo
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal(contactInfo.name);
|
||||
expect(wrapper.find('.van-field__control')[1].element.value).to.equal(contactInfo.tel);
|
||||
});
|
||||
|
||||
it('save contactInfo', () => {
|
||||
const contactInfo = {
|
||||
name: '',
|
||||
tel: '123123213'
|
||||
};
|
||||
|
||||
wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
contactInfo
|
||||
}
|
||||
});
|
||||
|
||||
const saveSpy = sinon.spy();
|
||||
wrapper.vm.$on('save', saveSpy);
|
||||
|
||||
const saveButton = wrapper.find('.van-button')[0];
|
||||
|
||||
// name empty
|
||||
wrapper.vm.contactInfo.name = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.true;
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.false;
|
||||
|
||||
// name too long
|
||||
wrapper.vm.contactInfo.name = '111111111111111111111111111';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.true;
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['name']).to.be.false;
|
||||
|
||||
// tel empty
|
||||
wrapper.vm.contactInfo.name = '123';
|
||||
wrapper.vm.contactInfo.tel = '';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['tel']).to.be.true;
|
||||
wrapper.find('.van-field__control')[1].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['tel']).to.be.false;
|
||||
|
||||
// tel invalid
|
||||
wrapper.vm.contactInfo.tel = 'abc';
|
||||
saveButton.trigger('click');
|
||||
expect(wrapper.vm.errorInfo['tel']).to.be.true;
|
||||
wrapper.find('.van-field__control')[1].trigger('focus');
|
||||
expect(wrapper.vm.errorInfo['tel']).to.be.false;
|
||||
|
||||
// saving
|
||||
wrapper.vm.contactInfo.tel = '13000000000';
|
||||
saveButton.trigger('click');
|
||||
wrapper.vm.isSaving = true;
|
||||
saveButton.trigger('click');
|
||||
expect(saveSpy.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
it('delete', done => {
|
||||
wrapper = mount(ContactEdit, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
isDeleting: true,
|
||||
isEdit: true,
|
||||
contactInfo: {
|
||||
id: '123'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const deleteButton = wrapper.find('.van-button')[1];
|
||||
deleteButton.trigger('click');
|
||||
wrapper.vm.onDeleteContact();
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.vm.isDeleting = false;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
deleteButton.trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
|
||||
|
||||
wrapper.vm.$on('delete', () => {
|
||||
done();
|
||||
});
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
}, 300);
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('watch contactInfo', done => {
|
||||
const contactInfo = {
|
||||
name: '123'
|
||||
};
|
||||
|
||||
wrapper = mount(ContactEdit, {
|
||||
propsData: {
|
||||
contactInfo: {}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.setProps({ contactInfo });
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentInfo.name).to.equal('123');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,324 @@
|
||||
import CouponCell from 'packages/coupon-cell';
|
||||
import CouponList from 'packages/coupon-list';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
const coupon = {
|
||||
id: 1,
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
id: 2,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折'
|
||||
};
|
||||
|
||||
const emptyCoupon = {
|
||||
id: 3,
|
||||
denominations: 0,
|
||||
discount: 0
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
id: 4,
|
||||
available: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
id: 5,
|
||||
available: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
describe('CouponCell', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('no coupon', () => {
|
||||
wrapper = mount(CouponCell, {});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value': '使用优惠'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('has two coupon', () => {
|
||||
wrapper = mount(CouponCell, {
|
||||
propsData: {
|
||||
coupons: [coupon, discountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value': '您有 2 个可用优惠'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('select first coupon', () => {
|
||||
wrapper = mount(CouponCell, {
|
||||
propsData: {
|
||||
chosenCoupon: 0,
|
||||
coupons: [coupon, discountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value span': '省￥1.50'
|
||||
},
|
||||
count: {
|
||||
'.van-cell__right-icon': 1
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('not editable', () => {
|
||||
wrapper = mount(CouponCell, {
|
||||
propsData: {
|
||||
chosenCoupon: 0,
|
||||
coupons: [coupon, discountCoupon],
|
||||
editable: false
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__value span': '省￥1.50'
|
||||
},
|
||||
count: {
|
||||
'.van-cell__right-icon': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('CouponList', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('no coupon', () => {
|
||||
wrapper = mount(CouponList, {
|
||||
propsData: {
|
||||
chosenCoupon: -1
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-coupon-item': 0,
|
||||
'.van-coupon-item--disabled': 0,
|
||||
'.van-coupon-list__list h3': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('has two coupon', () => {
|
||||
wrapper = mount(CouponList, {
|
||||
propsData: {
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-coupon-item': 4,
|
||||
'.van-coupon-item--disabled': 2,
|
||||
'.van-coupon-list__list h3': 1
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('switch to first coupon', (done) => {
|
||||
wrapper = mount(CouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('change', (index) => {
|
||||
wrapper.vm.chosenCoupon = index;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.find('.van-coupon-item')[0].trigger('click');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.chosenCoupon).to.equal(0);
|
||||
done();
|
||||
}, 300);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('cancel select coupon', (done) => {
|
||||
wrapper = mount(CouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
chosenCoupon: 0,
|
||||
displayedCouponIndex: 0,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('change', (index) => {
|
||||
wrapper.vm.chosenCoupon = index;
|
||||
wrapper.vm.displayedCouponIndex = index;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.find('.van-coupon-list__close')[0].trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.chosenCoupon).to.equal(-1);
|
||||
done();
|
||||
}, 500);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('denominations format', () => {
|
||||
wrapper = mount(CouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
coupons: [coupon, {
|
||||
...coupon,
|
||||
id: 10,
|
||||
denominations: 10
|
||||
}, {
|
||||
...coupon,
|
||||
id: 11,
|
||||
denominations: 100
|
||||
}, {
|
||||
...coupon,
|
||||
id: 12,
|
||||
denominations: 135
|
||||
}, {
|
||||
...coupon,
|
||||
id: 13,
|
||||
denominations: 0
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[0].text()).to.equal('¥ 1.5');
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[1].text()).to.equal('¥ 0.1');
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[2].text()).to.equal('¥ 1');
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[3].text()).to.equal('¥ 1.35');
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[4].text()).to.equal('');
|
||||
});
|
||||
|
||||
it('discount format', () => {
|
||||
wrapper = mount(CouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
coupons: [discountCoupon, {
|
||||
...discountCoupon,
|
||||
id: 10,
|
||||
discount: 10
|
||||
}, {
|
||||
...discountCoupon,
|
||||
id: 11,
|
||||
discount: 0
|
||||
}]
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[0].text()).to.equal('8.8折');
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[1].text()).to.equal('1折');
|
||||
expect(wrapper.find('.van-coupon-item__gradient h2')[2].text()).to.equal('');
|
||||
});
|
||||
|
||||
it('add coupon', (done) => {
|
||||
wrapper = mount(CouponList, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
chosenCoupon: 0,
|
||||
coupons: [coupon, discountCoupon, emptyCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
const code = '123123';
|
||||
|
||||
wrapper.vm.$on('exchange', (code) => {
|
||||
expect(code).to.equal(code);
|
||||
wrapper.vm.coupons.push({
|
||||
...coupon,
|
||||
id: 15
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-button--disabled': 1
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__control')[0].element.value = code;
|
||||
wrapper.find('.van-field__control')[0].trigger('input');
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.find('.van-coupon-list__exchange')[0].trigger('click');
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-button--disabled': 0
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-coupon-list')[0].hasStyle('display', 'none')).to.equal(false);
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-button--disabled': 1,
|
||||
'.van-coupon-item': 6,
|
||||
'.van-coupon-item--disabled': 2
|
||||
}
|
||||
});
|
||||
done();
|
||||
}, 300);
|
||||
}, 300);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('displayedCouponIndex out of range', (done) => {
|
||||
wrapper = mount(CouponList, {
|
||||
propsData: {
|
||||
displayedCouponIndex: -100,
|
||||
coupons: [coupon, discountCoupon, emptyCoupon]
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.chosenCoupon).to.equal(-1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,129 @@
|
||||
import DatetimePicker from 'packages/datetime-picker';
|
||||
import { mount } from 'avoriaz';
|
||||
import { dragHelper } from '../utils';
|
||||
|
||||
const testTime = '10:00';
|
||||
const testDate = new Date('2017/03/10 10:00');
|
||||
const minDate = new Date('2000/01/01 00:00');
|
||||
const maxDate = new Date('3000/01/01 00:00');
|
||||
|
||||
describe('DatetimePicker', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a time picker', () => {
|
||||
wrapper = mount(DatetimePicker, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
type: 'time',
|
||||
value: testTime
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.innerValue).to.equal(testTime);
|
||||
});
|
||||
|
||||
it('create a date picker', () => {
|
||||
wrapper = mount(DatetimePicker, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
type: 'date',
|
||||
value: testDate
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
|
||||
});
|
||||
|
||||
it('create a datetime picker', () => {
|
||||
wrapper = mount(DatetimePicker, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
type: 'datetime',
|
||||
value: testDate
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
|
||||
});
|
||||
|
||||
it('drag time picker', (done) => {
|
||||
wrapper = mount(DatetimePicker, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
type: 'time',
|
||||
value: '12:00'
|
||||
}
|
||||
});
|
||||
|
||||
const [hour, minute] = wrapper.find('.van-picker-column ul');
|
||||
dragHelper(hour, -50);
|
||||
dragHelper(minute, -50);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.innerValue).to.equal('1:01');
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
|
||||
it('drag date picker', (done) => {
|
||||
wrapper = mount(DatetimePicker, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
type: 'date',
|
||||
value: testDate,
|
||||
minDate,
|
||||
maxDate
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const [year, month, day] = wrapper.find('.van-picker-column ul');
|
||||
dragHelper(year, -50);
|
||||
dragHelper(month, -50);
|
||||
dragHelper(day, -50);
|
||||
setTimeout(() => {
|
||||
const newYear = wrapper.vm.innerValue.getFullYear();
|
||||
const newMonth = wrapper.vm.innerValue.getMonth() + 1;
|
||||
const newDay = wrapper.vm.innerValue.getDate();
|
||||
expect(newYear).to.equal(2018);
|
||||
expect(newMonth).to.equal(4);
|
||||
expect(newDay).to.equal(11);
|
||||
done();
|
||||
}, 10);
|
||||
}, 10);
|
||||
});
|
||||
|
||||
it('drag datetime picker', (done) => {
|
||||
wrapper = mount(DatetimePicker, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
type: 'datetime',
|
||||
value: testDate,
|
||||
minDate,
|
||||
maxDate
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const [year, month, day, hour, minute] = wrapper.find('.van-picker-column ul');
|
||||
dragHelper(year, -50);
|
||||
dragHelper(month, -50);
|
||||
dragHelper(day, -50);
|
||||
dragHelper(hour, -50);
|
||||
dragHelper(minute, -50);
|
||||
setTimeout(() => {
|
||||
const newYear = wrapper.vm.innerValue.getFullYear();
|
||||
const newMonth = wrapper.vm.innerValue.getMonth() + 1;
|
||||
const newDay = wrapper.vm.innerValue.getDate();
|
||||
const newHour = wrapper.vm.innerValue.getHours();
|
||||
const newMinute = wrapper.vm.innerValue.getMinutes();
|
||||
expect(newYear).to.equal(2018);
|
||||
expect(newMonth).to.equal(4);
|
||||
expect(newDay).to.equal(11);
|
||||
expect(newHour).to.equal(11);
|
||||
expect(newMinute).to.equal(1);
|
||||
done();
|
||||
}, 10);
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,96 @@
|
||||
import deepAssign from 'packages/utils/deep-assign';
|
||||
|
||||
describe('DeepAssign', () => {
|
||||
it('basic assign', () => {
|
||||
const a = { foo: 0 };
|
||||
const b = { foo: 0, bar: 1 };
|
||||
const output = { foo: 0, bar: 1 };
|
||||
expect(deepAssign(a, b)).to.eql(output);
|
||||
expect(deepAssign(a, null)).to.eql(a);
|
||||
expect(deepAssign(a, undefined)).to.eql(a);
|
||||
});
|
||||
|
||||
it('same object', () => {
|
||||
const a = { foo: 0 };
|
||||
expect(deepAssign(a, a)).to.eql(a);
|
||||
});
|
||||
|
||||
it('only assign own keys', () => {
|
||||
const Test = function() {};
|
||||
Test.prototype.a = 'many';
|
||||
const test = new Test();
|
||||
test.bar = 1;
|
||||
expect(deepAssign({ foo: 1 }, test, { foo: 1, bar: 1 })).to.eql({
|
||||
foo: 1,
|
||||
bar: 1
|
||||
});
|
||||
});
|
||||
|
||||
it('do not assign undefined values', () => {
|
||||
expect(deepAssign({}, { foo: undefined })).to.eql({});
|
||||
});
|
||||
|
||||
it('do not assign null values', () => {
|
||||
expect(deepAssign({}, { foo: null })).to.eql({});
|
||||
});
|
||||
|
||||
it('assign proprety, if proprety is null in the prototype chain', () => {
|
||||
const Unicorn = function() {};
|
||||
Unicorn.prototype.rainbows = null;
|
||||
const unicorn = new Unicorn();
|
||||
expect(deepAssign(unicorn, { rainbows: 'many' }).rainbows).to.eql('many');
|
||||
});
|
||||
|
||||
it('assign proprety, if proprety is undefined in the prototype chain', () => {
|
||||
const Unicorn = function() {};
|
||||
Unicorn.prototype.rainbows = undefined;
|
||||
const unicorn = new Unicorn();
|
||||
expect(deepAssign(unicorn, { rainbows: 'many' }).rainbows).to.eql('many');
|
||||
});
|
||||
|
||||
it('do not merge with a target proprety in the prototype chain', () => {
|
||||
const amountOfRainbows = { amount: 'many' };
|
||||
const Unicorn = function() {};
|
||||
Unicorn.prototype.rainbows = amountOfRainbows;
|
||||
const unicorn = deepAssign(new Unicorn(), { rainbows: 'none' });
|
||||
expect(unicorn.rainbows).to.eql('none');
|
||||
expect(unicorn.rainbows.amount).to.eql(undefined);
|
||||
expect(Unicorn.prototype.rainbows).to.eql(amountOfRainbows);
|
||||
});
|
||||
|
||||
it('deep assign', () => {
|
||||
const a = {
|
||||
foo: {
|
||||
foo: {
|
||||
foo: true
|
||||
},
|
||||
bar: {
|
||||
bar: false
|
||||
}
|
||||
}
|
||||
};
|
||||
const b = {
|
||||
foo: {
|
||||
foo: {
|
||||
foo: false,
|
||||
bar: true
|
||||
},
|
||||
bar: null
|
||||
},
|
||||
bar: true
|
||||
};
|
||||
const output = {
|
||||
foo: {
|
||||
foo: {
|
||||
foo: false,
|
||||
bar: true
|
||||
},
|
||||
bar: {
|
||||
bar: false
|
||||
}
|
||||
},
|
||||
bar: true
|
||||
};
|
||||
expect(deepAssign(a, b)).to.eql(output);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import Vue from 'vue';
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
describe('Dialog', () => {
|
||||
afterEach(() => {
|
||||
Dialog.close();
|
||||
});
|
||||
|
||||
it('create a alert dialog', (done) => {
|
||||
Dialog.alert({
|
||||
title: 'title',
|
||||
message: 'message'
|
||||
}).then((action) => {
|
||||
expect(action).to.equal('confirm');
|
||||
done();
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(document.querySelector('.van-dialog')).to.exist;
|
||||
expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
|
||||
document.querySelector('.van-dialog__confirm').click();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('create a confirm dialog', (done) => {
|
||||
Dialog.confirm({
|
||||
title: 'title',
|
||||
message: 'message'
|
||||
}).catch((action) => {
|
||||
expect(action).to.equal('cancel');
|
||||
done();
|
||||
});
|
||||
|
||||
expect(document.querySelector('.van-dialog')).to.exist;
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector('.van-dialog__cancel').click();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('create a confirm dialog with callback', (done) => {
|
||||
Dialog.confirm({
|
||||
callback: (action) => {
|
||||
expect(action).to.equal('cancel');
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector('.van-dialog__cancel').click();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('set default options', () => {
|
||||
Dialog.setDefaultOptions({
|
||||
title: 'default title'
|
||||
});
|
||||
expect(Dialog.currentOptions.title).to.equal('default title');
|
||||
Dialog.resetDefaultOptions();
|
||||
expect(Dialog.currentOptions.title).to.equal('');
|
||||
});
|
||||
|
||||
it('register dialog component', () => {
|
||||
Vue.use(Dialog);
|
||||
expect(!!Vue.component('van-dialog')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,154 @@
|
||||
import Field from 'packages/field';
|
||||
import FieldWithIcon from '../components/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;
|
||||
});
|
||||
|
||||
it('create a border field', () => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
type: 'text',
|
||||
border: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.hasClass('van-field--border')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a text field with initialize value', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.vm.value = 'test2';
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('input'));
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
|
||||
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.trigger('focus');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('focus'));
|
||||
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--has-textarea')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a autosize textarea field', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
type: 'textarea',
|
||||
autosize: true
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
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.trigger('input');
|
||||
|
||||
wrapper.update();
|
||||
setTimeout(() => {
|
||||
expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test');
|
||||
expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('show icon when has value and icon props', () => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
icon: 'name',
|
||||
value: '123'
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
expect(wrapper.find('.van-field__icon').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('create a field with icon slot', () => {
|
||||
const fn = sinon.spy();
|
||||
|
||||
wrapper = mount(FieldWithIcon, {
|
||||
propsData: {
|
||||
onIconClick: fn
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__icon')[0].trigger('touchstart');
|
||||
expect(fn.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
it('blur event', (done) => {
|
||||
const blur = sinon.spy();
|
||||
const focus = sinon.spy();
|
||||
const clickIcon = sinon.spy();
|
||||
|
||||
wrapper = mount(FieldWithIcon, {});
|
||||
wrapper.vm.$on('blur', blur);
|
||||
wrapper.vm.$on('focus', focus);
|
||||
|
||||
wrapper.find('.van-field__icon')[0].trigger('click');
|
||||
wrapper.find('.van-field__control')[0].trigger('focus');
|
||||
wrapper.find('.van-field__control')[0].trigger('blur');
|
||||
|
||||
expect(blur.calledOnce).to.be.true;
|
||||
expect(clickIcon.calledOnce).to.be.false;
|
||||
done();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import GoodsAction from '../components/goods-action';
|
||||
import GoodsActionBigBtn from 'packages/goods-action-big-btn';
|
||||
import GoodsActionMiniBtn from 'packages/goods-action-mini-btn';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
describe('GoodsAction', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a GoodsAction', () => {
|
||||
wrapper = mount(GoodsAction, {});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-goods-action__mini-btn': 2,
|
||||
'.van-goods-action__big-btn': 2,
|
||||
'.van-icon-chat': 1
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('click GoodsActionBigBtn', () => {
|
||||
wrapper = mount(GoodsActionBigBtn, {});
|
||||
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('click', submitSpyFunc);
|
||||
wrapper.trigger('click');
|
||||
expect(submitSpyFunc.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
it('click GoodsActionMiniBtn', () => {
|
||||
wrapper = mount(GoodsActionMiniBtn, {
|
||||
propsData: {
|
||||
icon: 'card'
|
||||
}
|
||||
});
|
||||
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('click', submitSpyFunc);
|
||||
wrapper.trigger('click');
|
||||
expect(submitSpyFunc.calledOnce).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
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;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import Vue from 'vue';
|
||||
import { mount } from 'avoriaz';
|
||||
import { triggerTouch } from '../utils';
|
||||
import ImagePreview from 'packages/image-preview';
|
||||
import ImagePreviewVue from 'packages/image-preview/image-preview';
|
||||
|
||||
const images = [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
];
|
||||
|
||||
describe('ImagePreview', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('call ImagePreview Function', (done) => {
|
||||
ImagePreview(images);
|
||||
Vue.nextTick(() => {
|
||||
expect(document.querySelectorAll('.van-image-preview img').length).to.equal(3);
|
||||
ImagePreview(images.slice(0, 2));
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(document.querySelectorAll('.van-image-preview img').length).to.equal(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('create a ImagePreview Component', (done) => {
|
||||
wrapper = mount(ImagePreviewVue);
|
||||
wrapper.vm.images = images;
|
||||
wrapper.vm.value = true;
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-image-preview')).to.be.true;
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('img').length).to.equal(3);
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 100, 100);
|
||||
triggerTouch(wrapper, 'touchend', 0, 0);
|
||||
expect(wrapper.vm.value).to.be.true;
|
||||
|
||||
triggerTouch(wrapper, 'touchstart', 0, 0);
|
||||
triggerTouch(wrapper, 'touchmove', 0, 0);
|
||||
triggerTouch(wrapper, 'touchend', 0, 0);
|
||||
expect(wrapper.vm.value).to.be.false;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import Col from 'packages/col';
|
||||
import Row from 'packages/row';
|
||||
import RowTestComponent from '../components/row';
|
||||
|
||||
describe('Layout', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a simple row', () => {
|
||||
wrapper = mount(Row);
|
||||
|
||||
expect(wrapper.hasClass('van-row')).to.be.true;
|
||||
expect(wrapper.vm.style).to.be.empty;
|
||||
});
|
||||
|
||||
it('create a simple column', () => {
|
||||
wrapper = mount(Col, {
|
||||
propsData: {
|
||||
span: 8,
|
||||
offset: 8
|
||||
}
|
||||
});
|
||||
expect(wrapper.hasClass('van-col')).to.be.true;
|
||||
expect(wrapper.hasClass('van-col-8')).to.be.true;
|
||||
expect(wrapper.hasClass('van-col-offset-8')).to.be.true;
|
||||
expect(wrapper.vm.gutter).to.equal(0);
|
||||
});
|
||||
|
||||
it('create a gutter row', () => {
|
||||
wrapper = mount(RowTestComponent);
|
||||
const row = wrapper.find(Row)[0];
|
||||
const column = wrapper.find(Col)[0];
|
||||
expect(row.hasStyle('margin-left', '-5px')).to.be.true;
|
||||
expect(row.hasStyle('margin-right', '-5px')).to.be.true;
|
||||
expect(column.hasStyle('padding-left', '5px')).to.be.true;
|
||||
expect(column.hasStyle('padding-right', '5px')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,73 @@
|
||||
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;
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
it('loading size', () => {
|
||||
wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
size: '100px'
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.$el.style.width).to.equal('100px');
|
||||
expect(wrapper.vm.$el.style.height).to.equal('100px');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import NavBar from 'packages/nav-bar';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
describe('NavBar', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a NavBar', () => {
|
||||
wrapper = mount(NavBar, {
|
||||
propsData: {
|
||||
title: '标题',
|
||||
leftText: '返回',
|
||||
rightText: '按钮',
|
||||
leftArrow: true
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-nav-bar__title': '标题',
|
||||
'.van-nav-bar__left .van-nav-bar__text': '返回',
|
||||
'.van-nav-bar__right .van-nav-bar__text': '按钮'
|
||||
},
|
||||
count: {
|
||||
'.van-nav-bar__arrow': 1
|
||||
}
|
||||
});
|
||||
expect(wrapper.hasClass('van-nav-bar')).to.be.true;
|
||||
});
|
||||
|
||||
it('NavBar fixed', () => {
|
||||
wrapper = mount(NavBar, {
|
||||
propsData: {
|
||||
fixed: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-nav-bar')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,61 @@
|
||||
import NoticeBar from '../components/notice-bar';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('NoticeBar', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a notice-bar', () => {
|
||||
wrapper = mount(NoticeBar, {
|
||||
propsData: {},
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-notice-bar').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('mode closeable', () => {
|
||||
wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
mode: 'closeable'
|
||||
},
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
const icon = wrapper.find('.van-icon-close');
|
||||
expect(icon.length).to.equal(1);
|
||||
|
||||
icon[0].trigger('click');
|
||||
expect(wrapper.hasStyle('display', 'none'));
|
||||
});
|
||||
|
||||
it('mode link', () => {
|
||||
wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
mode: 'link'
|
||||
},
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-icon-arrow').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('notice-bar transitionend', (done) => {
|
||||
wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
text: '足协杯战线连续第2年上演广州德比战',
|
||||
speed: 1000,
|
||||
delay: 0
|
||||
},
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
const content = wrapper.find('.van-notice-bar__content')[0];
|
||||
setTimeout(() => {
|
||||
expect(content.hasStyle('transition-delay', '0s')).to.be.true;
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,169 @@
|
||||
import NumberKeyboard from 'packages/number-keyboard';
|
||||
import NumberKeyboardKeepAlive from '../components/number-keyboard';
|
||||
import { mount } from 'avoriaz';
|
||||
import { triggerTouch } from '../utils';
|
||||
|
||||
function mockKeyDown(wrapper, keyIndex) {
|
||||
const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
|
||||
const touchStart = document.createEvent('CustomEvent');
|
||||
touchStart.initCustomEvent('touchstart', true, true, {});
|
||||
key.dispatchEvent(touchStart);
|
||||
}
|
||||
|
||||
function mockKeyUp(wrapper, keyIndex) {
|
||||
const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
|
||||
const touchEnd = document.createEvent('CustomEvent');
|
||||
touchEnd.initCustomEvent('touchend', true, true, {});
|
||||
key.dispatchEvent(touchEnd);
|
||||
}
|
||||
|
||||
describe('NumberKeyboard', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a NumberKeyboard', () => {
|
||||
wrapper = mount(NumberKeyboard, {});
|
||||
expect(wrapper.hasClass('van-number-keyboard')).to.be.true;
|
||||
});
|
||||
|
||||
it('click a keyboard key', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {
|
||||
propsData: {
|
||||
theme: 'custom',
|
||||
closeButtonText: 'close'
|
||||
}
|
||||
});
|
||||
|
||||
// just for coverage
|
||||
wrapper.vm.handler(true);
|
||||
|
||||
wrapper.vm.$on('input', value => {
|
||||
mockKeyUp(wrapper, 0);
|
||||
expect(value).to.equal(1);
|
||||
done();
|
||||
});
|
||||
|
||||
mockKeyDown(wrapper, 12); // close
|
||||
mockKeyDown(wrapper, 10); // empty
|
||||
mockKeyDown(wrapper, 0); // 1
|
||||
});
|
||||
|
||||
it('click delete key', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {});
|
||||
|
||||
const deleteSpy = sinon.spy();
|
||||
wrapper.vm.$on('delete', deleteSpy);
|
||||
|
||||
mockKeyDown(wrapper, 11);
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(deleteSpy.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('blur keyboard', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
const blur = sinon.spy();
|
||||
wrapper.vm.$on('blur', blur);
|
||||
|
||||
triggerTouch(document.body, 'touchstart');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(blur.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('listen to show event when has transtion', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
const show = sinon.spy();
|
||||
wrapper.vm.$on('show', show);
|
||||
wrapper.vm.show = true;
|
||||
wrapper.trigger('animationend');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(show.calledOnce).to.be.true;
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('listen to show event when no transtion', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
transition: false
|
||||
}
|
||||
});
|
||||
|
||||
const show = sinon.spy();
|
||||
wrapper.vm.$on('show', show);
|
||||
wrapper.vm.show = true;
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(show.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('listen to hide event when has transtion', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
show: true
|
||||
}
|
||||
});
|
||||
|
||||
const hide = sinon.spy();
|
||||
wrapper.vm.$on('hide', hide);
|
||||
wrapper.vm.show = false;
|
||||
wrapper.trigger('animationend');
|
||||
|
||||
setTimeout(() => {
|
||||
expect(hide.calledOnce).to.be.true;
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('listen to hide event when no transtion', (done) => {
|
||||
wrapper = mount(NumberKeyboard, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
show: true,
|
||||
transition: false
|
||||
}
|
||||
});
|
||||
|
||||
const hide = sinon.spy();
|
||||
wrapper.vm.$on('hide', hide);
|
||||
wrapper.vm.show = false;
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(hide.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('keey-alive live cycle', (done) => {
|
||||
wrapper = mount(NumberKeyboardKeepAlive, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
showKeyboard: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-number-keyboard').length).to.equal(1);
|
||||
|
||||
wrapper.vm.showKeyboard = false;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-number-keyboard').length).to.equal(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
import Vue from 'vue';
|
||||
import { mount } from 'avoriaz';
|
||||
import Pagination from 'packages/pagination';
|
||||
|
||||
describe('Pagination', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a multi Pagination', done => {
|
||||
wrapper = mount(Pagination, {
|
||||
propsData: {
|
||||
mode: 'multi',
|
||||
totalItems: 120,
|
||||
itemsPerPage: 10,
|
||||
showPageSize: 5,
|
||||
value: 2
|
||||
}
|
||||
});
|
||||
expect(wrapper.hasClass('van-pagination')).to.be.true;
|
||||
expect(wrapper.find('.van-pagination__item').length).to.equal(7);
|
||||
expect(
|
||||
wrapper.find('.van-pagination__item')[0].hasClass('van-pagination__prev')
|
||||
).to.be.true;
|
||||
expect(wrapper.vm.value).to.equal(2);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.find('.van-pagination__next')[0].trigger('click');
|
||||
Vue.nextTick(() => {
|
||||
expect(eventStub.calledWith('input'));
|
||||
expect(eventStub.calledWith('change'));
|
||||
expect(wrapper.vm.value).to.equal(2);
|
||||
|
||||
wrapper.vm.value = 12;
|
||||
wrapper.update();
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
wrapper
|
||||
.find('.van-pagination__next')[0]
|
||||
.hasClass('van-pagination--disabled')
|
||||
).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('create a multi forceEllipses Pagination', done => {
|
||||
wrapper = mount(Pagination, {
|
||||
propsData: {
|
||||
mode: 'multi',
|
||||
totalItems: 120,
|
||||
itemsPerPage: 10,
|
||||
showPageSize: 5,
|
||||
forceEllipses: true,
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
const ellipsesLink = wrapper.find('.van-pagination__page')[5];
|
||||
expect(ellipsesLink.text().trim()).to.equal('...');
|
||||
|
||||
wrapper.vm.value = 7;
|
||||
wrapper.update();
|
||||
Vue.nextTick(() => {
|
||||
const ellipsesLink = wrapper.find('.van-pagination__page')[0];
|
||||
expect(ellipsesLink.text().trim()).to.equal('...');
|
||||
|
||||
wrapper.vm.value = 12;
|
||||
Vue.nextTick(() => {
|
||||
const pages = wrapper.find('.van-pagination__page');
|
||||
const ellipsesLink = pages[pages.length - 1];
|
||||
expect(ellipsesLink.text().trim()).to.equal('12');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('create a simple Pagination', () => {
|
||||
wrapper = mount(Pagination, {
|
||||
propsData: {
|
||||
mode: 'simple',
|
||||
totalItems: 120,
|
||||
itemsPerPage: 10,
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
expect(wrapper.hasClass('van-pagination')).to.be.true;
|
||||
expect(wrapper.find('.van-pagination__item').length).to.equal(2);
|
||||
expect(
|
||||
wrapper.find('.van-pagination__item')[0].hasClass('van-pagination__prev')
|
||||
).to.be.true;
|
||||
});
|
||||
|
||||
it('create a empty Pagination', done => {
|
||||
wrapper = mount(Pagination, {
|
||||
propsData: {
|
||||
mode: 'multi',
|
||||
totalItems: 120,
|
||||
itemsPerPage: 10,
|
||||
showPageSize: 5,
|
||||
nextText: '下一页',
|
||||
previousText: '上一页',
|
||||
value: 2
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-pagination__prev')[0].text().trim()).to.equal('上一页');
|
||||
expect(wrapper.find('.van-pagination__next')[0].text().trim()).to.equal('下一页');
|
||||
|
||||
wrapper.vm.value = { currentPage: 18 };
|
||||
wrapper.update();
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.find('.van-pagination__page').length).to.equal(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a multi forceEllipses Pagination && max show page size', () => {
|
||||
wrapper = mount(Pagination, {
|
||||
propsData: {
|
||||
mode: 'multi',
|
||||
totalItems: 120,
|
||||
itemsPerPage: 10,
|
||||
showPageSize: 12,
|
||||
forceEllipses: true,
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
const ellipsesLink = wrapper.find('.van-pagination__page')[11];
|
||||
expect(ellipsesLink.text().trim()).to.equal('12');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
import PasswordInput from 'packages/password-input';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('PasswordInput', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a PasswordInput', () => {
|
||||
wrapper = mount(PasswordInput, {});
|
||||
expect(wrapper.find('.van-password-input').length).to.equal(1);
|
||||
});
|
||||
|
||||
it('create a PasswordInput with value && info', (done) => {
|
||||
wrapper = mount(PasswordInput, {
|
||||
propsData: {
|
||||
value: '000',
|
||||
info: '测试info'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-password-input i')[2].hasStyle('visibility', 'visible')).to.be.true;
|
||||
expect(wrapper.find('.van-password-input i')[3].hasStyle('visibility', 'visible')).to.be.false;
|
||||
expect(wrapper.find('.van-password-input__info')[0].text()).to.equal('测试info');
|
||||
|
||||
wrapper.vm.value = '0000';
|
||||
wrapper.vm.errorInfo = '测试errorInfo';
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-password-input i')[3].hasStyle('visibility', 'visible')).to.be.true;
|
||||
expect(wrapper.find('.van-password-input__info').length).to.equal(0);
|
||||
expect(wrapper.find('.van-password-input__error-info')[0].text()).to.equal('测试errorInfo');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('listen to focus event', () => {
|
||||
wrapper = mount(PasswordInput, {});
|
||||
|
||||
const focus = sinon.spy();
|
||||
wrapper.vm.$on('focus', focus);
|
||||
wrapper.find('.van-password-input__security')[0].trigger('touchstart');
|
||||
|
||||
expect(focus.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
it('change password length', () => {
|
||||
wrapper = mount(PasswordInput, {
|
||||
propsData: {
|
||||
length: 2
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-password-input i').length).to.equal(2);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,283 @@
|
||||
import Picker from 'packages/picker';
|
||||
import PickerColumn from 'packages/picker/PickerColumn';
|
||||
import { mount } from 'avoriaz';
|
||||
import { dragHelper } from '../utils';
|
||||
|
||||
const simpleColumn = ['1990', '1991', '1992', '1993', '1994', '1995'];
|
||||
const columns = [
|
||||
{
|
||||
values: ['vip', 'normal'],
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: simpleColumn,
|
||||
className: 'column2'
|
||||
}
|
||||
];
|
||||
|
||||
const disabledOption = [{
|
||||
disabled: true,
|
||||
text: '123'
|
||||
}];
|
||||
|
||||
describe('Picker', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create picker', () => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: columns
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-picker')).to.be.true;
|
||||
|
||||
expect(wrapper.vm.getColumnValues(0).length).to.equal(2);
|
||||
expect(wrapper.vm.getValues().length).to.equal(2);
|
||||
});
|
||||
|
||||
it('set picker values', () => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: columns
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getColumnValues(0).length).to.equal(2);
|
||||
expect(wrapper.vm.getColumnValues(1).length).to.equal(6);
|
||||
|
||||
expect(wrapper.vm.getColumnValue(0)).to.equal('vip');
|
||||
expect(wrapper.vm.getColumnValue(1)).to.equal('1990');
|
||||
|
||||
wrapper.vm.setColumnValue(0, 'normal');
|
||||
expect(wrapper.vm.getColumnValue(0)).to.equal('normal');
|
||||
|
||||
wrapper.vm.setColumnIndex(0, 0);
|
||||
expect(wrapper.vm.getColumnValue(0)).to.equal('vip');
|
||||
|
||||
wrapper.vm.setColumnValue(1, '1991');
|
||||
expect(wrapper.vm.getColumnValue(1)).to.equal('1991');
|
||||
|
||||
wrapper.vm.setColumnValues(0, ['vip', 'normal', 'other']);
|
||||
expect(wrapper.vm.getColumnValues(0).length).to.equal(3);
|
||||
expect(wrapper.vm.getValues().length).to.equal(2);
|
||||
|
||||
wrapper.vm.setValues(['vip', '1992']);
|
||||
expect(wrapper.vm.getColumnIndex(0)).to.equal(0);
|
||||
expect(wrapper.vm.getColumnIndex(1)).to.equal(2);
|
||||
expect(wrapper.vm.getColumnIndex(2)).to.equal(undefined);
|
||||
expect(wrapper.vm.getIndexes(2)).to.eql([0, 2]);
|
||||
|
||||
wrapper.vm.setIndexes([1, 4]);
|
||||
expect(wrapper.vm.getColumnValue(0)).to.equal('normal');
|
||||
expect(wrapper.vm.getColumnValue(1)).to.equal('1994');
|
||||
expect(wrapper.vm.getColumnValue(2)).to.equal(undefined);
|
||||
});
|
||||
|
||||
it('create a simple column picker', () => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: undefined
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-picker')).to.be.true;
|
||||
expect(wrapper.vm.currentColumns.length).to.equal(0);
|
||||
});
|
||||
|
||||
it('create a invalid columns picker', () => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.isSimpleColumn).to.be.true;
|
||||
});
|
||||
|
||||
it('set invalid index columns', () => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: columns
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.getColumnValues(3)).to.equal(undefined);
|
||||
wrapper.vm.setColumnValues(3, [1, 2]);
|
||||
expect(wrapper.vm.getColumnValues(3)).to.equal(undefined);
|
||||
|
||||
expect(wrapper.vm.getColumnValue(3)).to.equal(undefined);
|
||||
wrapper.vm.setColumnValue(3, 3);
|
||||
expect(wrapper.vm.getColumnValue(3)).to.equal(undefined);
|
||||
});
|
||||
|
||||
it('create a empty picker and emit a cencel event', (done) => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-picker')).to.be.true;
|
||||
expect(wrapper.contains('.van-picker__toolbar')).to.be.true;
|
||||
expect(wrapper.vm.currentColumns.length).to.equal(0);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
const cancelBtn = wrapper.find('.van-picker__cancel')[0];
|
||||
cancelBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('cancel'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a empty picker and emit a confirm event', (done) => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-picker')).to.be.true;
|
||||
expect(wrapper.contains('.van-picker__toolbar')).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
const cancelBtn = wrapper.find('.van-picker__confirm')[0];
|
||||
cancelBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('confirm'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('simple column emit a confirm event', (done) => {
|
||||
wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn,
|
||||
showToolbar: true
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
const cancelBtn = wrapper.find('.van-picker__confirm')[0];
|
||||
cancelBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('confirm'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('PickerColumn', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a picker-column', () => {
|
||||
wrapper = mount(PickerColumn);
|
||||
|
||||
expect(wrapper.hasClass('van-picker-column')).to.be.true;
|
||||
expect(wrapper.vm.options.length).to.equal(0);
|
||||
});
|
||||
|
||||
it('change picker-column value', (done) => {
|
||||
wrapper = mount(PickerColumn, {
|
||||
propsData: {
|
||||
options: [1, 2, 3, 4, 5],
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.options.length).to.equal(5);
|
||||
|
||||
wrapper.vm.setValue(3);
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentValue).to.equal(3);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('change picker-column values', (done) => {
|
||||
wrapper = mount(PickerColumn);
|
||||
|
||||
expect(wrapper.vm.options.length).to.equal(0);
|
||||
|
||||
wrapper.vm.options = [1, 2];
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.options.length).to.equal(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('change defaultIndex', (done) => {
|
||||
wrapper = mount(PickerColumn, {
|
||||
propsData: {
|
||||
options: simpleColumn,
|
||||
defaultIndex: 0
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.currentIndex).to.equal(0);
|
||||
wrapper.vm.defaultIndex = 2;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentIndex).to.equal(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('select disabled options', () => {
|
||||
wrapper = mount(PickerColumn, {
|
||||
propsData: {
|
||||
options: [
|
||||
{ text: '1', disabled: true },
|
||||
{ text: '2' },
|
||||
{ text: '3', disabled: true },
|
||||
{ text: '4', disabled: true }
|
||||
],
|
||||
valueKey: 'text'
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.currentIndex).to.equal(1);
|
||||
|
||||
wrapper.vm.setIndex(3);
|
||||
expect(wrapper.vm.currentIndex).to.equal(1);
|
||||
});
|
||||
|
||||
it('disabled options', () => {
|
||||
wrapper = mount(PickerColumn, {
|
||||
propsData: {
|
||||
options: disabledOption
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-picker-column--disabled').length).to.equal(1);
|
||||
expect(wrapper.vm.currentIndex).to.equal(undefined);
|
||||
});
|
||||
|
||||
it('drag options', () => {
|
||||
wrapper = mount(PickerColumn, {
|
||||
propsData: {
|
||||
options: columns[1].values,
|
||||
itemHeight: 50
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.currentIndex).to.equal(0);
|
||||
|
||||
const column = wrapper.find('.van-picker-column')[0];
|
||||
dragHelper(column, 0);
|
||||
expect(wrapper.vm.currentIndex).to.equal(0);
|
||||
|
||||
dragHelper(column, -100);
|
||||
expect(wrapper.vm.currentIndex).to.equal(2);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,150 @@
|
||||
import Popup from 'packages/popup';
|
||||
import { mount } from 'avoriaz';
|
||||
import { triggerTouch } from '../utils';
|
||||
|
||||
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,
|
||||
zIndex: 100,
|
||||
overlay: false,
|
||||
lockOnScroll: true
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
expect(wrapper.element.style.display).to.equal('none');
|
||||
|
||||
wrapper.vm.value = true;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.element.style.display).to.equal('');
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('toggle popup show', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.element.style.display).to.equal('');
|
||||
});
|
||||
|
||||
it('create a popup-fade transition popup', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
transition: 'popup-fade'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-popup')).to.be.true;
|
||||
expect(wrapper.instance().currentTransition).to.equal('popup-fade');
|
||||
});
|
||||
|
||||
it('popup prevent scroll', (done) => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
preventScroll: true,
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-popup')).to.be.true;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.element.style.display).to.equal('');
|
||||
wrapper.vm.value = false;
|
||||
triggerTouch(document, 'touchstart', 0, 0);
|
||||
triggerTouch(document, 'touchmove', 0, 10);
|
||||
triggerTouch(document, 'touchmove', 0, 30);
|
||||
triggerTouch(document, 'touchmove', 0, -30);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.element.style.display).to.equal('none');
|
||||
done();
|
||||
}, 500);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('popup modal', (done) => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
preventScroll: true,
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-popup')).to.be.true;
|
||||
|
||||
const modal = document.querySelector('.van-modal');
|
||||
|
||||
setTimeout(() => {
|
||||
triggerTouch(modal, 'touchstart', 0, 0);
|
||||
triggerTouch(modal, 'touchmove', 0, 10);
|
||||
triggerTouch(modal, 'touchmove', 0, 30);
|
||||
triggerTouch(modal, 'touchmove', 0, -30);
|
||||
expect(modal).to.exist;
|
||||
|
||||
modal.click();
|
||||
setTimeout(() => {
|
||||
expect(wrapper.data().currentValue).to.be.false;
|
||||
done();
|
||||
}, 300);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('treat empty string as true for boolean props', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
overlay: '',
|
||||
lockOnScroll: '',
|
||||
closeOnClickOverlay: ''
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.lockOnScroll).to.be.true;
|
||||
});
|
||||
|
||||
it('get container prop', done => {
|
||||
const testNode = document.createElement('div');
|
||||
document.body.appendChild(testNode);
|
||||
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
getContainer: () => testNode
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.vm.$el.parentNode === testNode).to.be.true;
|
||||
wrapper.vm.getContainer = () => document.body;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.$el.parentNode === document.body).to.be.true;
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
@@ -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__portion')[0];
|
||||
pivot = wrapper.find('.van-progress__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'));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
import PullRefresh from 'packages/pull-refresh';
|
||||
import { mount } from 'avoriaz';
|
||||
import { triggerTouch } from '../utils';
|
||||
|
||||
describe('PullRefresh', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a PullRefresh', () => {
|
||||
wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-pull-refresh')).to.be.true;
|
||||
});
|
||||
|
||||
it('change head content when pulling down', (done) => {
|
||||
wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track')[0];
|
||||
triggerTouch(track, 'touchstart', 0, 0);
|
||||
triggerTouch(track, 'touchmove', 0, 10);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-pull-refresh__text')[0].text()).to.equal('下拉即可刷新...');
|
||||
|
||||
triggerTouch(track, 'touchmove', 0, 30);
|
||||
triggerTouch(track, 'touchmove', 0, 60);
|
||||
triggerTouch(track, 'touchmove', 0, 100);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-pull-refresh__text')[0].text()).to.equal('释放即可刷新...');
|
||||
|
||||
triggerTouch(track, 'touchend', 0, 100);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-pull-refresh__loading span')[1].text()).to.equal('加载中...');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('change loading status when pulling down', (done) => {
|
||||
wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const refreshSpy = sinon.spy();
|
||||
wrapper.vm.$on('refresh', refreshSpy);
|
||||
|
||||
wrapper.vm.$on('input', value => {
|
||||
wrapper.vm.value = value;
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.vm.value = false;
|
||||
expect(refreshSpy.calledOnce).to.be.true;
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.status).to.equal('normal');
|
||||
done();
|
||||
}, 0);
|
||||
}, 30);
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track')[0];
|
||||
triggerTouch(track, 'touchstart', 0, 0);
|
||||
triggerTouch(track, 'touchmove', 0, 100);
|
||||
triggerTouch(track, 'touchend', 0, 100);
|
||||
|
||||
expect(wrapper.vm.value).to.be.true;
|
||||
expect(wrapper.vm.status).to.equal('loading');
|
||||
|
||||
// ignore touch event when loading
|
||||
triggerTouch(track, 'touchstart', 0, 0);
|
||||
triggerTouch(track, 'touchmove', 0, 100);
|
||||
triggerTouch(track, 'touchend', 0, 100);
|
||||
});
|
||||
|
||||
it('pull a short distance', () => {
|
||||
wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track')[0];
|
||||
triggerTouch(track, 'touchstart', 0, 0);
|
||||
triggerTouch(track, 'touchmove', 0, 10);
|
||||
triggerTouch(track, 'touchend', 0, 10);
|
||||
|
||||
expect(wrapper.vm.value).to.be.false;
|
||||
expect(wrapper.vm.status).to.equal('normal');
|
||||
});
|
||||
|
||||
it('not in page top', () => {
|
||||
wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
window.scrollTop = 100;
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track')[0];
|
||||
// ignore touch event when not at page top
|
||||
triggerTouch(track, 'touchstart', 0, 0);
|
||||
triggerTouch(track, 'touchmove', 0, 100);
|
||||
triggerTouch(track, 'touchend', 0, 100);
|
||||
expect(wrapper.vm.ceiling).to.be.false;
|
||||
|
||||
window.scrollTop = 0;
|
||||
triggerTouch(track, 'touchmove', 0, 100);
|
||||
expect(wrapper.vm.ceiling).to.be.true;
|
||||
});
|
||||
|
||||
it('horizontal direction', () => {
|
||||
wrapper = mount(PullRefresh, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const track = wrapper.find('.van-pull-refresh__track')[0];
|
||||
triggerTouch(track, 'touchstart', 0, 0);
|
||||
triggerTouch(track, 'touchmove', 10, 0);
|
||||
triggerTouch(track, 'touchend', 10, 0);
|
||||
expect(wrapper.vm.direction).to.equal('horizontal');
|
||||
});
|
||||
});
|
||||
@@ -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.trigger('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.trigger('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.trigger('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.trigger('click');
|
||||
|
||||
expect(wrapper.instance().currentValue).to.equal('1');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,132 @@
|
||||
import Search from 'packages/search';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Search', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a search', () => {
|
||||
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.trigger('focus');
|
||||
|
||||
expect(wrapper.data().isFocus).to.be.true;
|
||||
});
|
||||
|
||||
it('create a search with searchText', (done) => {
|
||||
wrapper = mount(Search, {
|
||||
propsData: {
|
||||
value: 'search text'
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
expect(input.element.value === 'search text').to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('emit input event', () => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
input.trigger('input', { target: { value: 'search' }});
|
||||
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input')).to.be.true;
|
||||
});
|
||||
|
||||
it('handle clean click and refocus', (done) => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
let value = 'test';
|
||||
wrapper.setProps({ value });
|
||||
|
||||
const focusSpy = sinon.spy();
|
||||
wrapper.vm.$on('focus', focusSpy);
|
||||
|
||||
const inputSpy = sinon.spy();
|
||||
wrapper.vm.$on('input', val => {
|
||||
value = val;
|
||||
inputSpy();
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.trigger('focus');
|
||||
|
||||
const cleanBtn = wrapper.find('.van-icon-clear')[0];
|
||||
cleanBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(focusSpy.calledOnce).to.be.true;
|
||||
expect(inputSpy.calledOnce).to.be.true;
|
||||
expect(value).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('handle cancel click', (done) => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
wrapper.setProps({ value: 'test', showAction: true });
|
||||
expect(wrapper.vm.value).to.be.equal('test');
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const cancelBtn = wrapper.find('.van-search__action-text')[0];
|
||||
cancelBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.focusStatus).to.be.false;
|
||||
expect(wrapper.vm.isFocus).to.be.false;
|
||||
expect(eventStub.calledTwice).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
expect(eventStub.calledWith('change'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('emit a search event', () => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
const searchSpy = sinon.spy();
|
||||
wrapper.vm.$on('search', searchSpy);
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.trigger('keypress.enter');
|
||||
expect(searchSpy.calledOnce).to.be.true;
|
||||
|
||||
const keypressSpy = sinon.spy();
|
||||
wrapper.vm.$on('keypress', keypressSpy);
|
||||
input.trigger('keypress.a');
|
||||
expect(keypressSpy.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
it('blur after click outside', () => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.trigger('focus');
|
||||
|
||||
expect(wrapper.vm.isFocus).to.be.true;
|
||||
|
||||
const body = document.body;
|
||||
body.click();
|
||||
expect(wrapper.vm.isFocus).to.be.false;
|
||||
expect(wrapper.vm.focusStatus).to.be.false;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,400 @@
|
||||
import Sku from 'packages/sku';
|
||||
import Uploader from 'packages/uploader';
|
||||
import Toast from 'packages/toast';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
import skuMockData from '../../docs/demos/mock/sku';
|
||||
import repeat from 'lodash/repeat';
|
||||
|
||||
const data = skuMockData['zh-CN'];
|
||||
const { skuHelper } = Sku;
|
||||
const goods = data.goods_info;
|
||||
const initialSku = {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
};
|
||||
|
||||
const File = function() {
|
||||
this.name = 'test';
|
||||
this.size = 10000;
|
||||
};
|
||||
|
||||
const mockFile = new File([], '/Users');
|
||||
|
||||
describe('Sku', (done) => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('default', (done) => {
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: true,
|
||||
sku: data.sku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods,
|
||||
resetStepperOnHide: true,
|
||||
resetSelectedSkuOnHide: true
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-sku__goods-name': goods.title,
|
||||
'.van-sku__price-num': '1.00'
|
||||
},
|
||||
value: {
|
||||
'.van-stepper__input': '1'
|
||||
},
|
||||
src: {
|
||||
'.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
|
||||
}
|
||||
});
|
||||
|
||||
// 测试默认选中
|
||||
const selectedSku = skuHelper.getSelectedSkuValues(data.sku.tree, wrapper.vm.selectedSku);
|
||||
expect(selectedSku[0].id).to.equal('30349');
|
||||
|
||||
// 测试sku图片
|
||||
const firstSku = wrapper.find('.van-sku-row__item')[0];
|
||||
firstSku.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
DOMChecker(wrapper, {
|
||||
src: {
|
||||
'.van-sku__goods-img': 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭sku弹层
|
||||
const closeCallback = sinon.spy();
|
||||
const closeIcon = wrapper.find('.van-sku__close-icon')[0];
|
||||
wrapper.vm.$on('sku-close', closeCallback);
|
||||
closeIcon.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(closeCallback.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should trigger an event or toast error when click buy and addCart', (done) => {
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: true,
|
||||
sku: data.sku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods
|
||||
}
|
||||
});
|
||||
|
||||
const buyCallback = sinon.spy();
|
||||
const addCartCallback = sinon.spy();
|
||||
const buyBtn = wrapper.find('.van-button--bottom-action')[1];
|
||||
const addCartBtn = wrapper.find('.van-button--bottom-action')[0];
|
||||
wrapper.vm.$on('buy-clicked', buyCallback);
|
||||
wrapper.vm.$on('add-cart', addCartCallback);
|
||||
|
||||
// 未选择完整规格时，弹出toast提示
|
||||
buyBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const toastText = document.querySelector('.van-toast div');
|
||||
expect(toastText.textContent).to.equal('请选择完整的规格');
|
||||
expect(buyCallback.calledOnce).to.be.false;
|
||||
|
||||
// 选择完整规格时，未填留言时，弹出toast提示。
|
||||
wrapper.find('.van-sku-row-group')[1].find('.van-sku-row__item')[0].trigger('click');
|
||||
buyBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal('请填写留言1');
|
||||
expect(buyCallback.calledOnce).to.be.false;
|
||||
|
||||
// 触发buy-clicked事件
|
||||
const requiredMessage = wrapper.find('.van-cell--required .van-field__control')[0];
|
||||
requiredMessage.element.value = 'test';
|
||||
requiredMessage.trigger('input');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
buyBtn.trigger('click');
|
||||
addCartBtn.trigger('click');
|
||||
expect(buyCallback.calledOnce).to.be.true;
|
||||
expect(addCartCallback.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should modify current num or toast error when change step value', (done) => {
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: true,
|
||||
sku: data.sku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods,
|
||||
quota: data.quota,
|
||||
quotaUsed: data.quota_used
|
||||
}
|
||||
});
|
||||
|
||||
// 点击减号
|
||||
const minusBtn = wrapper.find('.van-stepper__minus')[0];
|
||||
minusBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const toastText = document.querySelector('.van-toast div');
|
||||
expect(toastText.textContent).to.equal('至少选择一件');
|
||||
|
||||
// 手动修改购买数量
|
||||
const stepperInput = wrapper.find('.van-stepper__input')[0];
|
||||
stepperInput.element.value = 20;
|
||||
stepperInput.trigger('input');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(+stepperInput.element.value).to.equal(data.quota - data.quota_used);
|
||||
|
||||
// 达到购买上限时，点击加号
|
||||
const plusBtn = wrapper.find('.van-stepper__plus')[0];
|
||||
plusBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal(`限购${data.quota}件`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should toast custom error when change step value', (done) => {
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: true,
|
||||
sku: data.sku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods,
|
||||
quota: data.quota,
|
||||
quotaUsed: data.quota_used,
|
||||
customStepperConfig: {
|
||||
quotaText: '单次限购100件',
|
||||
handleOverLimit: (data) => {
|
||||
const { action, limitType, quota } = data;
|
||||
|
||||
if (action === 'minus') {
|
||||
Toast('至少选择一件商品');
|
||||
} else if (action === 'plus') {
|
||||
if (limitType === 0) {
|
||||
Toast(`限购${quota}件`);
|
||||
} else {
|
||||
Toast('库存不够了~~');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 点击减号
|
||||
const minusBtn = wrapper.find('.van-stepper__minus')[0];
|
||||
minusBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const toastText = document.querySelector('.van-toast div');
|
||||
expect(toastText.textContent).to.equal('至少选择一件商品');
|
||||
|
||||
// 手动修改购买数量
|
||||
const stepperInput = wrapper.find('.van-stepper__input')[0];
|
||||
stepperInput.element.value = 20;
|
||||
stepperInput.trigger('input');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(+stepperInput.element.value).to.equal(data.quota - data.quota_used);
|
||||
|
||||
// 达到购买上限时，点击加号
|
||||
const plusBtn = wrapper.find('.van-stepper__plus')[0];
|
||||
plusBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal(`限购${data.quota}件`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should not render sku group when none_sku is true', (done) => {
|
||||
const newSku = {
|
||||
...data.sku,
|
||||
none_sku: true
|
||||
};
|
||||
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: false,
|
||||
sku: newSku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.value = true;
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-sku-group-container').length).to.equal(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should toast error when sku messages fail to pass validation', (done) => {
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
initialSku,
|
||||
value: true,
|
||||
sku: data.sku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods,
|
||||
messageConfig: {
|
||||
uploadImg: () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
|
||||
});
|
||||
},
|
||||
uploadMaxSize: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const buyBtn = wrapper.find('.van-button--bottom-action')[0];
|
||||
const skuMessages = wrapper.find('.van-sku-messages')[0];
|
||||
const inputs = skuMessages.find('input');
|
||||
const textarea = skuMessages.find('textarea')[0];
|
||||
const uploader = wrapper.find(Uploader)[0];
|
||||
// 修改留言内容
|
||||
inputs[0].element.value = 123;
|
||||
// 测试身份证号
|
||||
inputs[1].element.value = 234;
|
||||
inputs[0].trigger('input');
|
||||
inputs[1].trigger('input');
|
||||
// 测试图片
|
||||
uploader.vm.onChange({ target: { files: [mockFile] }});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
// 点击购买
|
||||
buyBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const toastText = document.querySelector('.van-toast div');
|
||||
expect(toastText.textContent).to.equal('请填写正确的身份证号码');
|
||||
|
||||
inputs[1].element.value = 330101198801012211;
|
||||
// 测试textarea字数限制
|
||||
textarea.element.value = repeat('*', 201);
|
||||
inputs[1].trigger('input');
|
||||
textarea.trigger('input');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
buyBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal('留言4 写的太多了，不要超过200字');
|
||||
|
||||
textarea.element.value = '';
|
||||
// 测试数字留言
|
||||
inputs[3].element.value = 'abc';
|
||||
textarea.trigger('input');
|
||||
inputs[3].trigger('input');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
buyBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal('请填写正确的数字格式留言');
|
||||
|
||||
inputs[3].element.value = 0;
|
||||
inputs[4].element.value = 345;
|
||||
inputs[3].trigger('input');
|
||||
inputs[4].trigger('input');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
buyBtn.trigger('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal('请填写正确的邮箱');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should toast error when there is no stock', (done) => {
|
||||
/* eslint-disable */
|
||||
const newData = Object.assign({}, data);
|
||||
newData.sku.stock_num = 0;
|
||||
newData.sku.messages = [];
|
||||
newData.sku.list.forEach((item) => {
|
||||
item.stock_num = 0;
|
||||
});
|
||||
/* eslint-enable */
|
||||
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
initialSku,
|
||||
value: true,
|
||||
sku: newData.sku,
|
||||
goodsId: newData.goods_id,
|
||||
goods: goods
|
||||
}
|
||||
});
|
||||
|
||||
const buyBtn = wrapper.find('.van-button--bottom-action')[0];
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
buyBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const toastText = document.querySelector('.van-toast div');
|
||||
expect(toastText.textContent).to.equal('商品已经无法购买啦');
|
||||
|
||||
const plusBtn = wrapper.find('.van-stepper__plus')[0];
|
||||
plusBtn.trigger('click');
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(toastText.textContent).to.equal('库存不足');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should reset values when sku change', (done) => {
|
||||
wrapper = mount(Sku, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: true,
|
||||
sku: data.sku,
|
||||
goodsId: data.goods_id,
|
||||
goods: goods,
|
||||
resetStepperOnHide: true,
|
||||
resetSelectedSkuOnHide: true
|
||||
}
|
||||
});
|
||||
|
||||
const newSku = {
|
||||
...data.sku,
|
||||
tree: [],
|
||||
list: [],
|
||||
messages: [],
|
||||
none_sku: true
|
||||
};
|
||||
|
||||
wrapper.vm.sku = newSku;
|
||||
const skuMessages = wrapper.find(Sku.SkuMessages)[0];
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.selectedSku).to.be.empty;
|
||||
expect(skuMessages.vm.messageValues).to.be.empty;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
import Stepper from 'packages/stepper';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Stepper', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a stepper', () => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
defaultValue: 1
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-stepper')).to.be.true;
|
||||
expect(wrapper.data().currentValue).to.equal(1);
|
||||
|
||||
const plusButton = wrapper.find('.van-stepper__plus')[0];
|
||||
plusButton.trigger('click');
|
||||
|
||||
expect(wrapper.data().currentValue).to.equal(2);
|
||||
|
||||
const minusButton = wrapper.find('.van-stepper__minus')[0];
|
||||
minusButton.trigger('click');
|
||||
expect(wrapper.data().currentValue).to.equal(1);
|
||||
});
|
||||
|
||||
it('create a disabled stepper', (done) => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-stepper')).to.be.true;
|
||||
const minusButton = wrapper.find('.van-stepper__minus')[0];
|
||||
expect(minusButton.hasClass('van-stepper__minus--disabled')).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
minusButton.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('overlimit'));
|
||||
done();
|
||||
});
|
||||
|
||||
const plusButton = wrapper.find('.van-stepper__plus')[0];
|
||||
expect(plusButton.hasClass('van-stepper__plus--disabled')).to.be.true;
|
||||
|
||||
plusButton.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('overlimit'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('only disable stepper input', () => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
disableInput: true
|
||||
}
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-stepper__input')[0];
|
||||
expect(input.hasAttribute('disabled', 'disabled')).to.be.true;
|
||||
});
|
||||
|
||||
it('update stepper value use v-model', (done) => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-stepper')).to.be.true;
|
||||
|
||||
wrapper.vm.value = 2;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentValue).to.equal(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('correct value when value is not correct', (done) => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
value: 50,
|
||||
max: 30
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-stepper')).to.be.true;
|
||||
expect(wrapper.vm.currentValue).to.equal(30);
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.vm.value = 30;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentValue).to.equal(30);
|
||||
expect(eventStub.calledWith('input'));
|
||||
|
||||
// value设置非数字时，则使用设置的最小值（默认1）
|
||||
wrapper.vm.value = 'abc';
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vm.currentValue).to.equal(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('handle when input change', (done) => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-stepper__input')[0];
|
||||
input.element.value = 2;
|
||||
input.trigger('input');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should not fire any event on props changed', (done) => {
|
||||
wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.vm.value = 2;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.called).to.be.false;
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
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;
|
||||
expect(finishStep.hasClass('van-step--horizontal')).to.be.true;
|
||||
|
||||
const proccessStep = wrapper.find('.van-step')[1];
|
||||
expect(proccessStep.hasClass('van-step--process')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a vertical step', () => {
|
||||
wrapper = mount(Steps, {
|
||||
propsData: {
|
||||
direction: 'vertical'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-steps')).to.be.true;
|
||||
expect(wrapper.hasClass('van-steps--vertical')).to.be.true;
|
||||
expect(wrapper.data().steps.length).to.equal(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,100 @@
|
||||
import SubmitBar from 'packages/submit-bar';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
describe('SubmitBar', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('default', () => {
|
||||
const props = {
|
||||
price: 3050,
|
||||
buttonText: '提交订单',
|
||||
tip: '您的收货地址不支持同城送, 我们已为您推荐快递'
|
||||
};
|
||||
|
||||
wrapper = mount(SubmitBar, {
|
||||
propsData: props
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-button__text': props.buttonText,
|
||||
'.van-submit-bar__price-interger': '¥30.',
|
||||
'.van-submit-bar__price-decimal': '50',
|
||||
'.van-submit-bar__tip': props.tip
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('no tip', () => {
|
||||
wrapper = mount(SubmitBar, {
|
||||
propsData: {
|
||||
price: 3005,
|
||||
buttonText: '提交订单',
|
||||
buttonType: 'default'
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-button__text': '提交订单',
|
||||
'.van-submit-bar__price-interger': '¥30.',
|
||||
'.van-submit-bar__price-decimal': '05',
|
||||
'.van-submit-bar__tip': ''
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('handle submit', () => {
|
||||
wrapper = mount(SubmitBar, {
|
||||
propsData: {
|
||||
price: 3005,
|
||||
buttonText: '提交订单'
|
||||
}
|
||||
});
|
||||
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('submit', submitSpyFunc);
|
||||
wrapper.find('.van-button')[0].trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(submitSpyFunc.calledOnce).to.be.true;
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('can not submit when disabled', (done) => {
|
||||
wrapper = mount(SubmitBar, {
|
||||
propsData: {
|
||||
disabled: true,
|
||||
buttonText: '提交订单'
|
||||
}
|
||||
});
|
||||
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('submit', submitSpyFunc);
|
||||
wrapper.find('.van-button')[0].trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(submitSpyFunc.calledOnce).to.be.false;
|
||||
done();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
it('can not submit when loading', (done) => {
|
||||
wrapper = mount(SubmitBar, {
|
||||
propsData: {
|
||||
loading: true,
|
||||
buttonText: '提交订单'
|
||||
}
|
||||
});
|
||||
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('submit', submitSpyFunc);
|
||||
wrapper.find('.van-button')[0].trigger('click');
|
||||
setTimeout(() => {
|
||||
expect(submitSpyFunc.calledOnce).to.be.false;
|
||||
done();
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
import SwitchCell from 'packages/switch-cell';
|
||||
import { mount } from 'avoriaz';
|
||||
import { DOMChecker } from '../utils';
|
||||
|
||||
describe('SwitchCell', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('default', () => {
|
||||
wrapper = mount(SwitchCell, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-switch--off': 1,
|
||||
'.van-switch--disabled': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('set title', () => {
|
||||
wrapper = mount(SwitchCell, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
title: '测试标题'
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-cell__text': '测试标题'
|
||||
},
|
||||
count: {
|
||||
'.van-switch--off': 1,
|
||||
'.van-switch--disabled': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('checked', () => {
|
||||
wrapper = mount(SwitchCell, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-switch--on': 1,
|
||||
'.van-switch--disabled': 0
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('disabled', () => {
|
||||
wrapper = mount(SwitchCell, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-switch--off': 1,
|
||||
'.van-switch--disabled': 1
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('listen to change event', (done) => {
|
||||
wrapper = mount(SwitchCell, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', (value) => {
|
||||
wrapper.vm.value = value;
|
||||
});
|
||||
|
||||
wrapper.vm.$on('change', (value) => {
|
||||
expect(value).to.be.true;
|
||||
done();
|
||||
});
|
||||
|
||||
const switchEl = wrapper.find('.van-switch')[0];
|
||||
switchEl.trigger('click');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
import Switch from 'packages/switch';
|
||||
import VanLoading 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(VanLoading)[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.trigger('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.trigger('click');
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
});
|
||||
|
||||
it('click should toggle the switch', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.vm.value = val;
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import TabbarExample from '../components/tabbar';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Progress', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('Tabbar with four items', (done) => {
|
||||
wrapper = mount(TabbarExample);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-tabbar-item').length).to.equal(4);
|
||||
|
||||
wrapper.find('.van-tabbar-item')[3].element.click();
|
||||
expect(wrapper.vm.active).to.equal(3);
|
||||
expect(wrapper.vm.changeRecord).to.equal(3);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,132 @@
|
||||
import Tabs from 'packages/tabs';
|
||||
import { mount } from 'avoriaz';
|
||||
import TabsTestComponent from '../components/tabs';
|
||||
import MoreTabsTestComponent from '../components/more-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', (done) => {
|
||||
wrapper = mount(TabsTestComponent);
|
||||
|
||||
expect(wrapper.hasClass('van-tabs')).to.be.true;
|
||||
expect(wrapper.hasClass('van-tabs--line')).to.be.true;
|
||||
|
||||
const tabsContainer = wrapper.find('.van-tabs')[0];
|
||||
expect(tabsContainer.vNode.child.curActive).to.equal(0);
|
||||
|
||||
wrapper.vm.active = 1;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(tabsContainer.vNode.child.curActive).to.equal(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('listen click event', (done) => {
|
||||
wrapper = mount(TabsTestComponent, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
const clickSpy = sinon.spy();
|
||||
wrapper.vm.$on('click', clickSpy);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const nTab = wrapper.find('.van-tab')[0];
|
||||
nTab.trigger('click');
|
||||
expect(clickSpy.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('listen click disable event', (done) => {
|
||||
wrapper = mount(TabsTestComponent, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
const clickDisabledSpy = sinon.spy();
|
||||
wrapper.vm.$on('disabled', clickDisabledSpy);
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const nTab = wrapper.find('.van-tab')[2];
|
||||
nTab.trigger('click');
|
||||
expect(clickDisabledSpy.calledOnce).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('check animation duration', () => {
|
||||
wrapper = mount(TabsTestComponent);
|
||||
|
||||
expect(wrapper.style.transitionDuration != '').to.be.true;
|
||||
});
|
||||
|
||||
it('create a tabs greater then 4', (done) => {
|
||||
wrapper = mount(MoreTabsTestComponent, {
|
||||
attachToDocument: true
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const nTab = wrapper.find('.van-tab')[4];
|
||||
nTab.trigger('click');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a tabs greater then 4 then click last tab', (done) => {
|
||||
wrapper = mount(MoreTabsTestComponent, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
active: 7
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
const nTab = wrapper.find('.van-tab')[6];
|
||||
nTab.trigger('click');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('watch tab props changes', (done) => {
|
||||
wrapper = mount(TabsTestComponent);
|
||||
wrapper.vm.firstTabTitle = '测试标题';
|
||||
wrapper.vm.firstTabDisabled = true;
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.find('.van-tab')[0].text().replace(/\n|\s/g, '')).to.equal('测试标题');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('sticky', (done) => {
|
||||
wrapper = mount(TabsTestComponent, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
sticky: true
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.sticky = false;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(wrapper.vm.$children[0].position).to.equal('content-top');
|
||||
done();
|
||||
}, 30);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
import Tag from 'packages/tag';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Tag', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create without typeProps', () => {
|
||||
wrapper = mount(Tag);
|
||||
});
|
||||
|
||||
it('create with right typeProps', () => {
|
||||
wrapper = mount(Tag, {
|
||||
propsData: {
|
||||
type: 'primary'
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,135 @@
|
||||
import Toast from 'packages/toast';
|
||||
|
||||
describe('Toast', () => {
|
||||
afterEach(() => {
|
||||
Toast.clear(true);
|
||||
});
|
||||
|
||||
it('create a empty toast', () => {
|
||||
Toast();
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
});
|
||||
|
||||
it('create a toast', () => {
|
||||
const toast = Toast('toast');
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.message).to.equal('toast');
|
||||
expect(toast.type).to.equal('text');
|
||||
expect(toast.displayStyle).to.equal('text');
|
||||
expect(typeof toast.timer).to.equal('number');
|
||||
});
|
||||
|
||||
it('create a loading toast', () => {
|
||||
const toast = Toast.loading();
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.type).to.equal('loading');
|
||||
});
|
||||
|
||||
it('create a options loading toast', () => {
|
||||
const toast = Toast.loading({
|
||||
message: 'toast'
|
||||
});
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.message).to.equal('toast');
|
||||
expect(toast.type).to.equal('loading');
|
||||
});
|
||||
|
||||
it('create a success toast', () => {
|
||||
const toast = Toast.success('success');
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.displayStyle).to.equal('default');
|
||||
expect(toast.type).to.equal('success');
|
||||
});
|
||||
|
||||
it('create a options success toast', () => {
|
||||
const toast = Toast.success({
|
||||
message: 'toast'
|
||||
});
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.message).to.equal('toast');
|
||||
expect(toast.type).to.equal('success');
|
||||
});
|
||||
|
||||
it('create a fail toast', () => {
|
||||
const toast = Toast.fail('fail');
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.displayStyle).to.equal('default');
|
||||
expect(toast.type).to.equal('fail');
|
||||
});
|
||||
|
||||
it('create a options fail toast', () => {
|
||||
const toast = Toast.fail({
|
||||
message: 'toast'
|
||||
});
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
expect(toast.message).to.equal('toast');
|
||||
expect(toast.type).to.equal('fail');
|
||||
});
|
||||
|
||||
it('create a forbidClick toast', (done) => {
|
||||
Toast({
|
||||
message: 'test',
|
||||
forbidClick: true
|
||||
});
|
||||
|
||||
expect(document.querySelector('.van-toast-wrapper')).to.exist;
|
||||
setTimeout(() => {
|
||||
expect(document.querySelector('.van-toast__overlay')).to.exist;
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
|
||||
it('toast disappeared after duration', (done) => {
|
||||
const toast = Toast({
|
||||
message: 'toast',
|
||||
duration: 10
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(toast.$el.style.display === 'none').to.be.true;
|
||||
Toast.clear();
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('toast duration 0', () => {
|
||||
Toast.allowMultiple();
|
||||
const toast = Toast({
|
||||
message: 'toast',
|
||||
duration: 0
|
||||
});
|
||||
expect(toast.timer).to.equal(undefined);
|
||||
Toast.allowMultiple(false);
|
||||
});
|
||||
|
||||
it('multiple toast', () => {
|
||||
Toast.allowMultiple();
|
||||
Toast.clear(true);
|
||||
const toast1 = Toast.success('1');
|
||||
const toast2 = Toast.success('2');
|
||||
Toast.clear();
|
||||
expect(toast1.visible).to.be.false;
|
||||
expect(toast2.visible).to.be.true;
|
||||
Toast.clear();
|
||||
Toast.clear();
|
||||
expect(toast2.visible).to.be.false;
|
||||
Toast.allowMultiple(false);
|
||||
});
|
||||
|
||||
it('set default options', () => {
|
||||
Toast.setDefaultOptions({ duration: 1000 });
|
||||
const toast1 = Toast(1);
|
||||
expect(toast1.duration).to.equal(1000);
|
||||
|
||||
Toast.resetDefaultOptions();
|
||||
const toast2 = Toast(1);
|
||||
expect(toast2.duration).to.equal(3000);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import TreeSelect from 'packages/tree-select';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('TreeSelect', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create an empty tree-select', () => {
|
||||
wrapper = mount(TreeSelect);
|
||||
expect(wrapper.hasStyle('height', '0px')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a tree-select correctly', () => {
|
||||
wrapper = mount(TreeSelect, {
|
||||
propsData: {
|
||||
items: [{
|
||||
text: 'A',
|
||||
children: [{
|
||||
text: 'Cc',
|
||||
id: 123
|
||||
}]
|
||||
}],
|
||||
maxHeight: 200
|
||||
}
|
||||
});
|
||||
expect(wrapper.hasClass('van-tree-select')).to.be.true;
|
||||
expect(wrapper.hasStyle('height', '44px')).to.be.true;
|
||||
expect(wrapper.vm.maxHeight).to.equal(200);
|
||||
});
|
||||
|
||||
it('interact with this component', () => {
|
||||
wrapper = mount(TreeSelect, {
|
||||
propsData: {
|
||||
items: [{
|
||||
text: 'A',
|
||||
children: [{
|
||||
text: 'Cc',
|
||||
id: 123
|
||||
}, {
|
||||
text: 'Bb',
|
||||
id: 234
|
||||
}]
|
||||
}, {
|
||||
text: 'B',
|
||||
children: [{
|
||||
text: 'Nmi',
|
||||
id: 345
|
||||
}]
|
||||
}],
|
||||
maxHeight: 220
|
||||
}
|
||||
});
|
||||
wrapper.vm.$on('navclick', index => {
|
||||
wrapper.vm.mainActiveIndex = index;
|
||||
});
|
||||
wrapper.vm.$on('itemclick', item => {
|
||||
wrapper.vm.activeId = item.id;
|
||||
});
|
||||
const secondNav = wrapper.find('.van-tree-select__nitem')[1];
|
||||
secondNav.trigger('click');
|
||||
expect(wrapper.vm.mainActiveIndex).to.equal(1);
|
||||
const target = wrapper.find('.van-tree-select__item')[0];
|
||||
target.trigger('click');
|
||||
expect(wrapper.vm.activeId).to.equal(345);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,137 @@
|
||||
import Uploader from 'packages/uploader';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
window.File = function() {
|
||||
this.name = 'test';
|
||||
this.size = 10000;
|
||||
};
|
||||
|
||||
window.FileReader = function() {
|
||||
this.readAsDataURL = this.readAsText = function() {
|
||||
this.onload && this.onload({
|
||||
target: {
|
||||
result: 'test'
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const mockFile = new File([], '/Users');
|
||||
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('disabled', () => {
|
||||
const afterRead = sinon.spy();
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: true,
|
||||
afterRead
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
wrapper.vm.onChange({ target: { files: [] }});
|
||||
expect(afterRead.calledOnce).to.be.false;
|
||||
});
|
||||
|
||||
it('before read', () => {
|
||||
const afterRead = sinon.spy();
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
beforeRead: () => false,
|
||||
afterRead
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.onChange({ target: { files: [mockFile] }});
|
||||
expect(afterRead.calledOnce).to.be.false;
|
||||
});
|
||||
|
||||
it('read text', done => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
resultType: 'text',
|
||||
afterRead: (file) => {
|
||||
expect(file.content).to.equal('test');
|
||||
done();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.onChange({ target: { files: [mockFile] }});
|
||||
});
|
||||
|
||||
it('read dataUrl', done => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
afterRead: (file) => {
|
||||
expect(file.content).to.equal('test');
|
||||
done();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.onChange({ target: { files: [mockFile] }});
|
||||
});
|
||||
|
||||
it('unknown resultType', () => {
|
||||
const afterRead = sinon.spy();
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
resultType: 'xxxx',
|
||||
afterRead
|
||||
}
|
||||
});
|
||||
wrapper.vm.onChange({ target: { files: [mockFile] }});
|
||||
expect(afterRead.calledOnce).to.be.false;
|
||||
});
|
||||
|
||||
it('read multiple files', done => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
afterRead: (file) => {
|
||||
expect(file.length).to.equal(2);
|
||||
done();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.onChange({ target: { files: [mockFile, mockFile] }});
|
||||
});
|
||||
|
||||
it('size overlimit', done => {
|
||||
const spy = sinon.spy();
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
maxSize: 1
|
||||
}
|
||||
});
|
||||
wrapper.vm.$on('oversize', spy);
|
||||
wrapper.vm.onChange({ target: { files: [mockFile] }});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(spy.calledOnce).to.be.true;
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
|
||||
it('multi file size overlimit', done => {
|
||||
const spy = sinon.spy();
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
maxSize: 1
|
||||
}
|
||||
});
|
||||
wrapper.vm.$on('oversize', spy);
|
||||
wrapper.vm.onChange({ target: { files: [mockFile, mockFile] }});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(spy.calledOnce).to.be.true;
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import deepClone from 'packages/utils/deep-clone';
|
||||
import { isAndroid, isDef, camelize, get } from 'packages/utils';
|
||||
import { raf, cancel } from 'packages/utils/raf';
|
||||
|
||||
describe('Utils', () => {
|
||||
it('deepClone', () => {
|
||||
const a = { foo: 0 };
|
||||
const b = { foo: 0, bar: 1 };
|
||||
const fn = () => {};
|
||||
const arr = [a, b];
|
||||
expect(deepClone(a)).to.eql(a);
|
||||
expect(deepClone(b)).to.eql(b);
|
||||
expect(deepClone(fn)).to.eql(fn);
|
||||
expect(deepClone(arr)).to.eql(arr);
|
||||
expect(deepClone(undefined)).to.eql(undefined);
|
||||
expect(deepClone(1)).to.eql(1);
|
||||
});
|
||||
|
||||
it('isDef', () => {
|
||||
expect(isDef(null)).to.be.false;
|
||||
expect(isDef(undefined)).to.be.false;
|
||||
expect(isDef(1)).to.be.true;
|
||||
expect(isDef('1')).to.be.true;
|
||||
expect(isDef({})).to.be.true;
|
||||
expect(isDef(() => {})).to.be.true;
|
||||
});
|
||||
|
||||
it('camelize', () => {
|
||||
expect(camelize('ab')).to.equal('ab');
|
||||
expect(camelize('a-b')).to.equal('aB');
|
||||
expect(camelize('a-b-c-d')).to.equal('aBCD');
|
||||
expect(camelize('a-b-')).to.equal('aB-');
|
||||
expect(camelize('-a-b')).to.equal('AB');
|
||||
expect(camelize('-')).to.equal('-');
|
||||
});
|
||||
|
||||
it('get', () => {
|
||||
expect(get({ a: 1 }, 'a')).to.equal(1);
|
||||
expect(get({ a: { b: 2 }}, 'a.b')).to.equal(2);
|
||||
expect(get({ a: { b: 2 }}, 'a.b.c')).to.equal('');
|
||||
});
|
||||
|
||||
it('isAndroid', () => {
|
||||
expect(isAndroid()).to.be.false;
|
||||
});
|
||||
|
||||
it('raf', (done) => {
|
||||
const spy = sinon.spy();
|
||||
raf(spy);
|
||||
|
||||
setTimeout(() => {
|
||||
expect(spy.calledOnce).to.be.true;
|
||||
cancel(1);
|
||||
done();
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,91 @@
|
||||
import Waterfall from '../components/waterfall/waterfall';
|
||||
import HiddenWaterfall from '../components/waterfall/waterfall-hide';
|
||||
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);
|
||||
});
|
||||
|
||||
it('test waterfall function after hide', (done) => {
|
||||
const waterfallLowerSpy = sinon.spy();
|
||||
wrapper = mount(HiddenWaterfall, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
show: false,
|
||||
disabled: false,
|
||||
list: [{ id: 10 }],
|
||||
onWaterfallLower: waterfallLowerSpy
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(waterfallLowerSpy.called).to.be.false;
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user