Merge branch '10.1.x' into ddincheva/bugFixs8294-10.1

zdrawku · web-flow · commit 8635a5199e75 · 2020-10-28T14:38:18.000+02:00
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts
@@ -26,7 +26,8 @@ describe('Dialog', () => {
                 CustomTemplates1DialogComponent,
                 CustomTemplates2DialogComponent,
                 DialogSampleComponent,
-                PositionSettingsDialogComponent
+                PositionSettingsDialogComponent,
+                DialogTwoWayDataBindingComponent
             ],
             imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
         }).compileComponents();
@@ -80,6 +81,41 @@ describe('Dialog', () => {
         expect(messageDebugElement.nativeElement.textContent.trim()).toEqual(expectedMessage);
     });
 
+    it('Should open and close dialog when set values to IsOpen', fakeAsync(() => {
+        const fixture = TestBed.createComponent(AlertComponent);
+        const dialog = fixture.componentInstance.dialog;
+        const expectedMessage = 'message';
+
+        dialog.isOpen = true;
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(true);
+
+        dialog.close();
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
+    it('Should open and close dialog with isOpen two way data binding', fakeAsync(() => {
+        const fixture = TestBed.createComponent(DialogTwoWayDataBindingComponent);
+        const dialog = fixture.componentInstance.dialog;
+        fixture.detectChanges();
+
+        fixture.componentInstance.myDialog = true;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(true);
+
+
+        fixture.componentInstance.myDialog = false;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
     it('Should set custom modal message.', () => {
         const fixture = TestBed.createComponent(CustomDialogComponent);
         const dialog = fixture.componentInstance.dialog;
@@ -310,6 +346,7 @@ describe('Dialog', () => {
         dialog.open();
         tick(100);
         fix.detectChanges();
+        tick(100);
 
         // Verify dialog is opened and its default right button is focused
         const dialogDOM = fix.debugElement.query(By.css('.igx-dialog'));
@@ -436,6 +473,28 @@ class AlertComponent {
 class DialogComponent {
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
 }
+
+@Component({
+    template: `<div #wrapper>
+                            <igx-dialog #dialog title="dialog" message="message"
+                                [(isOpen)]="myDialog"
+                                leftButtonLabel="left button"
+                                leftButtonType="raised"
+                                leftButtonColor="black"
+                                leftButtonBackgroundColor="darkblue"
+                                leftButtonRipple="pink"
+                                rightButtonLabel="right button"
+                                rightButtonType="raised"
+                                rightButtonColor="orange"
+                                rightButtonBackgroundColor="lightblue"
+                                rightButtonRipple="white">
+                            </igx-dialog>
+                        </div>` })
+class DialogTwoWayDataBindingComponent {
+    @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
+    public myDialog = false;
+}
+
 @Component({
     template: `<div #wrapper>
                             <igx-dialog #dialog
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts
@@ -58,6 +58,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     private static NEXT_ID = 1;
     private static readonly DIALOG_CLASS = 'igx-dialog';
 
+
+
     @ViewChild(IgxToggleDirective, { static: true })
     public toggleRef: IgxToggleDirective;
 
@@ -316,6 +318,11 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Output()
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
+    /**
+     * @hidden
+     */
+    @Output() public isOpenChange = new EventEmitter<boolean>();
+
     private _positionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
         closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
@@ -359,19 +366,37 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     }
 
     /**
-     * Returns whether the dialog is visible to the end user.
+     * State of the dialog.
+     *
      * ```typescript
-     * @ViewChild("MyDialog")
-     * public dialog: IgxDialogComponent;
-     * ngAfterViewInit() {
-     *     let dialogOpen = this.dialog.isOpen;
-     * }
+     *  // get
+     * let dialogIsOpen = this.dialog.isOpen;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-dialog [isOpen]='false'></igx-dialog>
+     * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <!--set-->
+     * <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
      * ```
      */
     @Input()
-    get isOpen() {
+    public get isOpen() {
         return !this.toggleRef.collapsed;
     }
+    public set isOpen(value: boolean) {
+
+        this.isOpenChange.emit(value);
+        if (value) {
+            this.open();
+        } else {
+            this.close();
+        }
+    }
 
     @HostBinding('class.igx-dialog--hidden')
     get isCollapsed() {
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -129,6 +129,12 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.virtDir.resetScrollPosition();
         });
+
+        esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.searchValue) {
+                this.clearInput();
+            }
+        });
     }
 
     public ngAfterViewInit() {
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts
@@ -284,6 +284,12 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     @Output()
     public columnChange = new EventEmitter<IgxColumnComponent>();
 
+    /**
+     * @hidden @internal
+     */
+    @Output()
+    public listDataLoaded = new EventEmitter();
+
     /**
      * @hidden @internal
      */
@@ -554,6 +560,8 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         if (!(this.cdr as any).destroyed) {
             this.cdr.detectChanges();
         }
+
+        this.listDataLoaded.emit();
     }
 
     private getColumnFilterExpressionsTree() {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts
@@ -1295,6 +1295,8 @@ describe('IgxGrid - Cell selection #grid', () => {
             UIInteractions.triggerKeyDownEvtUponElem('arrowright', firstCell.nativeElement, true, false, true, true);
             await wait(100);
             fix.detectChanges();
+            await wait(50);
+            fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
             GridSelectionFunctions.verifySelectedRange(grid, 4, 4, 2, 5);
@@ -1332,14 +1334,15 @@ describe('IgxGrid - Cell selection #grid', () => {
             const selectionChangeSpy = spyOn<any>(grid.onRangeSelection, 'emit').and.callThrough();
 
             UIInteractions.simulateClickAndSelectEvent(firstCell);
+            await wait();
             fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             GridSelectionFunctions.verifyCellSelected(firstCell);
             expect(grid.selectedCells.length).toBe(1);
 
             UIInteractions.triggerKeyDownEvtUponElem('end', firstCell.nativeElement, true, false, true, true);
-            await wait(100);
+            await wait(200);
             fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -4213,6 +4213,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
         it('Should correctly update all items based on \'SelectAll\' checkbox.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
 
             const visibleListItems = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
             const dataListItems = visibleListItems.slice(1, visibleListItems.length);
@@ -4245,6 +4246,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
         it('Should correctly update all \'SelectAll\' checkbox when not a single item is checked.', fakeAsync(() => {
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Released');
+            flush();
 
             const visibleListItems = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
             expect(visibleListItems.length).toBe(4);
@@ -4377,6 +4379,48 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(listItems[3].innerText).toBe('custoM', 'incorrect list item label');
             expect(listItems[4].innerText).toBe('custom', 'incorrect list item label');
         }));
+
+        it('Should clear search criteria when selecting clear column filters option.', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            let checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            fix.detectChanges();
+
+            checkboxes[0].click();
+            tick();
+            fix.detectChanges();
+
+            checkboxes[2].click();
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix);
+            tick();
+            fix.detectChanges();
+            expect(grid.filteredData.length).toEqual(1);
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 'Net', fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(2, 'incorrect rendered list items count');
+
+            GridFunctions.clickClearFilterInExcelStyleFiltering(fix);
+            flush();
+            expect(grid.filteredData).toBeNull();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'search criteria is not cleared');
+
+            checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fix);
+            const listItemsCheckboxes = checkboxes.slice(1, checkboxes.length);
+            for (const checkbox of listItemsCheckboxes) {
+                ControlsFunction.verifyCheckboxState(checkbox.parentElement);
+            }
+        }));
     });
 
     describe('Templates: ', () => {
@@ -4527,6 +4571,23 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
         });
+
+        it('Should reset esf menu with templates on column change', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+            flush();
+
+            let inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, 20, fix);
+
+            const listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems.length).toBe(2, 'incorrect rendered list items count');
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+            flush();
+
+            inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix);
+            expect(inputNativeElement.value).toBe('', 'input value didn\'t reset');
+        }));
     });
 
     describe('Load values on demand', () => {
@@ -4740,7 +4801,6 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             GridSelectionFunctions.verifyColumnAndCellsSelected(columnId, false);
 
         });
-
     });
 });
 
