test: added locators for e2e test

crawlab-team · Oct 24, 2024 · 7dba129 · 7dba129
1 parent 4362f91
commit 7dba129
Show file tree

Hide file tree

Showing 10 changed files with 436 additions and 371 deletions.
diff --git a/package.json b/package.json
@@ -156,7 +156,7 @@
     "prismjs": "^1.29.0",
     "rollup-plugin-external-globals": "^0.10.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.77.6",
+    "sass": "^1.80.4",
     "serve": "^14.2.3",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",

diff --git a/src/components/core/spider/SpiderForm.vue b/src/components/core/spider/SpiderForm.vue
@@ -107,8 +107,9 @@ defineOptions({ name: 'ClSpiderForm' });
         filterable
         id="project"
         class="project"
+        popper-class="spider-form-project"
       >
-        <el-option
+        <cl-option
           v-for="op in allProjectSelectOptions"
           :key="op.value"
           :label="op.label"

diff --git a/src/components/index.ts b/src/components/index.ts
diff --git a/src/components/ui/file/UploadFilesDialog.vue b/src/components/ui/file/UploadFilesDialog.vue
@@ -163,6 +163,7 @@ defineOptions({ name: 'ClUploadFilesDialog' });
 <template>
   <cl-dialog
     :visible="fileUploadVisible"
+    class-name="upload-files-dialog"
     :title="title"
     :confirm-loading="confirmLoading"
     :confirm-disabled="confirmDisabled"

diff --git a/src/components/ui/filter/FilterSelect.vue b/src/components/ui/filter/FilterSelect.vue
@@ -60,15 +60,15 @@ defineOptions({ name: 'ClFilterSelect' });
       :placeholder="placeholder"
       :filterable="filterable"
       clearable
+      :popper-class="id"
       @clear="onClear"
       @change="onChange"
     >
-      <el-option
+      <cl-option
         v-for="(option, $index) in computedOptions"
         :key="$index"
         :label="option.label"
         :value="option.value"
-        :data-test="option.value"
       />
     </el-select>
   </div>

diff --git a/src/components/ui/select/Option.vue b/src/components/ui/select/Option.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+  value?: any;
+}>();
+defineOptions({ name: 'ClOption' });
+</script>
+
+<template>
+  <el-option
+    :label="label"
+    :value="value"
+    :data-test="value"
+    :data-test-text="label"
+  >
+    <template #default>
+      <slot />
+    </template>
+  </el-option>
+</template>
diff --git a/src/components/ui/select/Select.vue b/src/components/ui/select/Select.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+  placeholder?: string;
+  filterable?: boolean;
+  popperClass?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', value: any): void;
+  (e: 'clear'): void;
+}>();
+defineOptions({ name: 'ClSelect' });
+</script>
+
+<template>
+  <el-select
+    v-model="internalModelValue"
+    :placeholder="placeholder"
+    :filterable="filterable"
+    :popper-class="popperClass"
+    @change="(value: any) => emit('change', value)"
+    @clear="() => emit('clear')"
+  >
+    <slot />
+    <template #label>
+      <slot name="label" />
+    </template>
+  </el-select>
+</template>
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
@@ -1,25 +1,25 @@
 import BlankLayout from './BlankLayout.vue';
+import DetailLayout from './content/detail/DetailLayout.vue';
 import Header from './components/Header.vue';
+import ListLayout from './content/list/ListLayout.vue';
+import NormalLayout from './NormalLayout.vue';
 import Sidebar from './components/Sidebar.vue';
 import SidebarItem from './components/SidebarItem.vue';
+import SimpleLayout from './content/simple/SimpleLayout.vue';
 import TabsView from './components/TabsView.vue';
-import DetailLayout from './content/detail/DetailLayout.vue';
 import useDetail from './content/detail/useDetail';
-import ListLayout from './content/list/ListLayout.vue';
 import useList from './content/list/useList';
-import SimpleLayout from './content/simple/SimpleLayout.vue';
-import NormalLayout from './NormalLayout.vue';
 
 export {
   BlankLayout as ClBlankLayout,
+  DetailLayout as ClDetailLayout,
   Header as ClHeader,
+  ListLayout as ClListLayout,
+  NormalLayout as ClNormalLayout,
   Sidebar as ClSidebar,
   SidebarItem as ClSidebarItem,
+  SimpleLayout as ClSimpleLayout,
   TabsView as ClTabsView,
-  DetailLayout as ClDetailLayout,
   useDetail as useDetail,
-  ListLayout as ClListLayout,
   useList as useList,
-  SimpleLayout as ClSimpleLayout,
-  NormalLayout as ClNormalLayout,
 };
