test(Button): add unit test (#4603)

* fix: test init

* test(Button): add unit test

* fix(test): remove unused code

* test(build): remove demo/test dir when compile

* fix(Button): remove duplicate demo

* test(Button): adjust component.json

.github/workflows/test.yml

@@ -17,6 +17,25 @@ jobs:
     - name: Run linter
       run: npm run lint
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '14.x'
+
+    - name: Install dependencies
+      uses: bahmutov/npm-install@v1
+
+    - name: Run test cases
+      run: npm test
+
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v1
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+
   build:
     runs-on: ubuntu-latest
     steps:

babel.config.js

@@ -8,4 +8,10 @@ module.exports = {
       },
     ],
   ],
+  env: {
+    test: {
+      presets: ['@babel/preset-typescript'],
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+  },
 };

build/compiler.js

@@ -22,8 +22,12 @@ const baseCssPath = path.resolve(__dirname, '../packages/common/index.wxss');
 
 const lessCompiler = (dist) =>
   function compileLess() {
+    const srcPath = [`${src}/**/*.less`];
+    if ([esDir, libDir].indexOf(dist) !== -1) {
+      srcPath.push(`!${src}/**/demo/**/*.less`);
+    }
     return gulp
-      .src(`${src}/**/*.less`)
+      .src(srcPath)
       .pipe(less())
       .pipe(postcss())
       .pipe(
@@ -52,7 +56,21 @@ const tsCompiler = (dist, config) =>
 
 const copier = (dist, ext) =>
   function copy() {
-    return gulp.src(`${src}/**/*.${ext}`).pipe(gulp.dest(dist));
+    const srcPath = [`${src}/**/*.${ext}`];
+    if ([esDir, libDir].indexOf(dist) !== -1) {
+      srcPath.push(`!${src}/**/demo/**/*.${ext}`);
+    }
+    return gulp
+      .src(srcPath)
+      .pipe(
+        insert.transform((contents, file) => {
+          if (ext === 'json' && file.path.includes('/demo/')) {
+            contents = contents.replace('/example', '');
+          }
+          return contents;
+        })
+      )
+      .pipe(gulp.dest(dist));
   };
 
 const staticCopier = (dist) =>

example/app.json

@@ -66,6 +66,7 @@
     "van-action-sheet": "./dist/action-sheet/index",
     "van-area": "./dist/area/index",
     "van-button": "./dist/button/index",
+    "van-button-demo": "./dist/button/demo/index",
     "van-card": "./dist/card/index",
     "van-cell": "./dist/cell/index",
     "van-cell-group": "./dist/cell-group/index",

example/pages/button/index.wxml

@@ -1,59 +1 @@
-<demo-block title="按钮类型" padding>
+<van-button-demo />
-  <view class="row">
-    <van-button class="demo-margin-right">默认按钮</van-button>
-    <van-button type="primary" class="demo-margin-right">主要按钮</van-button>
-    <van-button type="info" class="demo-margin-right">信息按钮</van-button>
-  </view>
-  <van-button type="danger" class="demo-margin-right">危险按钮</van-button>
-  <van-button type="warning">警告按钮</van-button>
-</demo-block>
-
-<demo-block title="朴素按钮" padding>
-  <van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
-  <van-button type="info" plain>朴素按钮</van-button>
-</demo-block>
-
-<demo-block title="细边框" padding>
-  <van-button type="primary" plain hairline class="demo-margin-right">细边框按钮</van-button>
-  <van-button type="info" plain hairline>细边框按钮</van-button>
-</demo-block>
-
-<demo-block title="禁用状态" padding>
-  <van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
-  <van-button type="info" disabled>禁用状态</van-button>
-</demo-block>
-
-<demo-block title="加载状态" padding>
-  <van-button loading type="primary" class="demo-margin-right" />
-  <van-button loading type="primary" loading-type="spinner" class="demo-margin-right" />
-  <van-button loading type="info" loading-text="加载中..." />
-</demo-block>
-
-<demo-block title="按钮形状" padding>
-  <van-button type="primary" square class="demo-margin-right">方形按钮</van-button>
-  <van-button type="info" round>圆形按钮</van-button>
-</demo-block>
-
-<demo-block title="图标按钮" padding>
-  <van-button type="primary" icon="star-o" class="demo-margin-right" />
-  <van-button type="primary" icon="star-o" class="demo-margin-right">按钮</van-button>
-  <van-button plain type="primary" icon="https://img.yzcdn.cn/vant/logo.png">按钮</van-button>
-</demo-block>
-
-<demo-block title="按钮尺寸" padding>
-  <van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
-  <van-button type="primary" class="demo-margin-right">普通按钮</van-button>
-  <van-button type="primary" size="small" class="demo-margin-right">小型按钮</van-button>
-  <van-button type="primary" size="mini">迷你按钮</van-button>
-</demo-block>
-
-<demo-block title="块级元素" padding>
-  <van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
-  <van-button type="primary" block>块级元素</van-button>
-</demo-block>
-
-<demo-block title="自定义颜色" padding>
-  <van-button color="#7232dd" class="demo-margin-right">单色按钮</van-button>
-  <van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
-  <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
-</demo-block>

example/pages/button/index.wxss

@@ -1,4 +0,0 @@
-.row {
-  height: 44px;
-  margin-bottom: 15px;
-}

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  bail: 1,
+  verbose: true,
+  testEnvironment: 'jsdom',
+  testURL: 'https://jest.test',
+  moduleFileExtensions: ['js', 'ts'],
+  testMatch: ['<rootDir>/packages/**/test/**/*.spec.{js,ts}'],
+  transform: {
+    "^.+\\.jsx?$": "babel-jest", // Adding this line solved the issue
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  collectCoverageFrom: [
+    '<rootDir>/packages/**/*.{js,ts}',
+    '!**/test/**'
+  ],
+  preset: "ts-jest",
+  snapshotSerializers: ['miniprogram-simulate/jest-snapshot-plugin'],
+}

package.json

@@ -17,7 +17,8 @@
     "release:site": "vant-cli build-site && gh-pages -d site-dist --add",
     "build:lib": "yarn && npx gulp -f build/compiler.js --series buildEs buildLib",
     "build:changelog": "vant-cli changelog",
-    "upload:weapp": "node build/upload.js"
+    "upload:weapp": "node build/upload.js",
+    "test": "jest"
   },
   "files": [
     "dist",
@@ -39,18 +40,25 @@
   },
   "homepage": "https://github.com/youzan/vant-weapp#readme",
   "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@types/jest": "^27.0.2",
     "@vant/cli": "^4.0.0-beta.7",
     "@vant/icons": "^1.7.1",
+    "@vue/compiler-sfc": "^3.2.13",
     "gulp": "^4.0.2",
     "gulp-insert": "^0.5.0",
     "gulp-less": "^5.0.0",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
+    "jest": "^27.3.1",
     "miniprogram-api-typings": "^3.1.6",
     "miniprogram-ci": "^1.6.1",
+    "miniprogram-simulate": "^1.4.2",
+    "ts-jest": "^27.0.7",
     "tscpaths": "^0.0.9",
-    "vue": "^3.2.1",
+    "typescript": "^4.4.4",
-    "@vue/compiler-sfc": "^3.2.13"
+    "vue": "^3.2.1"
   },
   "browserslist": [
     "Chrome >= 53",

packages/button/demo/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "../../button/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

packages/button/demo/index.less

@@ -0,0 +1,17 @@
+.row {
+  height: 44px;
+  margin-bottom: 15px;
+}
+
+.demo-margin-left {
+  margin-left: 10px;
+}
+
+.demo-margin-right {
+  margin-right: 10px;
+}
+
+.demo-margin-bottom {
+  display: block;
+  margin-bottom: 15px;
+}

packages/button/demo/index.ts

@@ -0,0 +1,5 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {},
+});

