Skip to content

Commit f702a5d

Browse files
rkaraivanovrkaraivanov
committed
chore(*): Merge upstream branch
2 parents 760d59c + a7978a2 commit f702a5d

File tree

6 files changed

+130
-21
lines changed

6 files changed

+130
-21
lines changed

‎projects/igniteui-angular/src/lib/chips/chips-area.component.spec.ts

+79-2
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,95 @@
1-
import { Component, ViewChild } from '@angular/core';
1+
import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
22
import {
33
async,
44
TestBed
55
} from '@angular/core/testing';
66
import { FormsModule } from '@angular/forms';
77
import { By } from '@angular/platform-browser';
8+
import { IgxIconModule } from '../icon/index';
9+
import { IgxChipsModule } from './chips.module';
10+
import { IgxChipComponent } from './chip.component';
811
import { IgxChipsAreaComponent } from './chips-area.component';
912

13+
@Component({
14+
template: `
15+
<igx-chips-area #chipsArea>
16+
<igx-chip #chipElem *ngFor="let chip of chipList"
17+
[id]="chip.id" [draggable]="chip.draggable" [removable]="chip.removable" [selectable]="chip.selectable">
18+
<igx-icon igxPrefix fontSet="material" [name]="'drag_indicator'"></igx-icon>
19+
<span #label [class]="'igx-chip__text'">{{chip.text}}</span>
20+
<igx-icon class="igx-chip__dir-icon" igxConnector fontSet="material" [name]="'forward'"></igx-icon>
21+
</igx-chip>
22+
</igx-chips-area>
23+
`
24+
})
25+
export class TestChipComponent {
26+
27+
public chipList = [
28+
{ id: 'Country', text: 'Country', removable: false, selectable: false, draggable: true },
29+
{ id: 'City', text: 'City', removable: true, selectable: true, draggable: true }
30+
];
31+
32+
@ViewChild('chipsArea', { read: IgxChipsAreaComponent})
33+
public chipsArea: IgxChipsAreaComponent;
34+
35+
@ViewChildren('chipElem', { read: IgxChipComponent})
36+
public chips: QueryList<IgxChipComponent>;
37+
}
38+
1039
describe('IgxChipsArea', () => {
40+
const CHIP_ITEM_AREA = 'igx-chip__item chip-area';
41+
const CHIP_CONNECTOR = 'igx-chip__connecto';
42+
1143
beforeEach(async(() => {
1244
TestBed.configureTestingModule({
1345
declarations: [
46+
TestChipComponent
1447
],
15-
imports: []
48+
imports: [FormsModule, IgxIconModule, IgxChipsModule]
1649
}).compileComponents();
1750
}));
51+
52+
it('should add chips when adding data items ', () => {
53+
const fix = TestBed.createComponent(TestChipComponent);
54+
fix.detectChanges();
55+
56+
const chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
57+
const chipAreaComponent = fix.componentInstance;
58+
expect(chipArea[0].nativeElement.children.length).toEqual(2);
59+
60+
chipAreaComponent.chipList.push({ id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true });
61+
62+
fix.detectChanges();
63+
64+
expect(chipArea[0].nativeElement.children.length).toEqual(3);
65+
});
66+
67+
it('should remove chips when removing data items ', () => {
68+
const fix = TestBed.createComponent(TestChipComponent);
69+
fix.detectChanges();
70+
71+
const chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
72+
const chipAreaComponent = fix.componentInstance;
73+
expect(chipArea[0].nativeElement.children.length).toEqual(2);
74+
75+
chipAreaComponent.chipList.pop();
76+
fix.detectChanges();
77+
78+
expect(chipArea[0].nativeElement.children.length).toEqual(1);
79+
});
80+
81+
it('should change data in chips when data item is changed', () => {
82+
const fix = TestBed.createComponent(TestChipComponent);
83+
fix.detectChanges();
84+
85+
const chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
86+
const chipAreaComponent = fix.componentInstance;
87+
88+
expect(chipArea[0].nativeElement.children[0].innerHTML).toContain('Country');
89+
90+
chipAreaComponent.chipList[0].text = 'New text';
91+
fix.detectChanges();
92+
93+
expect(chipArea[0].nativeElement.children[0].innerHTML).toContain('New text');
94+
});
1895
});

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

+4
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,10 @@
391391
box-shadow: $grid-shadow;
392392
outline-style: none;
393393
overflow: hidden;
394+
395+
%cbx-display {
396+
min-width: rem(20px);
397+
}
394398
}
395399

