fix: add missing key shortcuts for grid navigation & cell selections (#1093)

Author: ghiscoding

cypress/e2e/example-frozen-columns-and-rows-spreadsheet.cy.ts

@@ -0,0 +1,86 @@
+describe('Example - Spreadsheet and Cell Selection', { retries: 0 }, () => {
+  const GRID_ROW_HEIGHT = 25;
+  const titles = [
+    '', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
+    'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y',
+    'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK'
+  ];
+
+  it('should load Example', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/examples/example-frozen-columns-and-rows-spreadsheet.html`);
+  });
+
+  it('should have exact column titles on grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => {
+        if (index < titles.length) {
+          expect($child.text()).to.eq(titles[index]);
+        }
+      });
+  });
+
+  it('should click on cell B5 (top left canvas) and ArrowUp 1 times and ArrowDown 3 time and expect cell selection B5-B8 (from top left canvas to bottom left canvas', () => {
+    cy.get(`.grid-canvas-top.grid-canvas-left .slick-row[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell.l2.r2`)
+      .as('cell_B5')
+      .click();
+
+    cy.get('@cell_B5')
+      .type('{shift}{uparrow}{downarrow}{downarrow}{downarrow}{downarrow}', { release: false });
+
+    cy.get('.slick-cell.l2.r2.selected')
+      .should('have.length', 4);
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":5,"fromCell":2,"toCell":2,"toRow":8}');
+  });
+
+  it('should click on cell E5 (top right canvas) then PageDown 2 times w/selection E5-F41 (bottom right canvas', () => {
+    cy.get(`.grid-canvas-top.grid-canvas-right .slick-row[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell.l5.r5`)
+      .as('cell_E5')
+      .click();
+
+    cy.get('@cell_E5')
+      .type('{shift}{rightarrow}{pagedown}{pagedown}', { release: false });
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":5,"fromCell":5,"toCell":6,"toRow":41}');
+  });
+
+  it('should click on cell F40 then Shift+Ctrl+Home and expect selection A0-F40', () => {
+    cy.get(`.grid-canvas-bottom.grid-canvas-right .slick-row[style="top: ${GRID_ROW_HEIGHT * 33}px;"] > .slick-cell.l6.r6`)
+      .as('cell_F40')
+      .click();
+
+    cy.get('@cell_F40')
+      .type('{shift}{ctrl}{home}', { release: false });
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":0,"fromCell":0,"toCell":6,"toRow":40}');
+  });
+
+  it('should click on cell F40 then Shift+Ctrl+End and expect selection of F40-CV98', () => {
+    cy.get(`.grid-canvas-bottom.grid-canvas-right .slick-row[style="top: ${GRID_ROW_HEIGHT * 33}px;"] > .slick-cell.l5.r5`)
+      .as('cell_F40')
+      .click();
+
+    cy.get('@cell_F40')
+      .type('{shift}{ctrl}{end}', { release: false });
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":40,"fromCell":5,"toCell":100,"toRow":99}');
+  });
+
+  it('should click on cell CS95 then Ctrl+A and expect selection of A0-CV98', () => {
+    cy.get(`.grid-canvas-bottom.grid-canvas-right .slick-row[style="top: ${GRID_ROW_HEIGHT * 89}px;"] > .slick-cell.l95.r95`)
+      .as('cell_CS95')
+      .click();
+
+    cy.get('@cell_CS95')
+      .type('{ctrl}{A}', { release: false });
+
+    cy.get('#selectionRange')
+      .should('have.text', '{"fromRow":0,"fromCell":0,"toCell":100,"toRow":99}');
+  });
+});