@milaboratories/uikit 2.15.37 → 2.15.38

package/src/components/PlElementList/PlElementListItem.vue

@@ -43,11 +43,12 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div @click="(event) => emit('click', event)">
-    <div v-if="hasBeforeSlot" :class="beforeClass">
+  <div data-testid="pl-element-list-item" @click="(event) => emit('click', event)">
+    <div v-if="hasBeforeSlot" data-testid="pl-element-list-item-before" :class="beforeClass">
       <slot name="before" :item="props.item" :index="props.index" />
     </div>
     <div
+      data-testid="pl-element-list-item-card"
       :class="[
         $style.root,
         $attrs.class,
@@ -60,6 +61,7 @@ const emit = defineEmits<{
       ]"
     >
       <div
+        data-testid="pl-element-list-item-head"
         :class="[
           $style.head,
           titleClass,
@@ -72,6 +74,7 @@ const emit = defineEmits<{
         <div v-if="props.showDragHandle || isExpandable" :class="$style.headIcons">
           <div
             v-if="props.showDragHandle"
+            data-testid="pl-element-list-item-drag"
             :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]"
             :data-draggable="props.isDraggable"
           >
@@ -79,18 +82,23 @@ const emit = defineEmits<{
           </div>
           <PlIcon16
             v-if="isExpandable"
+            data-testid="pl-element-list-item-expand"
             :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]"
             name="chevron-down"
           />
         </div>
 
-        <div :class="$style.title">
+        <div data-testid="pl-element-list-item-title" :class="$style.title">
           <slot name="title" :item="props.item" :index="props.index" />
         </div>
 
-        <div :class="[$style.actions, $style.showOnHover]">
+        <div
+          data-testid="pl-element-list-item-actions"
+          :class="[$style.actions, $style.showOnHover]"
+        >
           <div
             v-if="props.isToggable"
+            data-testid="pl-element-list-item-toggle"
             :class="[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]"
             @click.stop="emit('toggle', props.item, props.index)"
           >
