Skip to content

Commit 9b69a30

Browse files
staticdengstaticdeng
committed
feat: add jest and @vue/test-utils to test component
1 parent 7cd753b commit 9b69a30

File tree

13 files changed

+3388
-72
lines changed

13 files changed

+3388
-72
lines changed

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
/lib/
22
/example/
3+
/test/
4+
jest.config.js
35
babel.config.js

‎.github/workflows/eslint.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ jobs:
2828
cache: 'npm'
2929
- run: npm install
3030
- run: npm run lint
31-
- run: npm run lint-fix
31+
- run: npm test

‎jest.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
"testMatch": ["**/test/*.spec.[jt]s?(x)"], // Jest 测试的文件
3+
'moduleFileExtensions': [
4+
'js',
5+
// 告诉 Jest 处理 `*.vue` 文件
6+
'vue'
7+
],
8+
'transform': {
9+
// 用 `vue-jest` 处理 `*.vue` 文件
10+
'.*\\.(vue)$': 'vue-jest',
11+
// 用 `babel-jest` 处理 js
12+
'.*\\.(js)$': 'babel-jest'
13+
}
14+
}

‎lib/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/index.module.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "vuejs-loadmore",
3-
"version": "1.0.6",
3+
"version": "1.0.7",
44
"description": "A pull-down refresh and pull-up loadmore scroll component for Vue.js",
55
"entry": "packages/index.js",
66
"main": "lib/index.js",
77
"module": "lib/index.module.js",
88
"scripts": {
99
"build": "yarn clean && rollup -c",
10+
"test": "jest",
1011
"lint": "eslint ./packages --ext .vue,.js,.ts",
1112
"lint-fix": "eslint --fix ./packages --ext .vue,.js,.ts",
1213
"clean": "rimraf ./lib",
@@ -35,14 +36,18 @@
3536
"@babel/preset-env": "^7.16.4",
3637
"@rollup/plugin-node-resolve": "^13.0.6",
3738
"@vue/eslint-config-standard": "^5.1.2",
39+
"@vue/test-utils": "1.0.0-beta.29",
3840
"autoprefixer": "^10.3.3",
41+
"babel-core": "^7.0.0-bridge.0",
3942
"babel-eslint": "^10.1.0",
43+
"babel-jest": "^26.0.1",
4044
"eslint": "^6.7.2",
4145
"eslint-plugin-import": "^2.20.2",
4246
"eslint-plugin-node": "^11.1.0",
4347
"eslint-plugin-promise": "^4.2.1",
4448
"eslint-plugin-standard": "^4.0.0",
4549
"eslint-plugin-vue": "^6.2.2",
50+
"jest": "^25.5.4",
4651
"postcss": "^8.4.4",
4752
"rimraf": "^3.0.2",
4853
"rollup": "^2.60.2",
@@ -51,6 +56,7 @@
5156
"rollup-plugin-postcss": "^4.0.2",
5257
"rollup-plugin-terser": "^7.0.2",
5358
"rollup-plugin-vue": "^5.1.9",
59+
"vue-jest": "4.0.0-rc.0",
5460
"vue-template-compiler": "^2.6.14"
5561
},
5662
"browserslist": [

‎packages/icon/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
import loading from './loading.vue';
2-
import './loading.scss';
32

43
export default loading;

‎packages/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import VueLoadmore from './vuejs-loadmore/index';
22
import './vuejs-loadmore/index.scss';
3+
import './icon/loading.scss';
34
import locale from './locale/index';
45

56
export default {

‎packages/style/var.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $refresh-head-text-color: $gray-1;
1111
// loadmore
1212
$loadmore-text-color: $gray-1;
1313
$loadmore-text-font-size: $font-size-md;
14-
$loadmore-text-line-height: 30px;
14+
$loadmore-text-line-height: 36px;
1515
// icon
1616
$padding-base: 4px;
1717
$loading-spinner-color: $gray-2;

‎test/__snapshots__/index.spec.js.snap

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`pull refresh 1`] = `
4+
<div
5+
class="vuejs-loadmore-wrap"
6+
>
7+
<div
8+
class="vuejs-refresh-track"
9+
style="transition-duration: 0ms; transform: translate3d(0, 20px, 0); webkit-transform: translate3d(0, 20px, 0);"
10+
>
11+
<div
12+
class="vuejs-refresh-head"
13+
>
14+
<div
15+
class="vuejs-refresh-text"
16+
>
17+
下拉刷新
18+
</div>
19+
</div>
20+
21+
<div
22+
class="vuejs-loadmore"
23+
>
24+
<!---->
25+
26+
<!---->
27+
28+
<!---->
29+
</div>
30+
</div>
31+
</div>
32+
`;
33+
34+
exports[`pull refresh 2`] = `
35+
<div
36+
class="vuejs-loadmore-wrap"
37+
>
38+
<div
39+
class="vuejs-refresh-track"
40+
style="transition-duration: 0ms; transform: translate3d(0, 75px, 0); webkit-transform: translate3d(0, 75px, 0);"
41+
>
42+
<div
43+
class="vuejs-refresh-head"
44+
>
45+
<div
46+
class="vuejs-refresh-text"
47+
>
48+
释放刷新
49+
</div>
50+
</div>
51+
52+
<div
53+
class="vuejs-loadmore"
54+
>
55+
<!---->
56+
57+
<!---->
58+
59+
<!---->
60+
</div>
61+
</div>
62+
</div>
63+
`;
64+
65+
exports[`pull refresh 3`] = `
66+
<div
67+
class="vuejs-loadmore-wrap"
68+
>
69+
<div
70+
class="vuejs-refresh-track"
71+
style="transition-duration: 200ms; transform: translate3d(0, 50px, 0); webkit-transform: translate3d(0, 50px, 0);"
72+
>
73+
<div
74+
class="vuejs-refresh-head"
75+
>
76+
<div>
77+
<div
78+
class="vuejs-loading vuejs-loading-circular"
79+
>
80+
<span
81+
class="vuejs-loading-spinner vuejs-loading-spinner-circular"
82+
>
83+
<svg
84+
class="vuejs-loading-circular"
85+
viewBox="25 25 50 50"
86+
>
87+
<circle
88+
cx="50"
89+
cy="50"
90+
fill="none"
91+
r="20"
92+
/>
93+
</svg>
94+
</span>
95+
96+
<span
97+
class="vuejs-loading-text"
98+
>
99+
正在刷新
100+
</span>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<div
106+
class="vuejs-loadmore"
107+
>
108+
<!---->
109+
110+
<!---->
111+
112+
<!---->
113+
</div>
114+
</div>
115+
</div>
116+
`;

‎test/index.spec.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import VueLoadmore from '../packages/vuejs-loadmore/index';
2+
import { mount } from '@vue/test-utils';
3+
import { trigger } from './utils/event';
4+
5+
// 下拉测试
6+
test('pull refresh', () => {
7+
const wrapper = mount(VueLoadmore, {
8+
propsData: {
9+
onRefresh: (done) => { done() },
10+
},
11+
});
12+
const track = wrapper.find('.vuejs-refresh-track');
13+
14+
// pulling
15+
trigger(track, 'touchstart', 0, 0);
16+
trigger(track, 'touchmove', 0, 20);
17+
expect(wrapper.vm.$el).toMatchSnapshot();
18+
19+
20+
// loosing
21+
trigger(track, 'touchmove', 0, 75);
22+
trigger(track, 'touchmove', 0, 100);
23+
expect(wrapper.vm.$el).toMatchSnapshot();
24+
25+
// loading
26+
trigger(track, 'touchend', 0, 100);
27+
expect(wrapper.vm.$el).toMatchSnapshot();
28+
29+
});

‎test/utils/event.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* 触发dom事件/自定义事件
3+
* @param {*} wrapper
4+
* @param {*} eventName
5+
* @param {*} x
6+
* @param {*} y
7+
*/
8+
export function trigger(wrapper, eventName, x = 0, y = 0) {
9+
const el = 'element' in wrapper ? wrapper.element : wrapper;
10+
const touchList = [{
11+
target: el,
12+
clientX: x,
13+
clientY: y
14+
}];
15+
16+
// 自定义事件
17+
const event = customEvent(eventName);
18+
19+
// 扩展
20+
Object.assign(event, {
21+
clientX: x,
22+
clientY: 100,
23+
touches: touchList,
24+
targetTouches: touchList,
25+
changedTouches: touchList,
26+
});
27+
28+
// 触发自定义事件
29+
el.dispatchEvent(event);
30+
}
31+
32+
/**
33+
* 自定义事件
34+
* @param {*} eventName
35+
*/
36+
function customEvent(eventName) {
37+
var event;
38+
if (window.CustomEvent) {
39+
// 新版自定义事件
40+
event = new window.CustomEvent(eventName, {
41+
canBubble: true,
42+
cancelable: true
43+
});
44+
} else {
45+
// 已被废弃的方法，做兼容
46+
event = document.createEvent('CustomEvent');
47+
event.initCustomEvent(eventName, true, true);
48+
}
49+
50+
return event;
51+
}

0 commit comments

Comments
 (0)