blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 02:12:43 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
nemo-shen 2021-11-10 15:54:37 +08:00 committed by GitHub
parent 104691e18f
commit ee0e485eef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 2359 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.github/workflows/test.yml vendored
View File

@ -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:

6
babel.config.js
View File

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

22
build/compiler.js
View File

@ -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) =>

1
example/app.json
View File

@ -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",

60
example/pages/button/index.wxml
View File

@ -1,59 +1 @@
<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>
<van-button-demo />

4
example/pages/button/index.wxss
View File

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

18
jest.config.js Normal file
View File

@ -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'],
}

14
package.json
View File

@ -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",
"@vue/compiler-sfc": "^3.2.13"
"typescript": "^4.4.4",
"vue": "^3.2.1"
},
"browserslist": [
"Chrome >= 53",

7
packages/button/demo/index.json Normal file
View File

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

17
packages/button/demo/index.less Normal file
View File

@ -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;
}

5
packages/button/demo/index.ts Normal file
View File

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

59
packages/button/demo/index.wxml Normal file
View File

@ -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>

1188
packages/button/test/__snapshots__/demo.spec.ts.snap Normal file
View File

File diff suppressed because it is too large Load Diff

11
packages/button/test/demo.spec.ts Normal file
View File

@ -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();
});

68
packages/button/test/index.spec.ts Normal file
View File

@ -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);
});
});

3
tsconfig.example.json
View File

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

8
tsconfig.json
View File

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

925
yarn.lock
View File

File diff suppressed because it is too large Load Diff