Skip to content

Commit eddd8ba

Browse files
christian-byrnechristian-byrne
committed
[test] update FormSelectButton tests for semantic tokens
Update test expectations to use semantic color tokens instead of hard-coded classes: - bg-white → bg-interface-menu-component-surface-selected (25 instances) - text-neutral-900 → text-primary (3 instances) - hover:bg-zinc-200/50 → hover:bg-interface-menu-component-surface-hovered (2 instances)
1 parent 4e1d49a commit eddd8ba

File tree

1 file changed

+87
-31
lines changed

1 file changed

+87
-31
lines changed

‎src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts‎

Lines changed: 87 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,16 @@ describe('FormSelectButton Core Component', () => {
124124
const wrapper = mountComponent('option2', options)
125125

126126
const buttons = wrapper.findAll('button')
127-
expect(buttons[1].classes()).toContain('bg-white')
128-
expect(buttons[1].classes()).toContain('text-neutral-900')
129-
expect(buttons[0].classes()).not.toContain('bg-white')
130-
expect(buttons[2].classes()).not.toContain('bg-white')
127+
expect(buttons[1].classes()).toContain(
128+
'bg-interface-menu-component-surface-selected'
129+
)
130+
expect(buttons[1].classes()).toContain('text-primary')
131+
expect(buttons[0].classes()).not.toContain(
132+
'bg-interface-menu-component-surface-selected'
133+
)
134+
expect(buttons[2].classes()).not.toContain(
135+
'bg-interface-menu-component-surface-selected'
136+
)
131137
})
132138
})
133139

@@ -159,8 +165,10 @@ describe('FormSelectButton Core Component', () => {
159165
const wrapper = mountComponent('200', options)
160166

161167
const buttons = wrapper.findAll('button')
162-
expect(buttons[1].classes()).toContain('bg-white')
163-
expect(buttons[1].classes()).toContain('text-neutral-900')
168+
expect(buttons[1].classes()).toContain(
169+
'bg-interface-menu-component-surface-selected'
170+
)
171+
expect(buttons[1].classes()).toContain('text-primary')
164172
})
165173
})
166174

@@ -201,9 +209,15 @@ describe('FormSelectButton Core Component', () => {
201209
const wrapper = mountComponent('md', options)
202210

203211
const buttons = wrapper.findAll('button')
204-
expect(buttons[1].classes()).toContain('bg-white') // Medium
205-
expect(buttons[0].classes()).not.toContain('bg-white')
206-
expect(buttons[2].classes()).not.toContain('bg-white')
212+
expect(buttons[1].classes()).toContain(
213+
'bg-interface-menu-component-surface-selected'
214+
) // Medium
215+
expect(buttons[0].classes()).not.toContain(
216+
'bg-interface-menu-component-surface-selected'
217+
)
218+
expect(buttons[2].classes()).not.toContain(
219+
'bg-interface-menu-component-surface-selected'
220+
)
207221
})
208222

