feat: add jest and @vue/test-utils to test component

staticdeng · staticdeng · commit 9b69a305abd6 · 2022-02-26T10:38:53.000+08:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,5 @@
 /lib/
 /example/
+/test/
+jest.config.js
 babel.config.js
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -28,4 +28,4 @@ jobs:
         cache: 'npm'
     - run: npm install
     - run: npm run lint
-    - run: npm run lint-fix
+    - run: npm test
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  "testMatch": ["**/test/*.spec.[jt]s?(x)"], // Jest 测试的文件
+  'moduleFileExtensions': [
+    'js',
+    // 告诉 Jest 处理 `*.vue` 文件
+    'vue'
+  ],
+  'transform': {
+    // 用 `vue-jest` 处理 `*.vue` 文件
+    '.*\\.(vue)$': 'vue-jest',
+    // 用 `babel-jest` 处理 js
+    '.*\\.(js)$': 'babel-jest'
+  }
+}
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.module.js b/lib/index.module.js
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "vuejs-loadmore",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A pull-down refresh and pull-up loadmore scroll component for Vue.js",
   "entry": "packages/index.js",
   "main": "lib/index.js",
   "module": "lib/index.module.js",
   "scripts": {
     "build": "yarn clean && rollup -c",
+    "test": "jest",
     "lint": "eslint ./packages --ext .vue,.js,.ts",
     "lint-fix": "eslint --fix ./packages --ext .vue,.js,.ts",
     "clean": "rimraf ./lib",
@@ -35,14 +36,18 @@
     "@babel/preset-env": "^7.16.4",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^10.3.3",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.0.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
+    "jest": "^25.5.4",
     "postcss": "^8.4.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.2",
@@ -51,6 +56,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^5.1.9",
+    "vue-jest": "4.0.0-rc.0",
     "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [
diff --git a/packages/icon/index.js b/packages/icon/index.js
@@ -1,4 +1,3 @@
 import loading from './loading.vue';
-import './loading.scss';
 
 export default loading;
diff --git a/packages/index.js b/packages/index.js
@@ -1,5 +1,6 @@
 import VueLoadmore from './vuejs-loadmore/index';
 import './vuejs-loadmore/index.scss';
+import './icon/loading.scss';
 import locale from './locale/index';
 
 export default {
diff --git a/packages/style/var.scss b/packages/style/var.scss
@@ -11,7 +11,7 @@ $refresh-head-text-color: $gray-1;
 // loadmore
 $loadmore-text-color: $gray-1;
 $loadmore-text-font-size: $font-size-md;
-$loadmore-text-line-height: 30px;
+$loadmore-text-line-height: 36px;
 // icon
 $padding-base: 4px;
 $loading-spinner-color: $gray-2;
diff --git a/test/__snapshots__/index.spec.js.snap b/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`pull refresh 1`] = `
+<div
+  class="vuejs-loadmore-wrap"
+>
+  <div
+    class="vuejs-refresh-track"
+    style="transition-duration: 0ms; transform: translate3d(0, 20px, 0); webkit-transform: translate3d(0, 20px, 0);"
+  >
+    <div
+      class="vuejs-refresh-head"
+    >
+      <div
+        class="vuejs-refresh-text"
+      >
+        下拉刷新
+      </div>
+    </div>
+      
+    <div
+      class="vuejs-loadmore"
+    >
+      <!---->
+       
+      <!---->
+       
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`pull refresh 2`] = `
+<div
+  class="vuejs-loadmore-wrap"
+>
+  <div
+    class="vuejs-refresh-track"
+    style="transition-duration: 0ms; transform: translate3d(0, 75px, 0); webkit-transform: translate3d(0, 75px, 0);"
+  >
+    <div
+      class="vuejs-refresh-head"
+    >
+      <div
+        class="vuejs-refresh-text"
+      >
+        释放刷新
+      </div>
+    </div>
+      
+    <div
+      class="vuejs-loadmore"
+    >
+      <!---->
+       
+      <!---->
+       
+      <!---->
+    </div>
+  </div>
+</div>
+`;
+
+exports[`pull refresh 3`] = `
+<div
+  class="vuejs-loadmore-wrap"
+>
+  <div
+    class="vuejs-refresh-track"
+    style="transition-duration: 200ms; transform: translate3d(0, 50px, 0); webkit-transform: translate3d(0, 50px, 0);"
+  >
+    <div
+      class="vuejs-refresh-head"
+    >
+      <div>
+        <div
+          class="vuejs-loading vuejs-loading-circular"
+        >
+          <span
+            class="vuejs-loading-spinner vuejs-loading-spinner-circular"
+          >
+            <svg
+              class="vuejs-loading-circular"
+              viewBox="25 25 50 50"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="20"
+              />
+            </svg>
+          </span>
+           
+          <span
+            class="vuejs-loading-text"
+          >
+            正在刷新
+          </span>
+        </div>
+      </div>
+    </div>
+      
+    <div
+      class="vuejs-loadmore"
+    >
+      <!---->
+       
+      <!---->
+       
+      <!---->
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/index.spec.js b/test/index.spec.js
@@ -0,0 +1,29 @@
+import VueLoadmore from '../packages/vuejs-loadmore/index';
+import { mount } from '@vue/test-utils';
+import { trigger } from './utils/event';
+
+// 下拉测试
+test('pull refresh', () => {
+  const wrapper = mount(VueLoadmore, {
+    propsData: {
+      onRefresh: (done) => { done() },
+    },
+  });
+  const track = wrapper.find('.vuejs-refresh-track');
+
+  // pulling
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 20);
+  expect(wrapper.vm.$el).toMatchSnapshot();
+  
+
+  // loosing
+  trigger(track, 'touchmove', 0, 75);
+  trigger(track, 'touchmove', 0, 100);
+  expect(wrapper.vm.$el).toMatchSnapshot();
+
+  // loading
+  trigger(track, 'touchend', 0, 100);
+  expect(wrapper.vm.$el).toMatchSnapshot();
+
+});
diff --git a/test/utils/event.js b/test/utils/event.js
@@ -0,0 +1,51 @@
+/**
+ * 触发dom事件/自定义事件
+ * @param {*} wrapper 
+ * @param {*} eventName 
+ * @param {*} x 
+ * @param {*} y 
+ */
+export function trigger(wrapper, eventName, x = 0, y = 0) {
+  const el = 'element' in wrapper ? wrapper.element : wrapper;
+  const touchList = [{
+    target: el,
+    clientX: x,
+    clientY: y
+  }];
+
+  // 自定义事件
+  const event = customEvent(eventName);
+
+  // 扩展
+  Object.assign(event, {
+    clientX: x,
+    clientY: 100,
+    touches: touchList,
+    targetTouches: touchList,
+    changedTouches: touchList,
+  });
+
+  // 触发自定义事件
+  el.dispatchEvent(event);
+}
+
+/**
+ * 自定义事件
+ * @param {*} eventName 
+ */
+function customEvent(eventName) {
+  var event;
+  if (window.CustomEvent) {
+    // 新版自定义事件
+    event = new window.CustomEvent(eventName, {
+      canBubble: true,
+      cancelable: true
+    });
+  } else {
+    // 已被废弃的方法，做兼容
+    event = document.createEvent('CustomEvent');
+    event.initCustomEvent(eventName, true, true);
+  }
+ 
+  return event;
+ }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`	`1`	`import loading from './loading.vue';`
`2`		`-import './loading.scss';`
`3`	`2`
`4`	`3`	`export default loading;`