Skip to content

feat(igxGrid): Row pinning + MRL integration (Adding tests) #6924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 20, 2020
Merged

feat(igxGrid): Row pinning + MRL integration (Adding tests) #6924

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8580823
feat(igxGrid): Row pinning + MRL integration #6640
Mar 18, 2020
ed891ba
chore(*): removing column groups in the test template
Mar 18, 2020
88a309b
chore(*): fixing a type mistake
Mar 18, 2020
3915c1b
Merge remote-tracking branch 'origin/master' into mdragnev/row-pinnin…
ChronosSF Mar 20, 2020
e228ad1
Merge remote-tracking branch 'origin/master' into mdragnev/row-pinnin…
ChronosSF Mar 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 122 additions & 1 deletion projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
import { IPinningConfig } from '../common/grid.interface';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { verifyLayoutHeadersAreAligned, verifyDOMMatchesLayoutSettings } from '../../test-utils/helper-utils.spec';

describe('Row Pinning #grid', () => {
const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned ';
Expand All @@ -18,7 +19,8 @@ describe('Row Pinning #grid', () => {
beforeAll(async(() => {
TestBed.configureTestingModule({
declarations: [
GridRowPinningComponent
GridRowPinningComponent,
GridRowPinningWithMRLComponent
],
imports: [
NoopAnimationsModule,
Expand Down Expand Up @@ -217,6 +219,92 @@ describe('Row Pinning #grid', () => {
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]);
});
});
describe('Row pinning with MRL', () => {
beforeEach(fakeAsync(() => {
fix = TestBed.createComponent(GridRowPinningWithMRLComponent);
fix.detectChanges();
grid = fix.componentInstance.instance;
tick();
fix.detectChanges();
}));

it('should pin/unpin correctly to top', () => {
// pin
grid.pinRow(fix.componentInstance.data[1]);
fix.detectChanges();

expect(grid.pinnedRecords.length).toBe(1);
const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
expect(pinRowContainer.length).toBe(1);
expect(pinRowContainer[0].children.length).toBe(1);
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
expect(pinRowContainer[0].children[0].nativeElement).toBe(grid.getRowByIndex(0).nativeElement);

expect(grid.getRowByIndex(0).pinned).toBeTruthy();
const gridPinnedRow = grid.pinnedRows[0];
const pinnedRowCells = gridPinnedRow.cells.toArray();
const headerCells = grid.headerGroups.first.children.toArray();

// headers are aligned to cells
verifyLayoutHeadersAreAligned(headerCells, pinnedRowCells);
verifyDOMMatchesLayoutSettings(gridPinnedRow, fix.componentInstance.colGroups);

// unpin
const row = grid.pinnedRows[0];
row.pinned = false;
fix.detectChanges();

expect(grid.pinnedRecords.length).toBe(0);
expect(row.pinned).toBeFalsy();

const gridUnpinnedRow = grid.getRowByIndex(1);
const unpinnedRowCells = gridUnpinnedRow.cells.toArray();

verifyLayoutHeadersAreAligned(headerCells, unpinnedRowCells);
verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
});

it('should pin/unpin correctly to bottom', () => {

fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom };
fix.detectChanges();

// pin
grid.pinRow(fix.componentInstance.data[1]);
fix.detectChanges();

expect(grid.pinnedRecords.length).toBe(1);
const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
expect(pinRowContainer.length).toBe(1);
expect(pinRowContainer[0].children.length).toBe(1);
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
expect(pinRowContainer[0].children[0].nativeElement)
.toBe(grid.getRowByIndex(fix.componentInstance.data.length - 1).nativeElement);

expect(grid.getRowByIndex(fix.componentInstance.data.length - 1).pinned).toBeTruthy();
const gridPinnedRow = grid.pinnedRows[0];
const pinnedRowCells = gridPinnedRow.cells.toArray();
const headerCells = grid.headerGroups.first.children.toArray();

// headers are aligned to cells
verifyLayoutHeadersAreAligned(headerCells, pinnedRowCells);
verifyDOMMatchesLayoutSettings(gridPinnedRow, fix.componentInstance.colGroups);

// unpin
const row = grid.pinnedRows[0];
row.pinned = false;
fix.detectChanges();

expect(grid.pinnedRecords.length).toBe(0);
expect(row.pinned).toBeFalsy();

const gridUnpinnedRow = grid.getRowByIndex(1);
const unpinnedRowCells = gridUnpinnedRow.cells.toArray();

verifyLayoutHeadersAreAligned(headerCells, unpinnedRowCells);
verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
});
});
});

@Component({
Expand All @@ -237,3 +325,36 @@ export class GridRowPinningComponent {
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
public instance: IgxGridComponent;
}

@Component({
template: `
<igx-grid [data]="data" height="500px" [pinning]='pinningConfig'>
<igx-column-group header="General Information">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Column groups are not supported with MRL. There should be no columns outside of those blocks and no usage of IgxColumnGroupComponent when configuring a multi row layout.

<igx-column field="CompanyName"></igx-column>
<igx-column-group [movable]="true" header="Person Details">
<igx-column field="ContactName"></igx-column>
<igx-column field="ContactTitle"></igx-column>
</igx-column-group>
</igx-column-group>
<igx-column-layout *ngFor='let group of colGroups'>
<igx-column *ngFor='let col of group.columns'
[rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
</igx-column-layout>
</igx-grid>
`
})
export class GridRowPinningWithMRLComponent extends GridRowPinningComponent {
cols: Array<any> = [
{ field: 'ID', rowStart: 1, colStart: 1 },
{ field: 'CompanyName', rowStart: 1, colStart: 2 },
{ field: 'ContactName', rowStart: 1, colStart: 3 },
{ field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 },
];
colGroups = [
{
group: 'group1',
columns: this.cols
}
];
}