@@ -302,9 +302,9 @@ describe('评分组件', () => {
302302
303303 await nextTick ( )
304304
305- // 直接调用组件的 changeRate 方法，模拟点击第一个星星
305+ // 直接调用组件的 handleClick 方法，模拟点击第一个星星
306306 // 这比模拟触摸事件更可靠，因为触摸事件依赖于 DOM 元素的位置
307- await ( wrapper . vm as any ) . changeRate ( 0 , false )
307+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
308308
309309 // 验证事件
310310 const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
@@ -326,9 +326,9 @@ describe('评分组件', () => {
326326
327327 await nextTick ( )
328328
329- // 直接调用组件的 changeRate 方法，模拟点击第一个半星
329+ // 直接调用组件的 handleClick 方法，模拟点击第一个半星
330330 // 这比模拟触摸事件更可靠，因为触摸事件依赖于 DOM 元素的位置
331- await ( wrapper . vm as any ) . changeRate ( 0 , true )
331+ await ( wrapper . vm as any ) . handleClick ( 0 , true )
332332
333333 // 验证事件
334334 const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
@@ -413,4 +413,208 @@ describe('评分组件', () => {
413413
414414 expect ( wrapper . attributes ( 'style' ) ) . toBe ( customStyle )
415415 } )
416+
417+ // 测试清空功能
418+ describe ( 'clearable 功能测试' , ( ) => {
419+ // 测试基本清空功能
420+ test ( 'clearable 为 true 时，点击相同的最小值可以清空' , async ( ) => {
421+ const wrapper = mount ( WdRate , {
422+ props : {
423+ modelValue : 1 ,
424+ clearable : true
425+ }
426+ } )
427+
428+ await nextTick ( )
429+
430+ // 调用 handleClick 方法，模拟点击第一个星星（当前值为1，最小值为1）
431+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
432+
433+ // 验证清空事件
434+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
435+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
436+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 0 )
437+
438+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
439+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 0 } )
440+ } )
441+
442+ test ( 'clearable 为 false 时，点击相同值不会清空' , async ( ) => {
443+ const wrapper = mount ( WdRate , {
444+ props : {
445+ modelValue : 1 ,
446+ clearable : false
447+ }
448+ } )
449+
450+ await nextTick ( )
451+
452+ // 调用 handleClick 方法，模拟点击第一个星星
453+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
454+
455+ // 验证不会清空，而是设置为1
456+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
457+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
458+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 1 )
459+
460+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
461+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 1 } )
462+ } )
463+
464+ // 测试半星模式下的清空
465+ test ( 'clearable + allowHalf 组合下，点击 0.5 可以清空' , async ( ) => {
466+ const wrapper = mount ( WdRate , {
467+ props : {
468+ modelValue : 0.5 ,
469+ clearable : true ,
470+ allowHalf : true
471+ }
472+ } )
473+
474+ await nextTick ( )
475+
476+ // 调用 handleClick 方法，模拟点击第一个半星（当前值为0.5，最小值为0.5）
477+ await ( wrapper . vm as any ) . handleClick ( 0 , true )
478+
479+ // 验证清空事件
480+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
481+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
482+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 0 )
483+
484+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
485+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 0 } )
486+ } )
487+
488+ test ( '非最小值时点击不会清空' , async ( ) => {
489+ const wrapper = mount ( WdRate , {
490+ props : {
491+ modelValue : 2 ,
492+ clearable : true
493+ }
494+ } )
495+
496+ await nextTick ( )
497+
498+ // 调用 handleClick 方法，模拟点击第一个星星（当前值为2，点击值为1，不等于当前值）
499+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
500+
501+ // 验证不会清空，而是设置为1
502+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
503+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
504+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 1 )
505+
506+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
507+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 1 } )
508+ } )
509+
510+ // 测试边界情况
511+ test ( '当前值为 0 时点击不会触发清空' , async ( ) => {
512+ const wrapper = mount ( WdRate , {
513+ props : {
514+ modelValue : 0 ,
515+ clearable : true
516+ }
517+ } )
518+
519+ await nextTick ( )
520+
521+ // 调用 handleClick 方法，模拟点击第一个星星
522+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
523+
524+ // 验证设置为1，而不是保持0
525+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
526+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
527+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 1 )
528+
529+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
530+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 1 } )
531+ } )
532+
533+ test ( '点击非最小值时不会清空' , async ( ) => {
534+ const wrapper = mount ( WdRate , {
535+ props : {
536+ modelValue : 3 ,
537+ clearable : true
538+ }
539+ } )
540+
541+ await nextTick ( )
542+
543+ // 调用 handleClick 方法，模拟点击第三个星星（当前值为3，点击值为3，但不是最小值）
544+ await ( wrapper . vm as any ) . handleClick ( 2 , false )
545+
546+ // 验证不会清空，而是保持为3
547+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
548+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
549+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 3 )
550+
551+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
552+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 3 } )
553+ } )
554+
555+ // 测试与其他状态的组合
556+ test ( 'readonly + clearable 时不会清空' , async ( ) => {
557+ const wrapper = mount ( WdRate , {
558+ props : {
559+ modelValue : 1 ,
560+ clearable : true ,
561+ readonly : true
562+ }
563+ } )
564+
565+ await nextTick ( )
566+
567+ // 调用 handleClick 方法，模拟点击第一个星星
568+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
569+
570+ // 验证在只读状态下不会触发任何事件
571+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
572+ expect ( emitted [ 'update:modelValue' ] ) . toBeFalsy ( )
573+ expect ( emitted [ 'change' ] ) . toBeFalsy ( )
574+ } )
575+
576+ test ( 'disabled + clearable 时不会清空' , async ( ) => {
577+ const wrapper = mount ( WdRate , {
578+ props : {
579+ modelValue : 1 ,
580+ clearable : true ,
581+ disabled : true
582+ }
583+ } )
584+
585+ await nextTick ( )
586+
587+ // 调用 handleClick 方法，模拟点击第一个星星
588+ await ( wrapper . vm as any ) . handleClick ( 0 , false )
589+
590+ // 验证在禁用状态下不会触发任何事件
591+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
592+ expect ( emitted [ 'update:modelValue' ] ) . toBeFalsy ( )
593+ expect ( emitted [ 'change' ] ) . toBeFalsy ( )
594+ } )
595+
596+ // 测试半星模式下非最小值不会清空
597+ test ( '半星模式下点击非最小值不会清空' , async ( ) => {
598+ const wrapper = mount ( WdRate , {
599+ props : {
600+ modelValue : 1.5 ,
601+ clearable : true ,
602+ allowHalf : true
603+ }
604+ } )
605+
606+ await nextTick ( )
607+
608+ // 调用 handleClick 方法，模拟点击第二个半星（当前值为1.5，点击值为1.5，但不是最小值0.5）
609+ await ( wrapper . vm as any ) . handleClick ( 1 , true )
610+
611+ // 验证不会清空，而是保持为1.5
612+ const emitted = wrapper . emitted ( ) as Record < string , any [ ] >
613+ expect ( emitted [ 'update:modelValue' ] ) . toBeTruthy ( )
614+ expect ( emitted [ 'update:modelValue' ] [ 0 ] [ 0 ] ) . toBe ( 1.5 )
615+
616+ expect ( emitted [ 'change' ] ) . toBeTruthy ( )
617+ expect ( emitted [ 'change' ] [ 0 ] [ 0 ] ) . toEqual ( { value : 1.5 } )
618+ } )
619+ } )
416620} )
0 commit comments