Merge pull request #455 from storyblok/feat/work-1342

feat(work-1342): introduce data-testids Minbrowser, Select, Avatar, B…

src/components/Avatar/SbAvatar.vue

@@ -2,7 +2,7 @@
   <div v-tooltip="avatarTooltipAttrs" :class="avatarClass" v-bind="$attrs">
     <template v-if="showImage">
       <slot>
-        <div class="sb-avatar__image" :style="avatarStyle">
+        <div class="sb-avatar__image" :style="avatarStyle" :data-testid="`${dataTestid}-image`">
           <img
             v-show="isImageLoaded"
             :src="src"
@@ -17,23 +17,23 @@
             :color="fallbackAvatarColor"
           />
         </div>
-        <SbBadge v-if="!!status" v-bind="badgeAttrs" />
+        <SbBadge v-if="!!status" v-bind="badgeAttrs" :data-testid="`${dataTestid}-badge`"/>
       </slot>
     </template>
     <template v-else-if="name || friendlyName">
-      <div :class="avatarInitialsClass">
+      <div :class="avatarInitialsClass" :data-testid="`${dataTestid}-initials`">
         <span>{{ initials }}</span>
         <SbBadge v-if="!!status" v-bind="badgeAttrs" />
       </div>
     </template>
     <div v-if="showTextContainer" class="sb-avatar__text-container">
-      <span v-if="isDescriptionTop" :class="descriptionClass">
+      <span v-if="isDescriptionTop" :class="descriptionClass" :data-testid="`${dataTestid}-top-description`">
         {{ description }}
       </span>
-      <span class="sb-avatar__text">
+      <span class="sb-avatar__text" :data-testid="`${dataTestid}-text`">
         {{ friendlyName || name }}
       </span>
-      <span v-if="isDescriptionBottom" :class="descriptionClass">
+      <span v-if="isDescriptionBottom" :class="descriptionClass" :data-testid="`${dataTestid}-bottom-description`">
         {{ description }}
       </span>
     </div>
@@ -132,6 +132,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-avatar'
+    },
+
     avatarClass() {
       const avatarSizeClass =
         this.size && this.size !== 'normal' && `sb-avatar--${this.size}`

src/components/Badge/SbBadge.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="activeClasses">
-    <SbIcon v-if="isRenderIcon" :name="iconName" />
-    <span v-if="hasLabelToRender" class="sb-badge__label"
-      ><slot>{{ activeLabel }}</slot></span
-    >
+    <SbIcon v-if="isRenderIcon" :name="iconName" :data-testid="`${dataTestId}-icon`"/>
+    <span v-if="hasLabelToRender" class="sb-badge__label" :data-testid="`${dataTestid}-active-label`">
+      <slot>{{ activeLabel }}</slot>
+    </span>
     <slot v-else></slot>
   </div>
 </template>
@@ -50,7 +50,7 @@ export default {
     },
   },
 
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const isRenderIcon = !props.contract && !isValidNumber(props.number)
     const activeLabel = isValidNumber(props.number) ? props.number : props.label
     const isLabelAllowed = !props.contract && !props.onlyIcon
@@ -67,13 +67,15 @@ export default {
       },
     ])
     const iconName = computed(() => mapIconByTypes[props.type])
+    const dataTestid = computed(() => attrs['data-testid'] || 'sb-badge')
 
     return {
       isRenderIcon,
       hasLabelToRender,
       activeClasses,
       activeLabel,
       iconName,
+      dataTestid
     }
   },
 }

src/components/Minibrowser/Minibrowser.vue

@@ -9,10 +9,11 @@
   >
     <SbMinibrowserSearch
       v-if="!hideSearch"
+      :data-testid="`${dataTestid}-search`"
       :clear-search-label="clearSearchLabel"
       :model-value="searchInput"
       :placeholder="placeholder"
-      @update:modelValue="handleSearchInput"
+      @update:model-value="handleSearchInput"
       @keydown="handleSearchKeydown"
     />
 
