fix: regression introduced by PR #640 and commit f12f4cc

cypress/integration/example-frozen-columns-and-column-group.spec.js

@@ -4,7 +4,7 @@ describe('Example - Row Grouping Titles', () => {
     const fullPreTitles = ['', 'Common Factor', 'Period', 'Analysis'];
     const fullTitles = ['#', 'Title', 'Duration', 'Start', 'Finish', '% Complete', 'Effort Driven'];
 
-    it('should display Example Grid Menu', () => {
+    it('should display Example Frozen Columns & Column Group', () => {
         cy.visit(`${Cypress.config('baseExampleUrl')}/example-frozen-columns-and-column-group.html`);
         cy.get('h2').should('contain', 'Demonstrates:');
         cy.contains('Frozen columns with extra header row grouping columns into categories');

cypress/integration/example-frozen-columns-and-rows.spec.js

@@ -0,0 +1,111 @@
+/// <reference types="cypress" />
+
+describe('Example - Frozen Columns & Rows', { retries: 1 }, () => {
+  // NOTE:  everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
+
+  const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Title1', 'Title2', 'Title3', 'Title4'];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example-frozen-columns-and-rows.html`);
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    // top-right
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 5');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 6');
+
+    // bottom-right
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '5');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(4)').should('contain', '6');
+  });
+
+  it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
+    cy.get('input#frozenRow').type('{backspace}7');
+    cy.get('button#setFrozenRow').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    // top-right
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 8');
+
+    // bottom-right
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(4)').should('contain', '8');
+  });
+
+  it('should change frozen column and increment by 1 and expect changes to be reflected in the grid', () => {
+    cy.get('input#frozenColumn').type('{backspace}3');
+    cy.get('button#setFrozenColumn').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 4 * 2);
+    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 7 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+
+    // top-right
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 8');
+
+    // bottom-right
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(3)').should('contain', '8');
+  });
+
+  it('should click on "Select first 10 rows" button and expect first few rows to be selected', () => {
+    cy.get('button#btnSelectRows').click();
+    cy.get('.selected').should('have.length', 10 * 11); // 10 rows * 11 columns
+  });
+});

cypress/integration/example-frozen-rows.spec.js

@@ -0,0 +1,94 @@
+/// <reference types="cypress" />
+
+describe('Example - Frozen Rows', { retries: 1 }, () => {
+  // NOTE:  everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
+
+  const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven', 'Title1', 'Title2', 'Title3', 'Title4'];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example-frozen-rows.html`);
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have exact Column Header Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns:nth(0)')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
+    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 49995');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '49995');
+  });
+
+  it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
+    cy.get('input#frozenRow').type('{backspace}7');
+    cy.get('button#setFrozenRow').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 49993');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '49993');
+  });
+
+  it('should uncheck "frozen bottom rows" and set it', () => {
+    cy.get('input#frozenBottomRows').uncheck();
+    cy.get('button#setFrozenBottomRows').click();
+
+    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+
+    // top-left
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+
+    // bottom-left
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '7');
+  });
+});

package.json

@@ -34,8 +34,8 @@
     "jquery-ui": ">=1.8.0"
   },
   "devDependencies": {
-    "cypress": "^8.3.1",
+    "cypress": "^8.5.0",
     "eslint": "^7.32.0",
-    "http-server": "^13.0.1"
+    "http-server": "^13.0.2"
   }
 }