@@ -98,6 +106,7 @@ const emit = defineEmits<{
           </div>
           <div
             v-if="props.isPinnable"
+            data-testid="pl-element-list-item-pin"
             :class="[
               $style.action,
               $style.clickable,
@@ -112,6 +121,7 @@ const emit = defineEmits<{
           </div>
           <div
             v-if="props.isRemovable"
+            data-testid="pl-element-list-item-remove"
             :class="[$style.action, $style.clickable]"
             @click.stop="emit('remove', props.item, props.index)"
           >
@@ -121,12 +131,13 @@ const emit = defineEmits<{
       </div>
       <div
         v-if="hasContentSlot && props.isExpanded"
+        data-testid="pl-element-list-item-content"
         :class="[$style.body, contentClass, { [$style.disabled]: props.isToggled }]"
       >
         <slot name="content" :item="props.item" :index="props.index" />
       </div>
     </div>
-    <div v-if="hasAfterSlot" :class="afterClass">
+    <div v-if="hasAfterSlot" data-testid="pl-element-list-item-after" :class="afterClass">
       <slot name="after" :item="props.item" :index="props.index" />
     </div>
   </div>

package/src/components/PlErrorAlert/PlErrorAlert.vue

@@ -32,16 +32,18 @@ function onCopy() {
 </script>
 
 <template>
-  <div :style="{ maxHeight: props.maxHeight }" :class="$style.root">
-    <PlClipboard :class="$style.copy" @copy="onCopy" />
+  <div data-testid="pl-error-alert" :style="{ maxHeight: props.maxHeight }" :class="$style.root">
+    <PlClipboard data-testid="pl-error-alert-copy" :class="$style.copy" @copy="onCopy" />
     <slot name="title">
-      <div :class="$style.title">
-        <PlMaskIcon16 :class="$style.titleIcon" name="warning" />
-        <div :class="$style.titleText">{{ props.title }}</div>
+      <div data-testid="pl-error-alert-title" :class="$style.title">
+        <PlMaskIcon16 data-testid="pl-error-alert-icon" :class="$style.titleIcon" name="warning" />
+        <div data-testid="pl-error-alert-title-text" :class="$style.titleText">
+          {{ props.title }}
+        </div>
       </div>
     </slot>
     <slot name="message">
-      <div :class="$style.message">
+      <div data-testid="pl-error-alert-message" :class="$style.message">
         {{ props.message }}
       </div>
     </slot>

package/src/components/PlErrorBoundary/PlErrorBoundary.vue

@@ -58,5 +58,11 @@ defineExpose({ error, reset });
 
 <template>
   <slot />
-  <PlErrorAlert v-if="error" ref="errorAlert" :message="message" :title="data?.title" />
+  <PlErrorAlert
+    v-if="error"
+    ref="errorAlert"
+    data-testid="pl-error-boundary-alert"
+    :message="message"
+    :title="data?.title"
+  />
 </template>

package/src/components/PlFileDialog/Local.vue

@@ -90,12 +90,20 @@ const openNativeDialog = async () => {
 </script>
 
 <template>
-  <div :class="style.local" @drop="onDrop" @dragover.prevent @click="openNativeDialog">
+  <div
+    :class="style.local"
+    data-testid="pl-file-dialog-local"
+    @drop="onDrop"
+    @dragover.prevent
+    @click="openNativeDialog"
+  >
     <PlIcon24 name="cloud-upload" />
-    <span>{{ label }}</span>
-    <span v-if="extensions" :class="style.supported"
+    <span data-testid="pl-file-dialog-local-label">{{ label }}</span>
+    <span v-if="extensions" :class="style.supported" data-testid="pl-file-dialog-local-formats"
       >Supported formats: {{ extensions.join(", ") }}</span
     >
-    <span v-if="data.error" class="alert-error">{{ data.error }}</span>
+    <span v-if="data.error" class="alert-error" data-testid="pl-file-dialog-local-error">{{
+      data.error
+    }}</span>
   </div>
 </template>

package/src/components/PlFileDialog/PlFileDialog.vue

@@ -98,6 +98,7 @@ const importFiles = (importedFiles: ImportedFiles) => {
     :no-content-gutters="true"
     :close-on-outside-click="closeOnOutsideClick"
     class="pl-dialog-modal"
+    data-testid="pl-file-dialog"
     :class="style.component"
     :model-value="modelValue"
     width="688px"
@@ -107,15 +108,24 @@ const importFiles = (importedFiles: ImportedFiles) => {
   >
     <template #title>{{ title ?? defaultTitle }}</template>
     <div style="margin: 0 24px">
-      <PlBtnGroup v-model="mode" :options="modeOptions" />
+      <PlBtnGroup v-model="mode" :options="modeOptions" data-testid="pl-file-dialog-mode" />
     </div>
     <Remote v-if="mode === 'remote'" ref="remote" v-bind="$props" :submit="submit" />
     <Local v-if="mode === 'local'" :import-files="importFiles" v-bind="$props" />
     <template v-if="mode === 'remote'" #actions>
-      <PlBtnPrimary style="min-width: 160px" :disabled="!remoteRef?.isReady" @click.stop="submit"
+      <PlBtnPrimary
+        style="min-width: 160px"
+        :disabled="!remoteRef?.isReady"
+        data-testid="pl-file-dialog-import"
+        @click.stop="submit"
         >Import</PlBtnPrimary
       >
-      <PlBtnGhost :justify-center="false" @click.stop="closeModal">Cancel</PlBtnGhost>
+      <PlBtnGhost
+        :justify-center="false"
+        data-testid="pl-file-dialog-cancel"
+        @click.stop="closeModal"
+        >Cancel</PlBtnGhost
+      >
     </template>
   </PlDialogModal>
 </template>

package/src/components/PlFileDialog/Remote.vue

@@ -278,52 +278,80 @@ const lsContainerRef = ref<HTMLElement | undefined>();
 </script>
 
 <template>
-  <div :class="style.remote" @click.stop="deselectAll">
+  <div :class="style.remote" data-testid="pl-file-dialog-remote" @click.stop="deselectAll">
     <div :class="style.search">
       <div>
         <PlDropdown
           v-model="data.storageEntry"
           label="Select storage"
           :options="data.storageOptions"
+          data-testid="pl-file-dialog-storage"
         />
       </div>
       <div>
-        <PlSearchField v-model="data.search" label="Search in folder" clearable />
+        <PlSearchField
+          v-model="data.search"
+          label="Search in folder"
+          clearable
+          data-testid="pl-file-dialog-search"
+        />
       </div>
     </div>
-    <div :class="style['ls-container']" ref="lsContainerRef">
+    <div :class="style['ls-container']" ref="lsContainerRef" data-testid="pl-file-dialog-browser">
       <div :class="style['ls-head']">
-        <div :class="style['breadcrumbs']">
+        <div :class="style['breadcrumbs']" data-testid="pl-file-dialog-breadcrumbs">
           <template v-for="(s, i) in breadcrumbs" :key="i">
-            <div :title="s.path" @click="setDirPath(s.path)">{{ s.name }}</div>
+            <div
+              :title="s.path"
+              data-testid="pl-file-dialog-breadcrumb"
+              @click="setDirPath(s.path)"
+            >
+              {{ s.name }}
+            </div>
             <PlIcon16 v-if="s.index !== breadcrumbs.length - 1" name="chevron-right" />
           </template>
         </div>
         <div :class="style.selected">
-          <span>Selected: {{ selectedFiles.length }}</span>
+          <span data-testid="pl-file-dialog-selected-count"
+            >Selected: {{ selectedFiles.length }}</span
+          >
           <Shortcuts :container="lsContainerRef" />
         </div>
       </div>
-      <div v-if="data.currentLoadingPath !== undefined" class="ls-loader">
+      <div
+        v-if="data.currentLoadingPath !== undefined"
+        class="ls-loader"
+        data-testid="pl-file-dialog-loading"
+      >
         <i class="mask-24 mask-loading loader-icon" />
       </div>
-      <div v-else-if="!data.storageEntry" :class="style['ls-empty']">
+      <div
+        v-else-if="!data.storageEntry"
+        :class="style['ls-empty']"
+        data-testid="pl-file-dialog-empty"
+      >
         <div :class="style.cat" />
         <div :class="style.message">Select storage to preview</div>
       </div>
-      <div v-else-if="data.error" :class="style['ls-error']">
+      <div v-else-if="data.error" :class="style['ls-error']" data-testid="pl-file-dialog-error">
         <div :class="style.cat" />
         <div :class="style.message">{{ data.error }}</div>
       </div>
-      <div v-else :class="style['ls-body']">
+      <div v-else :class="style['ls-body']" data-testid="pl-file-dialog-items">
         <template v-for="file in visibleItems" :key="file.id">
-          <div v-if="file.isDir" :class="style.isDir" @click="setDirPath(file.path)">
+          <div
+            v-if="file.isDir"
+            :class="style.isDir"
+            data-testid="pl-file-dialog-dir"
+            @click="setDirPath(file.path)"
+          >
             <PlIcon16 name="chevron-right" />
             <span v-text-overflown :title="file.name">{{ file.name }}</span>
           </div>
           <div
             v-else
             :class="{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }"
+            data-testid="pl-file-dialog-file"
             @click.stop="(ev) => selectFile(ev, file)"
           >
             <PlMaskIcon16 name="box" :class="style.isFile" />

package/src/components/PlFileDialog/Shortcuts.vue

@@ -7,7 +7,13 @@ defineProps<{
 </script>
 
 <template>
-  <PlTooltip class="info" position="bottom" max-width="420px" :container="container">
+  <PlTooltip
+    class="info"
+    position="bottom"
+    max-width="420px"
+    :container="container"
+    data-testid="pl-file-dialog-shortcuts"
+  >
     <template #tooltip>
       <span :class="$style.title">Shortcuts</span>
 

package/src/components/PlFileInput/PlFileInput.vue

@@ -174,52 +174,77 @@ if (!props.cellStyle) {
   <div
     :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }"
     class="pl-file-input__envelope"
+    data-testid="pl-file-input"
   >
     <div
       ref="rootRef"
       :class="{ dashed, error: hasErrors }"
       class="pl-file-input"
+      data-testid="pl-file-input-control"
       tabindex="0"
       @keyup.enter="openFileDialog"
       @click.stop="openFileDialog"
     >
-      <div :style="progressStyle" class="pl-file-input__progress" />
-      <label v-if="!cellStyle && label" ref="label">
-        <PlSvg v-if="required" :uri="SvgRequired" />
+      <div
+        :style="progressStyle"
+        class="pl-file-input__progress"
+        data-testid="pl-file-input-progress"
+      />
+      <label v-if="!cellStyle && label" ref="label" data-testid="pl-file-input-label">
+        <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-file-input-required" />
         <span>{{ label }}</span>
-        <PlTooltip v-if="slots.tooltip || filePath" class="info" position="top">
+        <PlTooltip
+          v-if="slots.tooltip || filePath"
+          class="info"
+          position="top"
+          data-testid="pl-file-input-tooltip"
+        >
           <template #tooltip>
             <slot v-if="slots.tooltip" name="tooltip" />
             <template v-else>{{ filePath }}</template>
           </template>
         </PlTooltip>
       </label>
-      <PlMaskIcon24 v-if="hasErrors" name="restart" />
-      <PlMaskIcon24 v-else-if="isUploading" name="cloud-upload" />
-      <PlMaskIcon24 v-else-if="isUploaded" name="success" />
-      <PlMaskIcon24 v-else name="paper-clip" />
-      <div :data-placeholder="placeholder ?? 'Choose file'" class="pl-file-input__filename">
+      <PlMaskIcon24 v-if="hasErrors" name="restart" data-testid="pl-file-input-status-icon" />
+      <PlMaskIcon24
+        v-else-if="isUploading"
+        name="cloud-upload"
+        data-testid="pl-file-input-status-icon"
+      />
+      <PlMaskIcon24 v-else-if="isUploaded" name="success" data-testid="pl-file-input-status-icon" />
+      <PlMaskIcon24 v-else name="paper-clip" data-testid="pl-file-input-status-icon" />
+      <div
+        :data-placeholder="placeholder ?? 'Choose file'"
+        class="pl-file-input__filename"
+        data-testid="pl-file-input-filename"
+      >
         {{ fileName }}
       </div>
-      <div v-if="uploadStats" class="pl-file-input__stats">{{ uploadStats }}</div>
+      <div v-if="uploadStats" class="pl-file-input__stats" data-testid="pl-file-input-stats">
+        {{ uploadStats }}
+      </div>
       <PlMaskIcon24
         v-if="modelValue"
         class="pl-file-input__clear"
+        data-testid="pl-file-input-clear"
         name="close"
         @click.stop="clear"
       />
       <DoubleContour class="pl-file-input__contour" />
     </div>
-    <div v-if="hasErrors" class="pl-file-input__error">
+    <div v-if="hasErrors" class="pl-file-input__error" data-testid="pl-file-input-error">
       {{ computedErrorMessage }}
     </div>
-    <div v-else-if="helper" class="pl-file-input__helper">{{ helper }}</div>
+    <div v-else-if="helper" class="pl-file-input__helper" data-testid="pl-file-input-helper">
+      {{ helper }}
+    </div>
+    <!-- Teleported to <body> by PlDialogModal; kept inside so the component has a single root. -->
+    <PlFileDialog
+      v-model="data.fileDialogOpen"
+      :close-on-outside-click="fileDialogCloseOnOutsideClick"
+      :extensions="extensions"
+      :title="fileDialogTitle"
+      @import:files="onImport"
+    />
   </div>
-  <PlFileDialog
-    v-model="data.fileDialogOpen"
-    :close-on-outside-click="fileDialogCloseOnOutsideClick"
-    :extensions="extensions"
-    :title="fileDialogTitle"
-    @import:files="onImport"
-  />
 </template>

package/src/components/PlLoaderCircular/PlLoaderCircular.vue

@@ -9,7 +9,7 @@ withDefaults(
 );
 </script>
 <template>
-  <div class="pl-loader-circular">
+  <div data-testid="pl-loader-circular" class="pl-loader-circular">
     <div
       :style="{
         height: `${size}px`,

package/src/components/PlLoaderLogo.vue

@@ -18,7 +18,12 @@ const backgroundColor = props.backgroundColor ?? "var(--color-div-bw)";
 </script>
 
 <template>
-  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" :class="styles.root">
+  <svg
+    data-testid="pl-loader-logo"
+    viewBox="0 0 64 64"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="styles.root"
+  >
     <path d="m32 3 26 15H6z" />
     <path d="M32 18h26v28H32z" />
     <path d="M32 45.5h26L32 61z" />

package/src/components/PlLogView/PlLogView.vue

@@ -157,28 +157,50 @@ const onContentScroll = (ev: Event) => {
 </script>
 
 <template>
-  <div ref="root" class="pl-log-view" :class="{ 'has-error': computedError }">
-    <label v-if="label">
+  <div
+    ref="root"
+    data-testid="pl-log-view"
+    class="pl-log-view"
+    :class="{ 'has-error': computedError }"
+  >
+    <label v-if="label" data-testid="pl-log-view-label">
       <span>{{ label }}</span>
-      <PlTooltip v-if="slots.tooltip" class="info" position="top">
+      <PlTooltip v-if="slots.tooltip" data-testid="pl-log-view-tooltip" class="info" position="top">
         <template #tooltip>
           <slot name="tooltip" />
         </template>
       </PlTooltip>
     </label>
     <DoubleContour class="pl-log-view__contour" />
-    <div class="pl-log-view__copy">
+    <div data-testid="pl-log-view-actions" class="pl-log-view__copy">
       <PlTooltip :close-delay="800" position="top">
-        <PlMaskIcon24 title="Copy content" :name="iconName" @click="onClickCopy" />
+        <PlMaskIcon24
+          data-testid="pl-log-view-copy"
+          title="Copy content"
+          :name="iconName"
+          @click="onClickCopy"
+        />
         <template #tooltip>{{ copyActive ? "copied" : "copy" }}</template>
       </PlTooltip>
       <PlTooltip v-if="downloadFilename" :close-delay="800" position="top">
-        <PlIcon24 name="download" @click="() => onClickDownload(downloadFilename!)" />
+        <PlIcon24
+          data-testid="pl-log-view-download"
+          name="download"
+          @click="() => onClickDownload(downloadFilename!)"
+        />
         <template #tooltip>download</template>
       </PlTooltip>
     </div>
-    <div v-if="computedError" class="pl-log-view__error">{{ computedError }}</div>
-    <div v-else ref="contentRef" class="pl-log-view__content" @scroll="onContentScroll">
+    <div v-if="computedError" data-testid="pl-log-view-error" class="pl-log-view__error">
+      {{ computedError }}
+    </div>
+    <div
+      v-else
+      ref="contentRef"
+      data-testid="pl-log-view-content"
+      class="pl-log-view__content"
+      @scroll="onContentScroll"
+    >
       {{ computedValue }}
     </div>
   </div>

package/src/components/PlNotificationAlert/PlNotificationAlert.vue

@@ -25,18 +25,30 @@ function closeAlert() {
     v-if="model"
     :class="type"
     :style="{ width: `${width}` }"
+    data-testid="pl-notification-alert"
     class="pl-notification-alert d-flex flex-column gap-16"
   >
     <div class="pl-notification-alert__wrapper d-flex text-s">
-      <div class="pl-notification-alert__content flex-grow-1">
+      <div
+        data-testid="pl-notification-alert-content"
+        class="pl-notification-alert__content flex-grow-1"
+      >
         <slot />
       </div>
       <div v-if="closable" class="pl-notification-alert__close">
-        <PlBtnGhost icon="close" @click.stop="closeAlert" />
+        <PlBtnGhost
+          data-testid="pl-notification-alert-close"
+          icon="close"
+          @click.stop="closeAlert"
+        />
       </div>
     </div>
 
-    <div v-if="!!$slots.actions" class="pl-notification-alert__actions d-flex">
+    <div
+      v-if="!!$slots.actions"
+      data-testid="pl-notification-alert-actions"
+      class="pl-notification-alert__actions d-flex"
+    >
       <slot name="actions" />
     </div>
   </div>

package/src/components/PlNumberField/PlNumberField.vue

@@ -253,14 +253,20 @@ function handleMousedown(ev: MouseEvent) {
     ref="rootRef"
     :class="{ error: !!error, disabled: disabled }"
     class="pl-number-field d-flex-column"
+    data-testid="pl-number-field"
     @keydown="handleKeyDown"
   >
     <div class="pl-number-field__main-wrapper d-flex">
       <DoubleContour class="pl-number-field__contour" :group-position="groupPosition" />
       <div class="pl-number-field__wrapper flex-grow d-flex flex-align-center">
-        <label v-if="label" class="text-description">
+        <label v-if="label" class="text-description" data-testid="pl-number-field-label">
           {{ label }}
-          <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <PlTooltip
+            v-if="slots.tooltip"
+            class="info"
+            position="top"
+            data-testid="pl-number-field-tooltip"
+          >
             <template #tooltip>
               <slot name="tooltip" />
             </template>
@@ -274,6 +280,7 @@ function handleMousedown(ev: MouseEvent) {
           :disabled="disabled"
           :placeholder="placeholder"
           class="text-s flex-grow"
+          data-testid="pl-number-field-input"
           @input="handleInput"
           @focusout="handleBlur"
           @focusin="handleFocus"
@@ -281,6 +288,7 @@ function handleMousedown(ev: MouseEvent) {
         <PlIcon16
           v-if="canShowClearable"
           class="pl-number-field__clearable"
+          data-testid="pl-number-field-clear"
           name="delete-clear"
           @click.stop="clear"
         />
@@ -288,11 +296,13 @@ function handleMousedown(ev: MouseEvent) {
       <div
         v-if="!props.disableSteps"
         class="pl-number-field__icons d-flex-column"
+        data-testid="pl-number-field-steps"
         @mousedown="handleMousedown"
       >
         <div
           :class="{ disabled: isIncrementDisabled }"
           class="pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"
+          data-testid="pl-number-field-increment"
           @click="increment"
         >
           <svg
@@ -313,6 +323,7 @@ function handleMousedown(ev: MouseEvent) {
         <div
           :class="{ disabled: isDecrementDisabled }"
           class="pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"
+          data-testid="pl-number-field-decrement"
           @click="decrement"
         >
           <svg
@@ -332,7 +343,7 @@ function handleMousedown(ev: MouseEvent) {
         </div>
       </div>
     </div>
-    <div v-if="error" class="pl-number-field__error">
+    <div v-if="error" class="pl-number-field__error" data-testid="pl-number-field-error">
       {{ error }}
     </div>
   </div>

package/src/components/PlProgressBar/PlProgressBar.vue

@@ -14,11 +14,19 @@ const readyMsg = computed(() => (props.progress === 100 ? props.completeMessage
 </script>
 
 <template>
-  <div v-if="loading" class="ui-progress-bar">
-    <div class="ui-progress-bar__indicator" :style="{ width: progress + '%' }" />
+  <div v-if="loading" data-testid="pl-progress-bar" class="ui-progress-bar">
+    <div
+      data-testid="pl-progress-bar-indicator"
+      class="ui-progress-bar__indicator"
+      :style="{ width: progress + '%' }"
+    />
     <div class="ui-progress-bar__messages d-flex align-center pl-6 pr-6">
-      <div class="ui-progress-bar__message flex-grow-1">{{ readyMsg }}</div>
-      <div class="ui-progress-bar__percent">{{ progress + "%" }}</div>
+      <div data-testid="pl-progress-bar-message" class="ui-progress-bar__message flex-grow-1">
+        {{ readyMsg }}
+      </div>
+      <div data-testid="pl-progress-bar-percent" class="ui-progress-bar__percent">
+        {{ progress + "%" }}
+      </div>
     </div>
   </div>
 </template>

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -30,6 +30,7 @@ const canShowInfinityLoader = computed(
 
 <template>
   <div
+    data-testid="pl-progress-cell"
     :class="{
       'progress-cell': true,
       'progress-cell__white-bg': canShowWhiteBg,
@@ -37,20 +38,28 @@ const canShowInfinityLoader = computed(
       'not-started': props.stage === 'not_started',
     }"
   >
-    <div v-if="canShowInfinityLoader" class="progress-cell__infinity-loader">
+    <div
+      v-if="canShowInfinityLoader"
+      data-testid="pl-progress-cell-infinity-loader"
+      class="progress-cell__infinity-loader"
+    >
       <div class="progress-cell__infinity-gradient" />
     </div>
     <div
       v-if="!canShowInfinityLoader && !error"
+      data-testid="pl-progress-cell-indicator"
       class="progress-cell__indicator"
       :style="{ width: currentProgress + '%' }"
     />
     <div class="progress-cell__body">
-      <div class="progress-cell__stage text-s">
+      <div data-testid="pl-progress-cell-stage" class="progress-cell__stage text-s">
         {{ error ? getErrorMessage(error) : step }}
       </div>
-      <div class="progress-cell__percentage text-s d-flex align-center justify-end">
-        <PlMaskIcon24 v-if="error" name="error" />
+      <div
+        data-testid="pl-progress-cell-percentage"
+        class="progress-cell__percentage text-s d-flex align-center justify-end"
+      >
+        <PlMaskIcon24 v-if="error" data-testid="pl-progress-cell-error-icon" name="error" />
         <template v-if="!error">
           {{ progressString }}
         </template>