@@ -21,6 +22,7 @@
       <SbMinibrowserBreadcrumbs
         v-if="hasBreadcrumbs"
         :items="internalBreadcrumbs"
+        :data-testid="`${dataTestid}-breadcrumbs`"
       />
 
       <template v-if="hasGroupedItems">
@@ -29,20 +31,29 @@
             v-if="!$slots.list"
             :key="index"
             v-bind="groupItem"
+            :data-testid="`${dataTestid}-list`"
           />
 
           <slot name="list" v-bind="groupItem" />
         </template>
       </template>
 
       <template v-if="hasOtherItems">
-        <SbMinibrowserList v-if="!$slots.list" :items="otherItems" />
+        <SbMinibrowserList
+          v-if="!$slots.list"
+          :items="otherItems"
+          :data-testid="`${dataTestid}-additional-list`"
+        />
 
         <slot name="list" :items="otherItems" />
       </template>
     </div>
 
-    <p v-if="hasNotFilteredElements" class="sb-minibrowser__not-found">
+    <p
+      v-if="hasNotFilteredElements"
+      class="sb-minibrowser__not-found"
+      :data-testid="`${dataTestid}-not-found-text`"
+    >
       {{ notFoundText }}
     </p>
   </div>
@@ -134,6 +145,10 @@ export default {
   }),
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-mini-browser'
+    },
+
     browserContext() {
       return {
         // browser states

src/components/Minibrowser/components/MinibrowserBreadcrumbs.vue

@@ -16,6 +16,7 @@
           :is-active="index === lastIndex"
           v-bind="item"
           @click="navigateTo($event, index)"
+          :data-testid="`${dataTestid}-item-${index}`"
         />
 
         <SbBreadcrumbSeparator
@@ -52,6 +53,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-mini-browser-breadcrumbs'
+    },
+
     context() {
       return this.browserContext()
     },

src/components/Minibrowser/components/MinibrowserList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sb-minibrowser__list">
-    <SbMiniBrowserListHeader v-if="isInternalTitleVisible" :title="title" />
+    <SbMiniBrowserListHeader v-if="isInternalTitleVisible" :title="title" :data-testid="`${dataTestid}-header`" />
 
     <slot name="header" :title="title" />
 
@@ -14,6 +14,7 @@
           ...item,
           modelValue: item.value,
         }"
+        :data-testid="`${dataTestid}-item-${key}`"
       />
     </ul>
   </div>
@@ -44,6 +45,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-mini-browser-list'
+    },
+
     isInternalTitleVisible() {
       return this.title && !this.$slots.header
     },

src/components/Minibrowser/components/MinibrowserSearch.vue

@@ -9,6 +9,7 @@
       ref="input"
       class="sb-textfield__input sb-textfield__input--default sb-textfield__input--ghost-light"
       type="search"
+      :data-testid="`${dataTestid}-input`"
       :value="modelValue"
       :placeholder="placeholder"
       @input="handleSearchInput"
@@ -60,6 +61,10 @@ export default {
   emits: ['update:modelValue', 'keydown'],
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-mini-browser-search'
+    },
+
     context() {
       return this.browserContext()
     },

src/components/Select/Select.vue

@@ -34,6 +34,7 @@
       :item-caption="itemCaption"
       :inline-label="inlineLabel"
       :show-count="showCount"
+      :data-testid="`${dataTestid}-inner`"
       @click="handleSelectInnerClick"
       @keydown-enter="handleKeyDownEnter"
       @search="handleSearchInput"
@@ -81,6 +82,7 @@
       :all-option-value="firstOptionValue"
       :first-value-is-all-value="firstValueIsAllValue"
       :is-option-disabled="isOptionDisabled"
+      :data-testid="`${dataTestid}-list`"
       @emit-value="handleEmitValue"
       @option-created="handleOptionCreated"
       @focus-item="focusAtIndex($event)"
