@@ -2027,110 +2027,215 @@ describe('AnalyticalTable', () => {
2027
2027
cy . get ( '@more' ) . should ( 'have.been.calledOnce' ) ;
2028
2028
} ) ;
2029
2029
2030
- it ( 'pop-in columns' , ( ) => {
2031
- document . body . style . margin = '0px' ;
2030
+ if ( reactVersion . startsWith ( '19' ) ) {
2032
2031
[ 'ltr' , 'rtl' ] . forEach ( ( dir ) => {
2033
- cy . mount ( < AnalyticalTable data = { data } columns = { columnsWithPopIn } dir = { dir } /> ) ;
2034
- cy . viewport ( 801 , 1024 ) ;
2035
- cy . findByText ( 'Name' ) . should ( 'be.visible' ) ;
2036
- cy . findByText ( 'Age' ) . should ( 'be.visible' ) ;
2037
- cy . findByText ( 'Friend Name' ) . should ( 'be.visible' ) ;
2038
- cy . findByText ( 'Custom original Header1' ) . should ( 'be.visible' ) ;
2039
- cy . findByText ( 'Custom original Header2' ) . should ( 'be.visible' ) ;
2040
- cy . findByText ( 'Custom Header' ) . should ( 'be.visible' ) ;
2041
- cy . findByText ( 'Custom Header' ) . should ( 'be.visible' ) ;
2042
- cy . findByText ( 'PopinDisplay Modes' ) . should ( 'be.visible' ) . should ( 'have.attr' , 'ui5-text' ) ;
2043
- cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2044
- cy . contains ( 'Custom Cell 2' ) . should ( 'be.visible' ) ;
2045
-
2046
- cy . contains ( 'Custom Header 1' ) . should ( 'not.exist' ) ;
2047
- cy . contains ( 'Custom Header 2' ) . should ( 'not.exist' ) ;
2048
- cy . contains ( 'pop-in content' ) . should ( 'not.exist' ) ;
2049
-
2050
- cy . viewport ( 800 , 1024 ) ;
2051
- cy . wait ( 200 ) ;
2052
-
2053
- cy . findByText ( 'Name' ) . should ( 'be.visible' ) ;
2054
- cy . findByText ( 'Age' ) . should ( 'be.visible' ) ;
2055
- // header
2056
- cy . findByText ( 'Friend Name' ) . should ( 'not.exist' ) ;
2057
- // cell
2058
- cy . contains ( 'Friend Name' ) . should ( 'be.visible' ) ;
2059
- cy . findByText ( 'Custom original Header1' ) . should ( 'not.exist' ) ;
2060
- cy . findByText ( 'Custom original Header2' ) . should ( 'not.exist' ) ;
2061
- cy . contains ( 'Custom Header' ) . should ( 'exist' ) ;
2062
- cy . contains ( 'Custom Cell 2' ) . should ( 'be.visible' ) ;
2063
-
2064
- cy . contains ( 'Custom Header 1' ) . should ( 'be.visible' ) ;
2065
- cy . contains ( 'Custom Header 2' ) . should ( 'be.visible' ) ;
2066
- cy . contains ( 'pop-in content' ) . should ( 'exist' ) ;
2067
- cy . contains ( 'C' ) . should ( 'exist' ) ;
2068
- cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2069
- cy . findAllByText ( 'PopinDisplay Modes:' ) . as ( 'popinHeader' ) . should ( 'be.exist' ) ;
2070
- //popinDisplay: Block
2071
- cy . get ( '@popinHeader' ) . parent ( ) . should ( 'have.css' , 'flex-direction' , 'column' ) ;
2072
-
2073
- cy . viewport ( 600 , 1024 ) ;
2074
- cy . wait ( 200 ) ;
2075
- cy . contains ( 'Age' ) . should ( 'not.exist' ) ;
2076
- cy . contains ( '40' ) . should ( 'not.exist' ) ;
2032
+ it ( `pop-in columns (${ dir } )` , ( ) => {
2033
+ document . body . style . margin = '0px' ;
2034
+ cy . mount ( < AnalyticalTable data = { data } columns = { columnsWithPopIn } dir = { dir } /> ) ;
2035
+ cy . viewport ( 801 , 1024 ) ;
2036
+ cy . findByText ( 'Name' ) . should ( 'be.visible' ) ;
2037
+ cy . findByText ( 'Age' ) . should ( 'be.visible' ) ;
2038
+ cy . findByText ( 'Friend Name' ) . should ( 'be.visible' ) ;
2039
+ cy . findByText ( 'Custom original Header1' ) . should ( 'be.visible' ) ;
2040
+ cy . findByText ( 'Custom original Header2' ) . should ( 'be.visible' ) ;
2041
+ cy . findByText ( 'Custom Header' ) . should ( 'be.visible' ) ;
2042
+ cy . findByText ( 'Custom Header' ) . should ( 'be.visible' ) ;
2043
+ cy . findByText ( 'PopinDisplay Modes' ) . should ( 'be.visible' ) . should ( 'have.attr' , 'ui5-text' ) ;
2044
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2045
+ cy . contains ( 'Custom Cell 2' ) . should ( 'be.visible' ) ;
2046
+
2047
+ cy . contains ( 'Custom Header 1' ) . should ( 'not.exist' ) ;
2048
+ cy . contains ( 'Custom Header 2' ) . should ( 'not.exist' ) ;
2049
+ cy . contains ( 'pop-in content' ) . should ( 'not.exist' ) ;
2050
+
2051
+ cy . viewport ( 800 , 1024 ) ;
2052
+ cy . wait ( 200 ) ;
2053
+
2054
+ cy . findByText ( 'Name' ) . should ( 'be.visible' ) ;
2055
+ cy . findByText ( 'Age' ) . should ( 'be.visible' ) ;
2056
+ // header
2057
+ cy . findByText ( 'Friend Name' ) . should ( 'not.exist' ) ;
2058
+ // cell
2059
+ cy . contains ( 'Friend Name' ) . should ( 'be.visible' ) ;
2060
+ cy . findByText ( 'Custom original Header1' ) . should ( 'not.exist' ) ;
2061
+ cy . findByText ( 'Custom original Header2' ) . should ( 'not.exist' ) ;
2062
+ cy . contains ( 'Custom Header' ) . should ( 'exist' ) ;
2063
+ cy . contains ( 'Custom Cell 2' ) . should ( 'be.visible' ) ;
2064
+
2065
+ cy . contains ( 'Custom Header 1' ) . should ( 'be.visible' ) ;
2066
+ cy . contains ( 'Custom Header 2' ) . should ( 'be.visible' ) ;
2067
+ cy . contains ( 'pop-in content' ) . should ( 'exist' ) ;
2068
+ cy . contains ( 'C' ) . should ( 'exist' ) ;
2069
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2070
+ cy . findAllByText ( 'PopinDisplay Modes:' ) . as ( 'popinHeader' ) . should ( 'be.exist' ) ;
2071
+ //popinDisplay: Block
2072
+ cy . get ( '@popinHeader' ) . parent ( ) . should ( 'have.css' , 'flex-direction' , 'column' ) ;
2073
+
2074
+ cy . viewport ( 600 , 1024 ) ;
2075
+ cy . wait ( 200 ) ;
2076
+ cy . contains ( 'Age' ) . should ( 'not.exist' ) ;
2077
+ cy . contains ( '40' ) . should ( 'not.exist' ) ;
2077
2078
2078
- cy . mount (
2079
- < AnalyticalTable
2080
- data = { data }
2081
- columns = { [
2082
- ...columnsWithPopIn . slice ( 0 , - 1 ) ,
2083
- {
2084
- id : 'popinDisplay' ,
2085
- Header : 'PopinDisplay Modes' ,
2086
- responsivePopIn : true ,
2087
- responsiveMinWidth : 801 ,
2088
- popinDisplay : AnalyticalTablePopinDisplay . Inline ,
2089
- Cell : ( ) => {
2090
- return (
2091
- < Text data-testid = "popinCell" maxLines = { 1 } >
2092
- Popin Cell
2093
- </ Text >
2094
- ) ;
2079
+ cy . mount (
2080
+ < AnalyticalTable
2081
+ data = { data }
2082
+ columns = { [
2083
+ ...columnsWithPopIn . slice ( 0 , - 1 ) ,
2084
+ {
2085
+ id : 'popinDisplay' ,
2086
+ Header : 'PopinDisplay Modes' ,
2087
+ responsivePopIn : true ,
2088
+ responsiveMinWidth : 801 ,
2089
+ popinDisplay : AnalyticalTablePopinDisplay . Inline ,
2090
+ Cell : ( ) => {
2091
+ return (
2092
+ < Text data-testid = "popinCell" maxLines = { 1 } >
2093
+ Popin Cell
2094
+ </ Text >
2095
+ ) ;
2096
+ } ,
2095
2097
} ,
2096
- } ,
2097
- ] }
2098
- dir = { dir }
2099
- /> ,
2100
- ) ;
2101
- cy . findAllByText ( 'PopinDisplay Modes:' ) . as ( 'popinHeader' ) . should ( 'be.exist' ) ;
2102
- //popinDisplay: Row
2103
- cy . get ( '@popinHeader' ) . parent ( ) . should ( 'have.css' , 'flex-direction' , 'row' ) ;
2104
- cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2098
+ ] }
2099
+ dir = { dir }
2100
+ /> ,
2101
+ ) ;
2102
+ cy . findAllByText ( 'PopinDisplay Modes:' ) . as ( 'popinHeader' ) . should ( 'be.exist' ) ;
2103
+ //popinDisplay: Row
2104
+ cy . get ( '@popinHeader' ) . parent ( ) . should ( 'have.css' , 'flex-direction' , 'row' ) ;
2105
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2105
2106
2106
- cy . mount (
2107
- < AnalyticalTable
2108
- data = { data }
2109
- columns = { [
2110
- ...columnsWithPopIn . slice ( 0 , - 1 ) ,
2111
- {
2112
- id : 'popinDisplay' ,
2113
- Header : 'PopinDisplay Modes' ,
2114
- responsivePopIn : true ,
2115
- responsiveMinWidth : 801 ,
2116
- popinDisplay : AnalyticalTablePopinDisplay . WithoutHeader ,
2117
- Cell : ( ) => {
2118
- return (
2119
- < Text data-testid = "popinCell" maxLines = { 1 } >
2120
- Popin Cell
2121
- </ Text >
2122
- ) ;
2107
+ cy . mount (
2108
+ < AnalyticalTable
2109
+ data = { data }
2110
+ columns = { [
2111
+ ...columnsWithPopIn . slice ( 0 , - 1 ) ,
2112
+ {
2113
+ id : 'popinDisplay' ,
2114
+ Header : 'PopinDisplay Modes' ,
2115
+ responsivePopIn : true ,
2116
+ responsiveMinWidth : 801 ,
2117
+ popinDisplay : AnalyticalTablePopinDisplay . WithoutHeader ,
2118
+ Cell : ( ) => {
2119
+ return (
2120
+ < Text data-testid = "popinCell" maxLines = { 1 } >
2121
+ Popin Cell
2122
+ </ Text >
2123
+ ) ;
2124
+ } ,
2123
2125
} ,
2124
- } ,
2125
- ] }
2126
- dir = { dir }
2127
- /> ,
2128
- ) ;
2129
- //popinDisplay: WithoutHeader
2130
- cy . findAllByText ( 'PopinDisplay Modes: ') . should ( 'not. exist' ) ;
2131
- cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2126
+ ] }
2127
+ dir = { dir }
2128
+ /> ,
2129
+ ) ;
2130
+ //popinDisplay: WithoutHeader
2131
+ cy . findAllByText ( 'PopinDisplay Modes:' ) . should ( 'not.exist' ) ;
2132
+ cy . findAllByTestId ( 'popinCell ') . should ( 'exist' ) ;
2133
+ } ) ;
2132
2134
} ) ;
2133
- } ) ;
2135
+ } else {
2136
+ [ 'ltr' , 'rtl' ] . forEach ( ( dir ) => {
2137
+ it ( `pop-in columns (${ dir } ) - 801 x 1024` , { viewportWidth : 801 , viewportHeight : 1024 } , ( ) => {
2138
+ document . body . style . margin = '0px' ;
2139
+ cy . mount ( < AnalyticalTable data = { data } columns = { columnsWithPopIn } dir = { dir } /> ) ;
2140
+ cy . findByText ( 'Name' ) . should ( 'be.visible' ) ;
2141
+ cy . findByText ( 'Age' ) . should ( 'be.visible' ) ;
2142
+ cy . findByText ( 'Friend Name' ) . should ( 'be.visible' ) ;
2143
+ cy . findByText ( 'Custom original Header1' ) . should ( 'be.visible' ) ;
2144
+ cy . findByText ( 'Custom original Header2' ) . should ( 'be.visible' ) ;
2145
+ cy . findByText ( 'Custom Header' ) . should ( 'be.visible' ) ;
2146
+ cy . findByText ( 'Custom Header' ) . should ( 'be.visible' ) ;
2147
+ cy . findByText ( 'PopinDisplay Modes' ) . should ( 'be.visible' ) . should ( 'have.attr' , 'ui5-text' ) ;
2148
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2149
+ cy . contains ( 'Custom Cell 2' ) . should ( 'be.visible' ) ;
2150
+
2151
+ cy . contains ( 'Custom Header 1' ) . should ( 'not.exist' ) ;
2152
+ cy . contains ( 'Custom Header 2' ) . should ( 'not.exist' ) ;
2153
+ cy . contains ( 'pop-in content' ) . should ( 'not.exist' ) ;
2154
+ } ) ;
2155
+ it ( `pop-in columns (${ dir } ) - 800 x 1024` , { viewportWidth : 800 , viewportHeight : 1024 } , ( ) => {
2156
+ cy . mount ( < AnalyticalTable data = { data } columns = { columnsWithPopIn } dir = { dir } /> ) ;
2157
+ cy . findByText ( 'Name' ) . should ( 'be.visible' ) ;
2158
+ cy . findByText ( 'Age' ) . should ( 'be.visible' ) ;
2159
+ // header
2160
+ cy . findByText ( 'Friend Name' ) . should ( 'not.exist' ) ;
2161
+ // cell
2162
+ cy . contains ( 'Friend Name' ) . should ( 'be.visible' ) ;
2163
+ cy . findByText ( 'Custom original Header1' ) . should ( 'not.exist' ) ;
2164
+ cy . findByText ( 'Custom original Header2' ) . should ( 'not.exist' ) ;
2165
+ cy . contains ( 'Custom Header' ) . should ( 'exist' ) ;
2166
+ cy . contains ( 'Custom Cell 2' ) . should ( 'be.visible' ) ;
2167
+
2168
+ cy . contains ( 'Custom Header 1' ) . should ( 'be.visible' ) ;
2169
+ cy . contains ( 'Custom Header 2' ) . should ( 'be.visible' ) ;
2170
+ cy . contains ( 'pop-in content' ) . should ( 'exist' ) ;
2171
+ cy . contains ( 'C' ) . should ( 'exist' ) ;
2172
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2173
+ cy . findAllByText ( 'PopinDisplay Modes:' ) . as ( 'popinHeader' ) . should ( 'be.exist' ) ;
2174
+ //popinDisplay: Block
2175
+ cy . get ( '@popinHeader' ) . parent ( ) . should ( 'have.css' , 'flex-direction' , 'column' ) ;
2176
+ } ) ;
2177
+ it ( `pop-in columns (${ dir } ) - 600 x 1024` , { viewportWidth : 600 , viewportHeight : 1024 } , ( ) => {
2178
+ cy . mount ( < AnalyticalTable data = { data } columns = { columnsWithPopIn } dir = { dir } /> ) ;
2179
+ cy . contains ( 'Age' ) . should ( 'not.exist' ) ;
2180
+ cy . contains ( '40' ) . should ( 'not.exist' ) ;
2181
+
2182
+ cy . mount (
2183
+ < AnalyticalTable
2184
+ data = { data }
2185
+ columns = { [
2186
+ ...columnsWithPopIn . slice ( 0 , - 1 ) ,
2187
+ {
2188
+ id : 'popinDisplay' ,
2189
+ Header : 'PopinDisplay Modes' ,
2190
+ responsivePopIn : true ,
2191
+ responsiveMinWidth : 801 ,
2192
+ popinDisplay : AnalyticalTablePopinDisplay . Inline ,
2193
+ Cell : ( ) => {
2194
+ return (
2195
+ < Text data-testid = "popinCell" maxLines = { 1 } >
2196
+ Popin Cell
2197
+ </ Text >
2198
+ ) ;
2199
+ } ,
2200
+ } ,
2201
+ ] }
2202
+ dir = { dir }
2203
+ /> ,
2204
+ ) ;
2205
+ cy . findAllByText ( 'PopinDisplay Modes:' ) . as ( 'popinHeader' ) . should ( 'be.exist' ) ;
2206
+ //popinDisplay: Row
2207
+ cy . get ( '@popinHeader' ) . parent ( ) . should ( 'have.css' , 'flex-direction' , 'row' ) ;
2208
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2209
+
2210
+ cy . mount (
2211
+ < AnalyticalTable
2212
+ data = { data }
2213
+ columns = { [
2214
+ ...columnsWithPopIn . slice ( 0 , - 1 ) ,
2215
+ {
2216
+ id : 'popinDisplay' ,
2217
+ Header : 'PopinDisplay Modes' ,
2218
+ responsivePopIn : true ,
2219
+ responsiveMinWidth : 801 ,
2220
+ popinDisplay : AnalyticalTablePopinDisplay . WithoutHeader ,
2221
+ Cell : ( ) => {
2222
+ return (
2223
+ < Text data-testid = "popinCell" maxLines = { 1 } >
2224
+ Popin Cell
2225
+ </ Text >
2226
+ ) ;
2227
+ } ,
2228
+ } ,
2229
+ ] }
2230
+ dir = { dir }
2231
+ /> ,
2232
+ ) ;
2233
+ //popinDisplay: WithoutHeader
2234
+ cy . findAllByText ( 'PopinDisplay Modes:' ) . should ( 'not.exist' ) ;
2235
+ cy . findAllByTestId ( 'popinCell' ) . should ( 'exist' ) ;
2236
+ } ) ;
2237
+ } ) ;
2238
+ }
2134
2239
2135
2240
it ( 'pop-in columns: adjustTableHeightOnPopIn ' , ( ) => {
2136
2241
document . body . style . margin = '0px' ;
0 commit comments