From 641a7405ceb8c5050b37571f16df11d456dd4ffe Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 26 Jul 2022 22:47:20 +0530
Subject: [PATCH] test: cypress markers for tab & tree view

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/dashboard/TabView.vue    |  4 ++--
 packages/nc-gui-v2/components/dashboard/TreeView.vue   | 10 ++++++----
 .../components/dashboard/settings/AppStore.vue         |  8 ++++----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TabView.vue b/packages/nc-gui-v2/components/dashboard/TabView.vue
index 02bc289ac9..9269157668 100644
--- a/packages/nc-gui-v2/components/dashboard/TabView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TabView.vue
@@ -10,9 +10,9 @@ const tableCreateDialog = ref(false)
 <template>
   <div>
     <v-tabs v-model="activeTab" height="32" density="compact" color="primary">
-      <v-tab v-for="(tab, i) in tabs" :key="i" :value="i" class="text-capitalize">
+      <v-tab v-for="(tab, i) in tabs" :key="i" :value="i" :class="`text-capitalize nc-tab-${tab.title}`">
         {{ tab.title }}
-        <MdiCloseIcon class="ml-2 text-gray-500/50" @click.stop="closeTab(i)"></MdiCloseIcon>
+        <MdiCloseIcon class="ml-2 text-gray-500/50 mdi-close" @click.stop="closeTab(i)"></MdiCloseIcon>
       </v-tab>
       <MdiPlusIcon @click="tableCreateDialog = true" />
       <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 20c22b3475..ab122869b1 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -215,7 +215,7 @@ const addTableTab = (table: TableType) => {
           @contextmenu="setMenuContext('main')"
         >
           <MdiTable class="mr-1 text-gray-500" />
-          <span class="flex-grow text-bold"
+          <span class="flex-grow text-bold nc-project-tree"
             >{{ $t('objects.tables') }} <template v-if="tables?.length">({{ tables.length }})</template></span
           >
           <MdiPlus v-t="['c:table:create:navdraw']" class="text-gray-500" @click.stop="tableCreateDlg = true" />
@@ -231,17 +231,19 @@ const addTableTab = (table: TableType) => {
                 v-for="table in tables"
                 :key="table.id"
                 v-t="['a:table:open']"
-                :class="{ hidden: !filteredTables?.includes(table) }"
+                :class="[{ hidden: !filteredTables?.includes(table) }, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`]"
                 class="!pl-1 py-1 !h-[28px] !my-0 text-sm cursor-pointer group"
                 :data-order="table.order"
                 :data-id="table.id"
                 @click="addTableTab(table)"
               >
                 <div class="flex align-center gap-1 h-full" @contextmenu="setMenuContext('table', table)">
-                  <MdiDrag class="transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move" />
+                  <MdiDrag
+                    :class="`transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move nc-child-draggable-icon-${table.title}`"
+                  />
                   <component :is="icon(table)" class="text-[10px] text-gray-500" />
 
-                  <span class="text-xs flex-1 ml-2">{{ table.title }}</span>
+                  <span class="nc-tbl-title text-xs flex-1 ml-2">{{ table.title }}</span>
                   <a-dropdown :trigger="['click']" @click.stop>
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
                     <template #overlay>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue b/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
index 6369ef3c05..709e1d8b67 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/AppStore.vue
@@ -95,24 +95,24 @@ onMounted(async () => {
     <a-card
       v-for="(app, i) in apps"
       :key="i"
-      class="relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full"
+      :class="`relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full nc-app-store-card-${app.title}`"
       :body-style="{ width: '100%' }"
     >
       <div class="install-btn flex flex-row justify-end space-x-1">
         <a-button v-if="app.parsedInput" size="small" outlined @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize">
+          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-edit">
             <MdiEditIcon class="pr-0.5" :height="12" />
             Edit
           </div>
         </a-button>
         <a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize">
+          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-reset">
             <MdiCloseCircleIcon />
             <div class="flex ml-0.5">Reset</div>
           </div>
         </a-button>
         <a-button v-else size="small" outlined @click="showInstallPluginModal(app)">
-          <div class="flex flex-row justify-center items-center caption capitalize">
+          <div class="flex flex-row justify-center items-center caption capitalize nc-app-store-card-install">
             <MdiPlusIcon />
             Install
           </div>