diff --git a/cypress/e2e/example-example1-simple.cy.ts b/cypress/e2e/example-example1-simple.cy.ts index e16a91c1..0cbd289f 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)') @@ -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]*/);