Skip to content

Commit

Permalink
fix: add CSP safe option for DataView filtering and adjusting inline …
Browse files Browse the repository at this point in the history 
…css for CSP (#908)
  • Loading branch information
@JesperJakobsenCIM
JesperJakobsenCIM authored Nov 13, 2023
1 parent 9013526 commit ff970c0
Show file tree
Hide file tree
Showing 22 changed files with 594 additions and 459 deletions.
22 changes: 11 additions & 11 deletions cypress/e2e/example-auto-scroll-when-dragging.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,15 +190,15 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
});

it('should have a frozen grid with 4 containers with 2 columns on the left and 3 rows on the top after click Set/Clear Frozen button', () => {
cy.get('#myGrid [style="top:0px"]').should('have.length', 1);
cy.get('#myGrid2 [style="top:0px"]').should('have.length', 1);
cy.get('#myGrid [style="top: 0px;"]').should('have.length', 1);
cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 1);

cy.get('#toggleFrozen').click();

cy.get('#myGrid [style="top:0px"]').should('have.length', 2 * 2);
cy.get('#myGrid2 [style="top:0px"]').should('have.length', 2 * 2);
cy.get('#myGrid .grid-canvas-left > [style="top:0px"]').children().should('have.length', 2 * 2);
cy.get('#myGrid2 .grid-canvas-left > [style="top:0px"]').children().should('have.length', 2 * 2);
cy.get('#myGrid [style="top: 0px;"]').should('have.length', 2 * 2);
cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 2 * 2);
cy.get('#myGrid .grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2);
cy.get('#myGrid2 .grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2);
cy.get('#myGrid .grid-canvas-top').children().should('have.length', 3 * 2);
cy.get('#myGrid2 .grid-canvas-top').children().should('have.length', 3 * 2);
});
Expand Down Expand Up @@ -268,8 +268,8 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {

it('should have a frozen & grouping by Duration grid after click Set/Clear grouping by Duration button', { scrollBehavior: false }, () => {
cy.get('#toggleGroup').trigger('click');
cy.get('#myGrid [style="top:0px"]').should('have.length', 2 * 2);
cy.get('#myGrid2 [style="top:0px"]').should('have.length', 2 * 2);
cy.get('#myGrid [style="top: 0px;"]').should('have.length', 2 * 2);
cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 2 * 2);
cy.get('#myGrid .grid-canvas-top.grid-canvas-left').contains('Duration');
cy.get('#myGrid2 .grid-canvas-top.grid-canvas-left').contains('Duration');
});
Expand All @@ -282,7 +282,7 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
cy.get('@viewport').invoke('scrollTop').then(scrollAfter => {
expect(scrollBefore).to.be.lessThan(scrollAfter);
cy.dragEnd(selector);
cy.get(selector + ' [style="top:350px"].slick-group').should('not.be.hidden');;
cy.get(selector + ' [style="top: 350px;"].slick-group').should('not.be.hidden');;
});
});
}
Expand All @@ -295,8 +295,8 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
it('should reset to default grid when click Set/Clear Frozen button and Set/Clear grouping button', () => {
cy.get('#toggleFrozen').trigger('click');
cy.get('#toggleGroup').trigger('click');
cy.get('#myGrid [style="top:0px"]').should('have.length', 1);
cy.get('#myGrid2 [style="top:0px"]').should('have.length', 1);
cy.get('#myGrid [style="top: 0px;"]').should('have.length', 1);
cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 1);
});

});
24 changes: 12 additions & 12 deletions cypress/e2e/example-autotooltips.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,22 +34,22 @@ describe('Example AutoTooltips Plugin', () => {
.trigger('mousemove', 'bottomRight')
.trigger('mouseup', 'bottomRight', { which: 1, force: true });

cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l3.r3`).trigger('mouseover');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3.r3`).trigger('mouseover');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');

cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l3.r3`).trigger('mouseover');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l3.r3`).trigger('mouseover');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
});

it('should hover over "Finish" cell to see tooltip', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).trigger('mouseover');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).trigger('mouseover');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');

cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).trigger('mouseover');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).trigger('mouseover');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
});
});
6 changes: 3 additions & 3 deletions cypress/e2e/example-checkbox-header-row.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,16 @@ describe('Example - Checkbox Header Row', () => {

// Row index 3, 5 and 21 (last one will be on 2nd page)
cy.get('input[type="checkbox"]:checked').should('have.length', 2); // 2x in current page and 1x in next page
cy.get('[style="top:75px"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
cy.get('[style="top:125px"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
cy.get('[style="top: 75px;"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
cy.get('[style="top: 125px;"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
});

it('should go to next page and expect 1 row selected in that second page', () => {
cy.get('.sgi-chevron-right')
.click();

cy.get('input[type="checkbox"]:checked').should('have.length', 1); // only 1x row in page 2
cy.get('[style="top:100px"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
cy.get('[style="top: 100px;"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
});

it('should click on "Select All" checkbox and expect all rows selected in current page', () => {
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/example-checkbox-row-select.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ describe('Example - Checkbox Row Select', () => {
});

it('should be able to select first 2 rows and now expect 3 rows selected', () => {
cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) input[type=checkbox]`).click();
cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) input[type=checkbox]`).click();

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
Expand All @@ -43,7 +43,7 @@ describe('Example - Checkbox Row Select', () => {
cy.get('#unselectRow5')
.click();

cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) input[type=checkbox]`)
cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) input[type=checkbox]`)
.should('not.be.checked');

cy.get('#myGrid')
Expand Down
24 changes: 12 additions & 12 deletions cypress/e2e/example-colspan.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,26 @@ describe('Example - Column Span & Header Grouping', { retries: 1 }, () => {
});

it('should expect 1st row to be 1 column spanned to the entire width', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('not.exist');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.exist');
});

it('should expect 2nd row to be 4 columns and not be spanned', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '5 days');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).contains(/(true|false)/);
});

it('should expect 3rd row to be 1 column spanned to the entire width', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('not.exist');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('not.exist');
});

it('should expect 4th row to be 4 columns and not be spanned', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', '5 days');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).contains(/(true|false)/);
});
});
Loading

0 comments on commit ff970c0

Please sign in to comment.