Merge pull request #456 from storyblok/feat/work-1344

feat(work-1344): introduce data-testids to SbDataTable components
storyblok · Oct 19, 2023 · 67a2318 · 67a2318
2 parents 85c979a + 0a996b3
commit 67a2318
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/src/components/DataTable/components/SbDataTableBody.vue b/src/components/DataTable/components/SbDataTableBody.vue
@@ -1,9 +1,10 @@
 <template>
-  <tbody>
+  <tbody :data-testid="dataTestid">
     <SbDataTableBodyRow
       v-for="(row, i) in items"
       v-bind="{ allowSelection, headers, row, selectedRows }"
       :key="i"
+      :data-testid="`${dataTestid}-row__${i}`"
     />
   </tbody>
 </template>
@@ -23,5 +24,10 @@ export default {
     items: sharedProps.items,
     selectedRows: sharedProps.selectedItems,
   },
+  computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-data-table-body'
+    },
+  },
 }
 </script>
diff --git a/src/components/DataTable/components/SbDataTableColumn.vue b/src/components/DataTable/components/SbDataTableColumn.vue
@@ -4,9 +4,9 @@
     :class="computedClasses"
     :width="width"
     :is-sort-icon-always-visible="isSortIconAlwaysVisible"
+    :data-testid="$attrs['data-testid']"
   >
-    <span
-v-if="showLabel" class="sb-data-table__body-cell-label"
+    <span v-if="showLabel" class="sb-data-table__body-cell-label"
       >{{ label }}:</span
     >
     <slot :row="row" />

diff --git a/src/components/DataTable/components/SbDataTableHeader.vue b/src/components/DataTable/components/SbDataTableHeader.vue
@@ -1,14 +1,23 @@
 <template>
-  <thead>
+  <thead :data-testid="dataTestid">
     <tr>
-      <th v-if="allowSelection && isMultiple" class="sb-data-table__head-cell">
-        <SbCheckbox v-model="isActive" :indeterminate="isIndeterminate" />
+      <th
+        v-if="allowSelection && isMultiple"
+        class="sb-data-table__head -cell"
+        :data-testid="`${dataTestid}-checkbox-cell`"
+      >
+        <SbCheckbox
+          v-model="isActive"
+          :indeterminate="isIndeterminate"
+          :data-testid="`${dataTestid}-checkbox`"
+        />
       </th>
       <SbDataTableHeaderCell
         v-for="(elem, index) in headers"
         :key="index"
         :column="elem"
         :sorted-key="sortedKey"
+        :data-testid="`${dataTestid}-cell__${index}`"
         :is-sort-icon-always-visible="isSortIconAlwaysVisible"
       />
     </tr>
@@ -51,6 +60,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-data-table-header'
+    },
+
     context() {
       return this.dataTableContext()
     },

diff --git a/src/components/DataTable/index.js b/src/components/DataTable/index.js
@@ -31,6 +31,10 @@ const SbDataTable = {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-data-table'
+    },
+
     allRowsSelected() {
       const selectableItems = this.items.filter(
         (item) => item.selectable !== false
@@ -85,7 +89,9 @@ const SbDataTable = {
       const items = [...this.sortedData]
       const pageChunkIndex = this.pagination.currentPage - 1
       while (items.length > 0) {
-        const pageParam = Object.keys(this.pagination).includes('pageSize') ? 'pageSize' : 'perPage'
+        const pageParam = Object.keys(this.pagination).includes('pageSize')
+          ? 'pageSize'
+          : 'perPage'
         const pageChunk = items.splice(0, this.pagination[pageParam])
         paginatedItems = [...paginatedItems, pageChunk]
       }
@@ -231,12 +237,13 @@ const SbDataTable = {
         })
 
         bodyData = items.map((tableRow, index) => {
-          const columns = children.map((tableData) => {
+          const columns = children.map((tableData, index) => {
             return h(
               SbDataTableColumn,
               {
                 ...tableData.props,
                 row: tableRow,
+                'data-testid': `${this.dataTestid}-column__${index}`,
               },
               tableData.children
             )
@@ -250,6 +257,7 @@ const SbDataTable = {
               row: tableRow,
               selectedRows: this.hasSelectedRowsInList,
               rowId: `${this.rowIdPrefix}-${index}`,
+              'data-testid': `${this.dataTestid}-body-row__${index}`,
             },
             () => [columns]
           )
@@ -260,6 +268,7 @@ const SbDataTable = {
         'table',
         {
           class: 'sb-data-table__container',
+          'data-testid': this.dataTestid,
         },
         [
           this.showHeader
@@ -271,6 +280,7 @@ const SbDataTable = {
                 selectionMode: this.selectionMode,
                 sortedKey: this.sortKey,
                 isSortIconAlwaysVisible: this.isSortIconAlwaysVisible,
+                'data-testid': `${this.dataTestid}-header`,
               })
             : null,
           this.sortedData.length && !this.$slots.default
@@ -279,6 +289,7 @@ const SbDataTable = {
                 headers: this.headers,
                 items: this.sortedData,
                 selectedRows: this.hasSelectedRowsInList,
+                'data-testid': `${this.dataTestid}-body`,
               })
             : null,
           this.$slots.default
@@ -292,6 +303,7 @@ const SbDataTable = {
                       selectionMode: this.selectionMode,
                       sortedKey: this.sortKey,
                       isSortIconAlwaysVisible: this.isSortIconAlwaysVisible,
+                      'data-testid': `${this.dataTestid}-header`,
                     })
                   : null,
                 h('tbody', bodyData),