diff --git a/docs/examples-docs/changelog.md b/docs/examples-docs/changelog.md index 368905d3f..545b0e180 100644 --- a/docs/examples-docs/changelog.md +++ b/docs/examples-docs/changelog.md @@ -1,9 +1,26 @@ ## 更新日志 +## [v0.8.5](https://github.com/youzan/vant/tree/v0.8.5) (2017-08-21) +[Full Changelog](https://github.com/youzan/vant/compare/v0.8.4...v0.8.5) + +**非兼容更新和新特性:** + +- Doc: add usage guide && top progress [\#83](https://github.com/youzan/vant/pull/83) ([chenjiahan](https://github.com/chenjiahan)) + +**修复:** + +- Popup: not preventScroll by default [\#84](https://github.com/youzan/vant/pull/84) ([chenjiahan](https://github.com/chenjiahan)) +- fix: swipe sometimes will change to drag image [\#81](https://github.com/youzan/vant/pull/81) ([pangxie1991](https://github.com/pangxie1991)) + +**处理的 Issue:** + +- Href link does not work [\#82](https://github.com/youzan/vant/issues/82) +- Swipe image not displayed [\#79](https://github.com/youzan/vant/issues/79) + ## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18) [Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4) -**合并的 Pull Request (可能有不兼容改动):** +**修复:** - fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991)) diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md index 3f122139d..dd4973ea6 100644 --- a/docs/examples-docs/datetime-picker.md +++ b/docs/examples-docs/datetime-picker.md @@ -5,15 +5,16 @@ export default { minHour: 10, maxHour: 20, minDate: new Date(), - currentDate1: null, + maxDate: new Date(2019, 10, 1), + currentDate1: new Date(2018, 0, 1), currentDate2: null, currentDate3: null }; }, methods: { - handlePickerChange(picker, values) { - console.log(values); + handlePickerChange(picker) { + console.log(picker); }, handlePickerCancel() { console.log('picker cancel'); @@ -43,10 +44,10 @@ Vue.component(DatetimePicker.name, DatetimePicker); @@ -57,13 +58,14 @@ export default { minHour: 10, maxHour: 20, minDate: new Date(), - currentDate: null + maxDate: new Date(2019, 10, 1), + currentDate: new Date(2018, 0, 1) }; }, methods: { - handlePickerChange(picker, values) { - picker.setColumnValues(1, citys[values[0]]); + handlePickerChange(picker) { + console.log(picker); } } }; @@ -78,7 +80,6 @@ export default { import { Dialog } from 'packages/index'; +const message = '弹窗内容'; + export default { methods: { - handleAlertClick() { + onClickAlert() { Dialog.alert({ - title: 'alert标题', - message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。' - }).then((action) => { - console.log(action); + title: '标题', + message }); }, - handleAlert2Click() { + onClickAlert2() { Dialog.alert({ - message: '无标题alert' - }).then((action) => { - console.log(action); + message }); }, - handleConfirmClick() { + onClickConfirm() { Dialog.confirm({ - title: 'confirm标题', - message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。' - }).then((action) => { + title: '标题', + message + }).catch(action => { console.log(action); - }, (error) => { - console.log(error); }); } } @@ -46,8 +42,6 @@ export default { ### 使用指南 -`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。 - ```js import { Dialog } from 'vant'; ``` @@ -56,30 +50,30 @@ import { Dialog } from 'vant'; #### 消息提示 -用于提示一些消息，只包含一个确认按钮。 +用于提示一些消息，只包含一个确认按钮 :::demo 消息提示 ```html -alert -无标题alert +Alert +无标题 Alert diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue index 6b9c024b8..7ab4ce705 100644 --- a/packages/cell-swipe/index.vue +++ b/packages/cell-swipe/index.vue @@ -1,15 +1,19 @@ diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue index aabc82ed8..7aec18626 100644 --- a/packages/dialog/dialog.vue +++ b/packages/dialog/dialog.vue @@ -2,8 +2,10 @@
-
-
+
+ +
+
{{ cancelButtonText }} @@ -27,33 +29,48 @@ export default { mixins: [Popup], props: { + title: { + type: String, + default: '' + }, + message: { + type: String, + default: '' + }, + showConfirmButton: { + type: Boolean, + default: true + }, + showCancelButton: { + type: Boolean, + default: false + }, + confirmButtonText: { + type: String, + default: '确认' + }, + cancelButtonText: { + type: String, + default: '取消' + }, + callback: { + type: Function + }, overlay: { default: true }, closeOnClickOverlay: { - default: true + default: false }, lockOnScroll: { default: true } }, - data() { - return { - title: '', - message: '', - type: '', - showConfirmButton: true, - showCancelButton: false, - confirmButtonText: '确认', - cancelButtonText: '取消', - callback: null - }; - }, - methods: { handleAction(action) { this.$emit('input', false); + this.$emit(action); this.callback && this.callback(action); } } diff --git a/packages/dialog/index.js b/packages/dialog/index.js index c5287b19c..02df39c96 100644 --- a/packages/dialog/index.js +++ b/packages/dialog/index.js @@ -1,97 +1,62 @@ import Vue from 'vue'; -import Dialog from './dialog'; +import DialogComponent from './dialog'; -const DialogConstructor = Vue.extend(Dialog); - -let currentDialog; let instance; -let dialogQueue = []; -const defaultCallback = action => { - /* istanbul ignore else */ - if (currentDialog) { - if (currentDialog.resolve && action === 'confirm') { - currentDialog.resolve(action); - } else if (currentDialog.reject && action === 'cancel') { - currentDialog.reject(action); - } +const defaultConfig = { + value: true, + title: '', + message: '', + showCancelButton: false, + closeOnClickOverlay: false, + callback: action => { + instance[action === 'confirm' ? 'resolve' : 'reject'](action); } }; const initInstance = () => { + const DialogConstructor = Vue.extend(DialogComponent); instance = new DialogConstructor({ el: document.createElement('div') }); instance.$on('input', value => { instance.value = value; - }) - instance.callback = defaultCallback; + }); + + document.body.appendChild(instance.$el); }; -const showNextDialog = () => { - if (!instance) { - initInstance(); - } - - /* istanbul ignore else */ - if (!instance.value && dialogQueue.length > 0) { - currentDialog = dialogQueue.shift(); - - const { options } = currentDialog; - - for (const prop in options) { - /* istanbul ignore else */ - if (options.hasOwnProperty(prop)) { - instance[prop] = options[prop]; - } +const Dialog = options => { + return new Promise((resolve, reject) => { + if (!instance) { + initInstance(); } - instance.callback = options.callback || defaultCallback; - instance.value = true; - document.body.appendChild(instance.$el); - } -}; - -const DialogBox = options => { - return new Promise((resolve, reject) => { // eslint-disable-line - dialogQueue.push({ - options: { ...options }, - callback: options.callback, - resolve: resolve, - reject: reject + Object.assign(instance, { + resolve, + reject, + ...options }); - - showNextDialog(); }); }; -DialogBox.alert = function(options) { - return DialogBox({ - type: 'alert', - title: '', - message: '', - closeOnClickOverlay: false, - showCancelButton: false, - ...options - }); -}; +Dialog.alert = options => Dialog({ + ...defaultConfig, + ...options +}); -DialogBox.confirm = function(options) { - return DialogBox({ - type: 'confirm', - title: '', - message: '', - closeOnClickOverlay: true, - showCancelButton: true, - ...options - }); -}; +Dialog.confirm = options => Dialog({ + ...defaultConfig, + showCancelButton: true, + ...options +}); -DialogBox.close = function() { +Dialog.close = () => { instance.value = false; - dialogQueue = []; - currentDialog = null; }; -export default DialogBox; +export default Dialog; +export { + Dialog +}; diff --git a/packages/field/index.vue b/packages/field/index.vue index 2f86df5b1..67145aa67 100644 --- a/packages/field/index.vue +++ b/packages/field/index.vue @@ -48,15 +48,15 @@ diff --git a/packages/utils/dom.js b/packages/utils/dom.js deleted file mode 100644 index bd9b6edb5..000000000 --- a/packages/utils/dom.js +++ /dev/null @@ -1,11 +0,0 @@ -import Vue from 'vue'; - -export const once = function(el, event, fn) { - const listener = function() { - if (fn) { - fn.apply(this, arguments); - } - el.removeEventListener(event, listener); - }; - el.addEventListener(event, listener); -}; diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json index 36e96b762..d3dbbe043 100644 --- a/packages/vant-css/package.json +++ b/packages/vant-css/package.json @@ -1,6 +1,6 @@ { "name": "vant-css", - "version": "0.8.5", + "version": "0.8.6", "description": "vant css.", "main": "lib/index.css", "style": "lib/index.css", diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css index 0d05cdbf4..a3fd5f146 100644 --- a/packages/vant-css/src/button.css +++ b/packages/vant-css/src/button.css @@ -11,7 +11,6 @@ font-size: 16px; text-align: center; outline: 0; - overflow: hidden; -webkit-appearance: none; &::after { diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css index 2bb7a35e8..3233148a6 100644 --- a/packages/vant-css/src/cell-swipe.css +++ b/packages/vant-css/src/cell-swipe.css @@ -1,29 +1,26 @@ -.van-cell { - &-swipe { - position: relative; - min-height: 48px; - overflow: hidden; +.van-cell-swipe { + overflow: hidden; + position: relative; - .van-cell-wrapper, - .van-cell-left, - .van-cell-right { - transition: transform 150ms ease-in-out; - } + &__wrapper, + &__left, + &__right { + transition: transform .15s ease-in-out; } - &-left, - &-right { - position: absolute; - height: 100%; + &__left, + &__right { top: 0; + height: 100%; + position: absolute; } - &-left { + &__left { left: 0; transform: translate3d(-100%, 0, 0); } - &-right { + &__right { right: 0; transform: translate3d(100%, 0, 0); } diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css index a7f77a619..5f76c401f 100644 --- a/packages/vant-css/src/dialog.css +++ b/packages/vant-css/src/dialog.css @@ -42,9 +42,10 @@ overflow: hidden; &.is-twobtn { + display: flex; + .van-button { - width: 50%; - float: left; + flex: 1; } .van-dialog__cancel { @@ -63,7 +64,10 @@ } &__confirm { - color: #00C000; + &, + &:active { + color: #00C000; + } } &-bounce-enter { diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css index a087660fb..645d7db64 100644 --- a/packages/vant-css/src/progress.css +++ b/packages/vant-css/src/progress.css @@ -1,32 +1,27 @@ @import './common/var.css'; .van-progress { - &__bar { - height: 4px; - border-radius: 4.5px; - width: 100%; - background: $c-gray-light; - position: relative; + height: 4px; + position: relative; + border-radius: 4px; + background: $c-gray-light; - &__finished-portion { - border-radius: 4.5px; - height: 100%; - position: absolute; - left: 0; - display: inline-block; - } + &__portion { + left: 0; + height: 100%; + position: absolute; + border-radius: 4px; + } - &__pivot { - padding: 2px 0; - font-size: 8px; - position: absolute; - border-radius: 6px; - width: 28px; - background-color: $c-gray-light; - line-height: 8px; - text-align: center; - top: 50%; - transform: translate3d(0, -50%, 0); - } + &__pivot { + top: 50%; + width: 28px; + font-size: 8px; + margin-top: -6px; + position: absolute; + border-radius: 6px; + line-height: 12px; + text-align: center; + background-color: $c-gray-light; } } diff --git a/test/unit/get-webpack-conf.js b/test/unit/get-webpack-conf.js index 1c57dd658..6d0818692 100644 --- a/test/unit/get-webpack-conf.js +++ b/test/unit/get-webpack-conf.js @@ -2,96 +2,96 @@ const path = require('path'); const webpack = require('webpack'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); -const webpackConfig = { - output: { - path: path.resolve(process.cwd(), 'dist'), - publicPath: '/dist/', - filename: '[name].js', - chunkFilename: '[id].js', - libraryTarget: 'umd' - }, - plugins: [ - new ProgressBarPlugin(), - new webpack.LoaderOptionsPlugin({ - minimize: true, - options: { - babel: { - presets: ['env'], - plugins: ['transform-runtime', 'transform-vue-jsx'] - }, - vue: { - autoprefixer: false, - preserveWhitespace: false +function getWebpackConfig(testFileName) { + return { + output: { + path: path.resolve(process.cwd(), 'dist'), + publicPath: '/dist/', + filename: '[name].js', + chunkFilename: '[id].js', + libraryTarget: 'umd' + }, + plugins: [ + new ProgressBarPlugin(), + new webpack.LoaderOptionsPlugin({ + minimize: true, + options: { + babel: { + presets: ['env'], + plugins: ['transform-runtime', 'transform-vue-jsx'] + }, + vue: { + autoprefixer: false, + preserveWhitespace: false + } } - } - }) - ], - stats: 'errors-only', - resolve: { - modules: [ - path.resolve(process.cwd(), 'node_modules'), - 'node_modules' + }), + new webpack.DefinePlugin({ + 'process.env': { + TEST_FILE: `"${testFileName}"` + } + }) ], - 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' - } - }, - module: { - rules: [ - { - enforce: 'pre', - test: /\.js$/, - exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/, - use: ['isparta-loader'] - }, - { - test: /\.js$/, - exclude: /node_modules|vue-router\/|vue-loader\//, - use: ['babel-loader'] - }, - { - test: /\.(css|pcss)$/, - use: [ - 'style-loader', - 'css-loader', - 'postcss-loader' - ] - }, - { - test: /\.(gif|png|jpe?g)(\?\S*)?$/, - use: [{ - loader: 'url-loader', - options: { - query: { - limit: 10000, - name: 'static/[name].[hash:7].[ext]' - } - } - }] - }, - { - test: /\.vue$/, - use: [{ - loader: 'vue-loader', - options: { - loaders: { - css: [ - 'style-loader', - 'css-loader', - 'postcss-loader' - ], - js: ['isparta-loader'] - } - } - }] + stats: 'errors-only', + 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' } - ] - }, - devtool: '#inline-source-map' -}; + }, + module: { + rules: [ + { + enforce: 'pre', + test: /\.js$/, + exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/, + use: ['isparta-loader'] + }, + { + test: /\.js$/, + exclude: /node_modules|vue-router\/|vue-loader\//, + use: ['babel-loader'] + }, + { + test: /\.(css|pcss)$/, + use: ['style-loader', 'css-loader', 'postcss-loader'] + }, + { + test: /\.(gif|png|jpe?g)(\?\S*)?$/, + use: [ + { + loader: 'url-loader', + options: { + query: { + limit: 10000, + name: 'static/[name].[hash:7].[ext]' + } + } + } + ] + }, + { + test: /\.vue$/, + use: [ + { + loader: 'vue-loader', + options: { + loaders: { + css: ['style-loader', 'css-loader', 'postcss-loader'], + js: ['isparta-loader'] + } + } + } + ] + } + ] + }, + devtool: '#inline-source-map' + }; +} -module.exports = webpackConfig; +module.exports = getWebpackConfig; diff --git a/test/unit/index.js b/test/unit/index.js index fc003e86e..9f20bac30 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -1,5 +1,16 @@ require('packages/vant-css/src/index.css'); -// require all test files (files that ends with .spec.js) +// hack for test touch event +window.ontouchstart = {}; + +// 读取配置文件，判断运行单个测试文件还是所有测试文件 const testsReq = require.context('./specs', true, /\.spec$/); -testsReq.keys().forEach(testsReq); +if (process.env.TEST_FILE) { + testsReq.keys().forEach((file) => { + if (file.indexOf(process.env.TEST_FILE) !== -1) { + testsReq(file); + } + }); +} else { + testsReq.keys().forEach(testsReq); +} \ No newline at end of file diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js index e94bd9532..7c8a89d96 100644 --- a/test/unit/karma.conf.js +++ b/test/unit/karma.conf.js @@ -4,7 +4,7 @@ require('babel-core/register')({ presets: [require('babel-preset-env')] }); -var webpackConfig = require('./get-webpack-conf'); +var getWebpackConfig = require('./get-webpack-conf'); var travis = process.env.TRAVIS; module.exports = function(config) { @@ -16,7 +16,7 @@ module.exports = function(config) { preprocessors: { './index.js': ['webpack', 'sourcemap'] }, - webpack: webpackConfig, + webpack: getWebpackConfig(getTestFileName()), webpackMiddleware: { noInfo: true }, @@ -30,3 +30,8 @@ module.exports = function(config) { singleRun: false }); }; + +function getTestFileName() { + const flagIndex = process.argv.indexOf('--file'); + return flagIndex !== -1 ? process.argv[flagIndex + 1] : ''; +} diff --git a/test/unit/selector.js b/test/unit/selector.js new file mode 100644 index 000000000..ea3b633eb --- /dev/null +++ b/test/unit/selector.js @@ -0,0 +1,19 @@ +/** + * 运行单个测试文件 + */ + +const fs = require('fs'); +const inquirer = require('inquirer'); +const path = require('path'); +const shell = require('shelljs'); +const files = fs.readdirSync(path.resolve(__dirname, './specs')); + +inquirer.prompt([{ + type: 'list', + name: 'select', + message: '请选择要运行的测试文件：', + choices: files +}], (result) => { + const file = result.select.replace('.spec.js', ''); + shell.exec('karma start test/unit/karma.conf.js --color alway --file ' + file); +}); diff --git a/test/unit/specs/cell-swipe.spec.js b/test/unit/specs/cell-swipe.spec.js index 46325f291..89e5ca833 100644 --- a/test/unit/specs/cell-swipe.spec.js +++ b/test/unit/specs/cell-swipe.spec.js @@ -1,141 +1,117 @@ 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('create a CellSwipe', () => { - wrapper = mount(CellSwipe, { - propsData: { - leftWidth: 2, - rightWidth: 2 - } + 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', () => { + 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; }); - wrapper.vm.startDrag({ - pageX: 0, - pageY: 0 + }); + + it('drag and show right part', () => { + 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.vm.onDrag({ - preventDefault() {}, - pageY: 0, - pageX: 50 + }); + + 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(); + }); }); - wrapper.vm.offsetLeft = -20; - wrapper.vm.rightWidth = 10; - wrapper.vm.swipeLeaveTransition(1); - wrapper.vm.endDrag(); - expect(wrapper.hasClass('van-cell-swipe')).to.be.true; - }); -}); - - -describe('CellSwipe-left', () => { - let wrapper; - afterEach(() => { - wrapper && wrapper.destroy(); - }); - - it('create a CellSwipe left', () => { - wrapper = mount(CellSwipe, { - propsData: { - leftWidth: 2, - rightWidth: 2 - } - }); - wrapper.vm.startDrag({ - changedTouches: [{ - pageX: 0, - pageY: 0 - } - ] - }); - wrapper.vm.onDrag({ - preventDefault() {}, - changedTouches: [{ - pageX: 0, - pageY: -50 - } - ] - }); - wrapper.vm.offsetLeft = 20; - wrapper.vm.rightWidth = 10; - wrapper.vm.swipeLeaveTransition(-1); - wrapper.vm.endDrag(); - expect(wrapper.hasClass('van-cell-swipe')).to.be.true; - }); -}); - -describe('CellSwipe-0', () => { - let wrapper; - afterEach(() => { - wrapper && wrapper.destroy(); - }); - - it('create a CellSwipe 0', () => { - wrapper = mount(CellSwipe, { - propsData: { - leftWidth: 0, - rightWidth: 2 - } - }); - wrapper.vm.startDrag({ - pageX: 0, - pageY: 0 - }); - wrapper.vm.onDrag({ - preventDefault() {}, - pageY: 0, - pageX: -2 - }); - wrapper.vm.opened = true; - wrapper.vm.onDrag({ - preventDefault() {}, - pageY: 0, - pageX: -2 - }); - wrapper.vm.opened = false; - wrapper.vm.onDrag({ - preventDefault() {}, - pageY: 0, - pageX: 40 - }); - wrapper.vm.swipeLeaveTransition(0); - wrapper.vm.endDrag(); - expect(wrapper.hasClass('van-cell-swipe')).to.be.true; - }); -}); - - -describe('CellSwipe-0', () => { - let wrapper; - afterEach(() => { - wrapper && wrapper.destroy(); - }); - - it('create a CellSwipe 0', () => { - wrapper = mount(CellSwipe, { - propsData: { - leftWidth: 0, - rightWidth: 2 - } - }); - wrapper.vm.startDrag({ - pageX: 0, - pageY: 0 - }); - wrapper.vm.onDrag({ - preventDefault() {}, - pageY: 1000, - pageX: 40 - }); - wrapper.vm.swipeMove(); - wrapper.vm.swiping = false; - wrapper.vm.endDrag(); - wrapper.vm.swiping = true; - wrapper.vm.endDrag(); - expect(wrapper.hasClass('van-cell-swipe')).to.be.true; + }); + + 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); }); }); diff --git a/test/unit/specs/datetime-picker.spec.js b/test/unit/specs/datetime-picker.spec.js index 4b8e37329..edc003faf 100644 --- a/test/unit/specs/datetime-picker.spec.js +++ b/test/unit/specs/datetime-picker.spec.js @@ -1,5 +1,20 @@ import DatetimePicker from 'packages/datetime-picker'; import { mount } from 'avoriaz'; +import { triggerTouch } from '../utils'; + +const dragHelper = (el, position) => { + triggerTouch(el, 'touchstart', 0, 0); + triggerTouch(el, 'touchmove', 0, position / 4); + triggerTouch(el, 'touchmove', 0, position / 3); + triggerTouch(el, 'touchmove', 0, position / 2); + triggerTouch(el, 'touchmove', 0, position); + triggerTouch(el, 'touchend', 0, position); +}; + +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; @@ -7,36 +22,117 @@ describe('DatetimePicker', () => { wrapper && wrapper.destroy(); }); - it('create a datetime picker', () => { - const date = new Date(); + it('create a time picker', () => { wrapper = mount(DatetimePicker, { + attachToDocument: true, propsData: { - type: 'datetime', - value: date + type: 'time', + value: testTime } }); - expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime()); + expect(wrapper.vm.innerValue).to.equal(testTime); }); it('create a date picker', () => { - const date = new Date(); wrapper = mount(DatetimePicker, { + attachToDocument: true, propsData: { type: 'date', - value: date + value: testDate } }); - expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime()); + expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime()); }); - it('create a time picker', () => { - const time = '10:00'; + it('create a datetime picker', () => { wrapper = mount(DatetimePicker, { + attachToDocument: true, propsData: { - type: 'time', - value: time + type: 'datetime', + value: testDate } }); - expect(wrapper.data().innerValue).to.equal(time); + expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime()); + }); + + it('drag time picker', (done) => { + wrapper = mount(DatetimePicker, { + attachToDocument: true, + propsData: { + type: 'time', + value: testTime + } + }); + + const [hour, minute] = wrapper.find('.van-picker-column-wrapper'); + dragHelper(hour, -50); + dragHelper(minute, -50); + + setTimeout(() => { + expect(wrapper.vm.innerValue).to.equal('5:05'); + done(); + }, 10); + }); + + 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-wrapper'); + 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(2022); + expect(newMonth).to.equal(8); + expect(newDay).to.equal(15); + 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-wrapper'); + 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(2022); + expect(newMonth).to.equal(8); + expect(newDay).to.equal(15); + expect(newHour).to.equal(15); + expect(newMinute).to.equal(5); + done(); + }, 10); + }, 10); }); }); diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js index be92b4e3c..107c71ca7 100644 --- a/test/unit/specs/dialog.spec.js +++ b/test/unit/specs/dialog.spec.js @@ -3,11 +3,6 @@ import Vue from 'vue'; describe('Dialog', () => { afterEach(() => { - const el = document.querySelector('.van-dialog'); - if (!el) return; - if (el.parentNode) { - el.parentNode.removeChild(el); - } Dialog.close(); }); @@ -28,30 +23,32 @@ describe('Dialog', () => { }, 500); }); - it('create a confirm dialog', () => { + 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) => { - let dialogAction; Dialog.confirm({ - title: 'title', - message: 'message', callback: (action) => { - dialogAction = action; + expect(action).to.equal('cancel'); + done(); } }); - expect(document.querySelector('.van-dialog')).to.exist; setTimeout(() => { document.querySelector('.van-dialog__cancel').click(); - expect(dialogAction).to.equal('cancel'); - done(); }, 500); }); }); diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js index 69b6cf763..d70226746 100644 --- a/test/unit/specs/progress.spec.js +++ b/test/unit/specs/progress.spec.js @@ -9,8 +9,8 @@ describe('Progress', () => { wrapper = mount(Progress, { propsData: propsData }); - bar = wrapper.find('.van-progress__bar__finished-portion')[0]; - pivot = wrapper.find('.van-progress__bar__pivot')[0]; + bar = wrapper.find('.van-progress__portion')[0]; + pivot = wrapper.find('.van-progress__pivot')[0]; }; afterEach(() => { diff --git a/test/unit/utils.js b/test/unit/utils.js index b8d768787..7e866d70d 100644 --- a/test/unit/utils.js +++ b/test/unit/utils.js @@ -31,7 +31,9 @@ export function DOMChecker(wrapper, rules) { if (style) { Object.keys(style).forEach(key => { Object.keys(style[key]).forEach(prop => { - expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(true); + expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal( + true + ); }); }); } @@ -39,8 +41,35 @@ export function DOMChecker(wrapper, rules) { if (noStyle) { Object.keys(noStyle).forEach(key => { Object.keys(noStyle[key]).forEach(prop => { - expect(wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])).to.equal(false); + expect( + wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop]) + ).to.equal(false); }); }); } } + +// 触发一个 touch 事件 +export function triggerTouch(wrapper, eventName, x, y) { + const el = wrapper.element ? wrapper.element : wrapper; + const touch = { + identifier: Date.now(), + target: el, + pageX: x, + pageY: y, + clientX: x, + clientY: y, + radiusX: 2.5, + radiusY: 2.5, + rotationAngle: 10, + force: 0.5 + }; + + const event = document.createEvent('CustomEvent'); + event.initCustomEvent(eventName, true, true, {}); + event.touches = [touch]; + event.targetTouches = [touch]; + event.changedTouches = [touch]; + + el.dispatchEvent(event); +} diff --git a/yarn.lock b/yarn.lock index f546eae28..28f96953e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -67,7 +67,7 @@ ajv-keywords@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0" -ajv@^4.7.0, ajv@^4.9.1: +ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1: version "4.11.8" resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536" dependencies: @@ -2768,14 +2768,14 @@ extglob@^0.3.1: dependencies: is-extglob "^1.0.0" -extract-text-webpack-plugin@2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c" +extract-text-webpack-plugin@2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60" dependencies: + ajv "^4.11.2" async "^2.1.2" loader-utils "^1.0.2" - schema-utils "^0.3.0" - webpack-sources "^1.0.1" + webpack-sources "^0.1.0" extract-zip@~1.6.5: version "1.6.5" @@ -6816,6 +6816,10 @@ source-list-map@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085" +source-list-map@~0.1.7: + version "0.1.8" + resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106" + source-map-support@^0.4.15: version "0.4.16" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8" @@ -7603,9 +7607,9 @@ vue-loader@^13.0.4: vue-style-loader "^3.0.0" vue-template-es2015-compiler "^1.5.3" -vue-markdown-loader@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.0.0.tgz#d3cadbf9c8976a81f2d5e39496d505fd4f31bc96" +vue-markdown-loader@^2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c" dependencies: cheerio "^0.20.0" highlight.js "^9.4.0" @@ -7707,6 +7711,13 @@ webpack-merge@^4.1.0: dependencies: lodash "^4.17.4" +webpack-sources@^0.1.0: + version "0.1.5" + resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750" + dependencies: + source-list-map "~0.1.7" + source-map "~0.5.3" + webpack-sources@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf" @@ -7926,9 +7937,9 @@ yeast@0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" -zan-doc@^0.2.1: - version "0.2.1" - resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b" +zan-doc@^0.2.2: + version "0.2.2" + resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.2.tgz#ebf8ffda5bd3cf9277cc3e59c48476a3fbf84d9f" dependencies: cheerio "0.22.0" decamelize "^1.2.0"