packages/button/demo/index.wxml

@@ -0,0 +1,59 @@
+<demo-block title="按钮类型" padding>
+  <view class="row">
+    <van-button class="demo-margin-right">默认按钮</van-button>
+    <van-button type="primary" class="demo-margin-right">主要按钮</van-button>
+    <van-button type="info" class="demo-margin-right">信息按钮</van-button>
+  </view>
+  <van-button type="danger" class="demo-margin-right">危险按钮</van-button>
+  <van-button type="warning">警告按钮</van-button>
+</demo-block>
+
+<demo-block title="朴素按钮" padding>
+  <van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
+  <van-button type="info" plain>朴素按钮</van-button>
+</demo-block>
+
+<demo-block title="细边框" padding>
+  <van-button type="primary" plain hairline class="demo-margin-right">细边框按钮</van-button>
+  <van-button type="info" plain hairline>细边框按钮</van-button>
+</demo-block>
+
+<demo-block title="禁用状态" padding>
+  <van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
+  <van-button type="info" disabled>禁用状态</van-button>
+</demo-block>
+
+<demo-block title="加载状态" padding>
+  <van-button loading type="primary" class="demo-margin-right" />
+  <van-button loading type="primary" loading-type="spinner" class="demo-margin-right" />
+  <van-button loading type="info" loading-text="加载中..." />
+</demo-block>
+
+<demo-block title="按钮形状" padding>
+  <van-button type="primary" square class="demo-margin-right">方形按钮</van-button>
+  <van-button type="info" round>圆形按钮</van-button>
+</demo-block>
+
+<demo-block title="图标按钮" padding>
+  <van-button type="primary" icon="star-o" class="demo-margin-right" />
+  <van-button type="primary" icon="star-o" class="demo-margin-right">按钮</van-button>
+  <van-button plain type="primary" icon="https://img.yzcdn.cn/vant/logo.png">按钮</van-button>
+</demo-block>
+
+<demo-block title="按钮尺寸" padding>
+  <van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
+  <van-button type="primary" class="demo-margin-right">普通按钮</van-button>
+  <van-button type="primary" size="small" class="demo-margin-right">小型按钮</van-button>
+  <van-button type="primary" size="mini">迷你按钮</van-button>
+</demo-block>
+
+<demo-block title="块级元素" padding>
+  <van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
+  <van-button type="primary" block>块级元素</van-button>
+</demo-block>
+
+<demo-block title="自定义颜色" padding>
+  <van-button color="#7232dd" class="demo-margin-right">单色按钮</van-button>
+  <van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
+  <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
+</demo-block>