diff --git a/src/views/index.ts b/src/views/index.ts
diff --git a/src/views/spider/list/useSpiderList.ts → src/views/spider/list/useSpiderList.tsx b/src/views/spider/list/useSpiderList.ts → src/views/spider/list/useSpiderList.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
-import { computed, h } from 'vue';
+import { computed } from 'vue';
 import { translate } from '@/utils/i18n';
 import {
   ACTION_ADD,
@@ -18,11 +18,11 @@ import {
 import { TABLE_COLUMN_NAME_ACTIONS } from '@/constants/table';
 import { onListFilterChangeByKey, setupListComponent } from '@/utils/list';
 import useList from '@/layouts/content/list/useList';
-import TaskStatus from '@/components/core/task/TaskStatus.vue';
-import NavLink from '@/components/ui/nav/NavLink.vue';
-import Time from '@/components/ui/time/Time.vue';
-import SpiderStat from '@/components/core/spider/SpiderStat.vue';
-import GitRepo from '@/components/core/git/GitRepo.vue';
+import ClTaskStatus from '@/components/core/task/TaskStatus.vue';
+import ClNavLink from '@/components/ui/nav/NavLink.vue';
+import ClTime from '@/components/ui/time/Time.vue';
+import ClSpiderStat from '@/components/core/spider/SpiderStat.vue';
+import ClGitRepo from '@/components/core/git/GitRepo.vue';
 import useProject from '@/components/core/project/useProject';
 import { EMPTY_OBJECT_ID, isPro } from '@/utils';
 
@@ -120,11 +120,12 @@ const useSpiderList = () => {
           icon: ['fa', 'font'],
           width: '160',
           align: 'left',
-          value: (row: Spider) =>
-            h(NavLink, {
-              path: `/spiders/${row._id}`,
-              label: row.name,
-            }),
+          value: (row: Spider) => (
+            <ClNavLink
+              path={`/spiders/${row._id}`}
+              label={row.name}
+            />
+          ),
           hasSort: true,
           hasFilter: true,
           allowFilterSearch: true,
@@ -138,10 +139,12 @@ const useSpiderList = () => {
           value: (row: Spider) => {
             if (!row.project_id) return;
             const p = allProjectDict.value.get(row.project_id);
-            return h(NavLink, {
-              label: p?.name,
-              path: `/projects/${row.project_id}`,
-            });
+            return (
+              <ClNavLink
+                label={p?.name}
+                path={`/projects/${row.project_id}`}
+              />
+            );
           },
           hasFilter: true,
           allowFilterSearch: true,
@@ -156,11 +159,13 @@ const useSpiderList = () => {
           width: '240',
           value: (row: Spider) => {
             if (!row.git_id || row.git_id === EMPTY_OBJECT_ID) return;
-            return h(GitRepo, {
-              name: row.git?.name,
-              gitRootPath: row.git_root_path,
-              onClick: () => router.push(`/gits/${row.git_id}`),
-            });
+            return (
+              <ClGitRepo
+                name={row.git?.name}
+                gitRootPath={row.git_root_path}
+                onClick={() => router.push(`/gits/${row.git_id}`)}
+              />
+            );
           },
           hasFilter: true,
           allowFilterSearch: true,
@@ -175,12 +180,14 @@ const useSpiderList = () => {
           value: (row: Spider) => {
             const { _id, status, error } = row.stat?.last_task || {};
             if (!status) return;
-            return h(TaskStatus, {
-              status,
-              error,
-              clickable: true,
-              onClick: () => router.push(`/tasks/${_id}`),
-            });
+            return (
+              <ClTaskStatus
+                status={status}
+                error={error}
+                clickable={true}
+                onClick={() => router.push(`/tasks/${_id}`)}
+              />
+            );
           },
         },
         {
@@ -192,7 +199,7 @@ const useSpiderList = () => {
           value: (row: Spider) => {
             const time = row.stat?.last_task?.stat?.start_ts;
             if (!time) return;
-            return h(Time, { time });
+            return <ClTime time={time} />;
           },
         },
         {
@@ -204,12 +211,14 @@ const useSpiderList = () => {
           value: (row: Spider) => {
             const stat = row.stat;
             if (!stat || !stat.tasks) return;
-            return h(SpiderStat, {
-              stat,
-              onTasksClick: () => router.push(`/spiders/${row._id}/tasks`),
-              onResultsClick: () => router.push(`/spiders/${row._id}/data`),
-              onDurationClick: () => router.push(`/spiders/${row._id}/tasks`),
-            } as SpiderStatProps);
+            return (
+              <ClSpiderStat
+                stat={stat}
+                onTasksClick={() => router.push(`/spiders/${row._id}/tasks`)}
+                onResultsClick={() => router.push(`/spiders/${row._id}/data`)}
+                onDurationClick={() => router.push(`/spiders/${row._id}/tasks`)}
+              />
+            );
           },
         },
         {