Add cypress ids for record list paging and sorting

client/web/compose/src/components/PageBlocks/Configurator.vue

@@ -1,5 +1,6 @@
 <template>
   <b-tabs
+    data-test-id="page-block-configurator"
     active-nav-item-class="bg-grey"
     nav-wrapper-class="bg-white border-bottom"
     card
@@ -16,6 +17,7 @@
     </template>
 
     <b-tab
+      data-test-id="general-tab"
       active
       :title="$t('general.label.general')"
     >

client/web/compose/src/components/PageBlocks/RecordListBase.vue

@@ -166,6 +166,7 @@
         :class="{ 'overflow-hidden': !items.length || processing }"
       >
         <b-table-simple
+          data-test-id="table-record-list"
           hover
           responsive
           sticky-header
@@ -489,11 +490,15 @@
                 v-if="options.showTotalCount"
                 class="ml-2 text-nowrap font-weight-bold"
               >
-                <span v-if="pagination.count > options.perPage">
+                <span
+                  v-if="pagination.count > options.perPage"
+                  data-test-id="pagination-range"
+                >
                   {{ $t('recordList.pagination.showing', getPagination) }}
                 </span>
                 <span
                   v-else
+                  data-test-id="pagination-single-number"
                 >
                   {{ $t('recordList.pagination.single', getPagination) }}
                 </span>
@@ -504,6 +509,7 @@
             >
               <b-pagination
                 v-if="options.fullPageNavigation"
+                data-test-id="pagination"
                 align="right"
                 aria-controls="record-list"
                 class="m-0 d-print-none"
@@ -534,6 +540,7 @@
               <b-button-group v-else>
                 <b-button
                   :disabled="!hasPrevPage"
+                  data-test-id="first-page"
                   variant="link"
                   class="text-dark"
                   @click="goToPage()"
@@ -542,6 +549,7 @@
                 </b-button>
                 <b-button
                   :disabled="!hasPrevPage"
+                  data-test-id="previous-page"
                   variant="link"
                   class="text-dark"
                   @click="goToPage('prevPage')"
@@ -551,6 +559,7 @@
                 </b-button>
                 <b-button
                   :disabled="!hasNextPage"
+                  data-test-id="next-page"
                   variant="link"
                   class="text-dark"
                   @click="goToPage('nextPage')"

client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <b-tab
+      data-test-id="record-list-configurator"
       :title="$t('recordList.label')"
     >
       <b-form-group
@@ -211,21 +212,27 @@
       >
         <b-form-input
           v-model.number="options.perPage"
+          data-test-id="input-records-per-page"
           type="number"
           class="mb-2"
         />
-        <b-form-checkbox v-model="options.hidePaging">
+        <b-form-checkbox
+          v-model="options.hidePaging"
+          data-test-id="hide-pagination"
+        >
           {{ $t('recordList.record.hidePaging') }}
         </b-form-checkbox>
         <b-form-checkbox
           v-if="!options.hidePaging"
           v-model="options.fullPageNavigation"
+          data-test-id="hide-page-navigation"
         >
           {{ $t('recordList.record.fullPageNavigation') }}
         </b-form-checkbox>
         <b-form-checkbox
           v-if="!options.hidePaging"
           v-model="options.showTotalCount"
+          data-test-id="show-total-record-count"
         >
           {{ $t('recordList.record.showTotalCount') }}
         </b-form-checkbox>

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -54,13 +54,16 @@
         slot-scope="{ boundingRect, block, index }"
       >
         <div
+          :data-test-id="`block-${block.kind}`"
           class="h-100 editable-block"
           :class="{ 'bg-warning': !isValid(block) }"
         >
           <div
             class="toolbox border-0 p-2 m-0 text-light text-center"
+            data-test-id="block-toolbox"
           >
             <b-button
+              data-test-id="button-edit"
               :title="$t('tooltip.edit.block')"
               variant="outline-light"
               class="border-0"

client/web/compose/src/views/Public/Pages/View.vue

@@ -14,6 +14,7 @@
         class="mr-1"
       >
         <b-button
+          data-test-id="button-page-builder"
           variant="primary"
           class="d-flex align-items-center"
           :to="pageBuilder"
@@ -26,10 +27,12 @@
         </b-button>
         <page-translator
           v-if="trPage"
+          data-test-id="button-page-translations"
           :page.sync="trPage"
           style="margin-left:2px;"
         />
         <b-button
+          data-test-id="button-page-edit"
           :title="$t('tooltip.edit.page')"
           :to="pageEditor"
           variant="primary"

lib/vue/src/components/itemPicker/CItemPicker.vue

@@ -37,6 +37,7 @@
                 {{ labels.availableItems }}
               </label>
               <b-button
+                data-test-id="link-select-all"
                 v-show="filteredAvailable.length && !disabled"
                 variant="link"
                 class="ml-auto px-0 text-muted"
@@ -124,6 +125,7 @@
                 {{ labels.selectedItems }}
               </label>
               <b-button
+                data-test-id="link-unselect-all"
                 v-show="filteredSelected.length && !disabled"
                 variant="link"
                 class="ml-auto px-0 text-muted"

lib/vue/src/components/itemPicker/CItemPickerItem.vue

@@ -21,6 +21,7 @@
     </b>
     <b-button
       v-if="_hideIcons"
+      :data-test-id="`button-${selected ? 'unselect' : 'select'}`"
       variant="link"
       class="text-decoration-none d-flex align-items-center align-baseline ml-auto px-2"
     >