[Improvement] Rebuild test system

.babelrc

@@ -4,6 +4,11 @@
   "env": {
     "commonjs": {
       "presets": [["env", { "modules": "commonjs", "loose": true }]]
+    },
+    "test": {
+      "presets": [
+        ["env", { "targets": { "node": 8 }}]
+      ]
     }
   }
 }

build/bin/build-components.js

@@ -13,6 +13,7 @@ const compilerOption = {
     extends: path.join(__dirname, '../../.babelrc')
   }
 };
+const whiteList = ['vant-css', 'test'];
 
 // clear dir
 fs.emptyDirSync(esDir);
@@ -29,8 +30,8 @@ function compile(dir, jsOnly = false) {
   files.forEach(file => {
     const absolutePath = path.join(dir, file);
 
-    // 移除 vant-css
-    if (file.indexOf('vant-css') !== -1) {
+    // 移除不需要的文件
+    if (whiteList.indexOf(file) !== -1) {
       fs.removeSync(absolutePath);
       // 遍历文件夹
     } else if (isDir(absolutePath)) {

docs/demos/views/coupon.vue

@@ -95,6 +95,7 @@ export default {
     disabledDiscountCoupon() {
       return {
         ...this.discountCoupon,
+        discount: 10,
         id: 4,
         available: 0,
         reason: this.$t('coupon.reason')

docs/demos/views/image-preview.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { ImagePreview } from 'packages';
+import { ImagePreview } from '../../../packages';
 
 export default {
   i18n: {

docs/demos/views/panel.vue

@@ -18,6 +18,10 @@
   </demo-section>
 </template>
 
+<script>
+export default {};
+</script>
+
 <style lang="postcss">
 .demo-panel {
   .van-panel__footer {

docs/demos/views/password-input.vue

@@ -30,7 +30,7 @@ export default {
 
   data() {
     return {
-      value: '',
+      value: '123',
       showKeyboard: true
     };
   },

docs/demos/views/steps.vue

@@ -76,7 +76,7 @@ export default {
 
   data() {
     return {
-      active: 0
+      active: 1
     };
   },
 

docs/demos/views/waterfall.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { Waterfall } from 'packages';
+import { Waterfall } from '../../../packages';
 
 export default {
   i18n: {

docs/markdown/en-US/password-input.md

@@ -33,7 +33,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
 export default {
   data() {
     return {
-      value: '',
+      value: '123',
       showKeyboard: true
     };
   },

docs/markdown/en-US/steps.md

@@ -24,7 +24,7 @@ Vue.use(Step).use(Steps);
 export default {
   data() {
     return {
-      active: 0
+      active: 1
     };
   }
 }

docs/markdown/zh-CN/password-input.md

@@ -33,7 +33,7 @@ Vue.use(PasswordInput).use(NumberKeyboard);
 export default {
   data() {
     return {
-      value: '',
+      value: '123',
       showKeyboard: true
     };
   },

docs/markdown/zh-CN/steps.md

@@ -24,7 +24,7 @@ Vue.use(Step).use(Steps);
 export default {
   data() {
     return {
-      active: 0
+      active: 1
     };
   }
 }

package.json

@@ -26,10 +26,9 @@
     "deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.doc.js",
     "dist": "npm run bootstrap && node build/bin/build-lib.js",
     "lint": "./node_modules/.bin/eslint ./packages --ext .js,.vue",
-    "test": "karma start test/karma.conf.js --single-run",
-    "test:coverage": "open test/coverage/lcov-report/index.html",
-    "test:watch": "karma start test/karma.conf.js",
-    "test:single": "node ./test/selector.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "open test/coverage/index.html",
     "release": "sh build/release.sh",
     "precommit": "lint-staged"
   },
@@ -58,17 +57,18 @@
     "vue": ">= 2.5.0"
   },
   "devDependencies": {
-    "autoprefixer": "^8.4.1",
-    "avoriaz": "2.0.0",
+    "@vue/server-test-utils": "^1.0.0-beta.15",
+    "@vue/test-utils": "^1.0.0-beta.15",
+    "autoprefixer": "^8.3.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
+    "babel-jest": "^22.4.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-env": "^1.6.1",
-    "chai": "^4.1.2",
-    "codecov": "^3.0.1",
-    "cross-env": "^5.1.4",
+    "codecov": "^3.0.0",
+    "cross-env": "^5.1.5",
     "css-loader": "^0.28.11",
     "dependency-tree": "^6.1.0",
     "eslint": "^4.19.1",
@@ -77,39 +77,64 @@
     "gh-pages": "^1.0.0",
     "html-webpack-plugin": "3.2.0",
     "husky": "^0.14.3",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "karma": "^2.0.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.2",
-    "karma-mocha": "^1.3.0",
-    "karma-sinon-chai": "^1.3.4",
+    "jest": "^22.4.3",
+    "jest-serializer-vue": "^1.0.0",
     "karma-spec-reporter": "^0.0.32",
-    "karma-webpack": "3.0.0",
-    "lint-staged": "^7.1.0",
-    "mocha": "^5.1.1",
+    "lint-staged": "^7.0.4",
     "postcss": "^6.0.22",
     "postcss-calc": "^6.0.0",
     "postcss-easy-import": "^3.0.0",
     "postcss-loader": "^2.1.5",
     "precss": "2.0.0",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
-    "shelljs": "^0.8.2",
-    "sinon": "^2.4.1",
-    "sinon-chai": "^2.12.0",
+    "shelljs": "^0.8.1",
     "style-loader": "^0.21.0",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.0.1",
     "vant-doc": "1.0.4",
     "vue": "2.5.16",
-    "vue-loader": "^15.0.9",
+    "vue-jest": "^2.5.0",
+    "vue-loader": "^15.0.0",
     "vue-router": "^3.0.1",
+    "vue-server-renderer": "^2.5.16",
     "vue-sfc-compiler": "^0.0.8",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "2.5.16",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^4.8.1",
-    "webpack-cli": "^2.1.3",
-    "webpack-dev-server": "3.1.4"
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.0.15",
+    "webpack-dev-server": "3.1.4",
+    "webpack-merge": "^4.1.2"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "moduleNameMapper": {
+      "^packages/(.*)$": "<rootDir>/packages/$1"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ],
+    "collectCoverageFrom": [
+      "packages/**/*.{js,vue}",
+      "!**/vant-css/**",
+      "!**/locale/lang/**",
+      "!**/waterfall/**",
+      "!**/lazyload/**"
+    ],
+    "collectCoverage": true,
+    "coverageReporters": [
+      "html",
+      "lcov",
+      "text-summary"
+    ],
+    "coverageDirectory": "./test/coverage"
   }
 }

packages/actionsheet/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`callback events 1`] = `
+<div class="van-actionsheet" style="display: none;" name="van-slide-bottom">
+  <ul class="van-hairline--bottom">
+    <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
+      <!---->
+    </li>
+    <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span>
+      <!---->
+    </li>
+  </ul>
+  <div class="van-actionsheet__cancel van-hairline--top">Cancel</div>
+</div>
+`;
+
+exports[`renders actionsheet correctly 1`] = `
+<div>
+  <div>
+    <button class="van-button van-button--default van-button--normal">
+      <!----><span class="van-button__text">弹出 Actionsheet</span></button>
+    <div class="van-actionsheet" style="display:none;">
+      <ul class="van-hairline--bottom">
+        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span>
+          <!---->
+        </li>
+        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span> <span class="van-actionsheet__subname">描述信息</span></li>
+        <li class="van-actionsheet__item van-hairline--top">
+          <div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        </li>
+      </ul>
+      <div class="van-actionsheet__content"></div>
+    </div>
+  </div>
+  <div>
+    <button class="van-button van-button--default van-button--normal">
+      <!----><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
+    <div class="van-actionsheet" style="display:none;">
+      <ul class="van-hairline--bottom">
+        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span>
+          <!---->
+        </li>
+        <li class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">选项</span> <span class="van-actionsheet__subname">描述信息</span></li>
+        <li class="van-actionsheet__item van-hairline--top">
+          <div class="van-loading van-loading--circular van-loading--black van-actionsheet__loading" style="width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        </li>
+      </ul>
+      <div class="van-actionsheet__cancel van-hairline--top">取消</div>
+    </div>
+  </div>
+  <div>
+    <button class="van-button van-button--default van-button--normal">
+      <!----><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
+    <div class="van-actionsheet van-actionsheet--withtitle" style="display:none;">
+      <div class="van-hairline--top-bottom van-actionsheet__header">
+        <div>标题</div>
+        <i class="van-icon van-icon-close" style="color:undefined;">
+          <!---->
+        </i>
+      </div>
+      <div class="van-actionsheet__content">
+        <p>内容</p>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/actionsheet/test/index.spec.js

@@ -0,0 +1,26 @@
+import { shallow } from '@vue/test-utils';
+import Actionsheet from '../';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Actionsheet);
+
+test('callback events', () => {
+  const callback = jest.fn();
+  const wrapper = shallow(Actionsheet, {
+    propsData: {
+      actions: [
+        { name: 'Option', callback },
+        { name: 'Option' }
+      ],
+      cancelText: 'Cancel'
+    }
+  });
+
+  wrapper.findAll('li').trigger('click');
+  wrapper.find('.van-actionsheet__cancel').trigger('click');
+
+  expect(callback.mock.calls.length).toBe(1);
+  expect(wrapper.emitted('cancel')).toBeTruthy();
+  expect(wrapper.emitted('input')[0][0]).toBeFalsy();
+  expect(wrapper.html()).toMatchSnapshot();
+});