refactor(NgFor spec): code cleanup

This commit is contained in:
Victor Berchet 2016-08-04 10:11:40 -07:00 committed by Alex Rickabaugh
parent 797cb5ae7b
commit 26c9e1dc70
1 changed files with 24 additions and 27 deletions

View File

@ -16,7 +16,7 @@ import {By} from '@angular/platform-browser/src/dom/debug/by';
export function main() { export function main() {
describe('ngFor', () => { describe('ngFor', () => {
var TEMPLATE = const TEMPLATE =
'<div><copy-me template="ngFor let item of items">{{item.toString()}};</copy-me></div>'; '<div><copy-me template="ngFor let item of items">{{item.toString()}};</copy-me></div>';
it('should reflect initial elements', it('should reflect initial elements',
@ -106,7 +106,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
'<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>'; '<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -139,7 +139,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>'; const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
@ -176,13 +176,10 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE).createAsync(TestComponent).then((fixture) => { tcb.overrideTemplate(TestComponent, TEMPLATE).createAsync(TestComponent).then((fixture) => {
fixture.debugElement.componentInstance.items = 'whaaa'; fixture.debugElement.componentInstance.items = 'whaaa';
try { expect(() => fixture.detectChanges())
fixture.detectChanges(); .toThrowError(
} catch (e) { /Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/);
expect(e.message).toContain( async.done();
`Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays.`);
async.done();
}
}); });
})); }));
@ -221,7 +218,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + const template = '<div>' +
'<div template="ngFor let item of items">' + '<div template="ngFor let item of items">' +
'<div template="ngFor let subitem of item">' + '<div template="ngFor let subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
@ -250,7 +247,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div><template ngFor let-item [ngForOf]="items">' + const template = '<div><template ngFor let-item [ngForOf]="items">' +
'<div template="ngFor let subitem of item">' + '<div template="ngFor let subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div></template></div>'; '</div></template></div>';
@ -273,15 +270,15 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
`<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` + `<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
`<div *ngIf="i % 2 == 0">even|</div></template></div>`; `<div *ngIf="i % 2 == 0">even|</div></template></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
var el = fixture.debugElement.nativeElement; const el = fixture.debugElement.nativeElement;
var items = [1]; const items = [1];
fixture.debugElement.componentInstance.items = items; fixture.debugElement.componentInstance.items = items;
fixture.detectChanges(); fixture.detectChanges();
expect(el).toHaveText('0|even|'); expect(el).toHaveText('0|even|');
@ -302,7 +299,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
'<div><copy-me template="ngFor: let item of items; let i=index">{{i.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let i=index">{{i.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -323,7 +320,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
'<div><copy-me template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -344,7 +341,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
'<div><copy-me template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -365,7 +362,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
'<div><copy-me template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -386,7 +383,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
'<div><copy-me template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
@ -415,7 +412,7 @@ export function main() {
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>') '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent) .createAsync(ComponentUsingTestComponent)
.then((fixture) => { .then((fixture) => {
var testComponent = fixture.debugElement.children[0]; const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c']; testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges(); fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@ -433,7 +430,7 @@ export function main() {
.overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>') .overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
.createAsync(ComponentUsingTestComponent) .createAsync(ComponentUsingTestComponent)
.then((fixture) => { .then((fixture) => {
var testComponent = fixture.debugElement.children[0]; const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c']; testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges(); fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@ -453,7 +450,7 @@ export function main() {
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>') '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent) .createAsync(ComponentUsingTestComponent)
.then((fixture) => { .then((fixture) => {
var testComponent = fixture.debugElement.children[0]; const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c']; testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges(); fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
@ -462,7 +459,7 @@ export function main() {
}); });
})); }));
describe('track by', function() { describe('track by', () => {
it('should not replace tracked items', it('should not replace tracked items',
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
@ -491,7 +488,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`; `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -509,7 +506,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`; `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)
@ -530,7 +527,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`; `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) .createAsync(TestComponent)