From 5c7a2042f01a7e6e2ba68ed484077936c88dda72 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Fri, 12 Sep 2025 19:53:29 -0700
Subject: [PATCH] test(widgets): use data-testid selector for color text
 instead of generic span; add data-testid to component span for robustness

---
 .../widgets/components/WidgetColorPicker.test.ts       | 10 +++++-----
 .../vueNodes/widgets/components/WidgetColorPicker.vue  |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
index 9213989cd3..76d92c229d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
@@ -138,13 +138,13 @@ describe('WidgetColorPicker Value Binding', () => {
       // Case 1: model value already includes '#'
       let widget = createMockWidget('#ff0000')
       let wrapper = mountComponent(widget, '#ff0000')
-      let colorText = wrapper.find('span')
+      let colorText = wrapper.find('[data-testid="widget-color-text"]')
       expect.soft(colorText.text()).toBe('#ff0000')
 
       // Case 2: model value missing '#'
       widget = createMockWidget('ff0000')
       wrapper = mountComponent(widget, 'ff0000')
-      colorText = wrapper.find('span')
+      colorText = wrapper.find('[data-testid="widget-color-text"]')
       expect.soft(colorText.text()).toBe('#ff0000')
     })
 
@@ -160,7 +160,7 @@ describe('WidgetColorPicker Value Binding', () => {
       const widget = createMockWidget('#ff0000')
       const wrapper = mountComponent(widget, '#ff0000')
 
-      const colorText = wrapper.find('span')
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
       expect(colorText.text()).toBe('#ff0000')
     })
 
@@ -171,7 +171,7 @@ describe('WidgetColorPicker Value Binding', () => {
       await setColorPickerValue(wrapper, '#00ff00')
 
       // Need to check the local state update
-      const colorText = wrapper.find('span')
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
       // Be specific about the displayed value including the leading '#'
       expect.soft(colorText.text()).toBe('#00ff00')
     })
@@ -228,7 +228,7 @@ describe('WidgetColorPicker Value Binding', () => {
       const widget = createMockWidget('#fff')
       const wrapper = mountComponent(widget, '#fff')
 
-      const colorText = wrapper.find('span')
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
       expect(colorText.text()).toBe('#fff')
     })
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index 3fc4830fac..0d87aaf5b1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -16,7 +16,7 @@
         }"
         @update:model-value="onChange"
       />
-      <span class="text-xs">{{
+      <span class="text-xs" data-testid="widget-color-text">{{
         localValue.startsWith('#') ? localValue : '#' + localValue
       }}</span>
     </label>