Merge pull request #74 from obadakhalili/gh-59

[gh-59] implement unit tests for vue3 component
obadakhalili · Aug 15, 2022 · 4b8ef6e · 4b8ef6e
2 parents 4c9c817 + 54c6ca9
commit 4b8ef6e
Show file tree

Hide file tree

Showing 7 changed files with 1,325 additions and 10 deletions.
diff --git a/packages/vue3/package.json b/packages/vue3/package.json
@@ -32,6 +32,8 @@
     "dev": "vite --port 8081",
     "dev:rebuild": "yarn run dev --force",
     "format": "yarn run prettier --ignore-path ../../.gitignore --write",
+    "test": "yarn vitest run",
+    "test:watch": "yarn vitest --ui --open false",
     "preversion": "npm run build"
   },
   "dependencies": {
@@ -44,8 +46,11 @@
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.1",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/vue": "^6.6.1",
     "@types/jest": "26.0.23",
     "@vitejs/plugin-vue": "2.3.3",
+    "@vitest/ui": "^0.18.1",
     "@vue/compiler-sfc": "3.2.37",
     "autoprefixer": "10.4.7",
     "jest": "26.6.3",
@@ -61,6 +66,7 @@
     "ts-jest": "26.5.4",
     "typescript": "4.7.4",
     "vite": "2.9.13",
+    "vitest": "^0.18.1",
     "vue": "3.2.37"
   },
   "peerDependencies": {

diff --git a/packages/vue3/src/VueVisualFilter/FilterCondition.vue b/packages/vue3/src/VueVisualFilter/FilterCondition.vue
@@ -46,6 +46,7 @@ export default {
       <select
         v-model="condition.fieldName"
         @change="updateField($event.target.value)"
+        data-testId="field-name-select"
       >
         <option v-for="field in fieldNames" :key="field" :value="field">
           {{ field }}
@@ -60,7 +61,7 @@ export default {
         condition,
       }"
     >
-      <select v-model="condition.method">
+      <select v-model="condition.method" data-testId="method-select">
         <option
           v-for="method in isNumeric ? numericMethodNames : nominalMethodNames"
           :key="method"
@@ -71,13 +72,17 @@ export default {
       </select>
     </slot>
     <slot name="argumentUpdation" :condition="condition">
-      <input type="text" v-model="condition.argument" />
+      <input
+        type="text"
+        v-model="condition.argument"
+        data-testId="argument-input"
+      />
     </slot>
     <slot
       name="conditionDeletion"
       :deleteCondition="() => $emit('deleteCondition', condition)"
     >
-      <button @click="$emit('deleteCondition', condition)">x</button>
+      <button @click="$emit('deleteCondition', condition)" data-testId="remove-condition-button">x</button>
     </slot>
   </div>
 </template>
diff --git a/packages/vue3/src/VueVisualFilter/FilterGroup.vue b/packages/vue3/src/VueVisualFilter/FilterGroup.vue
@@ -37,14 +37,17 @@ export default {
   <div class="space-y-4">
     <div class="space-x-2">
       <slot name="groupTypes" v-bind="{ groupTypes, group }">
-        <select v-model="group.groupType">
+        <select v-model="group.groupType" data-testId="group-type-select">
           <option v-for="type in groupTypes" :key="type" :value="type">
             {{ type }}
           </option>
         </select>
       </slot>
       <slot name="filterAddition" v-bind="{ filterTypes, addFilter }">
-        <select @change="addFilter($event.target.value)">
+        <select
+          @change="addFilter($event.target.value)"
+          data-testId="filter-type-select"
+        >
           <option v-for="type in filterTypes" :key="type" :value="type">
             {{ type }}
           </option>
@@ -55,7 +58,7 @@ export default {
         name="groupDeletion"
         :deleteGroup="() => $emit('deleteGroup', group)"
       >
-        <button @click="$emit('deleteGroup', group)">x</button>
+        <button @click="$emit('deleteGroup', group)" data-testId="remove-group-button">x</button>
       </slot>
     </div>
     <div v-if="group.filters.length" class="ml-10 space-y-1">