vusion · imyzf · Jul 19, 2023 · Jul 20, 2023 · Jul 20, 2023 · Jul 25, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,6 +1,18 @@
 {
-  "root": true,
-  "extends": [
-    "@vant/eslint-config"
-  ]
+  "extends": "vusion/all",
+  "env": {
+      "browser": true,
+      "node": true
+  },
+  "rules": {
+      "no-alert": [0],
+      "function-paren-newline": [0],
+      "vue/html-indent": [0],
+      "vue/no-unused-vars": [0],
+      "linebreak-style": 0,
+      "vue/component-definition-name-casing": [2, "kebab-case"],
+      "vue/first-attribute-linebreak": [0],
+      "vue/no-mutating-props": [0],
+      "vue/name-property-casing": 0
+  }
 }
diff --git a/.github/workflows/jest.yml b/.github/workflows/jest.yml
@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Jest Test CI
+
+on:
+  push:
+    branches: [ "master", "release/*", "test" ]
+  pull_request:
+    branches: [ "*" ]
+
+jobs:
+  test:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+    - run: npm test
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,6 @@ assets-package
 changelog.generated.md
 test/coverage
 vetur
+
+# 测试入口
+scripts/test/package-entry.js
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,5 +1,6 @@
 {
-  "extends": [
-    "@vant/stylelint-config"
-  ]
+  "extends": "stylelint-config-vusion",
+  "rules": {
+    "length-zero-no-unit": null
+  }
 }
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,31 @@
+process.env.TZ = 'Asia/Shanghai';
+
+module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    // i-ico.vue/icon.js 要求文档必须有一个 script 标签
+    html: '<!DOCTYPE html><html><head><meta charset="UTF-8" /><script></script></head><body></body></html>'
+  },
+  testMatch: ["<rootDir>/src/**/test/**/*.spec.[jt]s?(x)"],
+  moduleFileExtensions: ['js', 'jsx', 'vue', 'ts', 'tsx', 'json'],
+  transform: {
+    ".*\\.(vue)$": "@vue/vue2-jest",
+    "\\.(js|jsx|ts|tsx)$": "babel-jest"
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(@vusion|swiper|ssr-window|dom7|@vant|vue-month-picker)/)',
+  ],
+  moduleNameMapper: {
+    "\\.(css|less|scss)$": "<rootDir>/scripts/test/__mocks__/styleMock.js",
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/scripts/test/__mocks__/fileMock.js',
+    "themeCSS": "<rootDir>/scripts/test/__mocks__/styleMock.js",
+    "swiper/swiper-bundle.esm.js": "<rootDir>/node_modules/swiper/swiper-bundle.esm.js",
+  },
+  snapshotSerializers: ["jest-serializer-vue-tjw"],
+  setupFiles: ['<rootDir>/scripts/test/jest.setup.js'],
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx,vue}', '!**/demo/**'],
+  coverageReporters: ["html", "text-summary"],
+  coverageDirectory: './test/coverage',
+};
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "dev": "cross-env scene=desktop vant-cli dev",
     "dev:mobile": "cross-env scene=mobile vant-cli dev",
     "lint": "vant-cli lint",
-    "test": "vant-cli test",
+    "lint:changed": "eslint --fix $(git diff --name-only HEAD | grep -E '.(ts|tsx|js|vue)$' | xargs)",
+    "test": "node ./scripts/test/gen-entry.js && jest --silent",
     "copyimg": "node bin/copy-lcp-images ",
     "build:vusion": "npm run check && vue-cli-service library-build --dest dist-theme && npm run copyimg && node ./scripts/lcap",
     "build:vusion-local": "vue-cli-service library-build --dest dist-theme && npm run copyimg && node ./scripts/lcap",
@@ -40,11 +41,11 @@
     "screenshot": "node bin/screenshot",
     "genThemeConfig": "node ./scripts/genThemeConfig/index.js",
     "deploy:dev": "lcap deploy dist-theme --platform http://defaulttenant.lcap.dev.env.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.dev.env.com",
-    "deploy:test": "lcap deploy dist-theme --platform http://defaulttenant.lcap.ha.test.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.ha.test.com",
-    "deploy:test-without-img": "lcap deploy dist-theme --platform http://defaulttenant.lcap.ha.test.com",
-    "deploy:pre": "lcap deploy dist-theme --platform https://defaulttenant.lcap.hadri.163yun.com && node bin/deploy-lcp-images --platform=https://defaulttenant.lcap.hadri.163yun.com",
-    "deploy:online": "lcap deploy dist-theme --platform http://netease-template.lcap.163yun.com &&  node bin/deploy-lcp-images --platform=http://netease-template.lcap.163yun.com",
-    "prepublishOnly": "npm run build:vusion && git add .",
+    "deploy:test": "npm test && lcap deploy dist-theme --platform http://defaulttenant.lcap.ha.test.com && node bin/deploy-lcp-images --platform=http://defaulttenant.lcap.ha.test.com",
+    "deploy:test-without-img": "npm test && lcap deploy dist-theme --platform http://defaulttenant.lcap.ha.test.com",
+    "deploy:pre": "npm test && lcap deploy dist-theme --platform https://defaulttenant.lcap.hadri.163yun.com && node bin/deploy-lcp-images --platform=https://defaulttenant.lcap.hadri.163yun.com",
+    "deploy:online": "npm test && lcap deploy dist-theme --platform http://netease-template.lcap.163yun.com &&  node bin/deploy-lcp-images --platform=http://netease-template.lcap.163yun.com",
+    "prepublishOnly": "npm test && npm run build:vusion && git add .",
     "deploy:qz": "lcap deploy dist-theme --platform=https://defaulttenant.lcap.qz.163yun.com && node bin/deploy-lcp-images --platform=https://defaulttenant.lcap.qz.163yun.com"
   },
   "repository": {
@@ -79,17 +80,23 @@
     "vue": ">= 2.6.0"
   },
   "devDependencies": {
+    "@types/jest": "28.1.8",
     "@vant/area-data": "^1.1.1",
     "@vant/cli": "2.10.3",
-    "@vant/eslint-config": "2.2.3",
-    "@vant/stylelint-config": "1.3.0",
+    "eslint-config-vusion": "^4.0.0",
+    "stylelint-config-vusion": "^1.1.2",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-typescript": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "@vue/compiler-sfc": "^3.2.2",
+    "@vue/vue2-jest": "28",
     "@xgheaven/nos-node-sdk": "^0.2.5",
+    "babel-jest": "28.1.3",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-serializer-vue-tjw": "3.20.0",
     "prettier": "2.1.0",
     "shx": "^0.3.3",
     "vue": "2.6.12",
@@ -115,5 +122,18 @@
   "browserslist": [
     "Android >= 4.0",
     "iOS >= 8"
-  ]
+  ],
+  "jestSerializer": {
+    "removeComments": true,
+    "sortAttributes": true
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,vue}": "eslint",
+    "*.{vue,css,less}": "stylelint --fix"
+  }
 }
diff --git a/scripts/test/__mocks__/fileMock.js b/scripts/test/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/scripts/test/__mocks__/styleMock.js b/scripts/test/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/scripts/test/gen-entry.js b/scripts/test/gen-entry.js
@@ -0,0 +1,7 @@
+const { genPackageEntry } = require('@vant/cli/lib/compiler/gen-package-entry');
+const path = require('path');
+
+genPackageEntry({
+    outputPath: path.resolve(__dirname, 'package-entry.js')
+});
+console.log('生成测试入口成功！')
diff --git a/scripts/test/jest.setup.js b/scripts/test/jest.setup.js
@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import 'jest-canvas-mock';
+import Package from './package-entry';
+
+Vue.use(Package);
+
+const mutationObserverMock = jest.fn(function MutationObserver(callback) {
+    this.observe = jest.fn();
+    this.disconnect = jest.fn();
+    // Optionally add a trigger() method to manually trigger a change
+    this.trigger = (mockedMutationsList) => {
+        callback(mockedMutationsList, this);
+    };
+});
+window.MutationObserver = mutationObserverMock;
+
+// 将模拟对象赋值给实际的 VisualViewport 属性
+Object.defineProperty(window, 'VisualViewport', { value : function() {} });
+Object.assign(window.VisualViewport.prototype, {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    offsetLeft: 0,
+    offsetTop: 0,
+    pageLeft: window.pageXOffset,
+    pageTop: window.pageYOffset,
+    scale: Math.max(window.innerWidth / screen.width, window.innerHeight / screen.height),
+    zoom: Math.log2(Math.max(window.innerWidth / screen.availWidth, window.innerHeight / screen.availHeight)),
+});
diff --git a/src/action-sheet/test/__snapshots__/demo.spec.js.snap b/src/action-sheet/test/__snapshots__/demo.spec.js.snap
@@ -3,35 +3,30 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
+    <div class="van-cell van-cell--clickable van-cell--center" noallow role="button" tabindex="0">
+      <div class="van-cell__title" vusion-slot-name="title" vusion-slot-name-edit="title">基础用法</div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
     </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
+    <div class="van-cell van-cell--clickable van-cell--center" noallow role="button" tabindex="0">
+      <div class="van-cell__title" vusion-slot-name="title" vusion-slot-name-edit="title">展示取消按钮</div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
     </div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
+    <div class="van-cell van-cell--clickable van-cell--center" noallow role="button" tabindex="0">
+      <div class="van-cell__title" vusion-slot-name="title" vusion-slot-name-edit="title">展示描述信息</div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
     </div>
   </div>
   <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
+    <div class="van-cell van-cell--clickable van-cell--center" noallow role="button" tabindex="0">
+      <div class="van-cell__title" vusion-slot-name="title" vusion-slot-name-edit="title">选项状态</div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
     </div>
   </div>
   <div>
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
+    <div class="van-cell van-cell--clickable van-cell--center" noallow role="button" tabindex="0">
+      <div class="van-cell__title" vusion-slot-name="title" vusion-slot-name-edit="title">自定义面板</div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
     </div>
   </div>
-  <!---->
-  <!---->
-  <!---->
-  <!---->
-  <!---->
 </div>
 `;
diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap
diff --git a/src/action-sheet/test/index.spec.js → src/action-sheet/test/index.spec.js.disabled b/src/action-sheet/test/index.spec.js → src/action-sheet/test/index.spec.js.disabled