22
33describe ( 'Example - Grid Menu' , ( ) => {
44 const fullTitles = [ '#' , 'A' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' ] ;
5- const titlesWithoutId = [ 'A' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' ] ;
6-
75
86 it ( 'should display Example Grid Menu' , ( ) => {
97 cy . visit ( `${ Cypress . config ( 'baseExampleUrl' ) } /example-grid-menu.html` ) ;
@@ -18,7 +16,9 @@ describe('Example - Grid Menu', () => {
1816 . each ( ( $child , index ) => expect ( $child . text ( ) ) . to . eq ( fullTitles [ index ] ) ) ;
1917 } ) ;
2018
21- it ( 'should click on the Grid Menu to hide the column A from being displayed' , ( ) => {
19+ it ( 'should click on the Grid Menu to hide the column "A"' , ( ) => {
20+ const expectedTitleList = [ '#' , 'B' , 'C' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' ] ; // without "A"
21+
2222 cy . get ( '#myGrid' )
2323 . find ( 'button.slick-gridmenu-button' )
2424 . trigger ( 'click' )
@@ -27,7 +27,7 @@ describe('Example - Grid Menu', () => {
2727 cy . get ( '#myGrid' )
2828 . get ( '.slick-gridmenu:visible' )
2929 . find ( '.slick-gridmenu-list' )
30- . children ( 'li:nth-child(1 )' )
30+ . children ( 'li:visible: nth(0 )' )
3131 . children ( 'label' )
3232 . should ( 'contain' , 'A' )
3333 . click ( ) ;
@@ -38,14 +38,13 @@ describe('Example - Grid Menu', () => {
3838 . trigger ( 'click' )
3939 . click ( ) ;
4040
41- const smallerTitleList = titlesWithoutId . slice ( 1 ) ;
4241 cy . get ( '#myGrid' )
4342 . find ( '.slick-header-columns' )
4443 . children ( )
45- . each ( ( $child , index ) => expect ( $child . text ( ) ) . to . eq ( smallerTitleList [ index ] ) ) ;
44+ . each ( ( $child , index ) => expect ( $child . text ( ) ) . to . eq ( expectedTitleList [ index ] ) ) ;
4645 } ) ;
4746
48- it ( 'should click on the External Grid Menu to show the column A as 1st column again' , ( ) => {
47+ it ( 'should click on the External Grid Menu to show the column "A" as 1st column again' , ( ) => {
4948 cy . get ( 'button' )
5049 . contains ( 'Grid Menu' )
5150 . trigger ( 'click' )
@@ -54,7 +53,7 @@ describe('Example - Grid Menu', () => {
5453 cy . get ( '#myGrid' )
5554 . get ( '.slick-gridmenu:visible' )
5655 . find ( '.slick-gridmenu-list' )
57- . children ( 'li:nth-child(1 )' )
56+ . children ( 'li:visible: nth(0 )' )
5857 . children ( 'label' )
5958 . should ( 'contain' , 'A' )
6059 . click ( ) ;
@@ -65,6 +64,127 @@ describe('Example - Grid Menu', () => {
6564 cy . get ( '#myGrid' )
6665 . find ( '.slick-header-columns' )
6766 . children ( )
68- . each ( ( $child , index ) => expect ( $child . text ( ) ) . to . eq ( titlesWithoutId [ index ] ) ) ;
67+ . each ( ( $child , index ) => expect ( $child . text ( ) ) . to . eq ( fullTitles [ index ] ) ) ;
68+ } ) ;
69+
70+ it ( 'should click on "Help" and expect an Alert to show the Help text' , ( ) => {
71+ cy . on ( 'window:alert' , ( str ) => {
72+ expect ( str ) . to . equal ( `Command: help` ) ;
73+ } ) ;
74+
75+ cy . get ( '.slick-gridmenu-item' )
76+ . contains ( 'Help' )
77+ . click ( ) ;
78+ } ) ;
79+
80+ it ( 'should toggle Filter Row and expect the row to be hidden' , ( ) => {
81+ cy . get ( '.slick-gridmenu-item' )
82+ . contains ( 'Toggle Filter Row' )
83+ . click ( ) ;
84+
85+ cy . get ( '#myGrid' )
86+ . find ( '.slick-pane-left' )
87+ . find ( '.slick-headerrow' )
88+ . should ( 'be.hidden' ) ;
89+ } ) ;
90+
91+ it ( 'should toggle Filter Row and expect the row to be shown again' , ( ) => {
92+ cy . get ( '.slick-gridmenu-item' )
93+ . contains ( 'Toggle Filter Row' )
94+ . click ( ) ;
95+
96+ cy . get ( '#myGrid' )
97+ . find ( '.slick-pane-left' )
98+ . find ( '.slick-headerrow' )
99+ . should ( 'be.visible' ) ;
100+ } ) ;
101+
102+ it ( 'should toggle Top Panel and expect the row to show up' , ( ) => {
103+ cy . get ( '.slick-gridmenu-item' )
104+ . contains ( 'Toggle Top Panel' )
105+ . click ( ) ;
106+
107+ cy . get ( '#myGrid' )
108+ . find ( '.slick-pane-left' )
109+ . find ( '.slick-top-panel-scroller' )
110+ . should ( 'be.visible' ) ;
111+ } ) ;
112+
113+ it ( 'should toggle Top Panel and expect the row to be hide' , ( ) => {
114+ cy . get ( '.slick-gridmenu-item' )
115+ . contains ( 'Toggle Top Panel' )
116+ . click ( ) ;
117+
118+ cy . get ( '#myGrid' )
119+ . find ( '.slick-pane-left' )
120+ . find ( '.slick-top-panel-scroller' )
121+ . should ( 'be.hidden' ) ;
122+ } ) ;
123+
124+ it ( 'should filter column "#" with value 9 and expect only 1 row in the grid with value 9' , ( ) => {
125+ cy . get ( '.grid-canvas' )
126+ . find ( '.slick-row' )
127+ . should ( 'be.visible' ) ;
128+
129+ cy . get ( '#myGrid' )
130+ . find ( '.slick-headerrow-column.l0.r0' )
131+ . find ( 'input' )
132+ . type ( '9' ) ;
133+
134+ cy . get ( '#myGrid' )
135+ . find ( '.slick-row' )
136+ . should ( 'have.length' , 1 ) ;
137+ } ) ;
138+
139+ it ( 'should open the Grid Menu and click on Clear Filter and expect multiple rows now showing in the grid' , ( ) => {
140+ cy . get ( '#myGrid' )
141+ . find ( 'button.slick-gridmenu-button' )
142+ . trigger ( 'click' )
143+ . click ( ) ;
144+
145+ cy . get ( '.slick-gridmenu-item' )
146+ . contains ( 'Clear Filters' )
147+ . click ( ) ;
148+
149+ cy . get ( '.grid-canvas' )
150+ . find ( '.slick-row' )
151+ . should ( 'be.visible' ) ;
152+
153+ cy . get ( '#myGrid' )
154+ . find ( '.slick-row' )
155+ . its ( 'length' )
156+ . should ( 'be.gt' , 1 )
157+
158+ cy . get ( '#myGrid' )
159+ . get ( '.slick-gridmenu:visible' )
160+ . find ( 'span.close' )
161+ . trigger ( 'click' )
162+ . click ( ) ;
163+ } ) ;
164+
165+ it ( 'should drag column "A" to be after column "C" and expect this to be reflected in the Grid Menu' , ( ) => {
166+ const expectedGridMenuList = [ 'B' , 'C' , 'A' , 'D' , 'E' , 'F' , 'G' , 'H' , 'I' , 'J' , 'Force fit columns' , 'Synchronous resize' ] ; // without "A"
167+
168+ cy . get ( '.slick-header-columns' )
169+ . children ( '.slick-header-column:nth(1)' )
170+ . should ( 'contain' , 'A' )
171+ . trigger ( 'mousedown' , 'bottom' , { which : 1 } ) ;
172+
173+ cy . get ( '.slick-header-columns' )
174+ . children ( '.slick-header-column:nth(3)' )
175+ . should ( 'contain' , 'C' )
176+ . trigger ( 'mousemove' , 'bottomRight' )
177+ . trigger ( 'mouseup' , 'bottomRight' , { force : true } ) ;
178+
179+ cy . get ( 'button' )
180+ . contains ( 'Grid Menu' )
181+ . trigger ( 'click' )
182+ . click ( ) ;
183+
184+ cy . get ( '#myGrid' )
185+ . get ( '.slick-gridmenu:visible' )
186+ . find ( '.slick-gridmenu-list' )
187+ . children ( 'li:visible' )
188+ . each ( ( $child , index ) => expect ( $child . text ( ) ) . to . eq ( expectedGridMenuList [ index ] ) ) ;
69189 } ) ;
70190} ) ;
0 commit comments