396400
%grid-caption {

‎projects/igniteui-angular/src/lib/grid/column-group.spec.ts

+33-4
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ describe('IgxGrid - multi-column headers', () => {
2323
OneGroupThreeColsGridComponent,
2424
BlueWhaleGridComponent,
2525
ColumnGroupTestComponent,
26+
ColumnGroupChildLevelTestComponent,
2627
ColumnGroupFourLevelTestComponent,
2728
ThreeGroupsThreeColumnsGridComponent,
2829
ColumnGroupTwoGroupsTestComponent
@@ -46,7 +47,7 @@ describe('IgxGrid - multi-column headers', () => {
4647
});
4748

4849
it('column hiding - parent level', () => {
49-
const fixture = TestBed.createComponent(ColumnGroupTestComponent);
50+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
5051
fixture.detectChanges();
5152
const grid = fixture.componentInstance.grid;
5253
const addressGroup = grid.columnList.filter(c => c.header === 'Address Information')[0];
@@ -58,15 +59,15 @@ describe('IgxGrid - multi-column headers', () => {
5859
});
5960

6061
it('column hiding - child level', () => {
61-
const fixture = TestBed.createComponent(ColumnGroupTestComponent);
62+
const fixture = TestBed.createComponent(ColumnGroupChildLevelTestComponent);
6263
fixture.detectChanges();
6364
const grid = fixture.componentInstance.grid;
64-
const addressGroup = grid.columnList.filter(c => c.header === 'Address Information')[0];
65+
const addressGroup = grid.columnList.filter(c => c.header === 'Address')[0];
6566

6667
addressGroup.children.first.hidden = true;
6768
fixture.detectChanges();
6869

69-
expect(document.querySelectorAll('igx-grid-header').length).toEqual(11);
70+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(5);
7071
expect(addressGroup.children.first.hidden).toBe(true);
7172
expect(addressGroup.children.first.children.toArray().every(c => c.hidden === true)).toEqual(true);
7273
});
@@ -865,6 +866,34 @@ export class ColumnGroupFourLevelTestComponent {
865866
data = DATASOURCE;
866867
}
867868

869+
@Component({
870+
template: `
871+
<igx-grid #grid [data]="data" height="600px" width="800px">
872+
<igx-column field="ID"></igx-column>
873+
<igx-column-group header="Address">
874+
<igx-column-group header="Location">
875+
<igx-column field="Country"></igx-column>
876+
<igx-column field="Region"></igx-column>
877+
<igx-column-group header="Location City">
878+
<igx-column field="City"></igx-column>
879+
<igx-column field="Address"></igx-column>
880+
</igx-column-group>
881+
</igx-column-group>
882+
<igx-column-group header="Contact Information">
883+
<igx-column field="Phone"></igx-column>
884+
<igx-column field="Fax"></igx-column>
885+
</igx-column-group>
886+
</igx-column-group>
887+
</igx-grid>
888+
`
889+
})
890+
export class ColumnGroupChildLevelTestComponent {
891+
@ViewChild(IgxGridComponent, { read: IgxGridComponent })
892+
grid: IgxGridComponent;
893+
894+
data = DATASOURCE;
895+
}
896+
868897

869898
@Component({
870899
template: `

‎projects/igniteui-angular/src/lib/grid/column.component.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -533,7 +533,19 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
533533
}
534534

535535
get width() {
536-
return `${this.children.reduce((acc, val) => acc + (!val.hidden ? parseInt(val.width, 10) : 0), 0)}`;
536+
let isChildrenWidthInPercent = false;
537+
const width = `${this.children.reduce((acc, val) => {
538+
if (val.hidden) {
539+
return acc;
540+
}
541+
542+
if (val.width && val.width.indexOf('%') !== -1) {
543+
isChildrenWidthInPercent = true;
544+
}
545+
546+
return acc + parseInt(val.width, 10);
547+
}, 0)}`;
548+
return isChildrenWidthInPercent ? width + '%' : width;
537549
}
538550

539551
set width(val) {}

‎projects/igniteui-angular/src/lib/grid/grid.pinning.spec.ts

-13
Original file line numberDiff line numberDiff line change
@@ -602,19 +602,6 @@ describe('IgxGrid - Column Pinning ', () => {
602602
expect(grid.columns[6].pinned).toBe(true);
603603
expect(grid.unpinnedWidth).toBeGreaterThanOrEqual(grid.unpinnedAreaMinWidth);
604604
});
605-
606-
it('should not have grid layout row with width that extends pass the container\'s one', () => {
607-
const fix = TestBed.createComponent(GridPinningComponent);
608-
fix.detectChanges();
609-
const grid = fix.componentInstance.instance;
610-
611-
grid.getColumnByName('Phone').pinned = true;
612-
fix.detectChanges();
613-
614-
const gridChildren = Array.prototype.slice.call(grid.nativeElement.children);
615-
const gridWidth = grid.nativeElement.getBoundingClientRect().width;
616-
gridChildren.forEach(elem => expect(elem.getBoundingClientRect().width).toEqual(gridWidth));
617-
});
618605
});
619606
@Component({
620607
template: `

‎projects/igniteui-angular/src/lib/grid/groupby-row.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<ng-container #defaultGroupRow (focus)="onFocus()" (blur)="onBlur()">
22
<div (click)="toggle()" igxRipple class="igx-grid__grouping-indicator" [tabIndex]="tabindex">
3-
<igx-icon *ngIf="!expanded" fontSet="material" name="expand_less"></igx-icon>
3+
<igx-icon *ngIf="!expanded" fontSet="material" name="chevron_right"></igx-icon>
44
<igx-icon *ngIf="expanded" fontSet="material" name="expand_more"></igx-icon>
55
</div>
66

0 commit comments

Comments
 (0)