Merge pull request #6927 from IgniteUI/dkamburov/kb-test-pinning

test(grid-pinning): Add tests for navigation to/from pinned area #6676

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid/grid.pinning.spec.ts

@@ -14,7 +14,7 @@ import { IGridCellEventArgs } from '../common/events';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnPinningPosition } from '../common/enums';
 import { IPinningConfig } from '../common/grid.interface';
-import { wait } from '../../test-utils/ui-interactions.spec';
+import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 
 describe('IgxGrid - Column Pinning #grid', () => {
@@ -23,6 +23,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
     const FIXED_HEADER_CSS = 'igx-grid__th--pinned';
     const FIXED_CELL_CSS = 'igx-grid__td--pinned';
     const FIRST_PINNED_CELL_CSS = 'igx-grid__td--pinned-first';
+    const DEBOUNCETIME = 30;
 
     describe('To Start', () => {
         configureTestSuite();
@@ -417,6 +418,39 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(grid.pinnedColumns.length).toEqual(1);
             expect(grid.unpinnedColumns.length).toEqual(2);
         }));
+
+        it('should allow navigating to/from pinned area', (async() => {
+            pending('https://github.com/IgniteUI/igniteui-angular/pull/6910');
+            const fix = TestBed.createComponent(DefaultGridComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance;
+
+            const cellContactName = grid.getCellByColumn(0, 'ContactName');
+            const range = {
+                rowStart: cellContactName.rowIndex,
+                rowEnd: cellContactName.rowIndex,
+                columnStart: cellContactName.visibleColumnIndex,
+                columnEnd: cellContactName.visibleColumnIndex
+            };
+            grid.selectRange(range);
+            grid.navigation.activeNode = {row: cellContactName.rowIndex, column: cellContactName.visibleColumnIndex};
+            fix.detectChanges();
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+
+            const cellID = grid.getCellByColumn(0, 'ID');
+            expect(cellID.active).toBe(true);
+            expect(cellContactName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+
+            expect(cellID.active).toBe(false);
+            expect(cellContactName.active).toBe(true);
+        }));
     });
 
     describe('To End', () => {
@@ -639,6 +673,61 @@ describe('IgxGrid - Column Pinning #grid', () => {
             expect(fistPinnedHeaders.classes['igx-grid__mrl-block']).toBeTruthy();
             expect(fistPinnedHeaders.classes['igx-grid__th--pinned-first']).toBeTruthy();
         });
+
+        it('should allow navigating to/from pinned area', (async() => {
+            pending('https://github.com/IgniteUI/igniteui-angular/pull/6910');
+            const fix = TestBed.createComponent(GridRightPinningComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance as any;
+
+            const cellCompanyName = grid.getCellByColumn(0, 'CompanyName');
+            const range = { rowStart: 0, rowEnd: 0, columnStart: 9, columnEnd: 9 };
+            grid.selectRange(range);
+            grid.navigation.activeNode = {row: 0, column: 9};
+            fix.detectChanges();
+            expect(cellCompanyName.active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellFax = grid.getCellByColumn(0, 'Fax');
+            expect(cellFax.active).toBe(true);
+            expect(cellCompanyName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            expect(cellFax.active).toBe(false);
+            expect(cellCompanyName.active).toBe(true);
+        }));
+
+        it('should allow navigating to/from pinned area using Ctrl+Left/Right', (async() => {
+            pending('https://github.com/IgniteUI/igniteui-angular/pull/6910');
+            const fix = TestBed.createComponent(GridRightPinningComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance as any;
+
+            const cellCompanyName = grid.getCellByColumn(0, 'CompanyName');
+            const range = { rowStart: 0, rowEnd: 0, columnStart: 9, columnEnd: 9 };
+            grid.selectRange(range);
+            grid.navigation.activeNode = {row: 0, column: 9};
+            fix.detectChanges();
+            expect(cellCompanyName.active).toBe(true);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft', false, false, true));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellID = grid.getCellByColumn(0, 'ID');
+            expect(cellID.active).toBe(true);
+            expect(cellCompanyName.active).toBe(false);
+
+            grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight', false, false, true));
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
+            const cellContactName = grid.getCellByColumn(0, 'ContactName');
+            expect(cellID.active).toBe(false);
+            expect(cellContactName.active).toBe(true);
+        }));
     });
 });