vant components
This commit is contained in:
cookfront
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<van-badge-group>
|
||||
<van-badge title="热销榜" info="8" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Badge from 'packages/badge';
|
||||
import BadgeGroup from 'packages/badge-group';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-badge': Badge,
|
||||
'van-badge-group': BadgeGroup
|
||||
},
|
||||
|
||||
methods: {
|
||||
onItemClick() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from 'packages/checkbox';
|
||||
import CheckboxGroup from 'packages/checkbox-group';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-checkbox': Checkbox,
|
||||
'van-checkbox-group': CheckboxGroup
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c',
|
||||
'd'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">单选框1</van-radio>
|
||||
<van-radio name="2">单选框2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Radio from 'packages/radio';
|
||||
import RadioGroup from 'packages/radio-group';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-radio': Radio,
|
||||
'van-radio-group': RadioGroup
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Steps from 'packages/steps';
|
||||
import Step from 'packages/step';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-step': Step,
|
||||
'van-steps': Steps
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 1
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled>内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tab from 'packages/tab';
|
||||
import Tabs from 'packages/tabs';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-tab': Tab,
|
||||
'van-tabs': Tabs
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
import Waterfall from 'packages/waterfall';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
list: Array,
|
||||
onWaterfallLower: {
|
||||
type: Function,
|
||||
default() {
|
||||
return function() {};
|
||||
}
|
||||
},
|
||||
onWaterfallUpper: {
|
||||
type: Function,
|
||||
default() {
|
||||
return function() {};
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
},
|
||||
methods: {
|
||||
triggerWaterfallLower() {
|
||||
console.log('waterfall lower trigger');
|
||||
this.onWaterfallLower();
|
||||
},
|
||||
triggerWaterfallUpper() {
|
||||
console.log('waterfall upper trigger');
|
||||
this.onWaterfallUpper();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-waterfall-lower="triggerWaterfallLower"
|
||||
v-waterfall-upper="triggerWaterfallUpper"
|
||||
waterfall-disabled="disabled"
|
||||
>
|
||||
<div
|
||||
v-for="item in list"
|
||||
class="waterfall-item"
|
||||
>{{ item.id }}</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
const path = require('path');
|
||||
const to2 = require('2webpack2');
|
||||
// const webpack = require('webpack');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const getPostcssPlugin = require('../../build/utils/postcss_pipe');
|
||||
|
||||
const webpackConfig = {
|
||||
output: {
|
||||
path: path.resolve(process.cwd(), 'dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[id].js'
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin()
|
||||
],
|
||||
postcss: getPostcssPlugin,
|
||||
resolve: {
|
||||
modules: [
|
||||
path.resolve(process.cwd(), 'node_modules'),
|
||||
'node_modules'
|
||||
],
|
||||
extensions: [
|
||||
'',
|
||||
'.js',
|
||||
'.json',
|
||||
'.vue'
|
||||
],
|
||||
alias: {
|
||||
src: path.resolve(process.cwd(), 'src'),
|
||||
packages: path.resolve(process.cwd(), 'packages'),
|
||||
examples: path.resolve(process.cwd(), 'examples'),
|
||||
vue$: 'vue/dist/vue.common.js'
|
||||
}
|
||||
},
|
||||
resolveLoader: {},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.(jsx?|babel|es6)$/,
|
||||
include: path.resolve(process.cwd()),
|
||||
exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
|
||||
loaders: [
|
||||
'babel-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
loaders: [
|
||||
'json-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loaders: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loaders: [
|
||||
'html-loader?minimize=false'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.otf|ttf|woff2?|eot(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/[name].[hash:7].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/[name].[hash:7].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpe?g)(\?\S*)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/[name].[hash:7].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loaders: [
|
||||
'vue-loader'
|
||||
]
|
||||
}
|
||||
],
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'isparta',
|
||||
exclude: /node_modules|utils\/popper\.js|utils\/date.\js/,
|
||||
include: /src|packages/
|
||||
},
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules|bower_components/,
|
||||
loader: 'eslint-loader'
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
exclude: /node_modules|bower_components/,
|
||||
loader: 'eslint-loader'
|
||||
}
|
||||
],
|
||||
postLoaders: []
|
||||
},
|
||||
devtool: '#inline-source-map',
|
||||
vue: {
|
||||
loaders: {
|
||||
css: 'vue-style-loader!css-loader?sourceMap',
|
||||
less: 'vue-style-loader!css-loader?sourceMap!less-loader?sourceMap',
|
||||
sass: 'vue-style-loader!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
|
||||
scss: 'vue-style-loader!css-loader?sourceMap!sass-loader?sourceMap',
|
||||
stylus: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
|
||||
styl: 'vue-style-loader!css-loader?sourceMap!stylus-loader?sourceMap',
|
||||
js: 'isparta-loader!eslint-loader'
|
||||
},
|
||||
preserveWhitespace: false
|
||||
},
|
||||
eslint: {
|
||||
emitWarning: true
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = to2(webpackConfig, { quiet: true, context: true });
|
||||
@@ -0,0 +1,11 @@
|
||||
require('packages/vant-css/src/index.css');
|
||||
|
||||
// require all test files (files that ends with .spec.js)
|
||||
const testsReq = require.context('./specs', true, /\.spec$/);
|
||||
testsReq.keys().forEach(testsReq);
|
||||
|
||||
// require all src files except main.js for coverage.
|
||||
// you can also change this to match only the subset of files that
|
||||
// you want coverage for.
|
||||
const srcReq = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/);
|
||||
srcReq.keys().forEach(srcReq);
|
||||
@@ -0,0 +1,31 @@
|
||||
require('babel-polyfill');
|
||||
|
||||
require('babel-core/register')({
|
||||
presets: [require('babel-preset-es2015')]
|
||||
});
|
||||
|
||||
var webpackConfig = require('./get-webpack-conf');
|
||||
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
browsers: ['Chrome'],
|
||||
frameworks: ['mocha', 'sinon-chai'],
|
||||
reporters: ['spec', 'coverage'],
|
||||
files: ['./index.js'],
|
||||
preprocessors: {
|
||||
'./index.js': ['webpack', 'sourcemap']
|
||||
},
|
||||
webpack: webpackConfig,
|
||||
webpackMiddleware: {
|
||||
noInfo: true
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: './coverage',
|
||||
reporters: [
|
||||
{ type: 'lcov', subdir: '.' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,118 @@
|
||||
import ActionSheet from 'packages/actionsheet';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('ActionSheet', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a actionsheet', () => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-actionsheet')).to.be.true;
|
||||
expect(wrapper.contains('.van-actionsheet__list')).to.be.true;
|
||||
expect(wrapper.instance().actions.length).to.equal(0);
|
||||
expect(wrapper.instance().overlay).to.be.true;
|
||||
expect(wrapper.instance().closeOnClickOverlay).to.be.true;
|
||||
});
|
||||
|
||||
it('create displayed actionsheet', () => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.instance().currentValue).to.be.true;
|
||||
});
|
||||
|
||||
it('create title type actionsheet', () => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
title: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-actionsheet--withtitle')).to.be.true;
|
||||
expect(wrapper.contains('.van-actionsheet__header')).to.be.true;
|
||||
expect(wrapper.contains('.van-actionsheet__content')).to.be.true;
|
||||
});
|
||||
|
||||
it('create actions actionsheet', () => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
actions: [
|
||||
{
|
||||
name: '有赞E卡',
|
||||
subname: '（剩余260.50元）'
|
||||
},
|
||||
{
|
||||
name: '信用卡支付',
|
||||
loading: true
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const actionItems = wrapper.find('.van-actionsheet__item');
|
||||
|
||||
expect(actionItems.length).to.equal(2);
|
||||
expect(actionItems[0].contains('.van-actionsheet__name')).to.be.true;
|
||||
expect(actionItems[0].contains('.van-actionsheet__subname')).to.be.true;
|
||||
expect(actionItems[1].contains('.van-actionsheet__loading')).to.be.true;
|
||||
});
|
||||
|
||||
it('handle actionsheet item click with callback', () => {
|
||||
let called = false;
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
actions: [
|
||||
{
|
||||
name: '有赞E卡',
|
||||
callback: () => {
|
||||
called = true;
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const actionItem = wrapper.find('.van-actionsheet__item')[0];
|
||||
actionItem.simulate('click');
|
||||
expect(called).to.be.true;
|
||||
});
|
||||
|
||||
it('create actionsheet with cancel button', () => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
cancelText: 'cancel'
|
||||
}
|
||||
});
|
||||
|
||||
const cancelButton = wrapper.find('.van-actionsheet__button')[0];
|
||||
expect(wrapper.contains('.van-actionsheet__button')).to.be.true;
|
||||
expect(cancelButton.text()).to.equal('cancel');
|
||||
});
|
||||
|
||||
it('toggle actionsheet value from v-model', (done) => {
|
||||
wrapper = mount(ActionSheet, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
expect(wrapper.data().currentValue).to.be.false;
|
||||
|
||||
wrapper.vm.value = true;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import BadgeTestComponent from '../components/badge';
|
||||
|
||||
describe('BadgeGroup', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a badge-group', () => {
|
||||
wrapper = mount(BadgeTestComponent);
|
||||
|
||||
expect(wrapper.hasClass('van-badge-group')).to.be.true;
|
||||
|
||||
expect(wrapper.vNode.child.activeKey).to.equal(0);
|
||||
expect(wrapper.vNode.child.badges.length).to.equal(2);
|
||||
});
|
||||
|
||||
it('emit a click event when click badge', () => {
|
||||
wrapper = mount(BadgeTestComponent);
|
||||
|
||||
const badge = wrapper.find('.van-badge')[0];
|
||||
const eventStub = sinon.stub(badge.vNode.child, '$emit');
|
||||
badge.simulate('click');
|
||||
|
||||
expect(eventStub.calledWith('click')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
import Button from 'packages/button';
|
||||
import ZanLoading from 'packages/loading';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Button', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a simple button', () => {
|
||||
wrapper = mount(Button);
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--default')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--normal')).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.simulate('click');
|
||||
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('click')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a primary button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'primary'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--primary')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a danger button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
type: 'danger'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--danger')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a large button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
size: 'large'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--large')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a small button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
size: 'small'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--small')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a mini button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
size: 'mini'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--mini')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a block button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
block: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--block')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a bottom action button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
bottomAction: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--bottom-action')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a disabled button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(wrapper.hasClass('van-button--disabled')).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.simulate('click');
|
||||
|
||||
expect(eventStub.called).to.be.false;
|
||||
});
|
||||
|
||||
it('create a loading button', () => {
|
||||
wrapper = mount(Button, {
|
||||
propsData: {
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
const loading = wrapper.find(ZanLoading)[0];
|
||||
|
||||
expect(wrapper.hasClass('van-button')).to.be.true;
|
||||
expect(loading.isVueComponent).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.simulate('click');
|
||||
|
||||
expect(eventStub.called).to.be.false;
|
||||
});
|
||||
});
|
||||
@@ -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,52 @@
|
||||
import CellGroup from 'packages/cell-group';
|
||||
import Cell from 'packages/cell';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('CellGroup', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a cell-group', () => {
|
||||
wrapper = mount(CellGroup, {
|
||||
propsData: {}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-cell-group')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
describe('Cell', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create', () => {
|
||||
wrapper = mount(Cell);
|
||||
|
||||
expect(wrapper.hasClass('van-cell')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a required cell', () => {
|
||||
wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-cell')).to.be.true;
|
||||
expect(wrapper.hasClass('van-cell--required')).to.be.true;
|
||||
});
|
||||
|
||||
it('emit a click event', () => {
|
||||
wrapper = mount(Cell);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.simulate('click');
|
||||
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('click')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import Checkbox from 'packages/checkbox';
|
||||
import CheckboxTestComponent from '../components/checkbox';
|
||||
|
||||
describe('CheckboxGroup', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a checkbox-group', () => {
|
||||
wrapper = mount(CheckboxTestComponent);
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox-group')).to.be.true;
|
||||
|
||||
expect(wrapper.vNode.child.value.length).to.equal(2);
|
||||
expect(wrapper.vNode.child.disabled).to.be.false;
|
||||
});
|
||||
|
||||
it('emit a change event', (done) => {
|
||||
wrapper = mount(CheckboxTestComponent);
|
||||
|
||||
expect(wrapper.vNode.child.value.length).to.equal(2);
|
||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
wrapper.setData({
|
||||
'result': ['a']
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vNode.child.value.length).to.equal(1);
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('change'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on checked checkbox', (done) => {
|
||||
wrapper = mount(CheckboxTestComponent);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
const firstCheckboxLabel = wrapper.find('.van-checkbox')[0].find('.van-checkbox__label')[0];
|
||||
firstCheckboxLabel.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on unchecked checkbox', (done) => {
|
||||
wrapper = mount(CheckboxTestComponent);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
const lastCheckboxLabel = wrapper.find('.van-checkbox')[3].find('.van-checkbox__label')[0];
|
||||
lastCheckboxLabel.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Checkbox', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a checkbox', () => {
|
||||
wrapper = mount(Checkbox, {
|
||||
propsData: {
|
||||
value: false,
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.instance().currentValue).to.be.false;
|
||||
expect(wrapper.instance().isDisabled).to.be.false;
|
||||
expect(wrapper.instance().isChecked).to.be.false;
|
||||
});
|
||||
|
||||
it('click on a checkbox', (done) => {
|
||||
wrapper = mount(Checkbox, {
|
||||
propsData: {
|
||||
value: false,
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
checkboxLabel.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on a disabled checkbox', () => {
|
||||
wrapper = mount(Checkbox, {
|
||||
propsData: {
|
||||
value: false,
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.hasClass('van-checkbox--disabled')).to.be.true;
|
||||
expect(wrapper.instance().currentValue).to.be.false;
|
||||
expect(wrapper.instance().isDisabled).to.be.true;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
checkboxLabel.simulate('click');
|
||||
|
||||
expect(wrapper.instance().currentValue).to.be.false;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
import Field from 'packages/field';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Field', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a text field', () => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
type: 'text',
|
||||
autosize: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.propsData().type).to.equal('text');
|
||||
});
|
||||
|
||||
it('create a text field with initialize value', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.data().currentValue).to.equal('test');
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.vm.value = 'test2';
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal('test2');
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('focus on input', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: ''
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
const input = wrapper.find('.van-field__control')[0];
|
||||
input.simulate('focus');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('focus'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('input something to field', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: ''
|
||||
}
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-field__control')[0];
|
||||
|
||||
input.element.value = 'test';
|
||||
input.simulate('input');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal('test');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('create a textarea field', () => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
type: 'textarea',
|
||||
autosize: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.hasClass('van-field--hastextarea')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a autosize textarea field', (done) => {
|
||||
wrapper = mount(Field, {
|
||||
propsData: {
|
||||
type: 'textarea',
|
||||
autosize: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-field')).to.be.true;
|
||||
expect(wrapper.hasClass('van-field--autosize')).to.be.true;
|
||||
|
||||
const textarea = wrapper.find('.van-field__control')[0];
|
||||
const textareaElement = textarea.element;
|
||||
const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
|
||||
parseInt(textareaElement.style.paddingTop, 10)) || 0;
|
||||
|
||||
textareaElement.value = 'test';
|
||||
textarea.simulate('input');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal('test');
|
||||
expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
import Icon from 'packages/icon';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Icon', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a icon', () => {
|
||||
wrapper = mount(Icon, {
|
||||
propsData: {
|
||||
name: 'arrow'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-icon')).to.be.true;
|
||||
expect(wrapper.hasClass('van-icon-arrow')).to.be.true;
|
||||
});
|
||||
|
||||
it('emit a click event', () => {
|
||||
wrapper = mount(Icon, {
|
||||
propsData: {
|
||||
name: 'arrow'
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.simulate('click');
|
||||
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('click')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import Loading from 'packages/loading';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Loading', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create default', () => {
|
||||
wrapper = mount(Loading);
|
||||
|
||||
expect(wrapper.hasClass('van-loading')).to.be.true;
|
||||
});
|
||||
|
||||
it('create gradient-circle black', () => {
|
||||
wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
type: 'gradient-circle',
|
||||
color: 'black'
|
||||
}
|
||||
});
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
|
||||
});
|
||||
|
||||
it('create gradient-circle white', () => {
|
||||
wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
type: 'gradient-circle',
|
||||
color: 'white'
|
||||
}
|
||||
});
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--gradient-circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
|
||||
});
|
||||
|
||||
it('create circle black', () => {
|
||||
wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
type: 'circle',
|
||||
color: 'black'
|
||||
}
|
||||
});
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--black')).to.be.true;
|
||||
});
|
||||
|
||||
it('create circle white', () => {
|
||||
wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
type: 'circle',
|
||||
color: 'white'
|
||||
}
|
||||
});
|
||||
const spinner = wrapper.find('.van-loading__spinner')[0];
|
||||
|
||||
expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
|
||||
expect(spinner.hasClass('van-loading__spinner--white')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
import Popup from 'packages/popup';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Popup', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a popup', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
position: 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-popup')).to.be.true;
|
||||
expect(wrapper.instance().currentTransition).to.equal('popup-slide-bottom');
|
||||
});
|
||||
|
||||
it('create a show popup', (done) => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
expect(wrapper.data().currentValue).to.be.false;
|
||||
|
||||
wrapper.vm.value = true;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('toggle popup show', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.data().currentValue).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
import Progress from 'packages/progress';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Progress', () => {
|
||||
let wrapper;
|
||||
let bar;
|
||||
let pivot;
|
||||
const initProgressBar = function(propsData) {
|
||||
wrapper = mount(Progress, {
|
||||
propsData: propsData
|
||||
});
|
||||
bar = wrapper.find('.van-progress__bar__finished-portion')[0];
|
||||
pivot = wrapper.find('.van-progress__bar__pivot')[0];
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create active 3% progress bar', () => {
|
||||
initProgressBar({ percentage: 3 });
|
||||
|
||||
expect(wrapper.hasClass('van-progress')).to.be.true;
|
||||
expect(bar.is('span')).to.be.true;
|
||||
expect(bar.hasStyle('width', '3%'));
|
||||
|
||||
expect(pivot.is('span')).to.be.true;
|
||||
expect(pivot.hasStyle('left', '0%'));
|
||||
expect(pivot.hasStyle('marginLeft', '0'));
|
||||
expect(pivot.text()).to.equal('3%');
|
||||
});
|
||||
|
||||
it('create active 35% progress bar', () => {
|
||||
initProgressBar({ percentage: 35 });
|
||||
|
||||
expect(wrapper.hasClass('van-progress')).to.be.true;
|
||||
expect(bar.is('span')).to.be.true;
|
||||
expect(bar.hasStyle('width', '35%'));
|
||||
|
||||
expect(pivot.is('span')).to.be.true;
|
||||
expect(pivot.hasStyle('left', '35%'));
|
||||
expect(pivot.hasStyle('marginLeft', '-14px'));
|
||||
expect(pivot.text()).to.equal('35%');
|
||||
});
|
||||
|
||||
it('create active 98% progress bar', () => {
|
||||
initProgressBar({ percentage: 98 });
|
||||
|
||||
expect(wrapper.hasClass('van-progress')).to.be.true;
|
||||
expect(bar.is('span')).to.be.true;
|
||||
expect(bar.hasStyle('width', '98%'));
|
||||
|
||||
expect(pivot.is('span')).to.be.true;
|
||||
expect(pivot.hasStyle('left', '100%'));
|
||||
expect(pivot.hasStyle('marginLeft', '-28px'));
|
||||
expect(pivot.text()).to.equal('98%');
|
||||
});
|
||||
|
||||
it('create inactive 35% progress bar', () => {
|
||||
initProgressBar({ percentage: 35, inactive: true });
|
||||
|
||||
expect(pivot.hasStyle('backgroundColor', '#cacaca'));
|
||||
});
|
||||
|
||||
it('create progress bar with custom text', () => {
|
||||
initProgressBar({ percentage: 35, pivotText: 'pivotText' });
|
||||
|
||||
expect(pivot.text()).to.equal('pivotText');
|
||||
});
|
||||
|
||||
it('create progress bar with custom color', () => {
|
||||
initProgressBar({ percentage: 35, color: 'red' });
|
||||
|
||||
expect(pivot.hasStyle('backgroundColor', 'red'));
|
||||
});
|
||||
|
||||
it('create progress bar with text color', () => {
|
||||
initProgressBar({ percentage: 35, textColor: 'red' });
|
||||
|
||||
expect(pivot.hasStyle('color', 'red'));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,116 @@
|
||||
import Quantity from 'packages/quantity';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Quantity', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a quantity', () => {
|
||||
wrapper = mount(Quantity, {
|
||||
propsData: {
|
||||
defaultValue: 1
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-quantity')).to.be.true;
|
||||
expect(wrapper.data().currentValue).to.equal(1);
|
||||
|
||||
const plusButton = wrapper.find('.van-quantity__plus')[0];
|
||||
plusButton.simulate('click');
|
||||
|
||||
expect(wrapper.data().currentValue).to.equal(2);
|
||||
|
||||
const minusButton = wrapper.find('.van-quantity__minus')[0];
|
||||
minusButton.simulate('click');
|
||||
expect(wrapper.data().currentValue).to.equal(1);
|
||||
});
|
||||
|
||||
it('create a disabled quantity', (done) => {
|
||||
wrapper = mount(Quantity, {
|
||||
propsData: {
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-quantity')).to.be.true;
|
||||
const minusButton = wrapper.find('.van-quantity__minus')[0];
|
||||
expect(minusButton.hasClass('van-quantity__minus--disabled')).to.be.true;
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
minusButton.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('overlimit'));
|
||||
done();
|
||||
});
|
||||
|
||||
const plusButton = wrapper.find('.van-quantity__plus')[0];
|
||||
expect(plusButton.hasClass('van-quantity__plus--disabled')).to.be.true;
|
||||
|
||||
plusButton.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('overlimit'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('update quantity value use v-model', (done) => {
|
||||
wrapper = mount(Quantity, {
|
||||
propsData: {
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-quantity')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.vm.value = 2;
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('input'));
|
||||
expect(eventStub.calledWith('change'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('correct value when value is not correct', (done) => {
|
||||
wrapper = mount(Quantity, {
|
||||
propsData: {
|
||||
value: 50,
|
||||
max: 30
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-quantity')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('handle when input change', (done) => {
|
||||
wrapper = mount(Quantity, {
|
||||
propsData: {
|
||||
value: 1
|
||||
}
|
||||
});
|
||||
|
||||
const input = wrapper.find('.van-quantity__input')[0];
|
||||
input.element.value = 2;
|
||||
input.simulate('input');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().currentValue).to.equal(2);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
import { mount } from 'avoriaz';
|
||||
import Radio from 'packages/radio';
|
||||
import RadioTestComponent from '../components/radio';
|
||||
|
||||
describe('RadioGroup', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a radio-group', () => {
|
||||
wrapper = mount(RadioTestComponent);
|
||||
|
||||
expect(wrapper.hasClass('van-radio-group')).to.be.true;
|
||||
|
||||
expect(wrapper.vNode.child.value).to.equal('1');
|
||||
expect(wrapper.vNode.child.disabled).to.be.false;
|
||||
});
|
||||
|
||||
it('emit a change event', (done) => {
|
||||
wrapper = mount(RadioTestComponent);
|
||||
|
||||
expect(wrapper.vNode.child.value).to.equal('1');
|
||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
wrapper.setData({
|
||||
'radio': '2'
|
||||
});
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.vNode.child.value).to.equal('2');
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('change'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on unchecked radio', (done) => {
|
||||
wrapper = mount(RadioTestComponent);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
const uncheckedRadioLabel = wrapper.find('.van-radio')[1].find('.van-radio__label')[0];
|
||||
uncheckedRadioLabel.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Radio', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a radio', () => {
|
||||
wrapper = mount(Radio, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
name: '1',
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-radio')).to.be.true;
|
||||
expect(wrapper.hasClass('van-radio--disabled')).to.be.false;
|
||||
expect(wrapper.instance().currentValue).to.equal('1');
|
||||
expect(wrapper.instance().isDisabled).to.be.false;
|
||||
});
|
||||
|
||||
it('click on a radio', (done) => {
|
||||
wrapper = mount(Radio, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
name: '1',
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-radio')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
wrapper.simulate('click');
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('click'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on a radio label', (done) => {
|
||||
wrapper = mount(Radio, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
name: '1',
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-radio')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
||||
checkboxLabel.simulate('click');
|
||||
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('click on a disabled radio', () => {
|
||||
wrapper = mount(Radio, {
|
||||
propsData: {
|
||||
value: '1',
|
||||
name: '2',
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-radio')).to.be.true;
|
||||
expect(wrapper.hasClass('van-radio--disabled')).to.be.true;
|
||||
expect(wrapper.instance().currentValue).to.equal('1');
|
||||
expect(wrapper.instance().isDisabled).to.be.true;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-radio__label')[0];
|
||||
checkboxLabel.simulate('click');
|
||||
|
||||
expect(wrapper.instance().currentValue).to.equal('1');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
import Search from 'packages/search';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Search', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a quantity', () => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
expect(wrapper.hasClass('van-search')).to.be.true;
|
||||
expect(wrapper.data().focusStatus).to.be.false;
|
||||
expect(wrapper.data().isFocus).to.be.false;
|
||||
});
|
||||
|
||||
it('focus on input', () => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.simulate('focus');
|
||||
|
||||
expect(wrapper.data().isFocus).to.be.true;
|
||||
});
|
||||
|
||||
it('emit change event', (done) => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
wrapper.setData({ value: 'test' });
|
||||
wrapper.update();
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().value).to.be.equal('test');
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('change'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('handle clean click', () => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
wrapper.setData({ value: 'test' });
|
||||
expect(wrapper.data().value).to.be.equal('test');
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.simulate('focus');
|
||||
|
||||
const cleanBtn = wrapper.find('.van-icon-clear')[0];
|
||||
cleanBtn.simulate('click');
|
||||
expect(wrapper.data().value).to.equal('');
|
||||
expect(wrapper.data().focusStatus).to.be.true;
|
||||
});
|
||||
|
||||
it('handle cancel click', (done) => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
wrapper.setData({ value: 'test' });
|
||||
expect(wrapper.data().value).to.be.equal('test');
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.simulate('focus');
|
||||
|
||||
const cancelBtn = wrapper.find('.van-search__cancel')[0];
|
||||
cancelBtn.simulate('click');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.data().value).to.be.equal('');
|
||||
expect(wrapper.data().focusStatus).to.be.false;
|
||||
expect(wrapper.data().isFocus).to.be.false;
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('change'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('emit a search event', (done) => {
|
||||
wrapper = mount(Search);
|
||||
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const input = wrapper.find('.van-search__input')[0];
|
||||
input.simulate('keyup.enter');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('search'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import Steps from 'packages/steps';
|
||||
import { mount } from 'avoriaz';
|
||||
import StepsTestComponent from '../components/steps';
|
||||
|
||||
describe('Steps', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a steps', () => {
|
||||
wrapper = mount(Steps);
|
||||
|
||||
expect(wrapper.hasClass('van-steps')).to.be.true;
|
||||
expect(wrapper.data().steps.length).to.equal(0);
|
||||
});
|
||||
|
||||
it('create a steps with step', () => {
|
||||
wrapper = mount(StepsTestComponent);
|
||||
|
||||
const finishStep = wrapper.find('.van-step')[0];
|
||||
expect(finishStep.hasClass('van-step--finish')).to.be.true;
|
||||
|
||||
const proccessStep = wrapper.find('.van-step')[1];
|
||||
expect(proccessStep.hasClass('van-step--process')).to.be.true;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,130 @@
|
||||
import Switch from 'packages/switch';
|
||||
import Vue from 'vue';
|
||||
import ZanLoading from 'packages/loading';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Switch', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create on switch', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch')).to.be.true;
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
});
|
||||
|
||||
it('create off switch', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch')).to.be.true;
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
});
|
||||
|
||||
it('create loading switch', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
loading: true
|
||||
}
|
||||
});
|
||||
const loading = wrapper.find(ZanLoading)[0];
|
||||
|
||||
expect(wrapper.hasClass('van-switch')).to.be.true;
|
||||
expect(loading.isVueComponent).to.be.true;
|
||||
});
|
||||
|
||||
it('loading switch should be unclickable', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
loading: true,
|
||||
value: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
wrapper.simulate('click');
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
});
|
||||
|
||||
it('create disabled switch', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch')).to.be.true;
|
||||
expect(wrapper.hasClass('van-switch--disabled')).to.be.true;
|
||||
});
|
||||
|
||||
it('disabled switch should be unclickable', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
disabled: true,
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.simulate('click');
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
});
|
||||
|
||||
it('click should toggle the switch', () => {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.simulate('click');
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
});
|
||||
|
||||
it('click should call callback function', () => {
|
||||
const stub = sinon.stub();
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false,
|
||||
onChange: stub
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.simulate('click');
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
expect(stub.calledOnce).to.be.true;
|
||||
expect(stub.calledWith(true));
|
||||
});
|
||||
|
||||
it('toggle switch value from v-model', function(done) {
|
||||
wrapper = mount(Switch, {
|
||||
propsData: {
|
||||
value: false
|
||||
}
|
||||
});
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
expect(wrapper.hasClass('van-switch--off')).to.be.true;
|
||||
wrapper.vm.value = true;
|
||||
wrapper.update();
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.hasClass('van-switch--on')).to.be.true;
|
||||
expect(eventStub.calledOnce).to.be.true;
|
||||
expect(eventStub.calledWith('input'));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
import Tabs from 'packages/tabs';
|
||||
import { mount } from 'avoriaz';
|
||||
// import TabsTestComponent from '../components/tabs';
|
||||
|
||||
describe('Tabs', () => {
|
||||
let wrapper;
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create a empty card tabs', () => {
|
||||
wrapper = mount(Tabs, {
|
||||
propsData: {
|
||||
type: 'card'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.hasClass('van-tabs')).to.be.true;
|
||||
expect(wrapper.hasClass('van-tabs--card')).to.be.true;
|
||||
});
|
||||
|
||||
it('create a tabs with four tab', () => {
|
||||
// wrapper = mount(TabsTestComponent);
|
||||
|
||||
// expect(wrapper.hasClass('van-tabs')).to.be.true;
|
||||
// expect(wrapper.hasClass('van-tabs--line')).to.be.true;
|
||||
|
||||
// const eventStub = sinon.stub(wrapper.vNode.child, '$emit');
|
||||
|
||||
// const tabTitle = wrapper.find('.van-tab__pane')[2];
|
||||
// tabTitle.simulate('click');
|
||||
|
||||
// wrapper.vm.$nextTick(() => {
|
||||
// // expect(.curActive).to.equal(2);
|
||||
// console.log(wrapper.vNode.child);
|
||||
// expect(eventStub.calledWith('click'));
|
||||
// done();
|
||||
// });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
// import Toast from 'packages/toast';
|
||||
// import { mount } from 'avoriaz';
|
||||
|
||||
// describe('Toast', () => {
|
||||
// // it('create simple toast', () => {
|
||||
// // Toast('a message');
|
||||
// // var toast = document.querySelector('.van-toast');
|
||||
|
||||
// // expect(toast).not.to.be.underfined;
|
||||
|
||||
// // setTimeout(() => {
|
||||
// // expect(toast.hidden).to.be.true;
|
||||
// // }, 301);
|
||||
// // });
|
||||
|
||||
// // it('create loading toast', () => {
|
||||
// // Toast.loading('');
|
||||
// // var toast = document.querySelector('.van-toast');
|
||||
|
||||
// // expect(toast).not.to.be.underfined;
|
||||
|
||||
// // setTimeout(() => {
|
||||
// // expect(toast.hidden).to.be.true;
|
||||
// // }, 301);
|
||||
// // });
|
||||
// // it('create loading toast', () => {
|
||||
// // Toast.success('');
|
||||
// // var toast = document.querySelector('.van-toast');
|
||||
|
||||
// // expect(toast).not.to.be.underfined;
|
||||
|
||||
// // setTimeout(() => {
|
||||
// // expect(toast.hidden).to.be.true;
|
||||
// // }, 301);
|
||||
// // });
|
||||
// });
|
||||
@@ -0,0 +1,117 @@
|
||||
import Uploader from 'packages/uploader';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('enabled', () => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [] }})).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('disabled', () => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: true
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [] }})).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('before read', () => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: false,
|
||||
beforeRead: () => {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '')] }})).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('read text', () => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: false,
|
||||
resultType: 'text',
|
||||
afterRead: (file) => {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '/Users')] }})).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('read text no after hook', () => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: false,
|
||||
resultType: 'text'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '/Users')] }})).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
describe('Uploader', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('read dataUrl', () => {
|
||||
wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
disabled: false,
|
||||
resultType: 'dataUrl',
|
||||
afterRead: (file) => {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper.contains('input')).to.equal(true);
|
||||
expect(wrapper.methods().onValueChange.call(wrapper.vm, { target: { files: [new File([], '/Users')] }})).to.equal(undefined);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
import Waterfall from '../components/waterfall';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Waterfall', () => {
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create', (done) => {
|
||||
const waterfallLowerSpy = sinon.spy();
|
||||
wrapper = mount(Waterfall, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
disabled: false,
|
||||
list: [],
|
||||
onWaterfallLower: waterfallLowerSpy
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
expect(waterfallLowerSpy.called).to.be.true;
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('test waterfall lower function', (done) => {
|
||||
const waterfallLowerSpy = sinon.spy(function() {
|
||||
wrapper.vm.list = wrapper.vm.list.concat([{ id: 1 }, { id: 2 }, { id: 3 }]);
|
||||
wrapper.vm.disabled = true;
|
||||
});
|
||||
wrapper = mount(Waterfall, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
disabled: false,
|
||||
list: [{ id: 10 }],
|
||||
onWaterfallLower: waterfallLowerSpy
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const item = wrapper.find('.waterfall-item');
|
||||
expect(waterfallLowerSpy.calledOnce).to.be.true;
|
||||
expect(item.length).to.equal(4);
|
||||
expect(item[item.length - 1].text()).to.equal('3');
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
it('test waterfall upper function', (done) => {
|
||||
const waterfallUpperSpy = sinon.spy(function() {
|
||||
wrapper.vm.list.unshift({ id: 1 }, { id: 2 }, { id: 3 });
|
||||
wrapper.vm.disabled = true;
|
||||
});
|
||||
wrapper = mount(Waterfall, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
disabled: false,
|
||||
list: [{ id: 10 }],
|
||||
onWaterfallUpper: waterfallUpperSpy
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const item = wrapper.find('.waterfall-item');
|
||||
expect(waterfallUpperSpy.calledOnce).to.be.true;
|
||||
expect(item.length).to.equal(4);
|
||||
expect(item[0].text()).to.equal('1');
|
||||
done();
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user