From 31c643d29e985022dc7fee5697ee948273777963 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Sat, 31 Jan 2026 01:22:12 -0800
Subject: [PATCH] feat: add data-testid to dialog components for stable test
 selectors

- Add data-testid='settings-dialog' to settings container

- Add data-testid='about-panel' to AboutPanel

- Add data-testid='settings-tab-{key}' to all sidebar navigation items

Amp-Thread-ID: https://ampcode.com/threads/T-019c1359-48cc-7676-abc8-2de8c57b52cf
Co-authored-by: Amp <amp@ampcode.com>
---
 src/components/common/TreeExplorerTreeNode.vue   |  1 +
 .../dialog/content/setting/AboutPanel.vue        |  6 +++++-
 .../sidebar/tabs/nodeLibrary/NodeTreeFolder.vue  |  7 ++++++-
 .../sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue    |  7 ++++++-
 .../settings/components/SettingDialogContent.vue | 16 ++++++++++++----
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index 450e8d9d9..2d6c41a77 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -9,6 +9,7 @@
         'tree-leaf': props.node.leaf
       }
     ]"
+    :data-testid="`tree-node-${node.key}`"
   >
     <div class="node-content">
       <span class="node-label">
diff --git a/src/components/dialog/content/setting/AboutPanel.vue b/src/components/dialog/content/setting/AboutPanel.vue
index 33ada1ce3..d8389cb38 100644
--- a/src/components/dialog/content/setting/AboutPanel.vue
+++ b/src/components/dialog/content/setting/AboutPanel.vue
@@ -1,5 +1,9 @@
 <template>
-  <PanelTemplate value="About" class="about-container">
+  <PanelTemplate
+    value="About"
+    class="about-container"
+    data-testid="about-panel"
+  >
     <h2 class="mb-2 text-2xl font-bold">
       {{ $t('g.about') }}
     </h2>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
index e42ab5a31..91cc4cb7c 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
@@ -1,5 +1,10 @@
 <template>
-  <div ref="container" class="node-lib-node-container">
+  <div
+    ref="container"
+    class="node-lib-node-container"
+    data-testid="node-tree-folder"
+    :data-folder-name="node.label"
+  >
     <TreeExplorerTreeNode :node="node" @item-dropped="handleItemDrop" />
   </div>
 </template>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index 4f1cb6d27..bbbe1013b 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -1,5 +1,10 @@
 <template>
-  <div ref="container" class="node-lib-node-container">
+  <div
+    ref="container"
+    class="node-lib-node-container"
+    data-testid="node-tree-leaf"
+    :data-node-name="nodeDef.display_name"
+  >
     <TreeExplorerTreeNode :node="node" @contextmenu="handleContextMenu">
       <template #before-label>
         <Tag
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index 43377110b..696f7851b 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    data-testid="settings-dialog"
     :class="
       teamWorkspacesEnabled
         ? 'flex h-full w-full overflow-auto flex-col md:flex-row'
@@ -50,10 +51,17 @@
         <template v-else #optiongroup>
           <Divider class="my-0" />
         </template>
-        <!-- Workspace mode: custom workspace item -->
-        <template v-if="teamWorkspacesEnabled" #option="{ option }">
-          <WorkspaceSidebarItem v-if="option.key === 'workspace'" />
-          <span v-else>{{ option.translatedLabel }}</span>
+        <!-- Custom option template with data-testid for stable test selectors -->
+        <template #option="{ option }">
+          <span
+            :data-testid="`settings-tab-${option.key}`"
+            class="settings-tab-option"
+          >
+            <WorkspaceSidebarItem
+              v-if="teamWorkspacesEnabled && option.key === 'workspace'"
+            />
+            <template v-else>{{ option.translatedLabel }}</template>
+          </span>
         </template>
       </Listbox>
     </ScrollPanel>