Vue單元測試：測試框架建置，EditMemberList 內部操作流程測試

.gitignore

@@ -362,3 +362,4 @@ healthchecksdb
 /HiTeachCC/.vscode/launch.json
 HiTeachCC/ClientApp/package-lock.json
 HiTeachCC/ClientApp/src/assets/css/style.css
+HiTeachCC/ClientApp/coverage

HiTeachCC/ClientApp/__tests__/unit/EditMemberList.spec.js

@@ -0,0 +1,136 @@
+import { shallowMount } from "@vue/test-utils";
+import EditMemberList from "../../src/components/EditMemberList.vue";
+import MockParentBoard from "./MockParentBoard.vue";
+
+//無法引入測試的組件,給空
+const $t = () => {};
+const SvgIcon = () => {};
+const FontAwesomeIcon = () => {};
+
+describe("EditMemberList", () => {
+  const wrapper = shallowMount(EditMemberList, {
+    components: {
+      SvgIcon,
+      FontAwesomeIcon,
+    },
+    parentComponent: MockParentBoard,
+    mocks: {
+      $t,
+    },
+  });
+  it("初始時，父層自訂名單應為空陣列", () => {
+    expect(wrapper.vm.$parent.customMemberlist).toEqual([]);
+  });
+
+  //測試滑鼠點擊
+  it("點擊創建名單，創建名單被開啟", () => {
+    wrapper.find(".editmemberlist-empty div").trigger("click");
+    expect(wrapper.vm.showAddMemberList).toBe(true);
+  });
+
+  //測試新增一筆名單操作流程
+  it("輸入未帶入座號的名單，觸發預覽，再儲存預覽，父層自訂名單新增一筆", () => {
+    const input = wrapper.find(".addmember-area textarea");
+    input.setValue("Mary,Nancy,JoJo");
+    wrapper.vm.checkAddMemberList();
+    wrapper.vm.savecustomMemberlist();
+    expect(wrapper.vm.$parent.customMemberlist.length).toBe(1);
+  });
+
+  //測試刪除一筆名單操作流程
+  it("假設使用者目前已存在名單，點擊刪除一筆，彈出確認輸入框，點擊確認，父層自訂名單減少一筆", () => {
+    const testLists = [
+      {
+        listName: "自訂名單1",
+        list: [
+          {
+            seatID: 1,
+            memberID: 1,
+            memberName: "學生1",
+          },
+          {
+            seatID: 2,
+            memberID: 2,
+            memberName: "學生2",
+          },
+          {
+            seatID: 3,
+            memberID: 3,
+            memberName: "學生3",
+          },
+          {
+            seatID: 4,
+            memberID: 4,
+            memberName: "學生4",
+          },
+          {
+            seatID: 5,
+            memberID: 5,
+            memberName: "學生5",
+          },
+          {
+            seatID: 6,
+            memberID: 6,
+            memberName: "學生6",
+          },
+        ],
+      },
+      {
+        listName: "自訂名單2",
+        list: [
+          {
+            seatID: 1,
+            memberID: 1,
+            memberName: "Amy",
+          },
+          {
+            seatID: 2,
+            memberID: 2,
+            memberName: "Bill",
+          },
+          {
+            seatID: 3,
+            memberID: 3,
+            memberName: "Coco",
+          },
+          {
+            seatID: 4,
+            memberID: 4,
+            memberName: "Joe",
+          },
+        ],
+      },
+      {
+        listName: "自訂名單3",
+        list: [
+          {
+            seatID: 1,
+            memberID: 1,
+            memberName: "Amy",
+          },
+          {
+            seatID: 2,
+            memberID: 2,
+            memberName: "Bill",
+          },
+          {
+            seatID: 3,
+            memberID: 3,
+            memberName: "Coco",
+          },
+          {
+            seatID: 4,
+            memberID: 4,
+            memberName: "Joe",
+          },
+        ],
+      },
+    ];
+    wrapper.vm.$parent.customMemberlist=testLists
+    wrapper.find(".editmemberlist-rightbtns .delete-btn").trigger("click");
+    wrapper.findAll(".editmemberlistbtn-group .editmemberlist-btn").at(0).trigger("click");
+    wrapper.vm.deleteMemberList()
+    expect(wrapper.vm.$parent.customMemberlist.length).toBe(2);
+    
+  });
+});

HiTeachCC/ClientApp/__tests__/unit/MockParentBoard.vue

@@ -0,0 +1,16 @@
+<template></template>
+
+<script>
+export default {
+  data() {
+    return {
+      showClassNum: false,
+      showMemberlist: true,
+      currentMemberList: {},
+      customMemberlist: [], 
+    };
+  },
+};
+</script>
+
+<style></style>

HiTeachCC/ClientApp/package.json

@@ -6,7 +6,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "svg": "vsvg -s ./static/iconsvg/interaction -t ./src/icons"
+    "svg": "vsvg -s ./static/iconsvg/interaction -t ./src/icons",
+    "test:unit": "vue-cli-service test:unit "
   },
   "dependencies": {
     "@azure/storage-blob": "^12.3.0",
@@ -19,15 +20,18 @@
     "@quasar/extras": "^1.3.2",
     "animate.css": "^3.7.2",
     "axios": "^0.21.1",
+    "babel-jest": "^25.5.1",
     "bcryptjs": "^2.4.3",
     "clipboard-polyfill": "^4.0.0",
     "core-js": "^3.4.0",
     "crypto-js": "^4.1.1",
     "echarts": "^4.4.0",
     "event-source-polyfill": "^1.0.25",
+    "file-saver": "^2.0.5",
     "hammerjs": "^2.0.8",
     "html2canvas": "^1.4.1",
     "iview": "^3.5.3",
+    "jest-serializer-vue": "^3.1.0",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
     "jwt-decode": "^2.2.0",
@@ -62,17 +66,24 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
     "@vue/cli-plugin-babel": "^4.0.5",
     "@vue/cli-plugin-eslint": "^4.0.5",
     "@vue/cli-plugin-router": "^4.0.5",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-plugin-vuex": "^4.0.5",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/server-test-utils": "^1.3.0",
+    "@vue/test-utils": "^1.3.5",
+    "@vue/vue2-jest": "^28.1.0",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-transform-imports": "1.5.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "5.16.0",
     "eslint-plugin-vue": "^5.2.3",
+    "jest": "^25.5.4",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "lint-staged": "^11.0.0",
@@ -81,9 +92,10 @@
     "stylus-loader": "^3.0.2",
     "vue-cli-plugin-quasar": "^1.0.0",
     "vue-i18n": "^8.15.0",
+    "vue-jest": "^3.0.7",
     "vue-svg-icon": "^1.2.9",
     "vue-svgicon": "^3.2.6",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.7.14"
   },
   "postcss": {
     "plugins": {
@@ -102,5 +114,25 @@
       "vue-cli-service lint",
       "git add"
     ]
+  },
+  "jest": {
+    "preset": "@vue/cli-plugin-unit-jest",
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.js$": "babel-jest"
+    },
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ],
+    "testMatch": [
+      "**/__tests__/**/*.spec.js"
+    ],
+    "transformIgnorePatterns": ["/node_modules/"],
+    "collectCoverage" : true,
+    "collectCoverageFrom": ["**/src/components/*.{js,vue}", "!**/node_modules/**"]
   }
 }