Add Test: clicking hints spec

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest'
+  preset: '@vue/cli-plugin-unit-jest',
+  setupFiles: ['./tests/setup.js']
 }

package.json

@@ -5,28 +5,31 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit"
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
+    "test:e2e:headless": "vue-cli-service test:e2e --headless"
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "clipboard": "^2.0.4",
-    "core-js": "^3.4.4",
-    "vue": "^2.6.10",
+    "clipboard": "^2.0.6",
+    "core-js": "^3.8.3",
+    "vue": "^2.6.12",
     "vue-axios": "^2.1.5",
-    "vue-router": "^3.1.3",
-    "vuetify": "^2.2.11",
-    "vuex": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuetify": "^2.4.3",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-router": "^4.1.0",
-    "@vue/cli-plugin-unit-jest": "^4.1.0",
-    "@vue/cli-service": "^4.5.4",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-e2e-cypress": "^4.5.11",
+    "@vue/cli-plugin-router": "^4.5.11",
+    "@vue/cli-plugin-unit-jest": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
     "@vue/test-utils": "1.0.0-beta.29",
-    "sass": "^1.19.0",
+    "sass": "^1.32.6",
     "sass-loader": "^8.0.0",
-    "vue-cli-plugin-vuetify": "^2.0.5",
-    "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.3.0"
+    "vue-cli-plugin-vuetify": "^2.1.0",
+    "vue-template-compiler": "^2.6.12",
+    "vuetify-loader": "^1.7.2"
   }
 }

src/components/ChaHeaderInput.vue

@@ -33,9 +33,13 @@
 
     <v-row>
       <v-col cols="12" md="6">
-        <h3>
+        <h3 data-cy="nameCode">
           *說話者代碼 (Name code) (必填)
-          <UiHint label="說話者代碼 (Name code) (必填)" :hint="hints.nameCode" />
+          <UiHint
+            label="說話者代碼 (Name code) (必填)"
+            :hint="hints.nameCode"
+            data-cy="nameCodeHint"
+          />
         </h3>
         <v-text-field v-model="selectedName" outlined placeholder="例如： CHI, MOT..." dense />
 

src/components/SideBar.vue

@@ -91,7 +91,6 @@ export default {
   },
   methods: {
     onActive(eles) {
-      console.log(eles);
       this.$emit('click-file', eles);
     },
   },

src/components/ui-alert.vue

@@ -1,49 +1,49 @@
 <template>
-  <v-dialog v-model="value" :width="$vuetify.breakpoint.mdAndUp ? '40vw' : '90vw'">
-    <v-card>
+  <v-dialog v-model="value" width="50%">
+    <v-card data-test="card">
       <v-card-title></v-card-title>
       <v-card-text class="text-center text--primary">
         <v-icon color="warning" size="5rem">mdi-alert-circle-outline</v-icon>
-        <p class="headline mt-3">{{ title }}</p>
-        <p class="subtitle-1">{{ subtitle }}</p>
+        <p class="headline mt-3" data-test="title">{{ title }}</p>
+        <p class="subtitle-1" data-test="subtitle">{{ subtitle }}</p>
       </v-card-text>
       <v-card-actions class="pb-12">
-        <v-spacer></v-spacer>
-        <v-btn class="mx-3 subtitle-1" color="info" @click="$emit('input', false); $emit('ok')">是</v-btn>
-        <v-btn class="mx-3 subtitle-1" color="error" @click="$emit('input', false)">否</v-btn>
-        <v-spacer></v-spacer>
+        <v-spacer />
+        <v-btn class="mx-3 subtitle-1" color="info" @click="clickYes" data-test="yesBtn">是</v-btn>
+        <v-btn class="mx-3 subtitle-1" color="error" @click="clickNo" data-test="noBtn">否</v-btn>
+        <v-spacer />
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 export default {
-
   name: 'ui-alert',
-
   props: {
     value: {
       type: Boolean,
       default: false,
     },
     title: {
       type: String,
-      default: '您是否確定執行此動作？'
+      default: '您是否確定執行此動作？',
     },
     subtitle: {
       type: String,
-      default: '確認後將離開此畫面。'
+      default: '確認後將離開此畫面。',
     },
   },
-
-  data () {
-    return {
-
-    }
-  }
-}
+  methods: {
+    clickYes() {
+      this.$emit('input', false);
+      this.$emit('ok');
+    },
+    clickNo() {
+      this.$emit('input', false);
+    },
+  },
+};
 </script>
 
-<style lang="css" scoped>
-</style>
+<style lang="css" scoped></style>

src/components/ui-hint.vue

@@ -11,10 +11,12 @@
         <v-toolbar-title>{{ label }}</v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
-          <v-btn icon @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
+          <v-btn icon @click="dialog = false" data-cy="uiHintCloseBtn"
+            ><v-icon>mdi-close</v-icon>
+          </v-btn>
         </v-toolbar-items>
       </v-toolbar>
-      <v-card-text class="mt-4 text--primary text-body-1" v-html="hint" />
+      <v-card-text class="mt-4 text--primary text-body-1" v-html="hint" data-cy="uiHintContent" />
     </v-card>
   </v-dialog>
 </template>

src/router/index.js

@@ -1,8 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Browse from '@/views/Browse'
-import Analysis from '../views/Analysis.vue'
-import Upload from '../views/Upload'
 
 Vue.use(VueRouter)
 
@@ -14,17 +11,17 @@ const routes = [{
   {
     path: '/browse',
     name: 'browse',
-    component: Browse,
+    component: () => import('@/views/Browse'),
   },
   {
     path: '/analysis/:file',
     name: 'analysis',
-    component: Analysis,
+    component: () => import('@/views/Analysis'),
   },
   {
     path: '/upload',
     name: 'upload',
-    component: Upload,
+    component: () => import('@/views/Upload'),
   }
 ]
 

src/util/file.js

@@ -34,7 +34,6 @@ export default class File {
     pushNode(name) {
         let fullName = `/${this.fullName}`
         if (fullName === '/') fullName = '//'
-        // console.log(name+': '+fullName);
         this.children.unshift(new File({
             name,
             fullName,