From 698bcde00bc332fd40b2ecdf85dc950afd373933 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Fri, 15 May 2026 13:10:44 +0300
Subject: [PATCH] refactor(vue): share generated test id helpers

---
 packages/vue/src/index.ts                   | 10 +++++++++-
 packages/vue/src/testing/test-id.ts         | 20 ++++++++++++++++++++
 src/components/Toolbar/ToolFlyout.vue       | 14 ++++++++++----
 src/components/VariablesDialog.vue          |  4 ++--
 src/components/chat/AcpPermissionDialog.vue |  6 +++---
 tests/e2e/toolbar/basic.spec.ts             | 17 +++++++++--------
 tests/e2e/variables/dialog.spec.ts          |  7 ++++---
 tests/helpers/test-ids.ts                   | 11 +++++++++++
 8 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 tests/helpers/test-ids.ts

diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 549b1dbf8..39e8f4736 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -47,7 +47,15 @@ export { useToolbarState } from '#vue/primitives/Toolbar/useToolbarState'
 export { useNodeFontStatus } from '#vue/shared/font-status/use'
 export { usePropScrub } from '#vue/controls/prop-scrub/use'
 export { toolCursor } from '#vue/editor/tool-cursor'
-export { testId, testIdSelector } from '#vue/testing/test-id'
+export {
+  acpPermissionOptionTestId,
+  testId,
+  testIdSelector,
+  toolbarFlyoutItemTestId,
+  toolbarFlyoutTestId,
+  toolbarToolTestId,
+  variablesAddTestId
+} from '#vue/testing/test-id'
 export { vTestId } from '#vue/testing/v-test-id'
 export type {
   RequiredTestIdProps,
diff --git a/packages/vue/src/testing/test-id.ts b/packages/vue/src/testing/test-id.ts
index 60e0273d0..3334ad709 100644
--- a/packages/vue/src/testing/test-id.ts
+++ b/packages/vue/src/testing/test-id.ts
@@ -22,6 +22,26 @@ export function testIdSelector(id: TestId): string {
   return `[data-test-id="${cssEscape(id)}"]`
 }
 
+export function toolbarToolTestId(tool: string, mobile = false): TestId {
+  return `${mobile ? 'mobile-' : ''}toolbar-tool-${tool.toLowerCase()}`
+}
+
+export function toolbarFlyoutTestId(tool: string, mobile = false): TestId {
+  return `${mobile ? 'mobile-' : ''}toolbar-flyout-${tool.toLowerCase()}`
+}
+
+export function toolbarFlyoutItemTestId(tool: string, mobile = false): TestId {
+  return `${mobile ? 'mobile-' : ''}toolbar-flyout-item-${tool.toLowerCase()}`
+}
+
+export function variablesAddTestId(type: string): TestId {
+  return `variables-add-${type.toLowerCase()}`
+}
+
+export function acpPermissionOptionTestId(kind: string): TestId {
+  return `acp-permission-option-${kind}`
+}
+
 function cssEscape(value: string): string {
   return CSS.escape(value)
 }
diff --git a/src/components/Toolbar/ToolFlyout.vue b/src/components/Toolbar/ToolFlyout.vue
index 4051ce223..a6e176ae8 100644
--- a/src/components/Toolbar/ToolFlyout.vue
+++ b/src/components/Toolbar/ToolFlyout.vue
@@ -11,7 +11,13 @@ import IconChevronDown from '~icons/lucide/chevron-down'
 
 import { menu } from '@/components/ui/menu'
 import ToolButton from '@/components/Toolbar/ToolButton.vue'
-import { vTestId, ToolbarItem } from '@open-pencil/vue'
+import {
+  toolbarFlyoutItemTestId,
+  toolbarFlyoutTestId,
+  toolbarToolTestId,
+  vTestId,
+  ToolbarItem
+} from '@open-pencil/vue'
 
 import type { Tool } from '@open-pencil/vue'
 import type { EditorToolDef } from '@open-pencil/core/editor'
@@ -58,7 +64,7 @@ function activeKeyForTool() {
   <div class="flex items-center">
     <slot :label="`${toolLabels[activeKeyForTool()]} (${tool.shortcut})`">
       <ToolButton
-        :test-id="`${mobile ? 'mobile-' : ''}toolbar-tool-${activeKeyForTool().toLowerCase()}`"
+        :test-id="toolbarToolTestId(activeKeyForTool(), mobile)"
         :icon="toolIcons[activeKeyForTool()]"
         :active="isActiveTool(activeKeyForTool())"
         :mobile="mobile"
@@ -69,7 +75,7 @@ function activeKeyForTool() {
     <DropdownMenuRoot>
       <DropdownMenuTrigger as-child>
         <button
-          v-test-id="`${mobile ? 'mobile-' : ''}toolbar-flyout-${tool.key.toLowerCase()}`"
+          v-test-id="toolbarFlyoutTestId(tool.key, mobile)"
           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 +99,7 @@ function activeKeyForTool() {
             :tool="sub"
           >
             <DropdownMenuItem
-              v-test-id="`${mobile ? 'mobile-' : ''}toolbar-flyout-item-${sub.toLowerCase()}`"
+              v-test-id="toolbarFlyoutItemTestId(sub, mobile)"
               :class="menu().item({ class: subActive ? 'bg-accent text-white' : undefined })"
               @select="actions.select"
             >
diff --git a/src/components/VariablesDialog.vue b/src/components/VariablesDialog.vue
index de9416373..edcf05e40 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 { vTestId, useI18n, useVariablesEditor } from '@open-pencil/vue'
+import { variablesAddTestId, vTestId, 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"
-                        v-test-id="`variables-add-${item.type.toLowerCase()}`"
+                        v-test-id="variablesAddTestId(item.type)"
                         @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 0c7fe3a6f..309e10a10 100644
--- a/src/components/chat/AcpPermissionDialog.vue
+++ b/src/components/chat/AcpPermissionDialog.vue
@@ -10,7 +10,7 @@ import {
   AlertDialogTitle
 } from 'reka-ui'
 import { computed } from 'vue'
-import { vTestId } from '@open-pencil/vue'
+import { acpPermissionOptionTestId, vTestId } from '@open-pencil/vue'
 
 import {
   currentPermission,
@@ -86,7 +86,7 @@ function handleDismiss() {
           <AlertDialogAction
             v-for="opt in allowOptions"
             :key="opt.optionId"
-            v-test-id="`acp-permission-option-${opt.kind}`"
+            v-test-id="acpPermissionOptionTestId(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)"
           >
@@ -96,7 +96,7 @@ function handleDismiss() {
           <AlertDialogCancel
             v-for="opt in rejectOptions"
             :key="opt.optionId"
-            v-test-id="`acp-permission-option-${opt.kind}`"
+            v-test-id="acpPermissionOptionTestId(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/tests/e2e/toolbar/basic.spec.ts b/tests/e2e/toolbar/basic.spec.ts
index 38b7e7fab..4865025ac 100644
--- a/tests/e2e/toolbar/basic.spec.ts
+++ b/tests/e2e/toolbar/basic.spec.ts
@@ -2,6 +2,7 @@ import { test, expect, type Page } from '@playwright/test'
 
 import { CanvasHelper } from '#tests/helpers/canvas'
 import { getPageChildren } from '#tests/helpers/store'
+import { toolbarFlyoutItemTestId, toolbarFlyoutTestId } from '#tests/helpers/test-ids'
 
 let page: Page
 let canvas: CanvasHelper
@@ -20,13 +21,13 @@ test.afterAll(async () => {
 })
 
 test('shapes flyout opens', async () => {
-  await page.getByTestId('toolbar-flyout-rectangle').click()
-  await expect(page.getByTestId('toolbar-flyout-item-polygon')).toBeVisible()
+  await page.getByTestId(toolbarFlyoutTestId('RECTANGLE')).click()
+  await expect(page.getByTestId(toolbarFlyoutItemTestId('POLYGON'))).toBeVisible()
   canvas.assertNoErrors()
 })
 
 test('Polygon tool creates POLYGON node', async () => {
-  await page.getByTestId('toolbar-flyout-item-polygon').click()
+  await page.getByTestId(toolbarFlyoutItemTestId('POLYGON')).click()
   await canvas.drag(300, 200, 400, 300)
   await canvas.waitForRender()
 
@@ -36,8 +37,8 @@ test('Polygon tool creates POLYGON node', async () => {
 })
 
 test('Star tool creates STAR node', async () => {
-  await page.getByTestId('toolbar-flyout-rectangle').click()
-  await page.getByTestId('toolbar-flyout-item-star').click()
+  await page.getByTestId(toolbarFlyoutTestId('RECTANGLE')).click()
+  await page.getByTestId(toolbarFlyoutItemTestId('STAR')).click()
   await canvas.drag(150, 150, 250, 250)
   await canvas.waitForRender()
 
@@ -105,8 +106,8 @@ test('Pen close path creates VECTOR with closed region', async () => {
 })
 
 test('Frame flyout shows Frame and Section items', async () => {
-  await page.getByTestId('toolbar-flyout-frame').click()
-  await expect(page.getByTestId('toolbar-flyout-item-frame')).toBeVisible()
-  await expect(page.getByTestId('toolbar-flyout-item-section')).toBeVisible()
+  await page.getByTestId(toolbarFlyoutTestId('FRAME')).click()
+  await expect(page.getByTestId(toolbarFlyoutItemTestId('FRAME'))).toBeVisible()
+  await expect(page.getByTestId(toolbarFlyoutItemTestId('SECTION'))).toBeVisible()
   canvas.assertNoErrors()
 })
diff --git a/tests/e2e/variables/dialog.spec.ts b/tests/e2e/variables/dialog.spec.ts
index dab8271a1..5e1c6c340 100644
--- a/tests/e2e/variables/dialog.spec.ts
+++ b/tests/e2e/variables/dialog.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect, type Page } from '@playwright/test'
 
 import { CanvasHelper } from '#tests/helpers/canvas'
+import { variablesAddTestId } from '#tests/helpers/test-ids'
 
 let page: Page
 let canvas: CanvasHelper
@@ -64,19 +65,19 @@ test('add variable menu creates non-color variable types', async () => {
   await canvas.waitForRender()
 
   await page.getByTestId('variables-add-variable').click()
-  await page.getByTestId('variables-add-float').click()
+  await page.getByTestId(variablesAddTestId('FLOAT')).click()
   await expect(
     page.getByTestId('variable-row').filter({ hasText: 'New number' })
   ).toHaveCount(1)
 
   await page.getByTestId('variables-add-variable').click()
-  await page.getByTestId('variables-add-string').click()
+  await page.getByTestId(variablesAddTestId('STRING')).click()
   await expect(
     page.getByTestId('variable-row').filter({ hasText: 'New text' })
   ).toHaveCount(1)
 
   await page.getByTestId('variables-add-variable').click()
-  await page.getByTestId('variables-add-boolean').click()
+  await page.getByTestId(variablesAddTestId('BOOLEAN')).click()
   await expect(
     page.getByTestId('variable-row').filter({ hasText: 'New boolean' })
   ).toHaveCount(1)
diff --git a/tests/helpers/test-ids.ts b/tests/helpers/test-ids.ts
new file mode 100644
index 000000000..8e62ad7ee
--- /dev/null
+++ b/tests/helpers/test-ids.ts
@@ -0,0 +1,11 @@
+export function toolbarFlyoutTestId(tool: string, mobile = false) {
+  return `${mobile ? 'mobile-' : ''}toolbar-flyout-${tool.toLowerCase()}`
+}
+
+export function toolbarFlyoutItemTestId(tool: string, mobile = false) {
+  return `${mobile ? 'mobile-' : ''}toolbar-flyout-item-${tool.toLowerCase()}`
+}
+
+export function variablesAddTestId(type: string) {
+  return `variables-add-${type.toLowerCase()}`
+}