|
| 1 | +import { IgxGridModule, IgxGridComponent } from './public_api'; |
| 2 | +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; |
| 3 | +import { async, TestBed, fakeAsync } from '@angular/core/testing'; |
| 4 | +import { configureTestSuite } from '../../test-utils/configure-suite'; |
| 5 | +import { DebugElement } from '@angular/core'; |
| 6 | +import { GridFunctions } from '../../test-utils/grid-functions.spec'; |
| 7 | +import { |
| 8 | + IgxAddRowComponent |
| 9 | +} from '../../test-utils/grid-samples.spec'; |
| 10 | + |
| 11 | +import { By } from '@angular/platform-browser'; |
| 12 | +import { IgxActionStripComponent } from '../../action-strip/action-strip.component'; |
| 13 | +import { IgxActionStripModule } from '../../action-strip/action-strip.module'; |
| 14 | +import { UIInteractions } from '../../test-utils/ui-interactions.spec'; |
| 15 | + |
| 16 | +describe('IgxGrid - Row Adding #grid', () => { |
| 17 | + let fixture; |
| 18 | + let grid: IgxGridComponent; |
| 19 | + let gridContent: DebugElement; |
| 20 | + let actionStrip: IgxActionStripComponent; |
| 21 | + configureTestSuite(); |
| 22 | + beforeAll(async(() => { |
| 23 | + TestBed.configureTestingModule({ |
| 24 | + declarations: [ |
| 25 | + IgxAddRowComponent |
| 26 | + ], |
| 27 | + imports: [ |
| 28 | + NoopAnimationsModule, |
| 29 | + IgxActionStripModule, |
| 30 | + IgxGridModule] |
| 31 | + }).compileComponents(); |
| 32 | + })); |
| 33 | + |
| 34 | + describe('General tests', () => { |
| 35 | + beforeEach(fakeAsync(/** height/width setter rAF */() => { |
| 36 | + fixture = TestBed.createComponent(IgxAddRowComponent); |
| 37 | + fixture.detectChanges(); |
| 38 | + grid = fixture.componentInstance.grid; |
| 39 | + gridContent = GridFunctions.getGridContent(fixture); |
| 40 | + actionStrip = fixture.componentInstance.actionStrip; |
| 41 | + })); |
| 42 | + |
| 43 | + it('Should be able to enter add row mode on action strip click', () => { |
| 44 | + const row = grid.rowList.first; |
| 45 | + actionStrip.show(row); |
| 46 | + fixture.detectChanges(); |
| 47 | + const addRowIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1]; |
| 48 | + addRowIcon.parent.triggerEventHandler('click', new Event('click')); |
| 49 | + fixture.detectChanges(); |
| 50 | + const addRow = grid.getRowByIndex(1); |
| 51 | + expect(addRow.addRow).toBeTrue(); |
| 52 | + }); |
| 53 | + |
| 54 | + it('Should be able to enter add row mode through the exposed API method (w/ and w/o rowID)', () => { |
| 55 | + grid.beginAddRow(); |
| 56 | + fixture.detectChanges(); |
| 57 | + let addRow = grid.getRowByIndex(1); |
| 58 | + expect(addRow.addRow).toBeTrue(); |
| 59 | + |
| 60 | + UIInteractions.triggerEventHandlerKeyDown('escape', gridContent); |
| 61 | + fixture.detectChanges(); |
| 62 | + addRow = grid.getRowByIndex(1); |
| 63 | + expect(addRow.addRow).toBeFalse(); |
| 64 | + |
| 65 | + grid.beginAddRow('ANATR'); |
| 66 | + fixture.detectChanges(); |
| 67 | + addRow = grid.getRowByIndex(2); |
| 68 | + expect(addRow.addRow).toBeTrue(); |
| 69 | + }); |
| 70 | + |
| 71 | + it('Should display the banner above the row if there is no room underneath it', () => { |
| 72 | + grid.paging = true; |
| 73 | + grid.perPage = 7; |
| 74 | + fixture.detectChanges(); |
| 75 | + |
| 76 | + const lastRow = grid.rowList.last; |
| 77 | + const lastRowIndex = lastRow.index; |
| 78 | + actionStrip.show(lastRow); |
| 79 | + fixture.detectChanges(); |
| 80 | + |
| 81 | + const addRowIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1]; |
| 82 | + addRowIcon.parent.triggerEventHandler('click', new Event('click')); |
| 83 | + fixture.detectChanges(); |
| 84 | + |
| 85 | + |
| 86 | + const addRow = grid.getRowByIndex(lastRowIndex + 1); |
| 87 | + expect(addRow.addRow).toBeTrue(); |
| 88 | + |
| 89 | + const banner = GridFunctions.getRowEditingOverlay(fixture); |
| 90 | + fixture.detectChanges(); |
| 91 | + const bannerBottom = banner.getBoundingClientRect().bottom; |
| 92 | + const addRowTop = addRow.nativeElement.getBoundingClientRect().top; |
| 93 | + |
| 94 | + // The banner appears above the row |
| 95 | + expect(bannerBottom).toBeLessThanOrEqual(addRowTop); |
| 96 | + |
| 97 | + // No much space between the row and the banner |
| 98 | + expect(addRowTop - bannerBottom).toBeLessThan(2); |
| 99 | + }); |
| 100 | + |
| 101 | + it('Should not be able to enter add row mode when rowEditing is disabled', () => { |
| 102 | + grid.rowEditable = false; |
| 103 | + fixture.detectChanges(); |
| 104 | + |
| 105 | + grid.beginAddRow(); |
| 106 | + fixture.detectChanges(); |
| 107 | + |
| 108 | + const banner = GridFunctions.getRowEditingOverlay(fixture); |
| 109 | + expect(banner).toBeNull(); |
| 110 | + expect(grid.getRowByIndex(1).addRow).toBeFalse(); |
| 111 | + }); |
| 112 | + |
| 113 | + }); |
| 114 | +}); |
0 commit comments