Skip to content

Commit

Permalink
test(Percent): percent column should behave correctly #8331
Browse files Browse the repository at this point in the history
  • Loading branch information
@ddincheva
ddincheva committed Feb 16, 2021
1 parent 9106d80 commit 1eb4ab2
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 3 deletions.
161 changes: 158 additions & 3 deletions projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@ import {
ColumnCellFormatterComponent,
DynamicColumnsComponent,
GridAddColumnComponent,
IgxGridCurrencyColumnComponent
IgxGridCurrencyColumnComponent,
IgxGridPercentColumnComponent
} from '../../test-utils/grid-samples.spec';
import { configureTestSuite } from '../../test-utils/configure-suite';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
import { SortingDirection } from '../../data-operations/sorting-expression.interface';
import { wait } from '../../test-utils/ui-interactions.spec';
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
import localeFR from '@angular/common/locales/fr';
import localeJA from '@angular/common/locales/ja';
import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common';
Expand All @@ -39,7 +40,8 @@ describe('IgxGrid - Column properties #grid', () => {
ColumnHiddenFromMarkupComponent,
DynamicColumnsComponent,
GridAddColumnComponent,
IgxGridCurrencyColumnComponent
IgxGridCurrencyColumnComponent,
IgxGridPercentColumnComponent
],
imports: [IgxGridModule, NoopAnimationsModule]
})
Expand Down Expand Up @@ -607,6 +609,159 @@ describe('IgxGrid - Column properties #grid', () => {

});

describe('Data type percent column tests', () => {
it('should display correctly the data when column dataType is percent', () => {
const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
fix.detectChanges();

const grid = fix.componentInstance.grid;
let discountColumn = grid.getColumnByName('Discount');

expect(discountColumn.cells[0].nativeElement.innerText).toEqual('27%');
expect(discountColumn.cells[5].nativeElement.innerText).toEqual('2.7%');
expect(discountColumn.cells[8].nativeElement.innerText).toEqual('12.3%');

discountColumn.pipeArgs = {
digitsInfo: '3.2-2',
};
fix.detectChanges();

grid.sort({ fieldName: 'Discount', dir: SortingDirection.Desc, ignoreCase: false });
fix.detectChanges();

grid.clearSort();
fix.detectChanges();

discountColumn = grid.getColumnByName('Discount');
expect(discountColumn.cells[0].nativeElement.innerText).toEqual('027.00%');
expect(discountColumn.cells[5].nativeElement.innerText).toEqual('002.70%');
expect(discountColumn.cells[8].nativeElement.innerText).toEqual('012.30%');
});

it('should be able to change the locale runtime ', () => {
registerLocaleData(localeFR);
const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
fix.detectChanges();

const grid = fix.componentInstance.grid;
let discountColumn = grid.getColumnByName('Discount');

expect(discountColumn.cells[8].nativeElement.innerText).toEqual('12.3%');
grid.locale = 'fr-FR';
fix.detectChanges();

grid.sort({ fieldName: 'Discount', dir: SortingDirection.Desc, ignoreCase: false });
fix.detectChanges();

grid.clearSort();
fix.detectChanges();

discountColumn = grid.getColumnByName('Discount');
expect(discountColumn.cells[8].nativeElement.innerText).toEqual('12,3 %');
expect(discountColumn.cells[5].nativeElement.innerText).toEqual('2,7 %');
});

it('should preview the percent value correctly when cell is in edit mode correctly', fakeAsync(() => {
const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
fix.detectChanges();

const grid = fix.componentInstance.grid;
const discountColumn = grid.getColumnByName('Discount');
discountColumn.editable = true;
fix.detectChanges();

let firstCell = discountColumn.cells[0];

expect(firstCell.nativeElement.innerText).toEqual('27%');

firstCell.setEditMode(true);
fix.detectChanges();

let input = firstCell.nativeElement.querySelector('.igx-input-group__input');
const prefix = firstCell.nativeElement.querySelector('igx-prefix');
let suffix = firstCell.nativeElement.querySelector('igx-suffix');
expect((input as any).value).toEqual('0.27');
expect(prefix).toBeNull();
expect((suffix as HTMLElement).innerText).toEqual('27%');

UIInteractions.clickAndSendInputElementValue(input, 0.33);
tick();
fix.detectChanges();

input = firstCell.nativeElement.querySelector('.igx-input-group__input');
suffix = firstCell.nativeElement.querySelector('igx-suffix');
expect((input as any).value).toEqual('0.33');
expect((suffix as HTMLElement).innerText).toEqual('33%');

grid.endEdit(true);
fix.detectChanges();

firstCell = discountColumn.cells[0];
expect(firstCell.nativeElement.innerText).toEqual('33%');
}));

it('should display summaries correctly for currency column', () => {
registerLocaleData(localeFR);
const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
fix.detectChanges();

const grid = fix.componentInstance.grid;
const discountColumn = grid.getColumnByName('Discount');
discountColumn.hasSummary = true;
fix.detectChanges();

const summaryRow = GridSummaryFunctions.getRootSummaryRow(fix);
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4,
['Count', 'Min', 'Max', 'Sum', 'Avg'], ['10', '-70%', '1,100%', '2,153.9%', '215.39%']);
});

it('filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' ,fakeAsync(()=> {
registerLocaleData(localeFR);
const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
tick();
fix.detectChanges();

const grid = fix.componentInstance.grid;
const unitsColumn = grid.getColumnByName('Discount');
grid.allowFiltering = true;
grid.filterMode = 'excelStyleFilter';
fix.detectChanges();

GridFunctions.clickExcelFilterIcon(fix, unitsColumn.field);
tick(100);
fix.detectChanges();

let excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
let esfSearch = GridFunctions.getExcelFilteringSearchComponent(fix, excelMenu);
let checkBoxes = esfSearch.querySelectorAll('igx-checkbox');

expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('-70%');
expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('2.7%');

GridFunctions.clickCancelExcelStyleFiltering(fix);
fix.detectChanges();

unitsColumn.pipeArgs = {
digitsInfo: '3.3-3',
currencyCode: 'EUR',
display: 'symbol-narrow'
};
fix.detectChanges();

GridFunctions.clickExcelFilterIcon(fix, unitsColumn.field);
tick(100);
fix.detectChanges();

excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
esfSearch = GridFunctions.getExcelFilteringSearchComponent(fix, excelMenu);
checkBoxes = esfSearch.querySelectorAll('igx-checkbox');

expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('-070.000%');
expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('002.700%');
}));

});

});

