@milaboratories/uikit 2.15.36 → 2.15.38

package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue

@@ -356,11 +356,16 @@ const computedError = computed(() => {
 </script>
 
 <template>
-  <div class="pl-autocomplete-multi__envelope" @click="setFocusOnInput">
+  <div
+    class="pl-autocomplete-multi__envelope"
+    @click="setFocusOnInput"
+    data-testid="pl-autocomplete-multi"
+  >
     <div
       ref="rootRef"
       :tabindex="tabindex"
       class="pl-autocomplete-multi"
+      data-testid="pl-autocomplete-multi-control"
       :class="{ open: data.open, error: Boolean(computedError), disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
@@ -376,13 +381,15 @@ const computedError = computed(() => {
             :placeholder="placeholderRef"
             spellcheck="false"
             autocomplete="chrome-off"
+            data-testid="pl-autocomplete-multi-input"
             @focus="data.open = true"
           />
-          <div v-if="!data.open" class="chips-container">
+          <div v-if="!data.open" class="chips-container" data-testid="pl-autocomplete-multi-chips">
             <PlChip
               v-for="(opt, i) in selectedOptionsRef"
               :key="i"
               closeable
+              data-testid="pl-autocomplete-multi-chip"
               small
               @click.stop="data.open = true"
               @close="unselectOption(opt.value)"
@@ -392,17 +399,30 @@ const computedError = computed(() => {
           </div>
 
           <div class="pl-autocomplete-multi__controls">
-            <PlMaskIcon24 v-if="isOptionsLoading" name="loading" />
+            <PlMaskIcon24
+              v-if="isOptionsLoading"
+              name="loading"
+              data-testid="pl-autocomplete-multi-loading"
+            />
             <slot name="append" />
-            <div class="pl-autocomplete-multi__arrow-wrapper" @click.stop="toggleOpen">
+            <div
+              class="pl-autocomplete-multi__arrow-wrapper"
+              data-testid="pl-autocomplete-multi-arrow"
+              @click.stop="toggleOpen"
+            >
               <div class="arrow-icon arrow-icon-default" />
             </div>
           </div>
         </div>
-        <label v-if="label">
-          <PlSvg v-if="required" :uri="SvgRequired" />
+        <label v-if="label" data-testid="pl-autocomplete-multi-label">
+          <PlSvg v-if="required" :uri="SvgRequired" data-testid="pl-autocomplete-multi-required" />
           <span>{{ label }}</span>
-          <PlTooltip v-if="slots.tooltip" class="info" position="top">
+          <PlTooltip
+            v-if="slots.tooltip"
+            class="info"
+            position="top"
+            data-testid="pl-autocomplete-multi-tooltip"
+          >
             <template #tooltip>
               <slot name="tooltip" />
             </template>
@@ -413,15 +433,20 @@ const computedError = computed(() => {
           ref="overlay"
           :root="rootRef"
           class="pl-autocomplete-multi__options"
+          data-testid="pl-autocomplete-multi-options"
           :gap="5"
           tabindex="-1"
           @focusout="onFocusOut"
         >
-          <div class="pl-autocomplete-multi__open-chips-container">
+          <div
+            class="pl-autocomplete-multi__open-chips-container"
+            data-testid="pl-autocomplete-multi-chips"
+          >
             <PlChip
               v-for="(opt, i) in selectedOptionsRef"
               :key="i"
               closeable
+              data-testid="pl-autocomplete-multi-chip"
               small
               @close="unselectOption(opt.value)"
             >
@@ -437,16 +462,33 @@ const computedError = computed(() => {
             :is-hovered="data.activeOption == index"
             size="medium"
             use-checkbox
+            data-testid="pl-autocomplete-multi-option"
             @click.stop="selectOption(item.value)"
           />
-          <div v-if="!filteredOptionsRef.length && !isOptionsLoading" class="nothing-found">
+          <div
+            v-if="!filteredOptionsRef.length && !isOptionsLoading"
+            class="nothing-found"
+            data-testid="pl-autocomplete-multi-options-empty"
+          >
             {{ emptyOptionsText }}
           </div>
         </DropdownOverlay>
         <DoubleContour class="pl-autocomplete-multi__contour" :group-position="groupPosition" />
       </div>
     </div>
-    <div v-if="computedError" class="pl-autocomplete-multi__error">{{ computedError }}</div>
-    <div v-else-if="helper" class="pl-autocomplete-multi__helper">{{ helper }}</div>
+    <div
+      v-if="computedError"
+      class="pl-autocomplete-multi__error"
+      data-testid="pl-autocomplete-multi-error"
+    >
+      {{ computedError }}
+    </div>
+    <div
+      v-else-if="helper"
+      class="pl-autocomplete-multi__helper"
+      data-testid="pl-autocomplete-multi-helper"
+    >
+      {{ helper }}
+    </div>
   </div>
 </template>

package/src/components/PlBtnAccent/PlBtnAccent.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <BtnBase class="pl-btn-accent" v-bind="props">
+  <BtnBase data-testid="pl-btn-accent" class="pl-btn-accent" v-bind="props">
     <slot />
   </BtnBase>
 </template>

package/src/components/PlBtnDanger/PlBtnDanger.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <BtnBase class="pl-btn-danger" v-bind="props">
+  <BtnBase data-testid="pl-btn-danger" class="pl-btn-danger" v-bind="props">
     <slot />
   </BtnBase>
 </template>

package/src/components/PlBtnGhost/PlBtnGhost.vue

@@ -62,16 +62,17 @@ useRipple(btnRef);
   <button
     ref="btnRef"
     tabindex="0"
+    data-testid="pl-btn-ghost"
     class="pl-btn-ghost"
     :class="{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }"
     v-bind="{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }"
   >
-    <span v-if="slots.default && !round">
+    <span v-if="slots.default && !round" data-testid="pl-btn-ghost-label">
       <slot />
     </span>
     <slot name="icon">
-      <PlMaskIcon24 v-if="loading" name="loading" :size="size" />
-      <PlMaskIcon24 v-else-if="icon" :name="icon" :size="size" />
+      <PlMaskIcon24 v-if="loading" data-testid="pl-btn-ghost-loading" name="loading" :size="size" />
+      <PlMaskIcon24 v-else-if="icon" data-testid="pl-btn-ghost-icon" :name="icon" :size="size" />
     </slot>
     <slot name="append" />
   </button>

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -66,19 +66,25 @@ const normalizedOptions = computed(() =>
 </script>
 
 <template>
-  <div class="pl-btn-group" :class="{ disabled, compact }">
-    <label v-if="label">
+  <div data-testid="pl-btn-group" class="pl-btn-group" :class="{ disabled, compact }">
+    <label v-if="label" data-testid="pl-btn-group-label">
       <span>{{ label }}</span>
-      <PlTooltip v-if="slots.tooltip" class="info" position="top">
+      <PlTooltip
+        v-if="slots.tooltip"
+        data-testid="pl-btn-group-tooltip"
+        class="info"
+        position="top"
+      >
         <template #tooltip>
           <slot name="tooltip" />
         </template>
       </PlTooltip>
     </label>
-    <InnerBorder class="pl-btn-group__container">
+    <InnerBorder data-testid="pl-btn-group-options" class="pl-btn-group__container">
       <div
         v-for="(opt, i) in normalizedOptions"
         :key="i"
+        data-testid="pl-btn-group-option"
         class="pl-btn-group__option text-s"
         :tabindex="modelValue === opt.value || disabled ? undefined : 0"
         :class="{ active: modelValue === opt.value }"
@@ -88,7 +94,11 @@ const normalizedOptions = computed(() =>
         {{ opt.label }}
       </div>
     </InnerBorder>
-    <div v-if="helper" class="pl-btn-group__helper">{{ helper }}</div>
-    <div v-else-if="error" class="pl-btn-group__error">{{ getErrorMessage(error) }}</div>
+    <div v-if="helper" data-testid="pl-btn-group-helper" class="pl-btn-group__helper">
+      {{ helper }}
+    </div>
+    <div v-else-if="error" data-testid="pl-btn-group-error" class="pl-btn-group__error">
+      {{ getErrorMessage(error) }}
+    </div>
   </div>
 </template>

package/src/components/PlBtnLink/PlBtnLink.vue

@@ -36,12 +36,13 @@ const hover = ref(false);
 
 <template>
   <div
+    data-testid="pl-btn-link"
     class="ui-btn-link"
     :class="{ disabled, loading, hover }"
     @mouseover="hover = true"
     @mouseleave="hover = false"
   >
-    <BtnSecondary round :hover="hover" v-bind="props" />
+    <BtnSecondary data-testid="pl-btn-link-button" round :hover="hover" v-bind="props" />
     <slot />
   </div>
 </template>

package/src/components/PlBtnPrimary/PlBtnPrimary.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <BtnBase class="pl-btn-primary" v-bind="props">
+  <BtnBase data-testid="pl-btn-primary" class="pl-btn-primary" v-bind="props">
     <slot />
   </BtnBase>
 </template>

package/src/components/PlBtnSecondary/PlBtnSecondary.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <BtnBase v-bind="props" class="pl-btn-secondary">
+  <BtnBase data-testid="pl-btn-secondary" v-bind="props" class="pl-btn-secondary">
     <slot />
   </BtnBase>
 </template>

package/src/components/PlBtnSplit/PlBtnSplit.vue

@@ -175,12 +175,14 @@ const onFocusOut = (event: FocusEvent) => {
   <div
     ref="root"
     :class="{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }"
+    data-testid="pl-btn-split"
     class="pl-btn-split d-flex"
     @focusout="onFocusOut"
     @keydown="handleKeydown"
   >
     <div
       ref="buttonAction"
+      data-testid="pl-btn-split-action"
       class="pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn"
       tabindex="0"
       @click="emitEnter"
@@ -190,18 +192,26 @@ const onFocusOut = (event: FocusEvent) => {
     </div>
     <div
       ref="menuActivator"
+      data-testid="pl-btn-split-toggle"
       class="pl-btn-split__icon-container d-flex align-center justify-center"
       tabindex="0"
       @click="data.open = !data.open"
     >
-      <PlIcon16 v-if="isLoadingOptions" name="loading" />
+      <PlIcon16 v-if="isLoadingOptions" data-testid="pl-btn-split-loading" name="loading" />
       <PlIcon16 v-else :name="iconName" class="pl-btn-split__icon" />
     </div>
 
     <Teleport v-if="data.open" to="body">
-      <div ref="list" class="pl-dropdown__options" :style="optionsStyle" tabindex="-1">
+      <div
+        ref="list"
+        data-testid="pl-btn-split-menu"
+        class="pl-dropdown__options"
+        :style="optionsStyle"
+        tabindex="-1"
+      >
         <DropdownListItem
           v-for="(item, index) in items"
+          data-testid="pl-btn-split-option"
           :key="index"
           :option="item"
           :is-selected="item.isSelected"

package/src/components/PlChartHistogram/PlChartHistogram.vue

@@ -58,9 +58,15 @@ onMounted(createHistogram);
 </script>
 
 <template>
-  <div :class="$style.component">
-    <div v-if="settings.title && !settings.compact" :class="$style.title">{{ settings.title }}</div>
-    <div ref="chart" />
+  <div data-testid="pl-chart-histogram" :class="$style.component">
+    <div
+      v-if="settings.title && !settings.compact"
+      data-testid="pl-chart-histogram-title"
+      :class="$style.title"
+    >
+      {{ settings.title }}
+    </div>
+    <div ref="chart" data-testid="pl-chart-histogram-chart" />
   </div>
 </template>
 

package/src/components/PlChartHistogram/createGridlines.ts

@@ -25,6 +25,7 @@ export function createGridlines(
   svg
     .append("g")
     .attr("class", "grid") // Add a class for styling
+    .attr("data-testid", "pl-chart-histogram-grid")
     .attr("font-family", "'Manrope', sans-serif") // Doesn't work
     .call(
       makeYGridlines()
@@ -36,6 +37,7 @@ export function createGridlines(
   svg
     .append("g")
     .attr("class", "grid") // Add a class for styling
+    .attr("data-testid", "pl-chart-histogram-grid")
     .attr("font-family", "'Manrope', sans-serif")
     .attr("transform", `translate(0,${height})`) // Position at the bottom of the chart
     .call(

package/src/components/PlChartHistogram/createLabels.ts

@@ -15,6 +15,7 @@ export function createLabels(
   svg
     .append("text")
     .attr("class", "x-axis-label")
+    .attr("data-testid", "pl-chart-histogram-x-axis-label")
     .attr("font-weight", 500)
     .attr("text-anchor", "middle") // Center the text
     .attr("x", width / 2) // Center horizontally
@@ -25,6 +26,7 @@ export function createLabels(
   svg
     .append("text")
     .attr("class", "y-axis-label")
+    .attr("data-testid", "pl-chart-histogram-y-axis-label")
     .attr("font-weight", 500)
     .attr("text-anchor", "middle") // Center the text
     .attr("x", -height / 2) // Center vertically (rotated axis)

package/src/components/PlChartHistogram/createSvgContainer.ts

@@ -13,9 +13,11 @@ export function createSvgContainer(el: HTMLElement, options: ChartOptions) {
 
   const svg = select(el) // Append the SVG element to the body
     .append("svg")
+    .attr("data-testid", "pl-chart-histogram-svg")
     .attr("width", width + margin.left + margin.right) // Set the total width
     .attr("height", height + margin.top + margin.bottom) // Set the total height
     .append("g") // Append a group to handle margins
+    .attr("data-testid", "pl-chart-histogram-plot")
     .attr("transform", `translate(${margin.left},${margin.top})`);
 
   return svg;

package/src/components/PlChartHistogram/drawBins.ts

@@ -9,6 +9,7 @@ export function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, sca
   const tooltip = select("body")
     .append("div")
     .attr("class", "svg-tooltip")
+    .attr("data-testid", "pl-chart-histogram-tooltip")
     .style("position", "absolute")
     .style("visibility", "hidden");
 
@@ -31,6 +32,7 @@ export function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, sca
     .data(bins)
     .enter()
     .append("rect")
+    .attr("data-testid", "pl-chart-histogram-bar")
     .attr("x", (d) => x(d.x0!)) // Position the bar based on the bin start
     .attr("y", (d) => y(d.length)) // Height based on bin count
     .attr("width", (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals

package/src/components/PlChartHistogram/drawThreshold.ts

@@ -9,6 +9,7 @@ export function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {
 
   svg
     .append("line")
+    .attr("data-testid", "pl-chart-histogram-threshold")
     .attr("x1", scales.x(threshold))
     .attr("x2", scales.x(threshold))
     .attr("y1", 0)

package/src/components/PlChartHistogram/histogram.ts

@@ -14,13 +14,18 @@ import { axisBottom, axisLeft } from "d3-axis";
 const gx = (svg: Selection<SVGGElement, unknown, null, undefined>, height: number) => {
   return svg
     .append("g")
+    .attr("data-testid", "pl-chart-histogram-x-axis")
     .style("font-size", "14px")
     .style("font-weight", "500")
     .attr("transform", `translate(0,${height})`);
 };
 
 const gy = (svg: Selection<SVGGElement, unknown, null, undefined>) => {
-  return svg.append("g").style("font-size", "14px").style("font-weight", "500");
+  return svg
+    .append("g")
+    .attr("data-testid", "pl-chart-histogram-y-axis")
+    .style("font-size", "14px")
+    .style("font-weight", "500");
 };
 
 const createYScale = (bins: BinLike[], height: number) => {

package/src/components/PlChartStackedBar/Legends.vue

@@ -34,10 +34,24 @@ const groups = computed(() => {
 </script>
 
 <template>
-  <div :class="$style.component">
-    <div v-for="(group, k) in groups" :key="k" :class="$style.legend">
-      <div v-for="(l, i) in group" :key="i" :class="$style.item">
-        <div :class="$style.chip" :style="{ backgroundColor: l.color.toString() }" />
+  <div data-testid="pl-chart-stacked-bar-legend" :class="$style.component">
+    <div
+      v-for="(group, k) in groups"
+      :key="k"
+      data-testid="pl-chart-stacked-bar-legend-group"
+      :class="$style.legend"
+    >
+      <div
+        v-for="(l, i) in group"
+        :key="i"
+        data-testid="pl-chart-stacked-bar-legend-item"
+        :class="$style.item"
+      >
+        <div
+          data-testid="pl-chart-stacked-bar-legend-chip"
+          :class="$style.chip"
+          :style="{ backgroundColor: l.color.toString() }"
+        />
         {{ l.text }}
       </div>
     </div>

package/src/components/PlChartStackedBar/PlChartStackedBar.vue

@@ -23,8 +23,10 @@ const legends = computed(() =>
 </script>
 
 <template>
-  <div :class="$style.component">
-    <div v-if="settings.title" :class="$style.title">{{ settings.title }}</div>
+  <div data-testid="pl-chart-stacked-bar" :class="$style.component">
+    <div v-if="settings.title" data-testid="pl-chart-stacked-bar-title" :class="$style.title">
+      {{ settings.title }}
+    </div>
     <StackedRow :value="data" />
     <Legends
       v-if="showLegends && legends.length"

package/src/components/PlChartStackedBar/PlChartStackedBarCompact.vue

@@ -13,7 +13,7 @@ const data = computed(() => {
 </script>
 
 <template>
-  <div :class="$style.component">
+  <div data-testid="pl-chart-stacked-bar-compact" :class="$style.component">
     <StackedRowCompact :value="data" />
   </div>
 </template>

package/src/components/PlChartStackedBar/StackedRow.vue

@@ -31,11 +31,12 @@ const trackTransforms = [-40, -50, -50, -50, -80];
 </script>
 
 <template>
-  <div :class="[$style.component]" :style="style">
-    <div :class="$style.track">
+  <div data-testid="pl-chart-stacked-bar-row" :class="[$style.component]" :style="style">
+    <div data-testid="pl-chart-stacked-bar-track" :class="$style.track">
       <div
         v-for="(v, i) in [0, 25, 50, 75, 100]"
         :key="i"
+        data-testid="pl-chart-stacked-bar-tick"
         :style="{
           left: `${v}%`,
           '--transform': `translateX(${trackTransforms[i]}%)`,
@@ -43,11 +44,18 @@ const trackTransforms = [-40, -50, -50, -50, -80];
         :data-content="`${v}%`"
       />
     </div>
-    <div :class="$style.container">
-      <div v-if="!parts.length" :class="$style.notReady">Not ready</div>
+    <div data-testid="pl-chart-stacked-bar-bar" :class="$style.container">
+      <div
+        v-if="!parts.length"
+        data-testid="pl-chart-stacked-bar-not-ready"
+        :class="$style.notReady"
+      >
+        Not ready
+      </div>
       <div
         v-for="(p, i) in parts"
         :key="i"
+        data-testid="pl-chart-stacked-bar-segment"
         :title.prop="p.description ?? p.label"
         :style="{
           width: `${p.fraction}%`,

package/src/components/PlChartStackedBar/StackedRowCompact.vue

@@ -29,12 +29,19 @@ const parts = computed(() => {
 </script>
 
 <template>
-  <div :class="[$style.component]" :style="style">
-    <div :class="$style.container">
-      <div v-if="!parts.length" :class="$style.notReady">Not ready</div>
+  <div data-testid="pl-chart-stacked-bar-compact-row" :class="[$style.component]" :style="style">
+    <div data-testid="pl-chart-stacked-bar-compact-bar" :class="$style.container">
+      <div
+        v-if="!parts.length"
+        data-testid="pl-chart-stacked-bar-compact-not-ready"
+        :class="$style.notReady"
+      >
+        Not ready
+      </div>
       <div
         v-for="(p, i) in parts"
         :key="i"
+        data-testid="pl-chart-stacked-bar-compact-segment"
         :title.prop="p.description ?? p.label"
         :style="{
           width: `${p.fraction}%`,

package/src/components/PlCheckbox/PlCheckbox.vue

@@ -36,9 +36,20 @@ const slots = useSlots();
 </script>
 
 <template>
-  <div v-if="slots['default']" class="pl-checkbox" :class="{ disabled }">
-    <PlCheckboxBase v-bind="props" @update:model-value="$emit('update:modelValue', $event)" />
-    <label @click="$emit('update:modelValue', !$props.modelValue)"><slot /></label>
+  <div v-if="slots['default']" class="pl-checkbox" :class="{ disabled }" data-testid="pl-checkbox">
+    <PlCheckboxBase
+      data-testid="pl-checkbox-input"
+      v-bind="props"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+    <label data-testid="pl-checkbox-label" @click="$emit('update:modelValue', !$props.modelValue)"
+      ><slot
+    /></label>
   </div>
-  <PlCheckboxBase v-else v-bind="props" @update:model-value="$emit('update:modelValue', $event)" />
+  <PlCheckboxBase
+    v-else
+    data-testid="pl-checkbox"
+    v-bind="props"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
 </template>

package/src/components/PlCheckbox/PlCheckboxBase.vue

@@ -14,6 +14,7 @@ const props = defineProps<{
   <div
     tabindex="0"
     class="pl-checkbox-base"
+    data-testid="pl-checkbox-base"
     :class="{
       ...(props.indeterminate ? { indeterminate: true } : { checked: props.modelValue }),
       disabled,

package/src/components/PlCheckboxGroup/PlCheckboxGroup.vue

@@ -53,10 +53,15 @@ const updateModel = (value: M) => {
 </script>
 
 <template>
-  <div class="pl-checkbox-group" :class="{ disabled }">
-    <label v-if="label">
+  <div class="pl-checkbox-group" :class="{ disabled }" data-testid="pl-checkbox-group">
+    <label v-if="label" data-testid="pl-checkbox-group-label">
       <span>{{ label }}</span>
-      <PlTooltip v-if="slots.tooltip" class="info" position="top">
+      <PlTooltip
+        v-if="slots.tooltip"
+        class="info"
+        position="top"
+        data-testid="pl-checkbox-group-tooltip"
+      >
         <template #tooltip>
           <slot name="tooltip" />
         </template>
@@ -68,14 +73,20 @@ const updateModel = (value: M) => {
         value: it.value,
       }))"
       :key="i"
+      data-testid="pl-checkbox-group-option"
     >
       <PlCheckboxBase
         :disabled="disabled"
+        data-testid="pl-checkbox-group-option-input"
         :label="opt.label"
         :model-value="hasValue(opt.value)"
         @update:model-value="() => updateModel(opt.value)"
       />
-      <label @click.stop="() => updateModel(opt.value)">{{ opt.label }}</label>
+      <label
+        data-testid="pl-checkbox-group-option-label"
+        @click.stop="() => updateModel(opt.value)"
+        >{{ opt.label }}</label
+      >
     </div>
   </div>
 </template>

package/src/components/PlChip/PlChip.vue

@@ -21,17 +21,18 @@ onMounted(() => {
 </script>
 
 <template>
-  <PlTooltip position="top" class="pl-chip-tooltip" :delay="500">
+  <PlTooltip data-testid="pl-chip" position="top" class="pl-chip-tooltip" :delay="500">
     <template v-if="canShowTooltip" #tooltip>
       <slot />
     </template>
-    <div ref="chip" class="pl-chip" :class="{ small }">
-      <div class="pl-chip__text">
+    <div ref="chip" data-testid="pl-chip-body" class="pl-chip" :class="{ small }">
+      <div data-testid="pl-chip-text" class="pl-chip__text">
         <slot />
       </div>
       <div
         v-if="closeable"
         tabindex="0"
+        data-testid="pl-chip-close"
         class="pl-chip__close"
         @keydown.enter="$emit('close')"
         @click.stop="$emit('close')"

package/src/components/PlClipboard/PlClipboard.vue

@@ -36,7 +36,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <PlMaskIcon16 :name="iconName" :size="props.size" :class="$style.copy" @click="onCopy" />
+  <PlMaskIcon16
+    data-testid="pl-clipboard"
+    :name="iconName"
+    :size="props.size"
+    :class="$style.copy"
+    @click="onCopy"
+  />
 </template>
 
 <style module>