fix(igxChip): Fix chip select icon not showing when selected and sele…

…ctable is false. (#4015) * fix(igxChip): Fix chip select icon not showing when selected and selectable is false. #2383 * tests(igxChips): Update tests regarding changes in the igxChip component.
IgniteUI · Feb 27, 2019 · 83474d4 · 83474d4
1 parent 21d6808
commit 83474d4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.html b/projects/igniteui-angular/src/lib/chips/chip.component.html
@@ -13,7 +13,7 @@
     (onEnter)="onChipDragEnterHandler($event)"
     (onDrop)="onChipDrop($event)">
 
-    <div [ngClass]="selectClass(selected)" *ngIf="selectable">
+    <div [ngClass]="selectClass(selected)">
         <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
     </div>
 

diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts
@@ -116,9 +116,10 @@ describe('IgxChip', () => {
         const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
 
         // For this first chip there are 2 elements. The prefix and content span.
-        expect(chipElems[0].nativeElement.children[0].children.length).toEqual(2);
-        expect(chipElems[0].nativeElement.children[0].children[0].tagName).toEqual('IGX-ICON');
-        expect(chipElems[0].nativeElement.children[0].children[0].hasAttribute('igxprefix')).toEqual(true);
+        expect(chipElems[0].nativeElement.children[0].children.length).toEqual(3);
+        expect(chipElems[0].nativeElement.children[0].children[0].offsetWidth).toEqual(0);
+        expect(chipElems[0].nativeElement.children[0].children[1].tagName).toEqual('IGX-ICON');
+        expect(chipElems[0].nativeElement.children[0].children[1].hasAttribute('igxprefix')).toEqual(true);
     });
 
     it('should render remove button when enabled after the content inside the chip', () => {

diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts
@@ -484,10 +484,19 @@ describe('IgxChipsArea', () => {
         fix.detectChanges();
 
         const selectedChip = fix.componentInstance.chipsArea.chipsList.toArray()[0];
+        const unselectedChip = fix.componentInstance.chipsArea.chipsList.toArray()[1];
         selectedChip.selected = true;
         fix.detectChanges();
 
+        const selectedChipIconContainer = selectedChip.elementRef.nativeElement.children[0].children[0];
+        const unselectedChipIconContainer = unselectedChip.elementRef.nativeElement.children[0].children[0];
         expect(selectedChip.selected).toBe(true);
+        expect(selectedChipIconContainer.children.length).toEqual(1);
+        expect(selectedChipIconContainer.children[0].tagName).toEqual('IGX-ICON');
+        expect(selectedChip.elementRef.nativeElement.children[0].children[0].offsetWidth).not.toEqual(0);
+        expect(unselectedChipIconContainer.children.length).toEqual(1);
+        expect(unselectedChipIconContainer.children[0].tagName).toEqual('IGX-ICON');
+        expect(unselectedChip.elementRef.nativeElement.children[0].children[0].offsetWidth).toEqual(0);
     });
 
     it('should focus on chip correctly', () => {

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
@@ -2657,7 +2657,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent));
         const stringCellChip = initialChips[0].nativeElement;
 
-        expect(stringCellChip.children[0].children[1].innerText).toBe('My filter');
+        expect(stringCellChip.children[0].children[2].innerText).toBe('My filter');
 
         stringCellChip.click();
         fix.detectChanges();
@@ -2684,7 +2684,7 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent));
         const stringCellChip = initialChips[0].nativeElement;
 
-        expect(stringCellChip.children[0].children[1].innerText).toBe('My filter');
+        expect(stringCellChip.children[0].children[2].innerText).toBe('My filter');
 
         stringCellChip.click();
         fix.detectChanges();

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -258,7 +258,7 @@ describe('IgxGrid - GroupBy', () => {
         chips = fix.nativeElement.querySelectorAll('igx-chip');
         expect(chips.length).toBe(1);
         checkChips(chips, grid.groupingExpressions, grid.sortingExpressions);
-        expect(chips[0].querySelector('igx-icon').innerText.trim()).toBe('arrow_upward');
+        expect(chips[0].querySelectorAll('igx-icon')[1].innerText.trim()).toBe('arrow_upward');
         groupRows = grid.groupsRowList.toArray();
         expect(groupRows.length).toEqual(5);
     });
@@ -1548,7 +1548,7 @@ describe('IgxGrid - GroupBy', () => {
         tick();
         expect(chips.length).toBe(1);
         checkChips(chips, grid.groupingExpressions, grid.sortingExpressions);
-        expect(chips[0].querySelector('igx-icon').innerText.trim()).toBe('arrow_upward');
+        expect(chips[0].querySelectorAll('igx-icon')[1].innerText.trim()).toBe('arrow_upward');
     }));
 
     it('should change grouping direction when sorting changes direction', fakeAsync(() => {