@Component({
Expand Down
14 changes: 14 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1769,6 +1769,20 @@ export class IgxGridCurrencyColumnComponent extends BasicGridComponent {
public paging = false;
}

@Component({
template: `
<igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="900px">
<igx-column field="ProductID" header="Product ID" width="150px"></igx-column>
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="200px"></igx-column>
<igx-column field="InStock" header="In Stock" [dataType]="'boolean'" width="100px"></igx-column>
<igx-column field="UnitsInStock" header="Units in Stock" [dataType]="'currency'" width="150px"></igx-column>
<igx-column field="Discount" header="Order Date" [dataType]="'percent'" width="200px"></igx-column>
</igx-grid>`,
providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
})
export class IgxGridPercentColumnComponent extends BasicGridComponent {
public data = SampleTestData.foodPercentProductData();
}
@Component({
template: `
<igx-grid
Expand Down
14 changes: 14 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -616,6 +616,20 @@ export class SampleTestData {
{ ProductID: 10, ProductName: 'Chocolate', InStock: true, UnitsInStock: 20000, OrderDate: new Date('2018-03-01') }
]);

public static foodPercentProductData = () => ([
{ ProductID: 1, ProductName: 'Chai', InStock: true, UnitsInStock: 2760, OrderDate: new Date('2005-03-21'), Discount: 0.27 },
{ ProductID: 2, ProductName: 'Syrup', InStock: false, UnitsInStock: 198, OrderDate: new Date('2008-01-15'), Discount: 0.83 },
{ ProductID: 3, ProductName: 'Seasoning', InStock: true, UnitsInStock: 5, OrderDate: new Date('2010-11-20'), Discount: -0.7 },
{ ProductID: 4, ProductName: 'Spread', InStock: false, UnitsInStock: 0, OrderDate: new Date('2007-10-11'), Discount: 11 },
{ ProductID: 5, ProductName: 'Bobs Pears', InStock: false, UnitsInStock: 0, OrderDate: new Date('2001-07-27'), Discount: -0.5},
{ ProductID: 6, ProductName: 'Sauce', InStock: true, UnitsInStock: 1098, OrderDate: new Date('1990-05-17'), Discount: 0.027 },
{ ProductID: 7, ProductName: 'Queso Cabrale', InStock: false, UnitsInStock: 0, OrderDate: new Date('2005-03-03'), Discount: 0.099 },
{ ProductID: 8, ProductName: 'Tofu', InStock: true, UnitsInStock: 7898, OrderDate: new Date('2017-09-09'), Discount: 10 },
{ ProductID: 9, ProductName: 'Chocolate', InStock: true, UnitsInStock: 698, OrderDate: new Date('2025-12-25'), Discount: .123},
{ ProductID: 10, ProductName: 'Biscuits', InStock: true, UnitsInStock: 20000, OrderDate: new Date('2018-03-01'), Discount: 0.39 }
]);


/* Data fields: ProductID: number, ProductName: string, InStock: boolean, UnitsInStock: number, OrderDate: Date;
19 items, sorted by ID. */
public static foodProductDataExtended = () => ([
Expand Down

0 comments on commit 1eb4ab2

Please sign in to comment.