cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(common): cleanup directive tests

Browse Source
This commit is contained in:
Victor Berchet
2016-09-08 20:37:20 -07:00
parent c649a5c5ab
commit 82f30e09f0
7 changed files with 475 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
modules/@angular/common/test/directives/ng_for_spec.ts
View File

@ -8,150 +8,135 @@
import {CommonModule} from '@angular/common';
import {Component, ContentChild, TemplateRef} from '@angular/core';
import {TestBed, async} from '@angular/core/testing';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {expect} from '@angular/platform-browser/testing/matchers';
import {ListWrapper} from '../../src/facade/collection';
let thisArg: any;
export function main() {
describe('ngFor', () => {
const TEMPLATE =
'<div><span template="ngFor let item of items">{{item.toString()}};</span></div>';
let fixture: ComponentFixture<any>;
function getComponent(): TestComponent { return fixture.componentInstance; }
function detectChangesAndExpectText(text: string): void {
fixture.detectChanges();
expect(fixture.nativeElement).toHaveText(text);
}
afterEach(() => { fixture = null; });
beforeEach(() => {
TestBed.configureTestingModule(
{declarations: [TestComponent, ComponentUsingTestComponent], imports: [CommonModule]});
TestBed.configureTestingModule({
declarations: [
TestComponent,
ComponentUsingTestComponent,
],
imports: [CommonModule],
});
});
it('should reflect initial elements', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
fixture = createTestComponent();
detectChangesAndExpectText('1;2;');
}));
it('should reflect added elements', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent();
fixture.detectChanges();
(<number[]>fixture.debugElement.componentInstance.items).push(3);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;');
getComponent().items.push(3);
detectChangesAndExpectText('1;2;3;');
}));
it('should reflect removed elements', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent();
fixture.detectChanges();
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 1);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;');
getComponent().items.splice(1, 1);
detectChangesAndExpectText('1;');
}));
it('should reflect moved elements', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent();
fixture.detectChanges();
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0);
(<number[]>fixture.debugElement.componentInstance.items).push(1);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2;1;');
getComponent().items.splice(0, 1);
getComponent().items.push(1);
detectChangesAndExpectText('2;1;');
}));
it('should reflect a mix of all changes (additions/removals/moves)', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5];
fixture = createTestComponent();
getComponent().items = [0, 1, 2, 3, 4, 5];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = [6, 2, 7, 0, 4, 8];
fixture.detectChanges();
getComponent().items = [6, 2, 7, 0, 4, 8];
expect(fixture.debugElement.nativeElement).toHaveText('6;2;7;0;4;8;');
detectChangesAndExpectText('6;2;7;0;4;8;');
}));
it('should iterate over an array of objects', async(() => {
const template = '<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
// INIT
fixture.debugElement.componentInstance.items = [{'name': 'misko'}, {'name': 'shyam'}];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;');
getComponent().items = [{'name': 'misko'}, {'name': 'shyam'}];
detectChangesAndExpectText('misko;shyam;');
// GROW
(<any[]>fixture.debugElement.componentInstance.items).push({'name': 'adam'});
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;adam;');
getComponent().items.push({'name': 'adam'});
detectChangesAndExpectText('misko;shyam;adam;');
// SHRINK
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 2);
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('shyam;');
getComponent().items.splice(2, 1);
getComponent().items.splice(0, 1);
detectChangesAndExpectText('shyam;');
}));
it('should gracefully handle nulls', async(() => {
const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('');
fixture = createTestComponent(template);
detectChangesAndExpectText('');
}));
it('should gracefully handle ref changing to null and back', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
fixture = createTestComponent();
fixture.debugElement.componentInstance.items = null;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('');
detectChangesAndExpectText('1;2;');
fixture.debugElement.componentInstance.items = [1, 2, 3];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;');
getComponent().items = null;
detectChangesAndExpectText('');
getComponent().items = [1, 2, 3];
detectChangesAndExpectText('1;2;3;');
}));
it('should throw on non-iterable ref and suggest using an array', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.debugElement.componentInstance.items = 'whaaa';
fixture = createTestComponent();
getComponent().items = <any>'whaaa';
expect(() => fixture.detectChanges())
.toThrowError(
/Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/);
}));
it('should throw on ref changing to string', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
fixture = createTestComponent();
fixture.debugElement.componentInstance.items = 'whaaa';
detectChangesAndExpectText('1;2;');
getComponent().items = <any>'whaaa';
expect(() => fixture.detectChanges()).toThrowError();
}));
it('should works with duplicates', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
var a = new Foo();
fixture.debugElement.componentInstance.items = [a, a];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('foo;foo;');
fixture = createTestComponent();
const a = new Foo();
getComponent().items = [a, a];
detectChangesAndExpectText('foo;foo;');
}));
it('should repeat over nested arrays', async(() => {
@ -162,18 +147,13 @@ export function main() {
'</div>|' +
'</div>' +
'</div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']];
fixture.detectChanges();
fixture.detectChanges();
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;|c-1;|');
getComponent().items = [['a', 'b'], ['c']];
detectChangesAndExpectText('a-2;b-2;|c-1;|');
fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('e-1;|f-2;g-2;|');
getComponent().items = [['e'], ['f', 'g']];
detectChangesAndExpectText('e-1;|f-2;g-2;|');
}));
it('should repeat over nested arrays with no intermediate element', async(() => {
@ -181,16 +161,13 @@ export function main() {
'<div template="ngFor let subitem of item">' +
'{{subitem}}-{{item.length}};' +
'</div></template></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;c-1;');
getComponent().items = [['a', 'b'], ['c']];
detectChangesAndExpectText('a-2;b-2;c-1;');
fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('e-1;f-2;g-2;');
getComponent().items = [['e'], ['f', 'g']];
detectChangesAndExpectText('e-1;f-2;g-2;');
}));
it('should repeat over nested ngIf that are the last node in the ngFor temlate', async(() => {
@ -198,97 +175,77 @@ export function main() {
`<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
`<div *ngIf="i % 2 == 0">even|</div></template></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
const el = fixture.debugElement.nativeElement;
const items = [1];
fixture.debugElement.componentInstance.items = items;
fixture.detectChanges();
expect(el).toHaveText('0|even|');
getComponent().items = items;
detectChangesAndExpectText('0|even|');
items.push(1);
fixture.detectChanges();
expect(el).toHaveText('0|even|1|');
detectChangesAndExpectText('0|even|1|');
items.push(1);
fixture.detectChanges();
expect(el).toHaveText('0|even|1|2|even|');
detectChangesAndExpectText('0|even|1|2|even|');
}));
it('should display indices correctly', async(() => {
const template =
'<div><span template="ngFor: let item of items; let i=index">{{i.toString()}}</span></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
getComponent().items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
detectChangesAndExpectText('0123456789');
fixture.debugElement.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
getComponent().items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
detectChangesAndExpectText('0123456789');
}));
it('should display first item correctly', async(() => {
const template =
'<div><span template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</span></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [0, 1, 2];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse');
getComponent().items = [0, 1, 2];
detectChangesAndExpectText('truefalsefalse');
fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
getComponent().items = [2, 1];
detectChangesAndExpectText('truefalse');
}));
it('should display last item correctly', async(() => {
const template =
'<div><span template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</span></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [0, 1, 2];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsefalsetrue');
getComponent().items = [0, 1, 2];
detectChangesAndExpectText('falsefalsetrue');
fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetrue');
getComponent().items = [2, 1];
detectChangesAndExpectText('falsetrue');
}));
it('should display even items correctly', async(() => {
const template =
'<div><span template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</span></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [0, 1, 2];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalsetrue');
getComponent().items = [0, 1, 2];
detectChangesAndExpectText('truefalsetrue');
fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
getComponent().items = [2, 1];
detectChangesAndExpectText('truefalse');
}));
it('should display odd items correctly', async(() => {
const template =
'<div><span template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</span></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [0, 1, 2, 3];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetruefalsetrue');
getComponent().items = [0, 1, 2, 3];
detectChangesAndExpectText('falsetruefalsetrue');
fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetrue');
getComponent().items = [2, 1];
detectChangesAndExpectText('falsetrue');
}));
it('should allow to use a custom template', async(() => {
@ -298,7 +255,7 @@ export function main() {
const cutTemplate =
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
let fixture = TestBed.createComponent(ComponentUsingTestComponent);
fixture = TestBed.createComponent(ComponentUsingTestComponent);
const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
@ -313,7 +270,7 @@ export function main() {
const cutTemplate =
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
let fixture = TestBed.createComponent(ComponentUsingTestComponent);
fixture = TestBed.createComponent(ComponentUsingTestComponent);
const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
@ -328,7 +285,7 @@ export function main() {
const cutTemplate =
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
let fixture = TestBed.createComponent(ComponentUsingTestComponent);
fixture = TestBed.createComponent(ComponentUsingTestComponent);
const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
@ -340,12 +297,11 @@ export function main() {
it('should set the context to the component instance', async(() => {
const template =
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
thisArg = null;
fixture.detectChanges();
expect(thisArg).toBe(fixture.debugElement.componentInstance);
expect(thisArg).toBe(getComponent());
}));
it('should not replace tracked items', async(() => {
@ -353,62 +309,53 @@ export function main() {
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById" let-i="index">
<p>{{items[i]}}</p>
</template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
var buildItemList = () => {
fixture.debugElement.componentInstance.items = [{'id': 'a'}];
const buildItemList = () => {
getComponent().items = [{'id': 'a'}];
fixture.detectChanges();
return fixture.debugElement.queryAll(By.css('p'))[0];
};
var firstP = buildItemList();
var finalP = buildItemList();
const firstP = buildItemList();
const finalP = buildItemList();
expect(finalP.nativeElement).toBe(firstP.nativeElement);
}));
it('should update implicit local variable on view', async(() => {
const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'blue'}];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('blue');
fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'red'}];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('red');
getComponent().items = [{'id': 'a', 'color': 'blue'}];
detectChangesAndExpectText('blue');
getComponent().items = [{'id': 'a', 'color': 'red'}];
detectChangesAndExpectText('red');
}));
it('should move items around and keep them updated ', async(() => {
const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items =
[{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('blueyellow');
fixture.debugElement.componentInstance.items =
[{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('orangered');
getComponent().items = [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}];
detectChangesAndExpectText('blueyellow');
getComponent().items = [{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}];
detectChangesAndExpectText('orangered');
}));
it('should handle added and removed items properly when tracking by index', async(() => {
const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture = createTestComponent(template);
fixture.debugElement.componentInstance.items = ['a', 'b', 'c', 'd'];
getComponent().items = ['a', 'b', 'c', 'd'];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = ['e', 'f', 'g', 'h'];
getComponent().items = ['e', 'f', 'g', 'h'];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = ['e', 'f', 'h'];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('efh');
getComponent().items = ['e', 'f', 'h'];
detectChangesAndExpectText('efh');
}));
});
});
@ -421,8 +368,7 @@ class Foo {
@Component({selector: 'test-cmp', template: ''})
class TestComponent {
@ContentChild(TemplateRef) contentTpl: TemplateRef<Object>;
items: any;
constructor() { this.items = [1, 2]; }
items: any[] = [1, 2];
trackById(index: number, item: any): string { return item['id']; }
trackByIndex(index: number, item: any): number { return index; }
trackByContext(): void { thisArg = this; }
@ -430,6 +376,12 @@ class TestComponent {
@Component({selector: 'outer-cmp', template: ''})
class ComponentUsingTestComponent {
items: any;
constructor() { this.items = [1, 2]; }
items: any = [1, 2];
}
const TEMPLATE = '<div><span template="ngFor let item of items">{{item.toString()}};</span></div>';
function createTestComponent(template: string = TEMPLATE): ComponentFixture<TestComponent> {
return TestBed.overrideComponent(TestComponent, {set: {template: template}})
.createComponent(TestComponent);
}