From 99635f9fd071d96f1096dc9b1a0f0cec5b15361b Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 16 Nov 2023 15:26:52 -0500 Subject: [PATCH 1/2] chore: improve Cypress tests on basic grid w/large columns & scrolling --- cypress/e2e/example-example1-simple.cy.ts | 41 ++++++++++------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/cypress/e2e/example-example1-simple.cy.ts b/cypress/e2e/example-example1-simple.cy.ts index e16a91c1..8d2c8d58 100644 --- 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)') @@ -74,34 +84,23 @@ describe('Example 1 - Basic Grid', () => { cy.get('.slick-header-column:nth(3)') .trigger('mousemove', 'bottomRight') .trigger('mouseup', 'bottomRight', { which: 1, force: true }); - - // resize Title column - cy.get('.slick-header-columns') - .children('.slick-header-column:nth(0)') - .should('contain', 'Title'); - - 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 }); }); 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 +109,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]*/); From 73b6aea4f14737493372e584129c338208e077f6 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Thu, 16 Nov 2023 15:33:27 -0500 Subject: [PATCH 2/2] chore: improve Cypress test even further by resizing all columns --- cypress/e2e/example-example1-simple.cy.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/example-example1-simple.cy.ts b/cypress/e2e/example-example1-simple.cy.ts index 8d2c8d58..0cbd289f 100644 --- a/cypress/e2e/example-example1-simple.cy.ts +++ b/cypress/e2e/example-example1-simple.cy.ts @@ -79,11 +79,18 @@ describe('Example 1 - Basic Grid', () => { cy.get('.slick-resizable-handle:nth(1)') .trigger('mousedown', { which: 1, force: true }) - .trigger('mousemove', 'bottomRight'); + .trigger('mousemove', { which: 1, force: true, pageX: 250, pageY: 25 }) + .trigger('mouseup', { force: true }); - cy.get('.slick-header-column:nth(3)') - .trigger('mousemove', 'bottomRight') - .trigger('mouseup', 'bottomRight', { which: 1, force: true }); + // resize Title column + cy.get('.slick-header-columns') + .children('.slick-header-column:nth(0)') + .should('contain', 'Title'); + + cy.get('.slick-resizable-handle:nth(0)') + .trigger('mousedown', { 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', () => {