test(pivot): fix navigation tests

Author: dkamburov

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts

@@ -8,8 +8,8 @@ import { IgxPivotGridMultipleRowComponent } from '../../test-utils/pivot-grid-sa
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 
 const PIVOT_TBODY_CSS_CLASS = '.igx-grid__tbody';
+const PIVOT_ROW_DIMENSION_CONTENT = 'igx-pivot-row-dimension-content';
 const PIVOT_HEADER_ROW = 'igx-pivot-header-row';
-const COLUMNS_HEADER_CSS_CLASS = '.igx-grid-thead__wrapper';
 const HEADER_CELL_CSS_CLASS = '.igx-grid-th';
 const ACTIVE_CELL_CSS_CLASS = '.igx-grid-th--active';
 
@@ -35,7 +35,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
 
     it('should allow navigating between row headers', () => {
         const [firstCell, secondCell] = fixture.debugElement.queryAll(
-            By.css(`${PIVOT_TBODY_CSS_CLASS} ${COLUMNS_HEADER_CSS_CLASS} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_ROW_DIMENSION_CONTENT} ${HEADER_CELL_CSS_CLASS}`));
         UIInteractions.simulateClickAndSelectEvent(firstCell);
         fixture.detectChanges();
 
@@ -52,7 +52,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
 
     it('should not go outside of the boundaries of the row dimensions content', () => {
         const [firstCell, _, thirdCell] = fixture.debugElement.queryAll(
-            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_ROW_DIMENSION_CONTENT} ${HEADER_CELL_CSS_CLASS}`));
         UIInteractions.simulateClickAndSelectEvent(firstCell);
         fixture.detectChanges();
 
@@ -76,17 +76,17 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
 
     it('should allow navigating from first to last row headers in a row(Home/End)', () => {
         const [firstCell, _, thirdCell] = fixture.debugElement.queryAll(
-            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_ROW_DIMENSION_CONTENT} ${HEADER_CELL_CSS_CLASS}`));
         UIInteractions.simulateClickAndSelectEvent(firstCell);
         fixture.detectChanges();
 
-        UIInteractions.triggerKeyDownEvtUponElem('End', firstCell.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('End', pivotGrid.theadRow.nativeElement);
         fixture.detectChanges();
         GridFunctions.verifyHeaderIsFocused(thirdCell.parent);
         let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
         expect(activeCells.length).toBe(1);
 
-        UIInteractions.triggerKeyDownEvtUponElem('Home', thirdCell.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('Home', pivotGrid.theadRow.nativeElement);
         fixture.detectChanges();
         GridFunctions.verifyHeaderIsFocused(firstCell.parent);
         activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
@@ -95,17 +95,16 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
 
     it('should allow navigating from first to last row headers(Ctrl + End)', () => {
         const [firstCell] = fixture.debugElement.queryAll(
-            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_ROW_DIMENSION_CONTENT} ${HEADER_CELL_CSS_CLASS}`));
         UIInteractions.simulateClickAndSelectEvent(firstCell);
         fixture.detectChanges();
 
-        UIInteractions.triggerKeyDownEvtUponElem('End', firstCell.nativeElement, false, false, false, true);
+        UIInteractions.triggerKeyDownEvtUponElem('End', pivotGrid.theadRow.nativeElement, false, false, false, true);
         fixture.detectChanges();
 
         const allCells = fixture.debugElement.queryAll(
-            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_TBODY_CSS_CLASS} ${PIVOT_ROW_DIMENSION_CONTENT} ${HEADER_CELL_CSS_CLASS}`));
         const lastCell = allCells[allCells.length - 1];
-        fixture.detectChanges();
         GridFunctions.verifyHeaderIsFocused(lastCell.parent);
         const activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
         expect(activeCells.length).toBe(1);
@@ -119,7 +118,7 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
 
     it('should allow navigating between column headers', () => {
         const [firstHeader, secondHeader] = fixture.debugElement.queryAll(
-            By.css(`${COLUMNS_HEADER_CSS_CLASS} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
         UIInteractions.simulateClickAndSelectEvent(firstHeader);
         fixture.detectChanges();
 
@@ -135,20 +134,20 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
     });
     it('should allow navigating from first to last column headers', () => {
         const [firstHeader] = fixture.debugElement.queryAll(
-            By.css(`${COLUMNS_HEADER_CSS_CLASS} ${HEADER_CELL_CSS_CLASS}`));
+            By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
         UIInteractions.simulateClickAndSelectEvent(firstHeader);
         fixture.detectChanges();
 
         GridFunctions.verifyHeaderIsFocused(firstHeader.parent);
         let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
         expect(activeCells.length).toBe(1);
 
-        UIInteractions.triggerKeyDownEvtUponElem('End', firstHeader.nativeElement);
+        UIInteractions.triggerKeyDownEvtUponElem('End', pivotGrid.theadRow.nativeElement);
         fixture.detectChanges();
 
         const allHeaders = fixture.debugElement.queryAll(
-            By.css(`${COLUMNS_HEADER_CSS_CLASS} ${HEADER_CELL_CSS_CLASS}`));
-        const lastHeader = allHeaders[length - 1];
+            By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
+        const lastHeader = allHeaders[allHeaders.length - 1];
         GridFunctions.verifyHeaderIsFocused(lastHeader.parent);
         activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
         expect(activeCells.length).toBe(1);

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html

@@ -1,6 +1,6 @@
     <!-- Row Dimension -->
     <div #rowDimensionContainer>
-            <igx-pivot-row-dimension-content class="igx-grid-thead" tabindex="0"
+            <igx-pivot-row-dimension-content class="igx-grid-thead"
             [grid]="grid"
             [hasMRL]="grid.hasColumnLayouts"
             [density]="grid.displayDensity"

projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts

@@ -102,7 +102,7 @@ export class IgxPivotGridTestBaseComponent {
 
 @Component({
     template: `
-    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
+    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]="true">
     </igx-pivot-grid>`
 })
 export class IgxPivotGridMultipleRowComponent extends IgxPivotGridTestBaseComponent {

src/app/pivot-grid/pivot-grid.sample.html

@@ -14,6 +14,7 @@
 <igx-pivot-grid
     #grid1 [data]="origData"
     [pivotConfiguration]="pivotConfigHierarchy"
-    (dimensionsChange)='dimensionChange($event)'>
+    (dimensionsChange)='dimensionChange($event)'
+    [defaultExpandState]='true'>
 </igx-pivot-grid>