FOUR-20593: Implement FE test related to the filters

resources/jscomposition/cases/casesDetail/components/EllipsisMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-float-right tw-absolute tw-right-4 tw-top-0" />
+  <div id="filters" class="tw-float-right tw-absolute tw-right-4 tw-top-0" />
 </template>
 
 <script setup>

resources/jscomposition/cases/casesMain/components/BadgesSection.vue

@@ -6,6 +6,7 @@
     <Badge
       v-for="(item, index) in data"
       :key="item.fieldName"
+      :id="`badge-${item.fieldName.replace(/\s+/g, '-')}`"
       class="tw-text-xs tw-bg-gray-100"
       color="gray">
       <span>

resources/jscomposition/system/table/FilterableTable.vue

@@ -9,6 +9,7 @@
       v-for="(column, index) in columns"
       #[`theader-filter-${column.field}`]>
       <FilterColumn
+        :id="column.field"
         v-if="column.filter"
         :key="`default-${index}-${hasFilter(index,column)}`"
         :filter="column.filter"

resources/jscomposition/system/table/filter/defaultFilter/FooterButtons.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="tw-flex tw-space-x-2 tw-justify-end tw-font-semibold">
     <OutlineButton
+      id="cancel-btn"
       class="!tw-py-2"
       @click="$emit('cancel')">
       <span>{{ $t("Cancel") }}</span>
     </OutlineButton>
 
     <OutlineButton
+      id="clear-btn"
       class="!tw-py-2"
       @click="$emit('clear')">
       <span>{{ $t("Clear") }}</span>
     </OutlineButton>
 
     <OutlineButton
+      id="apply-btn"
       class="!tw-py-2 tw-bg-gray-500 tw-text-white hover:tw-bg-gray-700"
       @click="$emit('apply')">
       <span>{{ $t("Apply") }}</span>

resources/jscomposition/system/table/filter/defaultFilter/SortingButtons.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="tw-flex tw-justify-center tw-text-gray-500 tw-text-xs">
     <div
+      id="sort-asc"
       class="tw-space-x-2 tw-inline-flex tw-items-center
         tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset
         tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
@@ -11,6 +12,7 @@
     </div>
 
     <div
+      id="sort-desc"
       class="tw-space-x-2 -tw-ml-px tw-inline-flex tw-items-center
         tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300
         hover:tw-bg-gray-100 focus:tw-z-10"

resources/jscomposition/system/table/filter/defaultFilter/operator/FilterOperator.vue

@@ -13,6 +13,7 @@
       :config="config"
       placeholder="Type value"
       class="tw-flex-1"
+      id="filter-value"
       @change="onChangeValue" />
   </div>
 </template>