chore(*): Add CHANGELOG and some tests

mddragnev · mddragnev · commit 764034ce7a0b · 2020-09-25T16:38:39.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,21 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
+    - Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
+        - `beginAddRow` method which starts the adding row UI.
+        - `beginAddChild` method which starts the adding child UI.
+        ```typescript
+        this.grid.beginAddRow(rowID);
+        ```
+        - Added an input properties to `IgxGridEditingActions` component to show/hide add row and add child buttons which trigger the UI based on context expression.
+        ```html
+        <igx-tree-grid [rowEditing]="true">
+            <igx-action-strip #actionStrip>
+                <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
+                </igx-grid-editing-actions>
+            </igx-action-strip>
+        </igx-tree-grid>
+        ```
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts
@@ -0,0 +1,114 @@
+import { IgxGridModule, IgxGridComponent } from './public_api';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { async, TestBed, fakeAsync } from '@angular/core/testing';
+import { configureTestSuite } from '../../test-utils/configure-suite';
+import { DebugElement } from '@angular/core';
+import { GridFunctions } from '../../test-utils/grid-functions.spec';
+import {
+    IgxAddRowComponent
+} from '../../test-utils/grid-samples.spec';
+
+import { By } from '@angular/platform-browser';
+import { IgxActionStripComponent } from '../../action-strip/action-strip.component';
+import { IgxActionStripModule } from '../../action-strip/action-strip.module';
+import { UIInteractions } from '../../test-utils/ui-interactions.spec';
+
+describe('IgxGrid - Row Adding #grid', () => {
+        let fixture;
+        let grid: IgxGridComponent;
+        let gridContent: DebugElement;
+        let actionStrip: IgxActionStripComponent;
+    configureTestSuite();
+    beforeAll(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxAddRowComponent
+            ],
+            imports: [
+                NoopAnimationsModule,
+                IgxActionStripModule,
+                IgxGridModule]
+        }).compileComponents();
+    }));
+
+    describe('General tests', () => {
+        beforeEach(fakeAsync(/** height/width setter rAF */() => {
+            fixture = TestBed.createComponent(IgxAddRowComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            gridContent = GridFunctions.getGridContent(fixture);
+            actionStrip = fixture.componentInstance.actionStrip;
+        }));
+
+        it('Should be able to enter add row mode on action strip click', () => {
+            const row = grid.rowList.first;
+            actionStrip.show(row);
+            fixture.detectChanges();
+            const addRowIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
+            addRowIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            const addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
+        });
+
+        it('Should be able to enter add row mode through the exposed API method (w/ and w/o rowID)', () => {
+            grid.beginAddRow();
+            fixture.detectChanges();
+            let addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
+
+            UIInteractions.triggerEventHandlerKeyDown('escape', gridContent);
+            fixture.detectChanges();
+            addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeFalse();
+
+            grid.beginAddRow('ANATR');
+            fixture.detectChanges();
+            addRow = grid.getRowByIndex(2);
+            expect(addRow.addRow).toBeTrue();
+        });
+
+        it('Should display the banner above the row if there is no room underneath it', () => {
+            grid.paging = true;
+            grid.perPage = 7;
+            fixture.detectChanges();
+
+            const lastRow = grid.rowList.last;
+            const lastRowIndex = lastRow.index;
+            actionStrip.show(lastRow);
+            fixture.detectChanges();
+
+            const addRowIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
+            addRowIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+
+
+            const addRow = grid.getRowByIndex(lastRowIndex + 1);
+            expect(addRow.addRow).toBeTrue();
+
+            const banner = GridFunctions.getRowEditingOverlay(fixture);
+            fixture.detectChanges();
+            const bannerBottom = banner.getBoundingClientRect().bottom;
+            const addRowTop = addRow.nativeElement.getBoundingClientRect().top;
+
+            // The banner appears above the row
+            expect(bannerBottom).toBeLessThanOrEqual(addRowTop);
+
+            // No much space between the row and the banner
+            expect(addRowTop - bannerBottom).toBeLessThan(2);
+        });
+
+        it('Should not be able to enter add row mode when rowEditing is disabled', () => {
+            grid.rowEditable = false;
+            fixture.detectChanges();
+
+            grid.beginAddRow();
+            fixture.detectChanges();
+
+            const banner = GridFunctions.getRowEditingOverlay(fixture);
+            expect(banner).toBeNull();
+            expect(grid.getRowByIndex(1).addRow).toBeFalse();
+        });
+
+    });
+});
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -20,6 +20,7 @@ import { IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-st
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { ISortingStrategy } from '../data-operations/sorting-strategy';
+import { IgxActionStripComponent } from '../action-strip/action-strip.component';
 
 @Component({
     template: `<div style="width: 800px; height: 600px;">
@@ -2163,3 +2164,70 @@ export class MRLTestComponent {
     ];
     data = SampleTestData.contactInfoDataFull();
 }
+
+@Component({
+    template: `
+<igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
+    [rowEditable]="true" [primaryKey]="'ID'">
+    <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
+        [width]="c.width">
+    </igx-column>
+
+    <igx-action-strip #actionStrip>
+        <igx-grid-editing-actions [addRow]='true'></igx-grid-editing-actions>
+    </igx-action-strip>
+</igx-grid>
+`
+})
+export class IgxAddRowComponent implements OnInit {
+    @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
+    public actionStrip: IgxActionStripComponent;
+
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    data: any[];
+    columns: any[];
+
+    ngOnInit() {
+
+        this.columns = [
+            { field: 'ID', width: '200px', hidden: false },
+            { field: 'CompanyName', width: '200px' },
+            { field: 'ContactName', width: '200px', pinned: false },
+            { field: 'ContactTitle', width: '300px', pinned: false },
+        ];
+
+        this.data = [
+            // tslint:disable:max-line-length
+            { 'ID': 'ALFKI', 'CompanyName': 'Alfreds Futterkiste', 'ContactName': 'Maria Anders', 'ContactTitle': 'Sales Representative'},
+            { 'ID': 'ANATR', 'CompanyName': 'Ana Trujillo Emparedados y helados', 'ContactName': 'Ana Trujillo', 'ContactTitle': 'Owner'},
+            { 'ID': 'ANTON', 'CompanyName': 'Antonio Moreno Taquería', 'ContactName': 'Antonio Moreno', 'ContactTitle': 'Owner'},
+            { 'ID': 'AROUT', 'CompanyName': 'Around the Horn', 'ContactName': 'Thomas Hardy', 'ContactTitle': 'Sales Representative'},
+            { 'ID': 'BERGS', 'CompanyName': 'Berglunds snabbköp', 'ContactName': 'Christina Berglund', 'ContactTitle': 'Order Administrator' },
+            { 'ID': 'BLAUS', 'CompanyName': 'Blauer See Delikatessen', 'ContactName': 'Hanna Moos', 'ContactTitle': 'Sales Representative'},
+            { 'ID': 'BLONP', 'CompanyName': 'Blondesddsl père et fils', 'ContactName': 'Frédérique Citeaux', 'ContactTitle': 'Marketing Manager'},
+            { 'ID': 'BOLID', 'CompanyName': 'Bólido Comidas preparadas', 'ContactName': 'Martín Sommer', 'ContactTitle': 'Owner'},
+            { 'ID': 'BONAP', 'CompanyName': 'Bon app\'', 'ContactName': 'Laurence Lebihan', 'ContactTitle': 'Owner'},
+            { 'ID': 'BOTTM', 'CompanyName': 'Bottom-Dollar Markets', 'ContactName': 'Elizabeth Lincoln', 'ContactTitle': 'Accounting Manager' },
+            { 'ID': 'BSBEV', 'CompanyName': 'B\'s Beverages', 'ContactName': 'Victoria Ashworth', 'ContactTitle': 'Sales Representative', 'Address': 'Fauntleroy Circus', 'City': 'London', 'Region': null, 'PostalCode': 'EC2 5NT', 'Country': 'UK', 'Phone': '(171) 555-1212', 'Fax': null },
+            { 'ID': 'CACTU', 'CompanyName': 'Cactus Comidas para llevar', 'ContactName': 'Patricio Simpson', 'ContactTitle': 'Sales Agent', 'Address': 'Cerrito 333', 'City': 'Buenos Aires', 'Region': null, 'PostalCode': '1010', 'Country': 'Argentina', 'Phone': '(1) 135-5555', 'Fax': '(1) 135-4892' },
+            { 'ID': 'CENTC', 'CompanyName': 'Centro comercial Moctezuma', 'ContactName': 'Francisco Chang', 'ContactTitle': 'Marketing Manager', 'Address': 'Sierras de Granada 9993', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05022', 'Country': 'Mexico', 'Phone': '(5) 555-3392', 'Fax': '(5) 555-7293' },
+            { 'ID': 'CHOPS', 'CompanyName': 'Chop-suey Chinese', 'ContactName': 'Yang Wang', 'ContactTitle': 'Owner', 'Address': 'Hauptstr. 29', 'City': 'Bern', 'Region': null, 'PostalCode': '3012', 'Country': 'Switzerland', 'Phone': '0452-076545', 'Fax': null },
+            { 'ID': 'COMMI', 'CompanyName': 'Comércio Mineiro', 'ContactName': 'Pedro Afonso', 'ContactTitle': 'Sales Associate', 'Address': 'Av. dos Lusíadas, 23', 'City': 'Sao Paulo', 'Region': 'SP', 'PostalCode': '05432-043', 'Country': 'Brazil', 'Phone': '(11) 555-7647', 'Fax': null },
+            { 'ID': 'CONSH', 'CompanyName': 'Consolidated Holdings', 'ContactName': 'Elizabeth Brown', 'ContactTitle': 'Sales Representative', 'Address': 'Berkeley Gardens 12 Brewery', 'City': 'London', 'Region': null, 'PostalCode': 'WX1 6LT', 'Country': 'UK', 'Phone': '(171) 555-2282', 'Fax': '(171) 555-9199' },
+            { 'ID': 'DRACD', 'CompanyName': 'Drachenblut Delikatessen', 'ContactName': 'Sven Ottlieb', 'ContactTitle': 'Order Administrator', 'Address': 'Walserweg 21', 'City': 'Aachen', 'Region': null, 'PostalCode': '52066', 'Country': 'Germany', 'Phone': '0241-039123', 'Fax': '0241-059428' },
+            { 'ID': 'DUMON', 'CompanyName': 'Du monde entier', 'ContactName': 'Janine Labrune', 'ContactTitle': 'Owner', 'Address': '67, rue des Cinquante Otages', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.67.88.88', 'Fax': '40.67.89.89' },
+            { 'ID': 'EASTC', 'CompanyName': 'Eastern Connection', 'ContactName': 'Ann Devon', 'ContactTitle': 'Sales Agent', 'Address': '35 King George', 'City': 'London', 'Region': null, 'PostalCode': 'WX3 6FW', 'Country': 'UK', 'Phone': '(171) 555-0297', 'Fax': '(171) 555-3373' },
+            { 'ID': 'ERNSH', 'CompanyName': 'Ernst Handel', 'ContactName': 'Roland Mendel', 'ContactTitle': 'Sales Manager', 'Address': 'Kirchgasse 6', 'City': 'Graz', 'Region': null, 'PostalCode': '8010', 'Country': 'Austria', 'Phone': '7675-3425', 'Fax': '7675-3426' },
+            { 'ID': 'FAMIA', 'CompanyName': 'Familia Arquibaldo', 'ContactName': 'Aria Cruz', 'ContactTitle': 'Marketing Assistant', 'Address': 'Rua Orós, 92', 'City': 'Sao Paulo', 'Region': 'SP', 'PostalCode': '05442-030', 'Country': 'Brazil', 'Phone': '(11) 555-9857', 'Fax': null },
+            { 'ID': 'FISSA', 'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.', 'ContactName': 'Diego Roel', 'ContactTitle': 'Accounting Manager', 'Address': 'C/ Moralzarzal, 86', 'City': 'Madrid', 'Region': null, 'PostalCode': '28034', 'Country': 'Spain', 'Phone': '(91) 555 94 44', 'Fax': '(91) 555 55 93' },
+            { 'ID': 'FOLIG', 'CompanyName': 'Folies gourmandes', 'ContactName': 'Martine Rancé', 'ContactTitle': 'Assistant Sales Agent', 'Address': '184, chaussée de Tournai', 'City': 'Lille', 'Region': null, 'PostalCode': '59000', 'Country': 'France', 'Phone': '20.16.10.16', 'Fax': '20.16.10.17' },
+            { 'ID': 'FOLKO', 'CompanyName': 'Folk och fä HB', 'ContactName': 'Maria Larsson', 'ContactTitle': 'Owner', 'Address': 'Åkergatan 24', 'City': 'Bräcke', 'Region': null, 'PostalCode': 'S-844 67', 'Country': 'Sweden', 'Phone': '0695-34 67 21', 'Fax': null },
+            { 'ID': 'FRANK', 'CompanyName': 'Frankenversand', 'ContactName': 'Peter Franken', 'ContactTitle': 'Marketing Manager', 'Address': 'Berliner Platz 43', 'City': 'München', 'Region': null, 'PostalCode': '80805', 'Country': 'Germany', 'Phone': '089-0877310', 'Fax': '089-0877451' },
+            { 'ID': 'FRANR', 'CompanyName': 'France restauration', 'ContactName': 'Carine Schmitt', 'ContactTitle': 'Marketing Manager', 'Address': '54, rue Royale', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.32.21.21', 'Fax': '40.32.21.20' },
+            { 'ID': 'FRANS', 'CompanyName': 'Franchi S.p.A.', 'ContactName': 'Paolo Accorti', 'ContactTitle': 'Sales Representative', 'Address': 'Via Monte Bianco 34', 'City': 'Torino', 'Region': null, 'PostalCode': '10100', 'Country': 'Italy', 'Phone': '011-4988260', 'Fax': '011-4988261' }
+        ];
+        // tslint:enable:max-line-length
+    }
+}