@@ -252,6 +254,10 @@ export default {
   }),
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-select'
+    },
+
     selectContext() {
       return {
         // controls elements

src/components/Select/components/SelectInner.vue

@@ -22,7 +22,7 @@
 
     <div v-if="isTagsVisible" class="sb-select-inner__tags">
       <div v-if="showCount">
-        <SelectInnerTag 
+        <SelectInnerTag
             :item="firstTagLabel"
             :item-label="itemLabel"
             :item-value="itemValue"
@@ -33,6 +33,7 @@
             :value-tag-count="tagLabels.length - 1"
             :is-disabled="isDisabled"
             :tags-count-tooltip="tagsCountTooltip"
+            :data-testid="`${dataTestid}-tag-show-count`"
             @keydown="handleTagKeydown($event, firstTagLabel)"
             @close="removeItem($event, firstTagLabel)"
           />
@@ -44,14 +45,15 @@
           :item="tagLabel"
           :remove="(e) => removeItem(e, tagLabel)"
         >
-          <SelectInnerTag 
+          <SelectInnerTag
               :item="tagLabel"
               :item-label="itemLabel"
               :item-value="itemValue"
               :item-caption="itemCaption"
               :show-caption="showCaption"
               :is-tag-avatar-visible="isTagAvatarVisible"
               :is-disabled="isDisabled"
+              :data-testid="`${dataTestid}-tag`"
               @keydown="handleTagKeydown($event, tagLabel)"
               @close="removeItem($event, tagLabel)"
             />
@@ -69,6 +71,7 @@
         :style="inlineWidth"
         :placeholder="placeholderLabel"
         :readonly="!filterable"
+        :data-testid="`${dataTestid}-search-input`"
         @focus="handleEmitSearchInput"
       />
     </div>
@@ -79,6 +82,7 @@
         size="small"
         show-name
         :name="innerLabel"
+        :data-testid="`${dataTestid}-avatar`"
       />
     </div>
 
@@ -92,6 +96,7 @@
       :style="inlineWidth"
       :placeholder="placeholderLabel"
       :readonly="!filterable || inline"
+      :data-testid="`${dataTestid}-search-input`"
       @focus="handleEmitSearchInput"
     />
 
@@ -114,6 +119,7 @@
         v-tooltip="{ label: 'Clear selection' }"
         aria-label="Clear all values"
         class="sb-select-inner__clear"
+        :data-testid="`${dataTestid}-clear-button`"
         type="button"
         @keydown="clearAllValuesKeydown"
         @click="clearAllValues"
@@ -122,7 +128,7 @@
       </button>
 
       <slot name="rightIcon">
-        <SbIcon class="sb-select-inner__chevron" :name="rightIconName" />
+        <SbIcon class="sb-select-inner__chevron" :name="rightIconName" :data-testid="`${dataTestid}-right-icon`"/>
       </slot>
     </div>
   </div>
@@ -238,6 +244,10 @@ export default {
   }),
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-select-inner'
+    },
+
     searchInputText: {
       get() {
         return this.searchInput

src/components/Select/components/SelectInnerTag.vue

@@ -5,6 +5,7 @@
     :closable="!isDisabled"
     @keydown="$emit('keydown', $event, item)"
     @close="$emit('close', $event, item)"
+    :data-testid="`${dataTestid}-tag`"
   >
     <template v-if="item">
       <SbAvatar
@@ -13,8 +14,9 @@
         :src="getSource(item)"
         size="small"
         :name="item[itemLabel]"
+        :data-testid="`${dataTestid}-avatar`"
       />
-      <span class="sb-select-inner__tag" :title="getTagTitle(item)">
+      <span class="sb-select-inner__tag" :title="getTagTitle(item)" :data-testid="`${dataTestid}-inner-tag`">
         <template v-if="showCaption">
           {{ item[itemLabel] }}
           <span v-if="item[itemCaption]">({{ item[itemCaption] }})</span>
@@ -86,6 +88,12 @@ export default {
 
   emits: ['keydown', 'close'],
 
+  computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-select-inner-tag'
+    }
+  },
+
   methods: {
     getSource(label) {
       return label?.src || ''