Merge pull request #7048 from aignatov-bio/ai-sci-10116-add-helpers-e2e-testing

Add helpers for e2e testing [SCI-10116]

app/javascript/vue/shared/datatable/action_toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 w-full rounded bg-sn-light-grey min-h-[68px]">
+  <div class="p-4 w-full rounded bg-sn-light-grey min-h-[68px]" data-e2e="e2e-CO-actionToolbar">
     <div class="flex gap-4 items-center h-full">
       <div v-if="loading && !actions.length" class="sn-action-toolbar__action">
         <a class="rounded flex items-center py-1.5 px-2.5 bg-transparent text-transparent no-underline"></a>
@@ -13,6 +13,7 @@
           :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
           :id="action.button_id"
           :title="action.label"
+          :data-e2e="`e2e-BT-actionToolbar-${action.name}`"
           @click="doAction(action, $event)">
           <i :class="action.icon"></i>
           <span class="sn-action-toolbar__button-text">{{ action.label }}</span>

app/javascript/vue/shared/datatable/table.vue

@@ -200,7 +200,8 @@ export default {
       return {
         suppressCellFocus: true,
         rowHeight: 40,
-        headerHeight: 40
+        headerHeight: 40,
+        getRowId: (params) => `e2e-TB-row-${params.data.id}`
       };
     },
     extendedColumnDefs() {

app/javascript/vue/shared/datatable/tableHeader.js

@@ -1,6 +1,7 @@
 export default {
   template: `
     <div class="w-full grid items-center gap-2 grid-cols-[auto_1.5rem] cursor-pointer"
+         :data-e2e="'e2e-CO-TableHeader-' + params.column.colId "
          @click="onSortRequested((activeSort == 'asc' ? 'desc' : 'asc'), $event)">
       <div v-if="params.html" class="customHeaderLabel truncate" v-html="params.html"></div>
       <div v-else class="customHeaderLabel truncate">{{ params.displayName }}</div>
@@ -14,7 +15,7 @@ export default {
   `,
   data() {
     return {
-      activeSort: null,
+      activeSort: null
     };
   },
   beforeMount() {},
@@ -36,6 +37,6 @@ export default {
       if (!this.params.enableSorting) return;
 
       this.params.setSort(order, event.shiftKey);
-    },
-  },
+    }
+  }
 };

app/javascript/vue/shared/datatable/toolbar.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="flex py-4 items-center justify-between">
+  <div class="flex py-4 items-center justify-between" data-e2e="e2e-CO-topToolbar">
     <div class="flex flex-1 items-center gap-4">
       <template v-for="action in toolbarActions.left" :key="action.label">
         <a v-if="action.type === 'emit' || action.type === 'link'"
            :class="action.buttonStyle"
            :href="action.path"
+           :data-e2e="`e2e-BT-topToolbar-${action.name}`"
            @click="doAction(action, $event)">
           <i :class="action.icon"></i>
           {{ action.label }}