Skip to content

Commit 41a247f

Browse files
HristoP96HristoP96
HristoP96
authored and
HristoP96
committed
Merge branch 'hPopov/new-component' of https://github.com/IgniteUI/igniteui-angular into hPopov/new-component
2 parents 4411849 + d733675 commit 41a247f

35 files changed

+1138
-425
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ All notable changes for each version of this project will be documented in this
3838
```
3939
- `IgxDateRangePicker` component added.
4040
- Allows the selection of a range of dates from a calendar UI or input fields. Supports `dialog` and `dropdown` modes.
41-
- Added `IgxDateStartComponent` and `IgxDateEndComponent`.
41+
- Added `IgxDateRangeStartComponent` and `IgxDateRangeEndComponent`.
4242
- The default template consists of a single *readonly* field:
4343
```html
4444
<igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>

‎projects/igniteui-angular/migrations/common/UpdateChanges.spec.ts‎

Lines changed: 176 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { EmptyTree } from '@angular-devkit/schematics';
44
import { UnitTestTree } from '@angular-devkit/schematics/testing';
55
import * as fs from 'fs';
66
import * as path from 'path';
7-
import { ClassChanges, BindingChanges, SelectorChanges, ThemePropertyChanges, ImportsChanges } from './schema';
8-
import { UpdateChanges } from './UpdateChanges';
7+
import { ClassChanges, BindingChanges, SelectorChanges, ThemePropertyChanges, ImportsChanges, ElementType } from './schema';
8+
import { UpdateChanges, InputPropertyType, BoundPropertyObject } from './UpdateChanges';
99
import * as tsUtils from './tsUtils';
1010

1111
describe('UpdateChanges', () => {
@@ -28,7 +28,7 @@ describe('UpdateChanges', () => {
2828
sourceRoot: '/'
2929
}
3030
}
31-
}));
31+
}));
3232
});
3333

