@platforma-sdk/ui-vue 1.84.10 → 1.84.17

package/src/components/PlAdvancedFilter/FilterEditor.vue

@@ -282,10 +282,11 @@ const stringMatchesError = computed(() => {
 });
 </script>
 <template>
-  <div :class="$style.filterWrapper">
+  <div data-testid="pl-advanced-filter-filter" :class="$style.filterWrapper">
     <!-- top element - column selector / column label - for all filter types-->
     <div
       v-if="enableDnd"
+      data-testid="pl-advanced-filter-column-chip"
       :class="[$style.top, $style.columnChip, { [$style.error]: currentError }]"
     >
       <div :class="[$style.typeIcon, { [$style.error]: currentError }]">
@@ -299,7 +300,11 @@ const stringMatchesError = computed(() => {
           "
         />
       </div>
-      <div :class="$style.titleWrapper" :title="currentOption?.label ?? ''">
+      <div
+        data-testid="pl-advanced-filter-column-title"
+        :class="$style.titleWrapper"
+        :title="currentOption?.label ?? ''"
+      >
         <div :class="$style.title">
           {{
             inconsistentSourceSelected
@@ -308,12 +313,17 @@ const stringMatchesError = computed(() => {
           }}
         </div>
       </div>
-      <div :class="$style.closeIcon" @click="onDelete(props.filter.column)">
+      <div
+        data-testid="pl-advanced-filter-remove"
+        :class="$style.closeIcon"
+        @click="onDelete(props.filter.column)"
+      >
         <PlIcon16 name="close" />
       </div>
     </div>
     <div v-else :class="$style.top">
       <PlDropdown
+        data-testid="pl-advanced-filter-column"
         :model-value="columnAsSourceAndFixedAxes.source"
         :errorStatus="currentError"
         :options="sourceOptions"
@@ -321,14 +331,23 @@ const stringMatchesError = computed(() => {
         group-position="top-left"
         @update:model-value="changeSourceId"
       />
-      <div :class="$style.closeButton" @click="onDelete(props.filter.column)">
+      <div
+        data-testid="pl-advanced-filter-remove"
+        :class="$style.closeButton"
+        @click="onDelete(props.filter.column)"
+      >
         <PlIcon16 name="close" />
       </div>
     </div>
 
-    <div v-if="currentOption?.axesToBeFixed?.length" :class="$style.fixedAxesBlock">
+    <div
+      v-if="currentOption?.axesToBeFixed?.length"
+      data-testid="pl-advanced-filter-fixed-axes"
+      :class="$style.fixedAxesBlock"
+    >
       <template v-for="value in currentOption?.axesToBeFixed" :key="value.idx">
         <PlAutocomplete
+          data-testid="pl-advanced-filter-fixed-axis"
           :model-value="columnAsSourceAndFixedAxes.axisFiltersByIndex[value.idx]"
           :label="value.label"
           :options-search="
@@ -351,6 +370,7 @@ const stringMatchesError = computed(() => {
       "
     >
       <PlDropdown
+        data-testid="pl-advanced-filter-type"
         :model-value="props.filter.type"
         :options="filterTypesOptions"
         :group-position="
@@ -364,14 +384,16 @@ const stringMatchesError = computed(() => {
     <template v-if="props.filter.type === 'patternFuzzyContainSubsequence'">
       <div :class="$style.middle">
         <PlTextField
+          data-testid="pl-advanced-filter-value"
           :model-value="props.filter.value"
           placeholder="Substring"
           group-position="middle"
           @update:model-value="(v) => updateFilterProp('value', v)"
         />
       </div>
-      <div :class="$style.innerSection">
+      <div data-testid="pl-advanced-filter-fuzzy-settings" :class="$style.innerSection">
         <Slider
+          data-testid="pl-advanced-filter-max-edits"
           :model-value="props.filter.maxEdits"
           :max="5"
           breakpoints
@@ -379,6 +401,7 @@ const stringMatchesError = computed(() => {
           @update:model-value="(v) => updateFilterProp('maxEdits', v)"
         />
         <PlToggleSwitch
+          data-testid="pl-advanced-filter-substitutions-only"
           :model-value="props.filter.substitutionsOnly"
           label="Substitutions only"
           @update:model-value="(v) => updateFilterProp('substitutionsOnly', v)"
@@ -390,6 +413,7 @@ const stringMatchesError = computed(() => {
     <div :class="$style.bottom">
       <PlAutocomplete
         v-if="props.filter.type === 'patternEquals' || props.filter.type === 'patternNotEquals'"
+        data-testid="pl-advanced-filter-value"
         :model-value="props.filter.value"
         :options-search="
           (str, type) => getSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)
@@ -400,6 +424,7 @@ const stringMatchesError = computed(() => {
       />
       <PlAutocompleteMulti
         v-if="props.filter.type === 'inSet' || props.filter.type === 'notInSet'"
+        data-testid="pl-advanced-filter-value"
         :model-value="props.filter.value"
         :options-search="
           (str, type) => getMultiSuggestOptionsFn(columnAsSourceAndFixedAxes.source, type, str)
@@ -410,12 +435,14 @@ const stringMatchesError = computed(() => {
       />
       <PlNumberField
         v-if="isNumericFilter(props.filter)"
+        data-testid="pl-advanced-filter-value"
         :model-value="props.filter.x"
         group-position="bottom"
         @update:model-value="(v) => updateFilterProp('x', v)"
       />
       <PlNumberField
         v-if="isPositionFilter(props.filter)"
+        data-testid="pl-advanced-filter-value"
         :model-value="props.filter.n"
         group-position="bottom"
         @update:model-value="(v) => updateFilterProp('n', v)"
@@ -425,6 +452,7 @@ const stringMatchesError = computed(() => {
           props.filter.type === 'patternContainSubsequence' ||
           props.filter.type === 'patternNotContainSubsequence'
         "
+        data-testid="pl-advanced-filter-value"
         :model-value="props.filter.value"
         placeholder="Substring"
         group-position="bottom"
@@ -432,6 +460,7 @@ const stringMatchesError = computed(() => {
       />
       <PlTextField
         v-if="props.filter.type === 'patternMatchesRegularExpression'"
+        data-testid="pl-advanced-filter-value"
         :model-value="props.filter.value"
         :error="stringMatchesError ? 'Regular expression is not valid' : undefined"
         placeholder="Regular expression"
@@ -440,6 +469,7 @@ const stringMatchesError = computed(() => {
       />
       <PlDropdown
         v-if="props.filter.type === 'patternFuzzyContainSubsequence'"
+        data-testid="pl-advanced-filter-wildcard"
         :model-value="props.filter.wildcard"
         clearable
         placeholder="Wildcard value"

package/src/components/PlAdvancedFilter/OperandButton.vue

@@ -10,10 +10,11 @@ const props = defineProps<{
 const OPTIONS: Operand[] = ["and", "or"];
 </script>
 <template>
-  <div v-bind="$attrs" :class="$style.block">
+  <div data-testid="pl-advanced-filter-operands" v-bind="$attrs" :class="$style.block">
     <div
       v-for="op in OPTIONS"
       :key="op"
+      data-testid="pl-advanced-filter-operand"
       :class="[$style.operand, { [$style.active]: op === props.active && !props.disabled }]"
       @click="!props.disabled && props.onSelect(op)"
     >

package/src/components/PlAdvancedFilter/PlAdvancedFilter.vue

@@ -228,9 +228,10 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
 }
 </script>
 <template>
-  <div>
+  <div data-testid="pl-advanced-filter">
     <PlElementList
       v-model:items="rootFilters"
+      data-testid="pl-advanced-filter-groups"
       :get-item-key="(filter) => filter.id"
       :item-class="$style.filterGroup"
       :item-class-content="$style.filterGroupContent"
@@ -252,6 +253,7 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
       </template>
       <template #item-content="{ item, index }">
         <div
+          data-testid="pl-advanced-filter-group"
           :class="[$style.groupContent, { [$style.suppressedLabel]: item.isSuppressed }]"
           dropzone="true"
           @drop="(event) => handleDropToExistingGroup(index, event)"
@@ -259,6 +261,7 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
         >
           <PlCheckbox
             :model-value="item.type === 'not'"
+            data-testid="pl-advanced-filter-filter-out"
             :class="$style.notCheckbox"
             @update:model-value="inverseRootNode(index)"
           >
@@ -278,11 +281,16 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
               @change-operand="(v) => changeGroupOperand(index, v)"
             />
           </template>
-          <div v-if="props.enableDnd" :class="$style.dropzone">
+          <div
+            v-if="props.enableDnd"
+            data-testid="pl-advanced-filter-dropzone"
+            :class="$style.dropzone"
+          >
             <div>Drop dimensions here</div>
           </div>
           <PlBtnSecondary
             v-else-if="!props.isCompletedGroup(item, index)"
+            data-testid="pl-advanced-filter-add-filter"
             icon="add"
             @click="addColumnToGroup(index, firstColumnId)"
           >
@@ -293,6 +301,7 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
       <template #item-after="{ index }">
         <OperandButton
           v-if="props.enableAddGroupButton || index < getRootGroups().length - 1"
+          data-testid="pl-advanced-filter-group-operands"
           :class="$style.buttonWrapper"
           :active="props.filters.type"
           :disabled="index === getRootGroups().length - 1"
@@ -304,6 +313,7 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
     <!-- Last group - always empty, just for adding new groups -->
     <PlElementList
       v-if="props.enableAddGroupButton"
+      data-testid="pl-advanced-filter-new-group"
       :items="emptyGroup"
       :get-item-key="(group) => group.id"
       :item-class="$style.filterGroup"
@@ -324,11 +334,17 @@ function validateFilter<T extends CommonFilter>(item: T): EditableFilter {
         >
       </template>
       <template #item-content>
-        <div v-if="enableDnd" :class="$style.dropzone">
+        <div v-if="enableDnd" data-testid="pl-advanced-filter-dropzone" :class="$style.dropzone">
           <div>Drop dimensions here</div>
         </div>
         <slot v-else name="add-group-buttons">
-          <PlBtnSecondary icon="add" @click="addGroup(firstColumnId)"> Add filter </PlBtnSecondary>
+          <PlBtnSecondary
+            data-testid="pl-advanced-filter-add-group"
+            icon="add"
+            @click="addGroup(firstColumnId)"
+          >
+            Add filter
+          </PlBtnSecondary>
         </slot>
       </template>
     </PlElementList>

package/src/components/PlAgCellFile/PlAgCellFile.vue

@@ -47,8 +47,9 @@ const currentProgress = computed(() => {
 </script>
 
 <template>
-  <div style="height: 100%">
+  <div data-testid="pl-ag-cell-file" style="height: 100%">
     <PlFileInput
+      data-testid="pl-ag-cell-file-input"
       show-filename-only
       clearable
       cell-style

package/src/components/PlAgCellProgress/PlAgCellProgress.vue

@@ -7,5 +7,5 @@ const props = defineProps<{ params: ICellRendererParams & PlProgressCellProps }>
 </script>
 
 <template>
-  <PlProgressCell v-bind="props.params" />
+  <PlProgressCell data-testid="pl-ag-cell-progress" v-bind="props.params" />
 </template>

package/src/components/PlAgCellStatusTag/PlAgCellStatusTag.vue

@@ -7,8 +7,8 @@ defineProps<{ params?: ICellRendererParams & { type: PlStatusTagType } }>();
 </script>
 
 <template>
-  <div class="pl-ag-cell-status-tag d-flex align-center">
-    <PlStatusTag :type="params?.type" />
+  <div data-testid="pl-ag-cell-status-tag" class="pl-ag-cell-status-tag d-flex align-center">
+    <PlStatusTag data-testid="pl-ag-cell-status-tag-tag" :type="params?.type" />
   </div>
 </template>
 

package/src/components/PlAgChartHistogramCell/PlAgChartHistogramCell.vue

@@ -28,9 +28,19 @@ const settings = computed<PlChartHistogramSettings | undefined>(() => {
 </script>
 
 <template>
-  <div ref="root" class="pl-ag-chart-histogram-cell">
-    <PlChartHistogram v-if="settings" :settings="settings" />
-    <div v-else class="pl-ag-chart-histogram-cell__not-ready">Not ready</div>
+  <div ref="root" data-testid="pl-ag-chart-histogram-cell" class="pl-ag-chart-histogram-cell">
+    <PlChartHistogram
+      v-if="settings"
+      data-testid="pl-ag-chart-histogram-cell-chart"
+      :settings="settings"
+    />
+    <div
+      v-else
+      data-testid="pl-ag-chart-histogram-cell-not-ready"
+      class="pl-ag-chart-histogram-cell__not-ready"
+    >
+      Not ready
+    </div>
   </div>
 </template>
 

package/src/components/PlAgChartStackedBarCell/PlAgChartStackedBarCell.vue

@@ -12,9 +12,19 @@ const settings = computed(() => props.params.value || undefined);
 </script>
 
 <template>
-  <div class="pl-ag-chart-stacked-bar-cell">
-    <PlChartStackedBarCompact v-if="settings" :settings="settings" />
-    <div v-else class="pl-ag-chart-stacked-bar-cell__not-ready">Not ready</div>
+  <div data-testid="pl-ag-chart-stacked-bar-cell" class="pl-ag-chart-stacked-bar-cell">
+    <PlChartStackedBarCompact
+      v-if="settings"
+      data-testid="pl-ag-chart-stacked-bar-cell-chart"
+      :settings="settings"
+    />
+    <div
+      v-else
+      data-testid="pl-ag-chart-stacked-bar-cell-not-ready"
+      class="pl-ag-chart-stacked-bar-cell__not-ready"
+    >
+      Not ready
+    </div>
   </div>
 </template>
 

package/src/components/PlAgColumnHeader/PlAgColumnHeader.vue

@@ -63,24 +63,42 @@ function showMenu() {
 </script>
 
 <template>
-  <div class="pl-ag-column-header d-flex align-center gap-6" @click="onSortRequested">
-    <div class="pl-ag-column-header__title d-flex align-center gap-6 flex-grow-1">
-      <PlMaskIcon16 :name="icon" class="pl-ag-column-header__type-icon" />
+  <div
+    data-testid="pl-ag-column-header"
+    class="pl-ag-column-header d-flex align-center gap-6"
+    @click="onSortRequested"
+  >
+    <div
+      data-testid="pl-ag-column-header-title"
+      class="pl-ag-column-header__title d-flex align-center gap-6 flex-grow-1"
+    >
+      <PlMaskIcon16
+        data-testid="pl-ag-column-header-type-icon"
+        :name="icon"
+        class="pl-ag-column-header__type-icon"
+      />
       <PlTooltip>
         <template v-if="params.tooltip" #tooltip>{{ params.tooltip }}</template>
-        <span>{{ params.displayName }}</span>
+        <span data-testid="pl-ag-column-header-name">{{ params.displayName }}</span>
       </PlTooltip>
-      <PlTooltip v-if="params.info" max-width="500px" position="bottom" :close-delay="10000000000">
+      <PlTooltip
+        v-if="params.info"
+        data-testid="pl-ag-column-header-info"
+        max-width="500px"
+        position="bottom"
+        :close-delay="10000000000"
+      >
         <template #tooltip>
           <span style="white-space: pre-wrap">{{ params.info }}</span>
         </template>
         <PlMaskIcon16 name="info" />
       </PlTooltip>
-      <PlMaskIcon16 v-if="sortIcon" :name="sortIcon" />
+      <PlMaskIcon16 v-if="sortIcon" data-testid="pl-ag-column-header-sort" :name="sortIcon" />
     </div>
     <div
       v-if="params.enableMenu"
       ref="menuActivatorBtn"
+      data-testid="pl-ag-column-header-menu"
       class="pl-ag-column-header__menu-icon"
       @click.stop="showMenu"
     >

package/src/components/PlAgCsvExporter/PlAgCsvExporter.vue

@@ -34,7 +34,12 @@ const teleportTarget = usePlBlockPageTitleTeleportTarget("PlAgCsvExporter");
 
 <template>
   <Teleport v-if="teleportTarget && csvExportAvailable" :to="teleportTarget">
-    <PlBtnGhost :loading="exporting" icon="export" @click.stop="initiateExport">
+    <PlBtnGhost
+      data-testid="pl-ag-csv-exporter"
+      :loading="exporting"
+      icon="export"
+      @click.stop="initiateExport"
+    >
       Export
     </PlBtnGhost>
   </Teleport>

package/src/components/PlAgDataTable/PlAgDataTableSheets.vue

@@ -79,12 +79,17 @@ function onSheetChanged(i: number, newValue: string | number): void {
 </script>
 
 <template>
-  <div v-if="$slots['before'] || sheets.length > 0 || $slots['after']" :class="$style.container">
+  <div
+    v-if="$slots['before'] || sheets.length > 0 || $slots['after']"
+    data-testid="pl-ag-data-table-sheets"
+    :class="$style.container"
+  >
     <slot name="before" />
     <template v-for="(sheet, i) in sheets" :key="i">
       <!-- For some reason state[i] is undefined when the sheet initially loads, so v-if to suppress the error -->
       <PlDropdownLine
         v-if="state[i]"
+        data-testid="pl-ag-data-table-sheets-dropdown"
         :model-value="state[i].value"
         :options="sheet.options"
         :prefix="sheet.prefix"

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -610,7 +610,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div :class="$style.container">
+  <div data-testid="pl-ag-data-table" :class="$style.container">
     <PlAgGridColumnManager v-if="gridApi && !disableColumnsPanel" :api="gridApi" />
     <PlTableFiltersV2
       v-if="!disableFiltersPanel"
@@ -640,6 +640,7 @@ watchEffect(() => {
     <PlTableFastSearch v-model="searchString" />
     <AgGridVue
       :key="reloadKey"
+      data-testid="pl-ag-data-table-grid"
       :theme="AgGridTheme"
       :class="$style.grid"
       :grid-options="gridOptions"

package/src/components/PlAgDataTable/PlAgOverlayLoading.vue

@@ -29,13 +29,20 @@ function normalizePlaceholderText(
 </script>
 
 <template>
-  <div :class="style.container">
-    <div v-if="params.variant === 'not-ready'" :class="style.notReadyWrapper">
+  <div data-testid="pl-ag-data-table-loading" :class="style.container">
+    <div
+      v-if="params.variant === 'not-ready'"
+      data-testid="pl-ag-data-table-not-ready"
+      :class="style.notReadyWrapper"
+    >
       <div :class="style.iconCatInBag" />
-      <h3 :class="style.text">{{ params.notReadyText || "Data is not computed" }}</h3>
+      <h3 data-testid="pl-ag-data-table-not-ready-text" :class="style.text">
+        {{ params.notReadyText || "Data is not computed" }}
+      </h3>
     </div>
     <PlPlaceholder
       v-else
+      data-testid="pl-ag-data-table-loading-placeholder"
       v-bind="
         normalizePlaceholderText(
           {

package/src/components/PlAgDataTable/PlAgOverlayNoRows.vue

@@ -16,9 +16,11 @@ defineExpose({
 </script>
 
 <template>
-  <div class="grid-overlay-container">
+  <div data-testid="pl-ag-data-table-no-rows" class="grid-overlay-container">
     <div class="grid-icon-sad-cat" />
-    <span class="text-subtitle-m">{{ params.text || "Empty" }}</span>
+    <span data-testid="pl-ag-data-table-no-rows-text" class="text-subtitle-m">{{
+      params.text || "Empty"
+    }}</span>
   </div>
 </template>
 

package/src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue

@@ -69,14 +69,26 @@ const toggleAllFiltered = () => {
 
 <template>
   <Teleport v-if="teleportTarget" :to="teleportTarget">
-    <PlBtnGhost icon="columns" @click.stop="slideModal = !slideModal"> Columns </PlBtnGhost>
+    <PlBtnGhost
+      data-testid="pl-ag-grid-column-manager"
+      icon="columns"
+      @click.stop="slideModal = !slideModal"
+    >
+      Columns
+    </PlBtnGhost>
   </Teleport>
 
-  <PlSlideModal v-model="slideModal" :width="width" close-on-outside-click>
+  <PlSlideModal
+    v-model="slideModal"
+    data-testid="pl-ag-grid-column-manager-panel"
+    :width="width"
+    close-on-outside-click
+  >
     <template #title>Manage Columns</template>
-    <div :class="$style.searchRow">
-      <PlSearchField v-model="query" clearable />
+    <div data-testid="pl-ag-grid-column-manager-search-row" :class="$style.searchRow">
+      <PlSearchField v-model="query" data-testid="pl-ag-grid-column-manager-search" clearable />
       <PlBtnSecondary
+        data-testid="pl-ag-grid-column-manager-toggle-all"
         :class="$style.toggleAllBtn"
         :disabled="toggleableFilteredItems.length === 0"
         @click.stop="toggleAllFiltered"
@@ -86,6 +98,7 @@ const toggleAllFiltered = () => {
       </PlBtnSecondary>
     </div>
     <PlElementList
+      data-testid="pl-ag-grid-column-manager-list"
       :items="filteredItems"
       :get-item-key="(item) => item.id"
       :is-draggable="(item) => !item.column.getColDef().lockPosition"
@@ -113,7 +126,7 @@ const toggleAllFiltered = () => {
       disable-removing
     >
       <template #item-title="{ item }">
-        <span>
+        <span data-testid="pl-ag-grid-column-manager-item">
           <span
             v-for="(segment, i) of segments.get(item.label)"
             :key="i"

package/src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue

@@ -34,6 +34,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div
+    data-testid="pl-ag-row-num-checkbox"
     :class="[
       $styles.container,
       { [$styles['allowed-selection']]: allowedSelection },
@@ -42,10 +43,13 @@ onBeforeUnmount(() => {
       'align-center',
     ]"
   >
-    <div v-if="!isChecked" :class="[$styles.text]">{{ params.value }}</div>
+    <div v-if="!isChecked" data-testid="pl-ag-row-num-checkbox-value" :class="[$styles.text]">
+      {{ params.value }}
+    </div>
     <PlCheckbox
       v-if="forceShowCheckbox"
       v-model="isChecked"
+      data-testid="pl-ag-row-num-checkbox-checkbox"
       :class="[$styles.checkbox, isChecked && $styles.checked]"
       @update:modelValue="setSelection"
     />

package/src/components/PlAgRowNumHeader.vue

@@ -58,6 +58,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div
+    data-testid="pl-ag-row-num-header"
     style="
       position: absolute;
       inset: 0;
@@ -68,11 +69,12 @@ onBeforeUnmount(() => {
   >
     <PlCheckbox
       v-if="isSelectable"
+      data-testid="pl-ag-row-num-header-checkbox"
       :model-value="someRowsSelected"
       :indeterminate="someRowsSelected && !allRowsSelected"
       @update:model-value="toggleSelectAll"
     />
-    <span v-else>
+    <span v-else data-testid="pl-ag-row-num-header-label">
       {{ params.displayName }}
     </span>
   </div>

package/src/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue

@@ -54,11 +54,12 @@ function triggerRowDoubleClick() {
 }
 </script>
 <template>
-  <div class="pl-ag-grid-open-cell d-flex">
-    <div class="pl-ag-grid-open-cell__value">
+  <div data-testid="pl-ag-text-and-button-cell" class="pl-ag-grid-open-cell d-flex">
+    <div data-testid="pl-ag-text-and-button-cell-value" class="pl-ag-grid-open-cell__value">
       {{ params.value }}
     </div>
     <div
+      data-testid="pl-ag-text-and-button-cell-button"
       class="pl-ag-grid-open-cell__activator text-caps11 align-center"
       @click.stop="triggerRowDoubleClick"
     >

package/src/components/PlAnnotations/components/AnnotationsSidebar.vue

@@ -66,9 +66,10 @@ function handleAddStep() {
 </script>
 
 <template>
-  <PlSidebarItem>
+  <PlSidebarItem data-testid="pl-annotations-schema">
     <template #header-content>
       <PlEditableTitle
+        data-testid="pl-annotations-schema-title"
         :model-value="props.annotation.title"
         :class="{ [$commonStyle.flashing]: props.annotation.title.length === 0 }"
         :max-length="40"
@@ -80,11 +81,15 @@ function handleAddStep() {
       />
     </template>
     <template v-if="props.annotation" #body-content>
-      <div :class="[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]">
-        <span :class="$style.tip">
+      <div
+        data-testid="pl-annotations-schema-body"
+        :class="[$style.root, { [$commonStyle.disabled]: props.annotation.title.length === 0 }]"
+      >
+        <span data-testid="pl-annotations-schema-tip" :class="$style.tip">
           Above annotations override the ones below. Rearrange them by dragging.
         </span>
         <PlElementList
+          data-testid="pl-annotations-steps"
           :items="props.annotation.steps"
           :get-item-key="(item) => item.id"
           :is-active="(item) => item.id === props.selectedStepId"
@@ -98,9 +103,12 @@ function handleAddStep() {
           </template>
         </PlElementList>
 
-        <PlBtnSecondary icon="add" @click="handleAddStep"> Add label </PlBtnSecondary>
+        <PlBtnSecondary data-testid="pl-annotations-add-label" icon="add" @click="handleAddStep">
+          Add label
+        </PlBtnSecondary>
 
         <PlTextField
+          data-testid="pl-annotations-default-value"
           :class="[
             $style.defaultValue,
             { [$style.emptyDefaultValue]: isEmpty(props.annotation.defaultValue) },
@@ -117,6 +125,7 @@ function handleAddStep() {
     </template>
     <template #footer-content>
       <PlBtnGhost
+        data-testid="pl-annotations-delete-schema"
         icon="delete-bin"
         reverse
         :disabled="props.annotation.steps.length === 0"