@@ -483,4 +483,117 @@ describe('styled', () => {
483
483
484
484
expect ( view . props . style ) . toMatchObject ( { } ) ;
485
485
} ) ;
486
+
487
+ it ( 'should support function-based styles with props' , async ( ) => {
488
+ const { styled } = defineTokens ( { } ) ;
489
+
490
+ interface CustomProps {
491
+ isActive : boolean ;
492
+ }
493
+
494
+ const StyledView = styled ( View ) < CustomProps > ( ( props ) => ( {
495
+ backgroundColor : props . isActive ? 'blue' : 'gray' ,
496
+ } ) ) ;
497
+
498
+ // Render with isActive=true
499
+ const renderedActive = render (
500
+ React . createElement ( StyledView , {
501
+ testID : 'styled-view-active' ,
502
+ isActive : true ,
503
+ } ) ,
504
+ ) ;
505
+ const activeView = await renderedActive . getByTestId ( 'styled-view-active' ) ;
506
+ expect ( activeView . props . style ) . toMatchObject ( {
507
+ backgroundColor : 'blue' ,
508
+ } ) ;
509
+
510
+ // Render with isActive=false
511
+ const renderedInactive = render (
512
+ React . createElement ( StyledView , {
513
+ testID : 'styled-view-inactive' ,
514
+ isActive : false ,
515
+ } ) ,
516
+ ) ;
517
+ const inactiveView = await renderedInactive . getByTestId ( 'styled-view-inactive' ) ;
518
+ expect ( inactiveView . props . style ) . toMatchObject ( {
519
+ backgroundColor : 'gray' ,
520
+ } ) ;
521
+ } ) ;
522
+
523
+ it ( 'should support function-based styles with tokens' , async ( ) => {
524
+ const { styled } = defineTokens ( {
525
+ colors : {
526
+ active : 'green' ,
527
+ inactive : 'red' ,
528
+ } ,
529
+ } ) ;
530
+
531
+ interface CustomProps {
532
+ isActive : boolean ;
533
+ }
534
+
535
+ const StyledView = styled ( View ) < CustomProps > ( ( props ) => ( {
536
+ backgroundColor : props . isActive ? '$colors.active' : '$colors.inactive' ,
537
+ borderWidth : 1 ,
538
+ } ) ) ;
539
+
540
+ // Render with isActive=true
541
+ const renderedActive = render (
542
+ React . createElement ( StyledView , {
543
+ testID : 'styled-view-token-active' ,
544
+ isActive : true ,
545
+ } ) ,
546
+ ) ;
547
+ const activeView = await renderedActive . getByTestId ( 'styled-view-token-active' ) ;
548
+ expect ( activeView . props . style ) . toMatchObject ( {
549
+ backgroundColor : 'green' ,
550
+ borderWidth : 1 ,
551
+ } ) ;
552
+
553
+ // Render with isActive=false
554
+ const renderedInactive = render (
555
+ React . createElement ( StyledView , {
556
+ testID : 'styled-view-token-inactive' ,
557
+ isActive : false ,
558
+ } ) ,
559
+ ) ;
560
+ const inactiveView = await renderedInactive . getByTestId ( 'styled-view-token-inactive' ) ;
561
+ expect ( inactiveView . props . style ) . toMatchObject ( {
562
+ backgroundColor : 'red' ,
563
+ borderWidth : 1 ,
564
+ } ) ;
565
+ } ) ;
566
+
567
+ it ( 'should correctly merge prop-based styles with styles from style prop' , async ( ) => {
568
+ const { styled } = defineTokens ( { } ) ;
569
+
570
+ interface CustomProps {
571
+ variant : 'primary' | 'secondary' ;
572
+ }
573
+
574
+ const StyledView = styled ( View ) < CustomProps > ( ( props ) => ( {
575
+ backgroundColor : props . variant === 'primary' ? 'blue' : 'purple' ,
576
+ padding : 10 ,
577
+ } ) ) ;
578
+
579
+ const rendered = render (
580
+ React . createElement ( StyledView , {
581
+ testID : 'styled-view-merged' ,
582
+ variant : 'primary' ,
583
+ style : { padding : 20 , margin : 5 } ,
584
+ } ) ,
585
+ ) ;
586
+
587
+ const view = await rendered . getByTestId ( 'styled-view-merged' ) ;
588
+ expect ( view . props . style ) . toMatchObject ( [
589
+ {
590
+ backgroundColor : 'blue' ,
591
+ padding : 10 ,
592
+ } ,
593
+ {
594
+ padding : 20 ,
595
+ margin : 5 ,
596
+ } ,
597
+ ] ) ;
598
+ } ) ;
486
599
} ) ;
0 commit comments