209223
it('handles objects without value field', () => {
@@ -216,7 +230,9 @@ describe('FormSelectButton Core Component', () => {
216230
const buttons = wrapper.findAll('button')
217231
expect(buttons[0].text()).toBe('First')
218232
expect(buttons[1].text()).toBe('Second')
219-
expect(buttons[0].classes()).toContain('bg-white')
233+
expect(buttons[0].classes()).toContain(
234+
'bg-interface-menu-component-surface-selected'
235+
)
220236
})
221237

222238
it('handles objects without label field', () => {
@@ -253,8 +269,12 @@ describe('FormSelectButton Core Component', () => {
253269
const wrapper = mountComponent('first_id', options, { optionValue: 'id' })
254270

255271
const buttons = wrapper.findAll('button')
256-
expect(buttons[0].classes()).toContain('bg-white')
257-
expect(buttons[1].classes()).not.toContain('bg-white')
272+
expect(buttons[0].classes()).toContain(
273+
'bg-interface-menu-component-surface-selected'
274+
)
275+
expect(buttons[1].classes()).not.toContain(
276+
'bg-interface-menu-component-surface-selected'
277+
)
258278
})
259279

260280
it('emits custom optionValue when clicked', async () => {
@@ -301,7 +321,9 @@ describe('FormSelectButton Core Component', () => {
301321

302322
const buttons = wrapper.findAll('button')
303323
buttons.forEach((button) => {
304-
expect(button.classes()).not.toContain('hover:bg-zinc-200/50')
324+
expect(button.classes()).not.toContain(
325+
'hover:bg-interface-menu-component-surface-hovered'
326+
)
305327
expect(button.classes()).not.toContain('cursor-pointer')
306328
})
307329
})
@@ -311,7 +333,9 @@ describe('FormSelectButton Core Component', () => {
311333
const wrapper = mountComponent('option1', options, { disabled: true })
312334

313335
const buttons = wrapper.findAll('button')
314-
expect(buttons[0].classes()).not.toContain('bg-white') // Selected styling disabled
336+
expect(buttons[0].classes()).not.toContain(
337+
'bg-interface-menu-component-surface-selected'
338+
) // Selected styling disabled
315339
expect(buttons[0].classes()).toContain('opacity-50')
316340
expect(buttons[0].classes()).toContain('text-secondary')
317341
})
@@ -324,7 +348,9 @@ describe('FormSelectButton Core Component', () => {
324348

325349
const buttons = wrapper.findAll('button')
326350
buttons.forEach((button) => {
327-
expect(button.classes()).not.toContain('bg-white')
351+
expect(button.classes()).not.toContain(
352+
'bg-interface-menu-component-surface-selected'
353+
)
328354
})
329355
})
330356

@@ -334,7 +360,9 @@ describe('FormSelectButton Core Component', () => {
334360

335361
const buttons = wrapper.findAll('button')
336362
buttons.forEach((button) => {
337-
expect(button.classes()).not.toContain('bg-white')
363+
expect(button.classes()).not.toContain(
364+
'bg-interface-menu-component-surface-selected'
365+
)
338366
})
339367
})
340368

@@ -343,16 +371,22 @@ describe('FormSelectButton Core Component', () => {
343371
const wrapper = mountComponent('', options)
344372

345373
const buttons = wrapper.findAll('button')
346-
expect(buttons[0].classes()).toContain('bg-white') // Empty string is selected
347-
expect(buttons[1].classes()).not.toContain('bg-white')
374+
expect(buttons[0].classes()).toContain(
375+
'bg-interface-menu-component-surface-selected'
376+
) // Empty string is selected
377+
expect(buttons[1].classes()).not.toContain(
378+
'bg-interface-menu-component-surface-selected'
379+
)
348380
})
349381

350382
it('compares values as strings', () => {
351383
const options = [1, '2', 3]
352384
const wrapper = mountComponent('1', options)
353385

354386
const buttons = wrapper.findAll('button')
355-
expect(buttons[0].classes()).toContain('bg-white') // '1' matches number 1 as string
387+
expect(buttons[0].classes()).toContain(
388+
'bg-interface-menu-component-surface-selected'
389+
) // '1' matches number 1 as string
356390
})
357391
})
358392

@@ -362,8 +396,10 @@ describe('FormSelectButton Core Component', () => {
362396
const wrapper = mountComponent('option1', options)
363397

364398
const selectedButton = wrapper.findAll('button')[0]
365-
expect(selectedButton.classes()).toContain('bg-white')
366-
expect(selectedButton.classes()).toContain('text-neutral-900')
399+
expect(selectedButton.classes()).toContain(
400+
'bg-interface-menu-component-surface-selected'
401+
)
402+
expect(selectedButton.classes()).toContain('text-primary')
367403
})
368404

369405
it('applies unselected styling to inactive options', () => {
@@ -380,7 +416,9 @@ describe('FormSelectButton Core Component', () => {
380416
const wrapper = mountComponent('option1', options, { disabled: false })
381417

382418
const unselectedButton = wrapper.findAll('button')[1]
383-
expect(unselectedButton.classes()).toContain('hover:bg-zinc-200/50')
419+
expect(unselectedButton.classes()).toContain(
420+
'hover:bg-interface-menu-component-surface-hovered'
421+
)
384422
expect(unselectedButton.classes()).toContain('cursor-pointer')
385423
})
386424
})
@@ -403,7 +441,9 @@ describe('FormSelectButton Core Component', () => {
403441

404442
const buttons = wrapper.findAll('button')
405443
expect(buttons[0].text()).toBe('@#$%^&*()')
406-
expect(buttons[0].classes()).toContain('bg-white')
444+
expect(buttons[0].classes()).toContain(
445+
'bg-interface-menu-component-surface-selected'
446+
)
407447
})
408448

409449
it('handles unicode characters in options', () => {
@@ -412,17 +452,25 @@ describe('FormSelectButton Core Component', () => {
412452

413453
const buttons = wrapper.findAll('button')
414454
expect(buttons[0].text()).toBe('🎨 Art')
415-
expect(buttons[0].classes()).toContain('bg-white')
455+
expect(buttons[0].classes()).toContain(
456+
'bg-interface-menu-component-surface-selected'
457+
)
416458
})
417459

418460
it('handles duplicate option values', () => {
419461
const duplicateOptions = ['duplicate', 'unique', 'duplicate']
420462
const wrapper = mountComponent('duplicate', duplicateOptions)
421463

422464
const buttons = wrapper.findAll('button')
423-
expect(buttons[0].classes()).toContain('bg-white')
424-
expect(buttons[2].classes()).toContain('bg-white') // Both duplicates selected
425-
expect(buttons[1].classes()).not.toContain('bg-white')
465+
expect(buttons[0].classes()).toContain(
466+
'bg-interface-menu-component-surface-selected'
467+
)
468+
expect(buttons[2].classes()).toContain(
469+
'bg-interface-menu-component-surface-selected'
470+
) // Both duplicates selected
471+
expect(buttons[1].classes()).not.toContain(
472+
'bg-interface-menu-component-surface-selected'
473+
)
426474
})
427475

428476
it('handles mixed type options safely', () => {
@@ -436,7 +484,9 @@ describe('FormSelectButton Core Component', () => {
436484

437485
const buttons = wrapper.findAll('button')
438486
expect(buttons).toHaveLength(4)
439-
expect(buttons[1].classes()).toContain('bg-white') // Number 123 as string
487+
expect(buttons[1].classes()).toContain(
488+
'bg-interface-menu-component-surface-selected'
489+
) // Number 123 as string
440490
})
441491

442492
it('handles objects with missing properties gracefully', () => {
@@ -450,7 +500,9 @@ describe('FormSelectButton Core Component', () => {
450500

451501
const buttons = wrapper.findAll('button')
452502
expect(buttons).toHaveLength(4)
453-
expect(buttons[2].classes()).toContain('bg-white')
503+
expect(buttons[2].classes()).toContain(
504+
'bg-interface-menu-component-surface-selected'
505+
)
454506
})
455507

456508
it('handles large number of options', () => {
@@ -462,7 +514,9 @@ describe('FormSelectButton Core Component', () => {
462514

463515
const buttons = wrapper.findAll('button')
464516
expect(buttons).toHaveLength(50)
465-
expect(buttons[24].classes()).toContain('bg-white') // Option 25 at index 24
517+
expect(buttons[24].classes()).toContain(
518+
'bg-interface-menu-component-surface-selected'
519+
) // Option 25 at index 24
466520
})
467521

468522
it('fallback to index when all object properties are missing', () => {
@@ -474,7 +528,9 @@ describe('FormSelectButton Core Component', () => {
474528

475529
const buttons = wrapper.findAll('button')
476530
expect(buttons).toHaveLength(2)
477-
expect(buttons[0].classes()).toContain('bg-white') // Falls back to index 0
531+
expect(buttons[0].classes()).toContain(
532+
'bg-interface-menu-component-surface-selected'
533+
) // Falls back to index 0
478534
})
479535
})
480536

0 commit comments

Comments
 (0)