packages/button/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});

packages/button/test/index.spec.ts

@@ -0,0 +1,68 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+describe('button', () => {
+  const VanButton = simulate.load(
+    path.resolve(__dirname, '../../button/index'),
+    'van-button',
+    {
+      rootPath: path.resolve(__dirname, '../../'),
+    }
+  );
+
+  test('should emit click event', async () => {
+    const comp = simulate.render(
+      simulate.load({
+        usingComponents: {
+          'van-button': VanButton,
+        },
+        template: `<van-button id="wrapper" bind:click="onClick" />`,
+        data: {
+          tapValue: 0,
+        },
+        methods: {
+          onClick() {
+            this.setData({
+              tapValue: this.data.tapValue + 1,
+            });
+          },
+        },
+      })
+    );
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const wrapper = comp.querySelector('#wrapper');
+    const btn = wrapper?.querySelector('.van-button');
+    btn?.dispatchEvent('tap');
+    await simulate.sleep(10);
+    expect(comp.data.tapValue).toEqual(1);
+  });
+
+  test('should not emit click event when disabled', async () => {
+    const comp = simulate.render(
+      simulate.load({
+        usingComponents: {
+          'van-button': VanButton,
+        },
+        template: `<van-button id="wrapper" disabled bind:click="onClick" />`,
+        data: {
+          tapValue: 0,
+        },
+        methods: {
+          onClick() {
+            this.setData({
+              tapValue: this.data.tapValue + 1,
+            });
+          },
+        },
+      })
+    );
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const wrapper = comp.querySelector('#wrapper');
+    const btn = wrapper?.querySelector('.van-button');
+    btn?.dispatchEvent('tap');
+    await simulate.sleep(10);
+    expect(comp.data.tapValue).toEqual(0);
+  });
+});

tsconfig.example.json

@@ -3,5 +3,6 @@
   "compilerOptions": {
     "watch": true,
     "outDir": "example/dist"
-  }
+  },
+  "exclude": ["packages/**/test/*"]
 }

tsconfig.json

@@ -8,12 +8,14 @@
     "outDir": "dist",
     "baseUrl": ".",
     "strict": true,
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "dom"],
-    "types": ["miniprogram-api-typings"],
+    "types": ["@types/jest", "node", "miniprogram-api-typings"],
     "paths": {
       "definitions/*": ["./packages/definitions/*"]
     },
+    "moduleResolution": "node",
     "skipLibCheck": true
   },
-  "include": ["packages/**/*"]
+  "include": ["packages/**/*"],
+  "exclude": ["packages/**/test/*", "packages/**/demo/*"]
 }