Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-05 23:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

[test] update WidgetSelectButton tests for semantic tokens

Browse Source 
Update test expectations to use semantic color tokens instead of hard-coded classes:
- bg-white → bg-interface-menu-component-surface-selected
- text-neutral-900 → text-primary/text-secondary
- hover:bg-zinc-200/50 → hover:bg-interface-menu-component-surface-hovered
This commit is contained in:
bymyself
2025-10-26 22:19:27 -07:00
parent 20015ccd81
commit 4e1d49a097
1 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.test.ts
View File

@@ -107,10 +107,14 @@ describe('WidgetSelectButton Button Selection', () => {
const selectedButton = buttons[1] // 'banana'
const unselectedButton = buttons[0] // 'apple'
expect(selectedButton.classes()).toContain('bg-white')
expect(selectedButton.classes()).toContain('text-neutral-900')
expect(unselectedButton.classes()).not.toContain('bg-white')
expect(unselectedButton.classes()).not.toContain('text-neutral-900')
expect(selectedButton.classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(selectedButton.classes()).toContain('text-primary')
expect(unselectedButton.classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(unselectedButton.classes()).toContain('text-secondary')
})
it('handles no selection gracefully', () => {
@@ -120,8 +124,10 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
buttons.forEach((button) => {
expect(button.classes()).not.toContain('bg-white')
expect(button.classes()).not.toContain('text-neutral-900')
expect(button.classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(button.classes()).toContain('text-secondary')
})
})
@@ -134,13 +140,19 @@ describe('WidgetSelectButton Button Selection', () => {
// Initially 'first' is selected
let buttons = wrapper.findAll('button')
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
// Update to 'second'
await wrapper.setProps({ modelValue: 'second' })
buttons = wrapper.findAll('button')
expect(buttons[0].classes()).not.toContain('bg-white')
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[0].classes()).not.toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
})
@@ -222,7 +234,9 @@ describe('WidgetSelectButton Button Selection', () => {
expect(buttons[2].text()).toBe('3')
// The selected button should be the one with '2'
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles object options with label and value', () => {
@@ -240,7 +254,9 @@ describe('WidgetSelectButton Button Selection', () => {
expect(buttons[2].text()).toBe('Third Option')
// 'second' should be selected
expect(buttons[1].classes()).toContain('bg-white')
expect(buttons[1].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('emits correct values for object options', async () => {
@@ -277,7 +293,9 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
expect(buttons[0].classes()).toContain('bg-white') // Empty string is selected
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // Empty string is selected
})
it('handles null/undefined in options', () => {
@@ -292,7 +310,9 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
it('handles very long option text', () => {
@@ -313,7 +333,9 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(20)
expect(buttons[4].classes()).toContain('bg-white') // option5 is at index 4
expect(buttons[4].classes()).toContain(
'bg-interface-menu-component-surface-selected'
) // option5 is at index 4
})
it('handles duplicate options', () => {
@@ -324,8 +346,12 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
expect(buttons).toHaveLength(4)
// Both 'duplicate' buttons should be highlighted (due to value matching)
expect(buttons[0].classes()).toContain('bg-white')
expect(buttons[2].classes()).toContain('bg-white')
expect(buttons[0].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
expect(buttons[2].classes()).toContain(
'bg-interface-menu-component-surface-selected'
)
})
})
@@ -354,7 +380,9 @@ describe('WidgetSelectButton Button Selection', () => {
const buttons = wrapper.findAll('button')
const unselectedButton = buttons[1] // 'option2'
expect(unselectedButton.classes()).toContain('hover:bg-zinc-200/50')
expect(unselectedButton.classes()).toContain(
'hover:bg-interface-menu-component-surface-hovered'
)
expect(unselectedButton.classes()).toContain('cursor-pointer')
})
})