added locators for auto test

crawlab-team · Apr 29, 2022 · 597bbb9 · 597bbb9
1 parent 8a4a3a3
commit 597bbb9
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 138 deletions.
diff --git 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,15 +20,15 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, PropType} from 'vue';
 import AtomMaterialIcon from '@/components/icon/AtomMaterialIcon.vue';
 
 export default defineComponent({
   name: 'ContextMenuList',
   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
@@ -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
@@ -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
@@ -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
@@ -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>