From 50a4e1bf93fd6dec3c00a51bbb12b8f5c46d3c15 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Fri, 15 May 2026 12:28:50 +0300
Subject: [PATCH] refactor(vue): use test id helper for dynamic attrs

---
 src/components/AppMenu.vue                        |  4 ++--
 src/components/CanvasMenu.vue                     | 10 ++++++++--
 src/components/ScrubInput.vue                     |  9 +++++----
 src/components/Toolbar/ToolFlyout.vue             |  6 +++---
 src/components/Toolbar/ToolbarActionGroup.vue     |  4 +++-
 src/components/VariablesDialog.vue                |  4 ++--
 src/components/chat/AcpPermissionDialog.vue       |  5 +++--
 src/components/chat/ChatMessage.vue               |  3 ++-
 src/components/properties/ColorStyleRow.vue       |  4 ++--
 src/components/properties/EffectsSection.vue      |  4 ++--
 .../LayoutSection/AutoLayoutControls.vue          |  4 ++--
 .../properties/LayoutSection/SizeControls.vue     | 15 ++++++++++-----
 .../properties/VariablePickerPopover.vue          |  8 +++++---
 13 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
index 07b2d3d63..3f0387ea6 100644
--- a/src/components/AppMenu.vue
+++ b/src/components/AppMenu.vue
@@ -19,7 +19,7 @@ import {
 
 import IconChevronRight from '~icons/lucide/chevron-right'
 
-import { useI18n } from '@open-pencil/vue'
+import { testId as testIdAttr, useI18n } from '@open-pencil/vue'
 import { useMenuUI } from '@/components/ui/menu'
 import { IS_TAURI } from '@/constants'
 import { useAppMenu } from '@/app/shell/menu/app-menu'
@@ -91,7 +91,7 @@ const subMenuCls = useMenuUI({ content: 'min-w-44' })
       <MenubarRoot class="scrollbar-none flex items-center gap-0.5 overflow-x-auto">
         <MenubarMenu v-for="menu in topMenus" :key="menu.label">
           <MenubarTrigger
-            :data-test-id="`menubar-${menu.label.toLowerCase()}`"
+            v-bind="testIdAttr(`menubar-${menu.label.toLowerCase()}`)"
             class="flex cursor-pointer items-center rounded px-2 py-1 text-xs text-muted transition-colors select-none hover:bg-hover hover:text-surface data-[state=open]:bg-hover data-[state=open]:text-surface"
           >
             {{ menu.label }}
diff --git a/src/components/CanvasMenu.vue b/src/components/CanvasMenu.vue
index 869d47ae3..69fb38299 100644
--- a/src/components/CanvasMenu.vue
+++ b/src/components/CanvasMenu.vue
@@ -8,7 +8,13 @@ import {
   ContextMenuSubContent,
   ContextMenuPortal
 } from 'reka-ui'
-import { useEditorCommands, useI18n, useMenuModel, useSelectionState } from '@open-pencil/vue'
+import {
+  testId as testIdAttr,
+  useEditorCommands,
+  useI18n,
+  useMenuModel,
+  useSelectionState
+} from '@open-pencil/vue'
 
 import { useEditorStore } from '@/app/editor/active-store'
 import { createCanvasMenuActions } from '@/app/editor/canvas/menu-actions'
@@ -120,7 +126,7 @@ const contextCommandTestIds: Record<string, string> = {
       </ContextMenuSub>
       <ContextMenuItem
         v-else
-        :data-test-id="item.id ? contextCommandTestIds[item.id] : undefined"
+        v-bind="testIdAttr(item.id ? contextCommandTestIds[item.id] : undefined)"
         :class="canvasMenuItemClass(item.label, cls)"
         :disabled="item.disabled"
         @select="item.action?.()"
diff --git a/src/components/ScrubInput.vue b/src/components/ScrubInput.vue
index 7aaaafc47..e4696b8b2 100644
--- a/src/components/ScrubInput.vue
+++ b/src/components/ScrubInput.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue'
-import { ScrubInputRoot, ScrubInputField, ScrubInputDisplay } from '@open-pencil/vue'
+import { computed, useAttrs } from 'vue'
+import { ScrubInputRoot, ScrubInputField, ScrubInputDisplay, testId } from '@open-pencil/vue'
 import { useEditorStore } from '@/app/editor/active-store'
 
 const attrs = useAttrs()
 
 const store = useEditorStore()
 
+const rootTestId = computed(() => (attrs['data-test-id'] as string | undefined) ?? 'scrub-input')
+
 const { modelValue, min, max, step, icon, label, suffix, sensitivity, placeholder } = defineProps<{
   modelValue: number | symbol
   min?: number
@@ -47,8 +49,7 @@ defineOptions({ inheritAttrs: false })
     "
   >
     <div
-      v-bind="attrs"
-      :data-test-id="(attrs['data-test-id'] as string | undefined) ?? 'scrub-input'"
+      v-bind="{ ...attrs, ...testId(rootTestId) }"
       :tabindex="editing ? undefined : 0"
       :class="[
         attrs.class,
diff --git a/src/components/Toolbar/ToolFlyout.vue b/src/components/Toolbar/ToolFlyout.vue
index e64055f35..0e097bb83 100644
--- a/src/components/Toolbar/ToolFlyout.vue
+++ b/src/components/Toolbar/ToolFlyout.vue
@@ -11,7 +11,7 @@ import IconChevronDown from '~icons/lucide/chevron-down'
 
 import { menu } from '@/components/ui/menu'
 import ToolButton from '@/components/Toolbar/ToolButton.vue'
-import { ToolbarItem } from '@open-pencil/vue'
+import { testId as testIdAttr, ToolbarItem } from '@open-pencil/vue'
 
 import type { Tool } from '@open-pencil/vue'
 import type { EditorToolDef } from '@open-pencil/core/editor'
@@ -69,7 +69,7 @@ function activeKeyForTool() {
     <DropdownMenuRoot>
       <DropdownMenuTrigger as-child>
         <button
-          :data-test-id="`${mobile ? 'mobile-' : ''}toolbar-flyout-${tool.key.toLowerCase()}`"
+          v-bind="testIdAttr(`${mobile ? 'mobile-' : ''}toolbar-flyout-${tool.key.toLowerCase()}`)"
           class="flex h-8 w-3 cursor-pointer items-center justify-center border-none transition-colors"
           :class="[
             mobile ? 'rounded-[6px] select-none' : 'rounded-lg',
@@ -93,7 +93,7 @@ function activeKeyForTool() {
             :tool="sub"
           >
             <DropdownMenuItem
-              :data-test-id="`${mobile ? 'mobile-' : ''}toolbar-flyout-item-${sub.toLowerCase()}`"
+              v-bind="testIdAttr(`${mobile ? 'mobile-' : ''}toolbar-flyout-item-${sub.toLowerCase()}`)"
               :class="menu().item({ class: subActive ? 'bg-accent text-white' : undefined })"
               @select="actions.select"
             >
diff --git a/src/components/Toolbar/ToolbarActionGroup.vue b/src/components/Toolbar/ToolbarActionGroup.vue
index 1a9bb83c1..fef8362e1 100644
--- a/src/components/Toolbar/ToolbarActionGroup.vue
+++ b/src/components/Toolbar/ToolbarActionGroup.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { testId as testIdAttr } from '@open-pencil/vue'
+
 import type { ToolbarActionItem } from '@/components/Toolbar/types'
 
 const { actions, testPrefix } = defineProps<{
@@ -15,7 +17,7 @@ const emit = defineEmits<{
   <button
     v-for="item in actions"
     :key="item.label"
-    :data-test-id="`${testPrefix}-${item.label.toLowerCase()}`"
+    v-bind="testIdAttr(`${testPrefix}-${item.label.toLowerCase()}`)"
     class="flex size-8 cursor-pointer items-center justify-center rounded-[6px] border-none bg-transparent text-muted transition-colors select-none active:bg-hover active:text-surface"
     @click="emit('action', item)"
   >
diff --git a/src/components/VariablesDialog.vue b/src/components/VariablesDialog.vue
index fdaddff34..6034152e6 100644
--- a/src/components/VariablesDialog.vue
+++ b/src/components/VariablesDialog.vue
@@ -27,7 +27,7 @@ import {
 } from 'reka-ui'
 import { FlexRender } from '@tanstack/vue-table'
 
-import { useI18n, useVariablesEditor } from '@open-pencil/vue'
+import { testId as testIdAttr, useI18n, useVariablesEditor } from '@open-pencil/vue'
 
 import IconHash from '~icons/lucide/hash'
 import IconPalette from '~icons/lucide/palette'
@@ -390,7 +390,7 @@ function modeId(columnId: string): string {
                         v-for="item in variableTypes"
                         :key="item.type"
                         :class="menuCls.item"
-                        :data-test-id="`variables-add-${item.type.toLowerCase()}`"
+                        v-bind="testIdAttr(`variables-add-${item.type.toLowerCase()}`)"
                         @select="ctx.addVariable(item.type)"
                       >
                         <component :is="variableTypeIcons[item.type]" :class="menuCls.icon" />
diff --git a/src/components/chat/AcpPermissionDialog.vue b/src/components/chat/AcpPermissionDialog.vue
index 7bca1033d..527da3508 100644
--- a/src/components/chat/AcpPermissionDialog.vue
+++ b/src/components/chat/AcpPermissionDialog.vue
@@ -10,6 +10,7 @@ import {
   AlertDialogTitle
 } from 'reka-ui'
 import { computed } from 'vue'
+import { testId as testIdAttr } from '@open-pencil/vue'
 
 import {
   currentPermission,
@@ -85,7 +86,7 @@ function handleDismiss() {
           <AlertDialogAction
             v-for="opt in allowOptions"
             :key="opt.optionId"
-            :data-test-id="`acp-permission-option-${opt.kind}`"
+            v-bind="testIdAttr(`acp-permission-option-${opt.kind}`)"
             class="w-full rounded bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent/90"
             @click="respondToPermission(opt.optionId)"
           >
@@ -95,7 +96,7 @@ function handleDismiss() {
           <AlertDialogCancel
             v-for="opt in rejectOptions"
             :key="opt.optionId"
-            :data-test-id="`acp-permission-option-${opt.kind}`"
+            v-bind="testIdAttr(`acp-permission-option-${opt.kind}`)"
             class="w-full rounded border border-border bg-canvas px-3 py-1.5 text-xs text-muted hover:bg-hover hover:text-surface"
             @click="respondToPermission(opt.optionId)"
           >
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index c92246715..151b857a0 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -2,6 +2,7 @@
 import { isTextUIPart, isToolUIPart, getToolName } from 'ai'
 import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
 import { Markdown } from 'vue-stream-markdown'
+import { testId as testIdAttr } from '@open-pencil/vue'
 import 'vue-stream-markdown/index.css'
 
 import type { UIDataTypes, UIMessage, UIMessagePart, UITools } from 'ai'
@@ -40,7 +41,7 @@ function partKey(part: UIMessagePart<UIDataTypes, UITools>, index: number): stri
 
 <template>
   <div
-    :data-test-id="`chat-message-${message.role}`"
+    v-bind="testIdAttr(`chat-message-${message.role}`)"
     :class="message.role === 'user' ? 'flex justify-end' : ''"
   >
     <div class="min-w-0 space-y-1.5" :class="message.role === 'user' ? 'max-w-[85%]' : ''">
diff --git a/src/components/properties/ColorStyleRow.vue b/src/components/properties/ColorStyleRow.vue
index 019189f48..1a02a3b63 100644
--- a/src/components/properties/ColorStyleRow.vue
+++ b/src/components/properties/ColorStyleRow.vue
@@ -4,7 +4,7 @@ import BoundVariableButton from '@/components/properties/BoundVariableButton.vue
 import VariablePickerPopover from '@/components/properties/VariablePickerPopover.vue'
 import { useIconButtonUI } from '@/components/ui/icon-button'
 
-import { useI18n } from '@open-pencil/vue'
+import { testId as testIdAttr, useI18n } from '@open-pencil/vue'
 
 import {
   opacityFromPercent,
@@ -99,7 +99,7 @@ const { panels, dialogs } = useI18n()
     />
 
     <button
-      :data-test-id="visibilityTestId"
+      v-bind="testIdAttr(visibilityTestId)"
       :data-visible="item.visible ? 'true' : 'false'"
       class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
       @click="emit('toggleVisibility')"
diff --git a/src/components/properties/EffectsSection.vue b/src/components/properties/EffectsSection.vue
index 6a591be7f..325c0c949 100644
--- a/src/components/properties/EffectsSection.vue
+++ b/src/components/properties/EffectsSection.vue
@@ -4,7 +4,7 @@ import ColorInput from '@/components/ColorPicker/ColorInput.vue'
 import ScrubInput from '@/components/ScrubInput.vue'
 import { useIconButtonUI } from '@/components/ui/icon-button'
 import { useSectionUI } from '@/components/ui/section'
-import { PropertyListRoot, useEffectsControls, useI18n } from '@open-pencil/vue'
+import { PropertyListRoot, testId as testIdAttr, useEffectsControls, useI18n } from '@open-pencil/vue'
 
 import { colorToCSS } from '@open-pencil/core/color'
 
@@ -65,7 +65,7 @@ const sectionCls = useSectionUI()
           />
 
           <button
-            :data-test-id="`effect-visibility-${i}`"
+            v-bind="testIdAttr(`effect-visibility-${i}`)"
             :data-visible="effect.visible ? 'true' : 'false'"
             class="cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
             @click="actions.toggleVisibility(i)"
diff --git a/src/components/properties/LayoutSection/AutoLayoutControls.vue b/src/components/properties/LayoutSection/AutoLayoutControls.vue
index f988db3b1..7aa244d01 100644
--- a/src/components/properties/LayoutSection/AutoLayoutControls.vue
+++ b/src/components/properties/LayoutSection/AutoLayoutControls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Tip from '@/components/ui/Tip.vue'
-import { useI18n, useLayoutControlsContext } from '@open-pencil/vue'
+import { testId as testIdAttr, useI18n, useLayoutControlsContext } from '@open-pencil/vue'
 
 import type { LayoutMode } from '@open-pencil/core/scene-graph'
 
@@ -42,7 +42,7 @@ const layoutModes: { mode: LayoutMode; test: string }[] = [
     <button
       v-for="dir in layoutModes"
       :key="dir.mode"
-      :data-test-id="`layout-direction-${dir.test}`"
+      v-bind="testIdAttr(`layout-direction-${dir.test}`)"
       class="flex cursor-pointer items-center justify-center rounded border px-2 py-1"
       :class="
         (dir.mode === 'GRID' ? ctx.isGrid : ctx.node.layoutMode === dir.mode)
diff --git a/src/components/properties/LayoutSection/SizeControls.vue b/src/components/properties/LayoutSection/SizeControls.vue
index 8abcec1a0..92d7c9bd7 100644
--- a/src/components/properties/LayoutSection/SizeControls.vue
+++ b/src/components/properties/LayoutSection/SizeControls.vue
@@ -17,7 +17,12 @@ import VariableScrubInput from '@/components/properties/VariableScrubInput.vue'
 import BoundVariableButton from '@/components/properties/BoundVariableButton.vue'
 import VariablePickerPopover from '@/components/properties/VariablePickerPopover.vue'
 import { useSelectUI } from '@/components/ui/select'
-import { useI18n, useLayoutControlsContext, useNumberVariableBinding } from '@open-pencil/vue'
+import {
+  testId as testIdAttr,
+  useI18n,
+  useLayoutControlsContext,
+  useNumberVariableBinding
+} from '@open-pencil/vue'
 
 import type { LayoutSizing } from '@open-pencil/core/scene-graph'
 import type { SizeLimitProp, TestId } from '@open-pencil/vue'
@@ -341,7 +346,7 @@ function handleSizeSelect(axis: 'width' | 'height', value: SizeSelectValue) {
       <div :ref="limitFieldRefs.set" class="min-w-0">
         <VariableScrubInput
           v-if="ctx.node"
-          :data-test-id="item.testId"
+          v-bind="testIdAttr(item.testId)"
           :icon="item.icon()"
           :model-value="Math.round(item.value() ?? 0)"
           :min="0"
@@ -356,7 +361,7 @@ function handleSizeSelect(axis: 'width' | 'height', value: SizeSelectValue) {
               @update:model-value="(value) => handleLimitSelect(item.prop, value as string)"
             >
               <SelectTrigger
-                :data-test-id="`${item.testId}-menu`"
+                v-bind="testIdAttr(`${item.testId}-menu`)"
                 :reference="limitFieldAnchor(index)"
                 class="flex shrink-0 cursor-pointer items-center self-stretch border-none bg-transparent px-1 text-[11px] text-muted outline-none"
                 @pointerdown.stop
@@ -385,7 +390,7 @@ function handleSizeSelect(axis: 'width' | 'height', value: SizeSelectValue) {
         </VariableScrubInput>
         <ScrubInput
           v-else
-          :data-test-id="item.testId"
+          v-bind="testIdAttr(item.testId)"
           :icon="item.icon()"
           :model-value="Math.round(item.value() ?? 0)"
           :min="0"
@@ -398,7 +403,7 @@ function handleSizeSelect(axis: 'width' | 'height', value: SizeSelectValue) {
               @update:model-value="(value) => handleLimitSelect(item.prop, value as string)"
             >
               <SelectTrigger
-                :data-test-id="`${item.testId}-menu`"
+                v-bind="testIdAttr(`${item.testId}-menu`)"
                 :reference="limitFieldAnchor(index)"
                 class="flex shrink-0 cursor-pointer items-center self-stretch border-none bg-transparent px-1 text-[11px] text-muted outline-none"
                 @pointerdown.stop
diff --git a/src/components/properties/VariablePickerPopover.vue b/src/components/properties/VariablePickerPopover.vue
index ae98898b6..766b9f809 100644
--- a/src/components/properties/VariablePickerPopover.vue
+++ b/src/components/properties/VariablePickerPopover.vue
@@ -12,6 +12,8 @@ import {
 
 import { computed, nextTick, ref, watch } from 'vue'
 
+import { testId as testIdAttr } from '@open-pencil/vue'
+
 import type { Variable } from '@open-pencil/core/scene-graph'
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
@@ -77,7 +79,7 @@ function submitCreate() {
 <template>
   <PopoverRoot v-model:open="open">
     <PopoverTrigger
-      :data-test-id="triggerTestId"
+      v-bind="testIdAttr(triggerTestId)"
       :aria-label="triggerLabel"
       :title="triggerLabel"
       class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
@@ -144,7 +146,7 @@ function submitCreate() {
                 class="min-w-0 flex-1 rounded border border-border bg-transparent px-1.5 py-1 text-[11px] text-surface outline-none placeholder:text-muted focus:border-accent"
               />
               <button
-                :data-test-id="createTestId"
+                v-bind="testIdAttr(createTestId)"
                 :disabled="!canCreate"
                 class="rounded border border-border bg-panel px-1.5 py-1 text-[11px] text-surface hover:bg-hover disabled:cursor-not-allowed disabled:opacity-50"
                 type="submit"
@@ -154,7 +156,7 @@ function submitCreate() {
             </form>
             <button
               v-else
-              :data-test-id="createTestId"
+              v-bind="testIdAttr(createTestId)"
               class="flex w-full cursor-pointer items-center gap-1.5 bg-transparent px-2 py-1.5 text-left text-[11px] text-muted hover:bg-hover hover:text-surface"
               @click="startCreate"
             >