3434
// tslint:disable:arrow-parens
@@ -269,35 +269,35 @@ describe('UpdateChanges', () => {
269269
spyOn<any>(fs, 'readFileSync').and.callFake(() => JSON.stringify(classJson));
270270

271271
const fileContent =
272-
`import { Component, Injectable, ViewChild } from "@angular/core";` +
273-
`import { IgxGridComponent } from "igniteui-angular";` +
274-
`import { IgxColumnComponent, IgxProvided, STRING_FILTERS} from "igniteui-angular";\r\n` +
275-
`import {` +
276-
` IgxCsvExporterService,` +
277-
` IgxExcelExporterOptions,` +
278-
` IgxExporterOptionsBase` +
279-
`} from "igniteui-angular";\r\n` +
280-
`@Component({` +
281-
` providers: [IgxProvided, RemoteService]` +
282-
`})` +
283-
`export class GridSampleComponent {` +
284-
` @ViewChild("grid1", { read: IgxGridComponent }) public grid1: IgxGridComponent;` +
285-
` // prop definitions to ignore:\r\n` +
286-
` NotType: { NotAgain: string; extraProp: IgxExcelExporterOptions, IgxExcelExporterOptions: string } = {` +
287-
` NotAgain: "hai",` +
288-
` extraProp: new IgxExcelExporterOptions(),` +
289-
` IgxExcelExporterOptions: "fake"` +
290-
` }` +
291-
` constructor(private csvExporterService: IgxCsvExporterService) { }` +
292-
` public initColumns(event: IgxColumnComponent) {` +
293-
` const column: IgxColumnComponent = event;` +
294-
` this.grid1.filter("ProductName", "Queso", STRING_FILTERS.contains, true);` +
295-
` }` +
296-
` private getOptions(fileName: string): IgxExporterOptionsBase {` +
297-
` return new IgxExcelExporterOptions(fileName);` +
298-
` }` +
299-
`}`
300-
;
272+
`import { Component, Injectable, ViewChild } from "@angular/core";` +
273+
`import { IgxGridComponent } from "igniteui-angular";` +
274+
`import { IgxColumnComponent, IgxProvided, STRING_FILTERS} from "igniteui-angular";\r\n` +
275+
`import {` +
276+
` IgxCsvExporterService,` +
277+
` IgxExcelExporterOptions,` +
278+
` IgxExporterOptionsBase` +
279+
`} from "igniteui-angular";\r\n` +
280+
`@Component({` +
281+
` providers: [IgxProvided, RemoteService]` +
282+
`})` +
283+
`export class GridSampleComponent {` +
284+
` @ViewChild("grid1", { read: IgxGridComponent }) public grid1: IgxGridComponent;` +
285+
` // prop definitions to ignore:\r\n` +
286+
` NotType: { NotAgain: string; extraProp: IgxExcelExporterOptions, IgxExcelExporterOptions: string } = {` +
287+
` NotAgain: "hai",` +
288+
` extraProp: new IgxExcelExporterOptions(),` +
289+
` IgxExcelExporterOptions: "fake"` +
290+
` }` +
291+
` constructor(private csvExporterService: IgxCsvExporterService) { }` +
292+
` public initColumns(event: IgxColumnComponent) {` +
293+
` const column: IgxColumnComponent = event;` +
294+
` this.grid1.filter("ProductName", "Queso", STRING_FILTERS.contains, true);` +
295+
` }` +
296+
` private getOptions(fileName: string): IgxExporterOptionsBase {` +
297+
` return new IgxExcelExporterOptions(fileName);` +
298+
` }` +
299+
`}`
300+
;
301301
appTree.create('test.component.ts', fileContent);
302302

303303
const update = new UnitUpdateChanges(__dirname, appTree);
@@ -378,7 +378,7 @@ describe('UpdateChanges', () => {
378378
{ name: 'Size', replaceWith: 'IgxSize' },
379379
{ name: 'IgxService', replaceWith: 'IgxService1' },
380380
{ name: 'IgxDiffService', replaceWith: 'IgxNewDiffService' },
381-
{ name: 'Calendar', replaceWith: 'CalendarActual'}
381+
{ name: 'Calendar', replaceWith: 'CalendarActual' }
382382
]
383383
};
384384
const jsonPath = path.join(__dirname, 'changes', 'classes.json');
@@ -609,4 +609,147 @@ export class AppModule { }`);
609609

610610
done();
611611
});
612+
613+
it('should handle changes with valueTransform functions', done => {
614+
const inputsJson: BindingChanges = {
615+
changes: [{
616+
'name': 'someProp',
617+
'replaceWith': 'someOtherProp',
618+
'valueTransform': 'some_prop_transform',
619+
'owner': {
620+
'selector': 'igx-component',
621+
'type': ElementType.component
622+
}
623+
}]
624+
};
625+
const jsonPath = path.join(__dirname, 'changes', 'inputs.json');
626+
spyOn(fs, 'existsSync').and.callFake((filePath: string) => {
627+
if (filePath === jsonPath) {
628+
return true;
629+
}
630+
return false;
631+
});
632+
spyOn(fs, 'readFileSync').and.returnValue(JSON.stringify(inputsJson));
633+
634+
// bracketed
635+
appTree.create(
636+
'test.component.html',
637+
'<igx-component [someProp]="true"></igx-component>'
638+
);
639+
640+
// No brackets
641+
appTree.create(
642+
'test2.component.html',
643+
'<igx-component someProp="otherVal"></igx-component>'
644+
);
645+
646+
// Small quotes
647+
appTree.create(
648+
'test3.component.html',
649+
`<igx-component someProp='otherVal'></igx-component>`
650+
);
651+
652+
// Multiple occurances
653+
appTree.create(
654+
'test4.component.html',
655+
`<igx-component [someProp]="true"><igx-component>
656+
<igx-component [someProp]="false" [someProp]="false" [someProp]="false" [someProp]="false"><igx-component>
657+
<igx-component someProp="true"><igx-component>
658+
<igx-component someProp="false"><igx-component>`
659+
);
660+
661+
const update = new UnitUpdateChanges(__dirname, appTree);
662+
expect(fs.existsSync).toHaveBeenCalledWith(jsonPath);
663+
expect(fs.readFileSync).toHaveBeenCalledWith(jsonPath, 'utf-8');
664+
expect(update.getInputChanges()).toEqual(inputsJson);
665+
update.addValueTransform('some_prop_transform', (args: BoundPropertyObject): void => {
666+
if (args.bindingType === InputPropertyType.EVAL) {
667+
args.value = args.value === 'true' ? '\'trueValue\'' : '\'falseValue\'';
668+
} else {
669+
args.value = args.value === 'true' ? 'trueValue' : 'falseValue';
670+
}
671+
});
672+
673+
update.applyChanges();
674+
expect(appTree.readContent('test.component.html')).toEqual(`<igx-component [someOtherProp]="'trueValue'"></igx-component>`);
675+
expect(appTree.readContent('test2.component.html')).toEqual(`<igx-component someOtherProp="falseValue"></igx-component>`);
676+
expect(appTree.readContent('test3.component.html')).toEqual(`<igx-component someOtherProp='falseValue'></igx-component>`);
677+
expect(appTree.readContent('test4.component.html')).toEqual(`<igx-component [someOtherProp]="'trueValue'"><igx-component>\n` +
678+
// tslint:disable-next-line:max-line-length
679+
`<igx-component [someOtherProp]="'falseValue'" [someOtherProp]="'falseValue'" [someOtherProp]="'falseValue'" [someOtherProp]="'falseValue'"><igx-component>
680+
<igx-component someOtherProp="trueValue"><igx-component>
681+
<igx-component someOtherProp="falseValue"><igx-component>`);
682+
done();
683+
});
684+
685+
it('Should be able to change binding type via transform function', done => {
686+
const inputsJson: BindingChanges = {
687+
changes: [{
688+
'name': 'prop',
689+
'replaceWith': 'newProp',
690+
'valueTransform': 'prop_transform',
691+
'owner': {
692+
'selector': 'igx-component',
693+
'type': ElementType.component
694+
}
695+
}]
696+
};
697+
const jsonPath = path.join(__dirname, 'changes', 'inputs.json');
698+
spyOn(fs, 'existsSync').and.callFake((filePath: string) => {
699+
if (filePath === jsonPath) {
700+
return true;
701+
}
702+
return false;
703+
});
704+
spyOn(fs, 'readFileSync').and.returnValue(JSON.stringify(inputsJson));
705+
706+
// bracketed
707+
appTree.create(
708+
'test-bound-to-string.component.html',
709+
`<igx-component [prop]="true">STRING</igx-component>
710+
<igx-component [prop]="false">STRING</igx-component>
711+
<igx-component [prop]="someOtherProperty">BOUND</igx-component>`
712+
);
713+
appTree.create(
714+
'test-string-to-bound.component.html',
715+
`<igx-component prop="changeThisToBound">BOUND</igx-component>
716+
<igx-component prop="leaveMeBe">STRING</igx-component>`
717+
);
718+
719+
const update = new UnitUpdateChanges(__dirname, appTree);
720+
expect(fs.existsSync).toHaveBeenCalledWith(jsonPath);
721+
expect(fs.readFileSync).toHaveBeenCalledWith(jsonPath, 'utf-8');
722+
expect(update.getInputChanges()).toEqual(inputsJson);
723+
update.addValueTransform('prop_transform', (args: BoundPropertyObject): void => {
724+
if (args.bindingType === InputPropertyType.EVAL) {
725+
switch (args.value) {
726+
case 'true':
727+
args.value = 'TRUTHY-STRING-VALUE';
728+
args.bindingType = InputPropertyType.STRING;
729+
break;
730+
case 'false':
731+
args.value = 'FALSY-STRING-VALUE';
732+
args.bindingType = InputPropertyType.STRING;
733+
break;
734+
default:
735+
args.value += ' ? true : false';
736+
}
737+
} else {
738+
if (args.value === 'changeThisToBound') {
739+
args.bindingType = InputPropertyType.EVAL;
740+
args.value = 'true';
741+
}
742+
}
743+
});
744+
745+
update.applyChanges();
746+
expect(appTree.readContent('test-bound-to-string.component.html')).toEqual(
747+
`<igx-component newProp="TRUTHY-STRING-VALUE">STRING</igx-component>
748+
<igx-component newProp="FALSY-STRING-VALUE">STRING</igx-component>
749+
<igx-component [newProp]="someOtherProperty ? true : false">BOUND</igx-component>`);
750+
expect(appTree.readContent('test-string-to-bound.component.html')).toEqual(
751+
`<igx-component [newProp]="true">BOUND</igx-component>
752+
<igx-component newProp="leaveMeBe">STRING</igx-component>`);
753+
done();
754+
});
612755
});

0 commit comments

Comments
 (0)