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

@@ -9,6 +9,7 @@
         'tree-leaf': props.node.leaf
       }
     ]"
+    :data-testid="`tree-node-${node.key}`"
   >
     <div class="node-content">
       <span class="node-label">

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>

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>

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

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 -->
+        <!-- Custom option template with data-testid for stable test selectors -->
-        <template v-if="teamWorkspacesEnabled" #option="{ option }">
+        <template #option="{ option }">
-          <WorkspaceSidebarItem v-if="option.key === 'workspace'" />
+          <span
-          <span v-else>{{ option.translatedLabel }}</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>