chore: improve Cypress tests on basic grid w/large columns & scrolling (

#916) * chore: improve Cypress tests on basic grid w/large columns & scrolling
6pac · Nov 16, 2023 · f1c6038 · f1c6038
1 parent 4cc99f1
commit f1c6038
Showing 1 changed file with 22 additions and 20 deletions.
diff --git a/cypress/e2e/example-example1-simple.cy.ts b/cypress/e2e/example-example1-simple.cy.ts
@@ -23,6 +23,16 @@ describe('Example 1 - Basic Grid', () => {
   });
 
   it('should resize all columns and make them wider', () => {
+    // resize EffortDriven column
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(5)')
+      .should('contain', 'Effort Driven');
+
+    cy.get('.slick-resizable-handle:nth(5)')
+      .trigger('mousedown', { which: 1, force: true, pageX: 500, pageY: 25 })
+      .trigger('mousemove', { which: 1, force: true, pageX: 600, pageY: 25 })
+      .trigger('mouseup', { force: true });
+
     // resize Finish column
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(4)')
@@ -69,11 +79,8 @@ describe('Example 1 - Basic Grid', () => {
 
     cy.get('.slick-resizable-handle:nth(1)')
       .trigger('mousedown', { which: 1, force: true })
-      .trigger('mousemove', 'bottomRight');
-
-    cy.get('.slick-header-column:nth(3)')
-      .trigger('mousemove', 'bottomRight')
-      .trigger('mouseup', 'bottomRight', { which: 1, force: true });
+      .trigger('mousemove', { which: 1, force: true, pageX: 250, pageY: 25 })
+      .trigger('mouseup', { force: true });
 
     // resize Title column
     cy.get('.slick-header-columns')
@@ -82,26 +89,25 @@ describe('Example 1 - Basic Grid', () => {
 
     cy.get('.slick-resizable-handle:nth(0)')
       .trigger('mousedown', { which: 1, force: true })
-      .trigger('mousemove', 'bottomRight');
-
-    cy.get('.slick-header-column:nth(2)')
-      .trigger('mousemove', 'bottomRight')
-      .trigger('mouseup', 'bottomRight', { which: 1, force: true });
+      .trigger('mousemove', { which: 1, force: true, pageX: 80, pageY: 25 })
+      .trigger('mouseup', { force: true });
   });
 
   it('should scroll horizontally completely to the right and expect all cell to be rendered', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1`).should('contain', '5 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2`).contains(/[0-9]*/);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l1`).should('contain', '5 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l2`).contains(/[0-9]*/);
+
     // scroll to right
     cy.get('.slick-viewport-top.slick-viewport-left')
-      .scrollTo('100%', '0%', { duration: 1000 });
+      .scrollTo('100%', '0%', { duration: 1500 });
 
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l1`).should('contain', '5 days');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2`).contains(/[0-9]*/);
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3`).should('contain', '01/01/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4`).should('contain', '01/05/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l2`).contains(/[true|false]*/);
 
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l1`).should('contain', '5 days');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l2`).contains(/[0-9]*/);
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l3`).should('contain', '01/01/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l4`).should('contain', '01/05/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 15}px;"] > .slick-cell.l2`).contains(/[true|false]*/);
@@ -110,16 +116,12 @@ describe('Example 1 - Basic Grid', () => {
   it('should scroll vertically to the middle of the grid and expect all cell to be rendered', () => {
     // scroll to right
     cy.get('.slick-viewport-top.slick-viewport-left')
-      .scrollTo('100%', '40%', { duration: 1000 });
+      .scrollTo('100%', '40%', { duration: 1500 });
 
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 195}px;"] > .slick-cell.l1`).should('contain', '5 days');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 195}px;"] > .slick-cell.l2`).contains(/[0-9]*/);
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 195}px;"] > .slick-cell.l3`).should('contain', '01/01/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 195}px;"] > .slick-cell.l4`).should('contain', '01/05/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 195}px;"] > .slick-cell.l2`).contains(/[true|false]*/);
 
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 210}px;"] > .slick-cell.l1`).should('contain', '5 days');
-    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 210}px;"] > .slick-cell.l2`).contains(/[0-9]*/);
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 210}px;"] > .slick-cell.l3`).should('contain', '01/01/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 210}px;"] > .slick-cell.l4`).should('contain', '01/05/2009');
     cy.get(`[style="top: ${GRID_ROW_HEIGHT * 210}px;"] > .slick-cell.l2`).contains(/[true|false]*/);