From 597bbb96e0697acdbc3754c778905fd99f16bc7b Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Fri, 29 Apr 2022 19:31:28 +0800
Subject: [PATCH] added locators for auto test

---
 .../context-menu/ContextMenuList.vue          |  12 +-
 src/components/file/FileEditorNavMenu.vue     | 136 +++++++++---------
 .../file/FileEditorNavMenuContextMenu.vue     |   7 +-
 src/components/file/FileUpload.vue            |  39 ++---
 .../nav/NavActionGroupDetailCommon.vue        |  28 ++--
 src/components/nav/NavTabs.vue                |  30 ++--
 .../context-menu/ContextMenuItem.d.ts         |   1 +
 src/views/login/Login.vue                     |   3 +-
 .../actions/SpiderDetailActionsFiles.vue      |  48 ++++---
 9 files changed, 166 insertions(+), 138 deletions(-)

diff --git a/src/components/context-menu/ContextMenuList.vue b/src/components/context-menu/ContextMenuList.vue
index 4267627161ab5..2783d6b70a5e2 100644
--- a/src/components/context-menu/ContextMenuList.vue
+++ b/src/components/context-menu/ContextMenuList.vue
@@ -1,10 +1,10 @@
 <template>
   <ul class="context-menu-list">
     <li
-        v-for="(item, $index) in items"
-        :key="$index"
-        class="context-menu-item"
-        @click="onClick(item)"
+      v-for="(item, $index) in items"
+      :key="$index"
+      :class="['context-menu-item', item.className].join(' ')"
+      @click="onClick(item)"
     >
       <span class="prefix">
         <template v-if="item.icon">
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
 import AtomMaterialIcon from '@/components/icon/AtomMaterialIcon.vue';
 
 export default defineComponent({
@@ -28,7 +28,7 @@ export default defineComponent({
   components: {AtomMaterialIcon},
   props: {
     items: {
-      type: [Array, String],
+      type: Array as PropType<ContextMenuItem[]>,
       default: () => {
         return [];
       },
diff --git a/src/components/file/FileEditorNavMenu.vue b/src/components/file/FileEditorNavMenu.vue
index ab94a50e7303d..789671c2a3271 100644
--- a/src/components/file/FileEditorNavMenu.vue
+++ b/src/components/file/FileEditorNavMenu.vue
@@ -1,52 +1,52 @@
 <template>
   <div
-      :style="{
+    :style="{
         backgroundColor: style.backgroundColorGutters,
         borderRight: `1px solid ${style.backgroundColor}`
       }"
-      ref="fileEditorNavMenu"
-      class="file-editor-nav-menu"
+    ref="fileEditorNavMenu"
+    class="file-editor-nav-menu"
   >
     <el-tree
-        ref="tree"
-        :render-after-expand="defaultExpandAll"
-        :data="items"
-        :expand-on-click-node="false"
-        :highlight-current="false"
-        :allow-drop="allowDrop"
-        empty-text="No files available"
-        icon-class="fa fa-angle-right"
-        :style="{
+      ref="tree"
+      :render-after-expand="defaultExpandAll"
+      :data="items"
+      :expand-on-click-node="false"
+      :highlight-current="false"
+      :allow-drop="allowDrop"
+      empty-text="No files available"
+      icon-class="fa fa-angle-right"
+      :style="{
           backgroundColor: style.backgroundColorGutters,
           color: style.color,
         }"
-        node-key="path"
-        :default-expanded-keys="computedDefaultExpandedKeys"
-        draggable
-        @node-drag-enter="onNodeDragEnter"
-        @node-drag-leave="onNodeDragLeave"
-        @node-drag-end="onNodeDragEnd"
-        @node-drop="onNodeDrop"
-        @node-click="onNodeClick"
-        @node-contextmenu="onNodeContextMenuShow"
-        @node-expand="onNodeExpand"
-        @node-collapse="onNodeCollapse"
+      node-key="path"
+      :default-expanded-keys="computedDefaultExpandedKeys"
+      draggable
+      @node-drag-enter="onNodeDragEnter"
+      @node-drag-leave="onNodeDragLeave"
+      @node-drag-end="onNodeDragEnd"
+      @node-drop="onNodeDrop"
+      @node-click="onNodeClick"
+      @node-contextmenu="onNodeContextMenuShow"
+      @node-expand="onNodeExpand"
+      @node-collapse="onNodeCollapse"
     >
       <template #default="{ data }">
         <FileEditorNavMenuContextMenu
-            :clicking="contextMenuClicking"
-            :visible="isShowContextMenu(data)"
-            @hide="onNodeContextMenuHide"
-            @clone="onNodeContextMenuClone(data)"
-            @delete="onNodeContextMenuDelete(data)"
-            @rename="onNodeContextMenuRename(data)"
-            @new-file="onNodeContextMenuNewFile(data)"
-            @new-directory="onNodeContextMenuNewDirectory(data)"
+          :clicking="contextMenuClicking"
+          :visible="isShowContextMenu(data)"
+          @hide="onNodeContextMenuHide"
+          @clone="onNodeContextMenuClone(data)"
+          @delete="onNodeContextMenuDelete(data)"
+          @rename="onNodeContextMenuRename(data)"
+          @new-file="onNodeContextMenuNewFile(data)"
+          @new-directory="onNodeContextMenuNewDirectory(data)"
         >
           <div
-              v-bind="getBindDir(data)"
-              :class="getItemClass(data)"
-              class="nav-item-wrapper"
+            v-bind="getBindDir(data)"
+            :class="getItemClass(data)"
+            class="nav-item-wrapper"
           >
             <div class="background"/>
             <div class="nav-item">
@@ -228,62 +228,66 @@ export default defineComponent({
 
     const onNodeContextMenuNewFile = async (item: FileNavItem) => {
       const res = await ElMessageBox.prompt(
-          t('components.file.editor.messageBox.prompt.newFile'),
-          t('components.file.editor.navMenu.newFile'),
-          {
-            inputPlaceholder: t('components.file.editor.messageBox.prompt.newFile'),
-          }
+        t('components.file.editor.messageBox.prompt.newFile'),
+        t('components.file.editor.navMenu.newFile'),
+        {
+          inputPlaceholder: t('components.file.editor.messageBox.prompt.newFile'),
+          confirmButtonClass: 'confirm-btn',
+        }
       );
       emit('ctx-menu-new-file', item, res.value);
     };
 
     const onNodeContextMenuNewDirectory = async (item: FileNavItem) => {
       const res = await ElMessageBox.prompt(
-          t('components.file.editor.messageBox.prompt.newDirectory'),
-          t('components.file.editor.navMenu.newDirectory'),
-          {
-            inputPlaceholder: t('components.file.editor.messageBox.prompt.newDirectory'),
-          }
+        t('components.file.editor.messageBox.prompt.newDirectory'),
+        t('components.file.editor.navMenu.newDirectory'),
+        {
+          inputPlaceholder: t('components.file.editor.messageBox.prompt.newDirectory'),
+          confirmButtonClass: 'confirm-btn',
+        }
       );
       emit('ctx-menu-new-directory', item, res.value);
     };
 
     const onNodeContextMenuRename = async (item: FileNavItem) => {
       const res = await ElMessageBox.prompt(
-          t('components.file.editor.messageBox.prompt.rename'),
-          t('components.file.editor.navMenu.rename'),
-          {
-            inputValue: item.name,
-            inputPlaceholder: t('components.file.editor.messageBox.prompt.rename'),
-            inputValidator: (value: string) => value !== item.name,
-            inputErrorMessage: t('components.file.editor.messageBox.validator.errorMessage.newNameNotSameAsOldName'),
-          }
+        t('components.file.editor.messageBox.prompt.rename'),
+        t('components.file.editor.navMenu.rename'),
+        {
+          inputValue: item.name,
+          inputPlaceholder: t('components.file.editor.messageBox.prompt.rename'),
+          inputValidator: (value: string) => value !== item.name,
+          inputErrorMessage: t('components.file.editor.messageBox.validator.errorMessage.newNameNotSameAsOldName'),
+          confirmButtonClass: 'confirm-btn',
+        }
       );
       emit('ctx-menu-rename', item, res.value);
     };
 
     const onNodeContextMenuClone = async (item: FileNavItem) => {
       const res = await ElMessageBox.prompt(
-          t('components.file.editor.messageBox.prompt.duplicate'),
-          t('components.file.editor.navMenu.duplicate'),
-          {
-            inputValue: `${item.name}`,
-            inputPlaceholder: t('components.file.editor.messageBox.prompt.newFile'),
-            inputValidator: (value: string) => value !== item.name,
-            inputErrorMessage: t('components.file.editor.messageBox.validator.errorMessage.newNameNotSameAsOldName'),
-          }
+        t('components.file.editor.messageBox.prompt.duplicate'),
+        t('components.file.editor.navMenu.duplicate'),
+        {
+          inputValue: `${item.name}`,
+          inputPlaceholder: t('components.file.editor.messageBox.prompt.newFile'),
+          inputValidator: (value: string) => value !== item.name,
+          inputErrorMessage: t('components.file.editor.messageBox.validator.errorMessage.newNameNotSameAsOldName'),
+          confirmButtonClass: 'confirm-btn',
+        }
       );
       emit('ctx-menu-clone', item, res.value);
     };
 
     const onNodeContextMenuDelete = async (item: FileNavItem) => {
       await ElMessageBox.confirm(
-          t('common.messageBox.confirm.delete'),
-          t('common.actions.delete'),
-          {
-            type: 'warning',
-            confirmButtonClass: 'el-button--danger',
-          }
+        t('common.messageBox.confirm.delete'),
+        t('common.actions.delete'),
+        {
+          type: 'warning',
+          confirmButtonClass: 'el-button--danger confirm-btn',
+        }
       );
       emit('ctx-menu-delete', item);
     };
diff --git a/src/components/file/FileEditorNavMenuContextMenu.vue b/src/components/file/FileEditorNavMenuContextMenu.vue
index 77e501d0b3420..ec8473ca9891c 100644
--- a/src/components/file/FileEditorNavMenuContextMenu.vue
+++ b/src/components/file/FileEditorNavMenuContextMenu.vue
@@ -34,26 +34,31 @@ export default defineComponent({
       {
         title: t('components.file.editor.navMenu.newFile'),
         icon: ['fa', 'file-alt'],
+        className: 'new-file',
         action: () => emit('new-file'),
       },
       {
         title: t('components.file.editor.navMenu.newDirectory'),
         icon: ['fa', 'folder-plus'],
-        action: () => emit('new-directory')
+        className: 'new-directory',
+        action: () => emit('new-directory'),
       },
       {
         title: t('components.file.editor.navMenu.rename'),
         icon: ['fa', 'edit'],
+        className: 'rename',
         action: () => emit('rename'),
       },
       {
         title: t('components.file.editor.navMenu.duplicate'),
         icon: ['fa', 'clone'],
+        className: 'clone',
         action: () => emit('clone'),
       },
       {
         title: t('components.file.editor.navMenu.delete'),
         icon: ['fa', 'trash'],
+        className: 'delete',
         action: () => emit('delete'),
       },
     ]);
diff --git a/src/components/file/FileUpload.vue b/src/components/file/FileUpload.vue
index b13cd87d12a7a..a700de8920973 100644
--- a/src/components/file/FileUpload.vue
+++ b/src/components/file/FileUpload.vue
@@ -3,9 +3,10 @@
     <div class="mode-select">
       <el-radio-group v-model="internalMode" @change="onModeChange">
         <el-radio
-            v-for="{value, label} in modeOptions"
-            :key="value"
-            :label="value"
+          v-for="{value, label} in modeOptions"
+          :key="value"
+          :label="value"
+          :class="value"
         >
           {{ label }}
         </el-radio>
@@ -14,12 +15,12 @@
 
     <template v-if="mode === FILE_UPLOAD_MODE_FILES">
       <el-upload
-          ref="uploadRef"
-          :on-change="onFileChange"
-          :http-request="() => {}"
-          drag
-          multiple
-          :show-file-list="false"
+        ref="uploadRef"
+        :on-change="onFileChange"
+        :http-request="() => {}"
+        drag
+        multiple
+        :show-file-list="false"
       >
         <el-icon class="el-icon--upload">
           <upload-filled/>
@@ -38,18 +39,18 @@
         </Button>
         <template v-if="!!dirInfo?.dirName && dirInfo?.fileCount">
           <Tag
-              type="primary"
-              class="info-tag"
-              :label="dirInfo?.dirName"
-              :icon="['fa', 'folder']"
-              :tooltip="t('components.file.upload.tooltip.fileName')"
+            type="primary"
+            class="info-tag"
+            :label="dirInfo?.dirName"
+            :icon="['fa', 'folder']"
+            :tooltip="t('components.file.upload.tooltip.fileName')"
           />
           <Tag
-              type="success"
-              class="info-tag"
-              :label="dirInfo?.fileCount"
-              :icon="['fa', 'hashtag']"
-              :tooltip="t('components.file.upload.tooltip.filesCount')"
+            type="success"
+            class="info-tag"
+            :label="dirInfo?.fileCount"
+            :icon="['fa', 'hashtag']"
+            :tooltip="t('components.file.upload.tooltip.filesCount')"
           />
         </template>
       </div>
diff --git a/src/components/nav/NavActionGroupDetailCommon.vue b/src/components/nav/NavActionGroupDetailCommon.vue
index b9426f89c9523..7c112e25cde2c 100644
--- a/src/components/nav/NavActionGroupDetailCommon.vue
+++ b/src/components/nav/NavActionGroupDetailCommon.vue
@@ -1,20 +1,24 @@
 <template>
   <NavActionGroup>
     <NavActionButton
-        :disabled="disabled"
-        :icon="['fa', 'undo']"
-        button-type="label"
-        :label="t('components.nav.actions.back')"
-        type="primary"
-        @click="() => $emit('back')"
+      :disabled="disabled"
+      :icon="['fa', 'undo']"
+      button-type="label"
+      :label="t('components.nav.actions.back')"
+      type="primary"
+      id="back-btn"
+      class-name="back-btn"
+      @click="() => $emit('back')"
     />
     <NavActionButton
-        :disabled="disabled"
-        :icon="['fa', 'save']"
-        button-type="label"
-        :label="t('components.nav.actions.save')"
-        type="success"
-        @click="() => $emit('save')"
+      :disabled="disabled"
+      :icon="['fa', 'save']"
+      button-type="label"
+      :label="t('components.nav.actions.save')"
+      type="success"
+      id="save-btn"
+      class-name="save-btn"
+      @click="() => $emit('save')"
     />
   </NavActionGroup>
 </template>
diff --git a/src/components/nav/NavTabs.vue b/src/components/nav/NavTabs.vue
index 835f8cc8529fa..5220d2851eba8 100644
--- a/src/components/nav/NavTabs.vue
+++ b/src/components/nav/NavTabs.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="nav-tabs">
     <el-tooltip
-        v-if="toggle"
-        :content="collapsed ? t('components.nav.tabs.toggle.expand') : t('components.nav.tabs.toggle.collapse')"
+      v-if="toggle"
+      :content="collapsed ? t('components.nav.tabs.toggle.expand') : t('components.nav.tabs.toggle.collapse')"
     >
       <div class="toggle" @click="onToggle">
         <font-awesome-icon :icon="collapsed ? ['fa', 'indent'] : ['fa', 'outdent']"/>
       </div>
     </el-tooltip>
     <el-menu
-        :default-active="activeKey"
-        mode="horizontal"
-        @select="onSelect"
+      :default-active="activeKey"
+      mode="horizontal"
+      @select="onSelect"
     >
       <el-menu-item
-          v-for="item in items"
-          :key="item.id"
-          :class="item.emphasis ? 'emphasis' : ''"
-          :index="item.id"
-          :style="item.style"
+        v-for="item in items"
+        :key="item.id"
+        :class="getClassName(item)"
+        :index="item.id"
+        :style="item.style"
       >
         <el-tooltip :content="item.tooltip" :disabled="!item.tooltip">
           <template v-if="!!item.icon">
@@ -37,7 +37,7 @@
   </div>
 </template>
 <script lang="ts">
-import {defineComponent, PropType} from 'vue';
+import {computed, defineComponent, PropType} from 'vue';
 import {useI18n} from 'vue-i18n';
 import {emptyArrayFunc} from '@/utils/func';
 
@@ -76,9 +76,17 @@ export default defineComponent({
       emit('toggle');
     };
 
+    const getClassName = (item: NavItem): string => {
+      const cls = [];
+      if (item.emphasis) cls.push('emphasis');
+      if (item.id) cls.push(item.id);
+      return cls.join(' ');
+    };
+
     return {
       onSelect,
       onToggle,
+      getClassName,
       t,
     };
   },
diff --git a/src/interfaces/components/context-menu/ContextMenuItem.d.ts b/src/interfaces/components/context-menu/ContextMenuItem.d.ts
index a3af1c3252a62..00990e2644146 100644
--- a/src/interfaces/components/context-menu/ContextMenuItem.d.ts
+++ b/src/interfaces/components/context-menu/ContextMenuItem.d.ts
@@ -2,4 +2,5 @@ interface ContextMenuItem {
   title: string;
   icon?: string | string[];
   action?: () => void;
+  className?: string;
 }
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index dece2b1a32243..e6e7cea90436b 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -84,7 +84,8 @@
       </div>
       <div class="tips">
         <span>{{ t('views.login.initial.title') }}: admin/admin</span>
-        <a href="https://github.com/crawlab-team/crawlab" style="float:right" target="_blank">
+        <!--TODO: implement github stars-->
+        <a v-if="false" href="https://github.com/crawlab-team/crawlab" style="float:right" target="_blank">
           <img alt="github-stars" src="https://img.shields.io/github/stars/crawlab-team/crawlab?logo=github">
         </a>
       </div>
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue b/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
index 8bab5ebdae8a6..821880ca2f57b 100644
--- a/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
+++ b/src/views/spider/detail/actions/SpiderDetailActionsFiles.vue
@@ -1,40 +1,44 @@
 <template>
   <NavActionGroup>
     <NavActionFaIcon
-        :icon="['fa', 'laptop-code']"
-        :tooltip="t('components.spider.actions.files.tooltip.fileEditorActions')"
+      :icon="['fa', 'laptop-code']"
+      :tooltip="t('components.spider.actions.files.tooltip.fileEditorActions')"
     />
     <NavActionItem>
       <FaIconButton
-          :icon="['fa', 'upload']"
-          :tooltip="t('components.spider.actions.files.tooltip.uploadFiles')"
-          type="primary"
-          @click="onClickUpload"
+        :icon="['fa', 'upload']"
+        :tooltip="t('components.spider.actions.files.tooltip.uploadFiles')"
+        type="primary"
+        id="upload-btn"
+        class-name="upload-btn"
+        @click="onClickUpload"
       />
       <FaIconButton
-          :icon="['fa', 'cog']"
-          :tooltip="t('components.spider.actions.files.tooltip.fileEditorSettings')"
-          type="info"
-          @click="onOpenFilesSettings"
+        :icon="['fa', 'cog']"
+        :tooltip="t('components.spider.actions.files.tooltip.fileEditorSettings')"
+        type="info"
+        id="open-settings-btn"
+        class-name="open-settings-btn"
+        @click="onOpenFilesSettings"
       />
     </NavActionItem>
   </NavActionGroup>
 
   <Dialog
-      :visible="fileUploadVisible"
-      :title="t('components.file.upload.title')"
-      :confirm-loading="confirmLoading"
-      :confirm-disabled="confirmDisabled"
-      @close="onUploadClose"
-      @confirm="onUploadConfirm"
+    :visible="fileUploadVisible"
+    :title="t('components.file.upload.title')"
+    :confirm-loading="confirmLoading"
+    :confirm-disabled="confirmDisabled"
+    @close="onUploadClose"
+    @confirm="onUploadConfirm"
   >
     <FileUpload
-        ref="fileUploadRef"
-        :mode="mode"
-        :get-input-props="getInputProps"
-        :open="open"
-        @mode-change="onModeChange"
-        @files-change="onFilesChange"
+      ref="fileUploadRef"
+      :mode="mode"
+      :get-input-props="getInputProps"
+      :open="open"
+      @mode-change="onModeChange"
+      @files-change="onFilesChange"
     />
   </Dialog>
 </template>