@@ -671,6 +671,185 @@ export var storyboard = (
671
671
gridRowEnd : 'auto' ,
672
672
} )
673
673
} )
674
+
675
+ describe ( 'spans' , ( ) => {
676
+ it ( 'respects column start spans' , async ( ) => {
677
+ const editor = await renderTestEditorWithCode (
678
+ makeProjectCodeWithCustomPlacement ( { gridColumn : 'span 2' , gridRow : '2' } ) ,
679
+ 'await-first-dom-report' ,
680
+ )
681
+
682
+ // enlarge to the right
683
+ {
684
+ await runCellResizeTest (
685
+ editor ,
686
+ 'column-end' ,
687
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 2 , 3 ) ,
688
+ EP . fromString ( 'sb/grid/cell' ) ,
689
+ )
690
+
691
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
692
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
693
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
694
+ gridColumnEnd : 'auto' ,
695
+ gridColumnStart : 'span 3' ,
696
+ gridRowEnd : 'auto' ,
697
+ gridRowStart : '2' ,
698
+ } )
699
+ }
700
+
701
+ // shrink from the left
702
+ {
703
+ await runCellResizeTest (
704
+ editor ,
705
+ 'column-start' ,
706
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 2 , 2 ) ,
707
+ EP . fromString ( 'sb/grid/cell' ) ,
708
+ )
709
+
710
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
711
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
712
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
713
+ gridColumnEnd : '4' ,
714
+ gridColumnStart : 'span 2' ,
715
+ gridRowEnd : 'auto' ,
716
+ gridRowStart : '2' ,
717
+ } )
718
+ }
719
+
720
+ // enlarge back from the left
721
+ {
722
+ await runCellResizeTest (
723
+ editor ,
724
+ 'column-start' ,
725
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 2 , 1 ) ,
726
+ EP . fromString ( 'sb/grid/cell' ) ,
727
+ )
728
+
729
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
730
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
731
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
732
+ gridColumnEnd : 'auto' ,
733
+ gridColumnStart : 'span 3' ,
734
+ gridRowEnd : 'auto' ,
735
+ gridRowStart : '2' ,
736
+ } )
737
+ }
738
+ } )
739
+ it ( 'respects column end spans' , async ( ) => {
740
+ const editor = await renderTestEditorWithCode (
741
+ makeProjectCodeWithCustomPlacement ( { gridColumn : '2 / span 2' , gridRow : '2' } ) ,
742
+ 'await-first-dom-report' ,
743
+ )
744
+
745
+ // enlarge to the right
746
+ {
747
+ await runCellResizeTest (
748
+ editor ,
749
+ 'column-end' ,
750
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 2 , 4 ) ,
751
+ EP . fromString ( 'sb/grid/cell' ) ,
752
+ )
753
+
754
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
755
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
756
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
757
+ gridColumnEnd : 'span 3' ,
758
+ gridColumnStart : '2' ,
759
+ gridRowEnd : 'auto' ,
760
+ gridRowStart : '2' ,
761
+ } )
762
+ }
763
+ } )
764
+ it ( 'respects row start spans' , async ( ) => {
765
+ const editor = await renderTestEditorWithCode (
766
+ makeProjectCodeWithCustomPlacement ( { gridColumn : '2' , gridRow : 'span 2' } ) ,
767
+ 'await-first-dom-report' ,
768
+ )
769
+
770
+ // enlarge to the bottom
771
+ {
772
+ await runCellResizeTest (
773
+ editor ,
774
+ 'row-end' ,
775
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 3 , 2 ) ,
776
+ EP . fromString ( 'sb/grid/cell' ) ,
777
+ )
778
+
779
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
780
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
781
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
782
+ gridColumnEnd : 'auto' ,
783
+ gridColumnStart : '2' ,
784
+ gridRowEnd : 'auto' ,
785
+ gridRowStart : 'span 3' ,
786
+ } )
787
+ }
788
+
789
+ // shrink from the top
790
+ {
791
+ await runCellResizeTest (
792
+ editor ,
793
+ 'row-start' ,
794
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 2 , 2 ) ,
795
+ EP . fromString ( 'sb/grid/cell' ) ,
796
+ )
797
+
798
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
799
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
800
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
801
+ gridColumnEnd : 'auto' ,
802
+ gridColumnStart : '2' ,
803
+ gridRowEnd : '4' ,
804
+ gridRowStart : 'span 2' ,
805
+ } )
806
+ }
807
+
808
+ // enlarge back from the top
809
+ {
810
+ await runCellResizeTest (
811
+ editor ,
812
+ 'row-start' ,
813
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 1 , 2 ) ,
814
+ EP . fromString ( 'sb/grid/cell' ) ,
815
+ )
816
+
817
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
818
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
819
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
820
+ gridColumnEnd : 'auto' ,
821
+ gridColumnStart : '2' ,
822
+ gridRowEnd : 'auto' ,
823
+ gridRowStart : 'span 3' ,
824
+ } )
825
+ }
826
+ } )
827
+ it ( 'respects row end spans' , async ( ) => {
828
+ const editor = await renderTestEditorWithCode (
829
+ makeProjectCodeWithCustomPlacement ( { gridColumn : '2' , gridRow : '2 / span 2' } ) ,
830
+ 'await-first-dom-report' ,
831
+ )
832
+
833
+ // enlarge to the bottom
834
+ {
835
+ await runCellResizeTest (
836
+ editor ,
837
+ 'row-end' ,
838
+ gridCellTargetId ( EP . fromString ( 'sb/grid' ) , 4 , 2 ) ,
839
+ EP . fromString ( 'sb/grid/cell' ) ,
840
+ )
841
+
842
+ const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
843
+ editor . renderedDOM . getByTestId ( 'cell' ) . style
844
+ expect ( { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } ) . toEqual ( {
845
+ gridColumnEnd : 'auto' ,
846
+ gridColumnStart : '2' ,
847
+ gridRowEnd : 'span 3' ,
848
+ gridRowStart : '2' ,
849
+ } )
850
+ }
851
+ } )
852
+ } )
674
853
} )
675
854
676
855
const ProjectCode = `import * as React from 'react'
@@ -948,3 +1127,42 @@ export var storyboard = (
948
1127
function unsafeCast < T > ( a : unknown ) : T {
949
1128
return a as T
950
1129
}
1130
+
1131
+ function makeProjectCodeWithCustomPlacement ( params : {
1132
+ gridColumn : string
1133
+ gridRow : string
1134
+ } ) : string {
1135
+ return `import * as React from 'react'
1136
+ import { Storyboard } from 'utopia-api'
1137
+
1138
+ export var storyboard = (
1139
+ <Storyboard data-uid='sb'>
1140
+ <div
1141
+ style={{
1142
+ backgroundColor: '#aaaaaa33',
1143
+ position: 'absolute',
1144
+ width: 600,
1145
+ height: 400,
1146
+ display: 'grid',
1147
+ gap: 10,
1148
+ gridTemplateColumns: '1fr 1fr 1fr 1fr',
1149
+ gridTemplateRows: '1fr 1fr 1fr 1fr',
1150
+ }}
1151
+ data-uid='grid'
1152
+ >
1153
+ <div
1154
+ style={{
1155
+ backgroundColor: '#aaaaaa33',
1156
+ alignSelf: 'stretch',
1157
+ justifySelf: 'stretch',
1158
+ gridColumn: '${ params . gridColumn } ',
1159
+ gridRow: '${ params . gridRow } ',
1160
+ }}
1161
+ data-uid='cell'
1162
+ data-testid='cell'
1163
+ />
1164
+ </div>
1165
+ </Storyboard>
1166
+ )
1167
+ `
1168
+ }
0 commit comments