honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(common): Remove uses of deprecated TestComponentBuilder. (#10754) 

* ng_class_spec

* Working through ng_for_spec.

* Finishing up ng_for_spec.

* Finish the rest of the specs.

* Convert pipes tests.
This commit is contained in:
mgiambalvo 2016-08-15 13:52:57 -07:00 committed by vikerman
parent 60b10134df
commit 231ed69507
10 changed files with 1186 additions and 1788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

714
modules/@angular/common/test/directives/ng_class_spec.ts
View File

@ -8,8 +8,9 @@
import {NgClass, NgFor} from '@angular/common'; import {NgClass, NgFor} from '@angular/common';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {ComponentFixture, TestComponentBuilder} from '@angular/core/testing'; import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {ListWrapper, StringMapWrapper} from '../../src/facade/collection'; import {ListWrapper, StringMapWrapper} from '../../src/facade/collection';
function detectChangesAndCheck(fixture: ComponentFixture<any>, classes: string) { function detectChangesAndCheck(fixture: ComponentFixture<any>, classes: string) {
@ -19,567 +20,360 @@ function detectChangesAndCheck(fixture: ComponentFixture<any>, classes: string)
export function main() { export function main() {
describe('binding to CSS class list', () => { describe('binding to CSS class list', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent],
});
});
it('should clean up when the directive is destroyed', it('should clean up when the directive is destroyed', async(() => {
inject( let template = '<div *ngFor="let item of items" [ngClass]="item"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div *ngFor="let item of items" [ngClass]="item"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture: ComponentFixture<TestComponent>) => {
fixture.debugElement.componentInstance.items = [['0']];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = [['1']];
detectChangesAndCheck(fixture, '1'); fixture.debugElement.componentInstance.items = [['0']];
fixture.detectChanges();
async.done(); fixture.debugElement.componentInstance.items = [['1']];
});
}));
detectChangesAndCheck(fixture, '1');
}));
describe('expressions evaluating to objects', () => { describe('expressions evaluating to objects', () => {
it('should add classes specified in an object literal', it('should add classes specified in an object literal', async(() => {
inject( let template = '<div [ngClass]="{foo: true, bar: false}"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="{foo: true, bar: false}"></div>';
tcb.overrideTemplate(TestComponent, template) detectChangesAndCheck(fixture, 'foo');
.createAsync(TestComponent) }));
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
async.done();
});
}));
it('should add classes specified in an object literal without change in class names', it('should add classes specified in an object literal without change in class names',
inject( async(() => {
[TestComponentBuilder, AsyncTestCompleter], let template = `<div [ngClass]="{'foo-bar': true, 'fooBar': true}"></div>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
var template = `<div [ngClass]="{'foo-bar': true, 'fooBar': true}"></div>`; let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template) detectChangesAndCheck(fixture, 'foo-bar fooBar');
.createAsync(TestComponent) }));
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo-bar fooBar');
async.done();
});
}));
it('should add and remove classes based on changes in object literal values', it('should add and remove classes based on changes in object literal values', async(() => {
inject( let template = '<div [ngClass]="{foo: condition, bar: !condition}"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="{foo: condition, bar: !condition}"></div>';
tcb.overrideTemplate(TestComponent, template) detectChangesAndCheck(fixture, 'foo');
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.condition = false; fixture.debugElement.componentInstance.condition = false;
detectChangesAndCheck(fixture, 'bar'); detectChangesAndCheck(fixture, 'bar');
}));
async.done(); it('should add and remove classes based on changes to the expression object', async(() => {
}); let template = '<div [ngClass]="objExpr"></div>';
})); TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should add and remove classes based on changes to the expression object', detectChangesAndCheck(fixture, 'foo');
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'foo bar');
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'baz', true);
fixture.debugElement.componentInstance.objExpr, 'bar', true); detectChangesAndCheck(fixture, 'foo bar baz');
detectChangesAndCheck(fixture, 'foo bar');
StringMapWrapper.set( StringMapWrapper.delete(fixture.debugElement.componentInstance.objExpr, 'bar');
fixture.debugElement.componentInstance.objExpr, 'baz', true); detectChangesAndCheck(fixture, 'foo baz');
detectChangesAndCheck(fixture, 'foo bar baz'); }));
StringMapWrapper.delete(fixture.debugElement.componentInstance.objExpr, 'bar');
detectChangesAndCheck(fixture, 'foo baz');
async.done();
});
}));
it('should add and remove classes based on reference changes to the expression object', it('should add and remove classes based on reference changes to the expression object',
inject( async(() => {
[TestComponentBuilder, AsyncTestCompleter], let template = '<div [ngClass]="objExpr"></div>';
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
var template = '<div [ngClass]="objExpr"></div>'; let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template) detectChangesAndCheck(fixture, 'foo');
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.objExpr = {foo: true, bar: true}; fixture.debugElement.componentInstance.objExpr = {foo: true, bar: true};
detectChangesAndCheck(fixture, 'foo bar'); detectChangesAndCheck(fixture, 'foo bar');
fixture.debugElement.componentInstance.objExpr = {baz: true}; fixture.debugElement.componentInstance.objExpr = {baz: true};
detectChangesAndCheck(fixture, 'baz'); detectChangesAndCheck(fixture, 'baz');
}));
async.done(); it('should remove active classes when expression evaluates to null', async(() => {
}); let template = '<div [ngClass]="objExpr"></div>';
})); TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should remove active classes when expression evaluates to null', detectChangesAndCheck(fixture, 'foo');
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.objExpr = null;
.createAsync(TestComponent) detectChangesAndCheck(fixture, '');
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.objExpr = null; fixture.debugElement.componentInstance.objExpr = {'foo': false, 'bar': true};
detectChangesAndCheck(fixture, ''); detectChangesAndCheck(fixture, 'bar');
}));
fixture.debugElement.componentInstance.objExpr = {'foo': false, 'bar': true};
detectChangesAndCheck(fixture, 'bar');
async.done();
});
}));
it('should allow multiple classes per expression', it('should allow multiple classes per expression', async(() => {
inject( let template = '<div [ngClass]="objExpr"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.objExpr = {'bar baz': true, 'bar1 baz1': true};
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'bar baz bar1 baz1');
.then((fixture) => {
fixture.debugElement.componentInstance.objExpr = { fixture.debugElement.componentInstance.objExpr = {'bar baz': false, 'bar1 baz1': true};
'bar baz': true, detectChangesAndCheck(fixture, 'bar1 baz1');
'bar1 baz1': true }));
};
detectChangesAndCheck(fixture, 'bar baz bar1 baz1');
fixture.debugElement.componentInstance.objExpr = { it('should split by one or more spaces between classes', async(() => {
'bar baz': false, let template = '<div [ngClass]="objExpr"></div>';
'bar1 baz1': true TestBed.overrideComponent(TestComponent, {set: {template: template}});
}; let fixture = TestBed.createComponent(TestComponent);
detectChangesAndCheck(fixture, 'bar1 baz1');
fixture.debugElement.componentInstance.objExpr = {'foo bar baz': true};
async.done(); detectChangesAndCheck(fixture, 'foo bar baz');
}); }));
}));
it('should split by one or more spaces between classes',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.objExpr = {'foo bar baz': true};
detectChangesAndCheck(fixture, 'foo bar baz');
async.done();
});
}));
}); });
describe('expressions evaluating to lists', () => { describe('expressions evaluating to lists', () => {
it('should add classes specified in a list literal', it('should add classes specified in a list literal', async(() => {
inject( let template = `<div [ngClass]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = `<div [ngClass]="['foo', 'bar', 'foo-bar', 'fooBar']"></div>`;
tcb.overrideTemplate(TestComponent, template) detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar');
.createAsync(TestComponent) }));
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar');
async.done();
});
}));
it('should add and remove classes based on changes to the expression', it('should add and remove classes based on changes to the expression', async(() => {
inject( let template = '<div [ngClass]="arrExpr"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="arrExpr"></div>'; var arrExpr: string[] = fixture.debugElement.componentInstance.arrExpr;
detectChangesAndCheck(fixture, 'foo');
tcb.overrideTemplate(TestComponent, template) arrExpr.push('bar');
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'foo bar');
.then((fixture) => {
var arrExpr: string[] = fixture.debugElement.componentInstance.arrExpr;
detectChangesAndCheck(fixture, 'foo');
arrExpr.push('bar'); arrExpr[1] = 'baz';
detectChangesAndCheck(fixture, 'foo bar'); detectChangesAndCheck(fixture, 'foo baz');
arrExpr[1] = 'baz'; ListWrapper.remove(fixture.debugElement.componentInstance.arrExpr, 'baz');
detectChangesAndCheck(fixture, 'foo baz'); detectChangesAndCheck(fixture, 'foo');
}));
ListWrapper.remove(fixture.debugElement.componentInstance.arrExpr, 'baz'); it('should add and remove classes when a reference changes', async(() => {
detectChangesAndCheck(fixture, 'foo'); let template = '<div [ngClass]="arrExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
detectChangesAndCheck(fixture, 'foo');
async.done(); fixture.debugElement.componentInstance.arrExpr = ['bar'];
}); detectChangesAndCheck(fixture, 'bar');
})); }));
it('should add and remove classes when a reference changes', it('should take initial classes into account when a reference changes', async(() => {
inject( let template = '<div class="foo" [ngClass]="arrExpr"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="arrExpr"></div>'; detectChangesAndCheck(fixture, 'foo');
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.arrExpr = ['bar'];
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'foo bar');
.then((fixture) => { }));
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.arrExpr = ['bar']; it('should ignore empty or blank class names', async(() => {
detectChangesAndCheck(fixture, 'bar'); let template = '<div class="foo" [ngClass]="arrExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.debugElement.componentInstance.arrExpr = ['', ' '];
detectChangesAndCheck(fixture, 'foo');
}));
async.done(); it('should trim blanks from class names', async(() => {
}); var template = '<div class="foo" [ngClass]="arrExpr"></div>';
})); TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should take initial classes into account when a reference changes', fixture.debugElement.componentInstance.arrExpr = [' bar '];
inject( detectChangesAndCheck(fixture, 'foo bar');
[TestComponentBuilder, AsyncTestCompleter], }));
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(fixture, 'foo bar');
async.done();
});
}));
it('should ignore empty or blank class names',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.arrExpr = ['', ' '];
detectChangesAndCheck(fixture, 'foo');
async.done();
});
}));
it('should trim blanks from class names',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.arrExpr = [' bar '];
detectChangesAndCheck(fixture, 'foo bar');
async.done();
});
}));
it('should allow multiple classes per item in arrays', it('should allow multiple classes per item in arrays', async(() => {
inject( var template = '<div [ngClass]="arrExpr"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.arrExpr = ['foo bar baz', 'foo1 bar1 baz1'];
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'foo bar baz foo1 bar1 baz1');
.then((fixture) => {
fixture.debugElement.componentInstance.arrExpr = fixture.debugElement.componentInstance.arrExpr = ['foo bar baz foobar'];
['foo bar baz', 'foo1 bar1 baz1']; detectChangesAndCheck(fixture, 'foo bar baz foobar');
detectChangesAndCheck(fixture, 'foo bar baz foo1 bar1 baz1'); }));
fixture.debugElement.componentInstance.arrExpr = ['foo bar baz foobar'];
detectChangesAndCheck(fixture, 'foo bar baz foobar');
async.done();
});
}));
}); });
describe('expressions evaluating to sets', () => { describe('expressions evaluating to sets', () => {
it('should add and remove classes if the set instance changed', it('should add and remove classes if the set instance changed', async(() => {
inject( var template = '<div [ngClass]="setExpr"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="setExpr"></div>'; var setExpr = new Set<string>();
setExpr.add('bar');
fixture.debugElement.componentInstance.setExpr = setExpr;
detectChangesAndCheck(fixture, 'bar');
tcb.overrideTemplate(TestComponent, template) setExpr = new Set<string>();
.createAsync(TestComponent) setExpr.add('baz');
.then((fixture) => { fixture.debugElement.componentInstance.setExpr = setExpr;
var setExpr = new Set<string>(); detectChangesAndCheck(fixture, 'baz');
setExpr.add('bar'); }));
fixture.debugElement.componentInstance.setExpr = setExpr;
detectChangesAndCheck(fixture, 'bar');
setExpr = new Set<string>();
setExpr.add('baz');
fixture.debugElement.componentInstance.setExpr = setExpr;
detectChangesAndCheck(fixture, 'baz');
async.done();
});
}));
}); });
describe('expressions evaluating to string', () => { describe('expressions evaluating to string', () => {
it('should add classes specified in a string literal', it('should add classes specified in a string literal', async(() => {
inject( var template = `<div [ngClass]="'foo bar foo-bar fooBar'"></div>`;
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = `<div [ngClass]="'foo bar foo-bar fooBar'"></div>`; detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar');
}));
tcb.overrideTemplate(TestComponent, template) it('should add and remove classes based on changes to the expression', async(() => {
.createAsync(TestComponent) var template = '<div [ngClass]="strExpr"></div>';
.then((fixture) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar'); let fixture = TestBed.createComponent(TestComponent);
async.done(); detectChangesAndCheck(fixture, 'foo');
});
}));
it('should add and remove classes based on changes to the expression', fixture.debugElement.componentInstance.strExpr = 'foo bar';
inject( detectChangesAndCheck(fixture, 'foo bar');
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="strExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.strExpr = 'foo bar';
detectChangesAndCheck(fixture, 'foo bar');
fixture.debugElement.componentInstance.strExpr = 'baz'; fixture.debugElement.componentInstance.strExpr = 'baz';
detectChangesAndCheck(fixture, 'baz'); detectChangesAndCheck(fixture, 'baz');
async.done(); }));
});
}));
it('should remove active classes when switching from string to null', it('should remove active classes when switching from string to null', async(() => {
inject( var template = `<div [ngClass]="strExpr"></div>`;
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = `<div [ngClass]="strExpr"></div>`; detectChangesAndCheck(fixture, 'foo');
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.strExpr = null;
.createAsync(TestComponent) detectChangesAndCheck(fixture, '');
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.strExpr = null; }));
detectChangesAndCheck(fixture, '');
async.done();
});
}));
it('should take initial classes into account when switching from string to null', it('should take initial classes into account when switching from string to null',
inject( async(() => {
[TestComponentBuilder, AsyncTestCompleter], var template = `<div class="foo" [ngClass]="strExpr"></div>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
var template = `<div class="foo" [ngClass]="strExpr"></div>`; let fixture = TestBed.createComponent(TestComponent);
detectChangesAndCheck(fixture, 'foo');
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.strExpr = null;
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'foo');
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.strExpr = null; }));
detectChangesAndCheck(fixture, 'foo');
async.done(); it('should ignore empty and blank strings', async(() => {
}); var template = `<div class="foo" [ngClass]="strExpr"></div>`;
})); TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.debugElement.componentInstance.strExpr = '';
detectChangesAndCheck(fixture, 'foo');
it('should ignore empty and blank strings', }));
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div class="foo" [ngClass]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.strExpr = '';
detectChangesAndCheck(fixture, 'foo');
async.done();
});
}));
}); });
describe('cooperation with other class-changing constructs', () => { describe('cooperation with other class-changing constructs', () => {
it('should co-operate with the class attribute', it('should co-operate with the class attribute', async(() => {
inject( var template = '<div [ngClass]="objExpr" class="init foo"></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div [ngClass]="objExpr" class="init foo"></div>'; StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'init foo bar');
tcb.overrideTemplate(TestComponent, template) StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'init bar');
.then((fixture) => {
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'init foo bar');
StringMapWrapper.set( fixture.debugElement.componentInstance.objExpr = null;
fixture.debugElement.componentInstance.objExpr, 'foo', false); detectChangesAndCheck(fixture, 'init foo');
detectChangesAndCheck(fixture, 'init bar');
fixture.debugElement.componentInstance.objExpr = null; }));
detectChangesAndCheck(fixture, 'init foo');
async.done(); it('should co-operate with the interpolated class attribute', async(() => {
}); var template = `<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`;
})); TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo bar`);
it('should co-operate with the interpolated class attribute', StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
inject( detectChangesAndCheck(fixture, `init bar`);
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`;
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.objExpr = null;
.createAsync(TestComponent) detectChangesAndCheck(fixture, `init foo`);
.then((fixture) => {
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo bar`);
StringMapWrapper.set( }));
fixture.debugElement.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(fixture, `init bar`);
fixture.debugElement.componentInstance.objExpr = null; it('should co-operate with the class attribute and binding to it', async(() => {
detectChangesAndCheck(fixture, `init foo`); var template = `<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo bar`);
async.done(); StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
}); detectChangesAndCheck(fixture, `init bar`);
}));
it('should co-operate with the class attribute and binding to it', fixture.debugElement.componentInstance.objExpr = null;
inject( detectChangesAndCheck(fixture, `init foo`);
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`;
tcb.overrideTemplate(TestComponent, template) }));
.createAsync(TestComponent)
.then((fixture) => {
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo bar`);
StringMapWrapper.set( it('should co-operate with the class attribute and class.name binding', async(() => {
fixture.debugElement.componentInstance.objExpr, 'foo', false); var template =
detectChangesAndCheck(fixture, `init bar`); '<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
detectChangesAndCheck(fixture, 'init foo baz');
fixture.debugElement.componentInstance.objExpr = null; StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo`); detectChangesAndCheck(fixture, 'init foo baz bar');
async.done(); StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
}); detectChangesAndCheck(fixture, 'init baz bar');
}));
it('should co-operate with the class attribute and class.name binding', fixture.debugElement.componentInstance.condition = false;
inject( detectChangesAndCheck(fixture, 'init bar');
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
'<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
tcb.overrideTemplate(TestComponent, template) }));
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'init foo baz');
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'init foo baz bar');
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(fixture, 'init baz bar');
fixture.debugElement.componentInstance.condition = false;
detectChangesAndCheck(fixture, 'init bar');
async.done();
});
}));
it('should co-operate with initial class and class attribute binding when binding changes', it('should co-operate with initial class and class attribute binding when binding changes',
inject( async(() => {
[TestComponentBuilder, AsyncTestCompleter], var template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>';
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
var template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>'; let fixture = TestBed.createComponent(TestComponent);
detectChangesAndCheck(fixture, 'init foo');
tcb.overrideTemplate(TestComponent, template) StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
.createAsync(TestComponent) detectChangesAndCheck(fixture, 'init foo bar');
.then((fixture) => {
detectChangesAndCheck(fixture, 'init foo');
StringMapWrapper.set( fixture.debugElement.componentInstance.strExpr = 'baz';
fixture.debugElement.componentInstance.objExpr, 'bar', true); detectChangesAndCheck(fixture, 'init bar baz foo');
detectChangesAndCheck(fixture, 'init foo bar');
fixture.debugElement.componentInstance.strExpr = 'baz';
detectChangesAndCheck(fixture, 'init bar baz foo');
fixture.debugElement.componentInstance.objExpr = null;
detectChangesAndCheck(fixture, 'init baz');
async.done();
});
}));
fixture.debugElement.componentInstance.objExpr = null;
detectChangesAndCheck(fixture, 'init baz');
}));
}); });
}); });
} }

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

@ -8,8 +8,8 @@
import {NgFor, NgIf} from '@angular/common'; import {NgFor, NgIf} from '@angular/common';
import {Component, ContentChild, TemplateRef} from '@angular/core'; import {Component, ContentChild, TemplateRef} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {By} from '@angular/platform-browser/src/dom/debug/by'; import {By} from '@angular/platform-browser/src/dom/debug/by';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
@ -22,545 +22,396 @@ export function main() {
const 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', beforeEach(() => {
inject( TestBed.configureTestingModule({
[TestComponentBuilder, AsyncTestCompleter], declarations: [TestComponent, ComponentUsingTestComponent],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { });
tcb.overrideTemplate(TestComponent, TEMPLATE) });
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
async.done();
});
}));
it('should reflect added elements', it('should reflect initial elements', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.detectChanges();
tcb.overrideTemplate(TestComponent, TEMPLATE) expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
.createAsync(TestComponent) }));
.then((fixture) => {
fixture.detectChanges();
(<number[]>fixture.debugElement.componentInstance.items).push(3); it('should reflect added elements', async(() => {
fixture.detectChanges(); TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;'); (<number[]>fixture.debugElement.componentInstance.items).push(3);
async.done(); fixture.detectChanges();
});
}));
it('should reflect removed elements', expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;');
inject( }));
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 1); it('should reflect removed elements', async(() => {
fixture.detectChanges(); TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;'); ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 1);
async.done(); fixture.detectChanges();
});
}));
it('should reflect moved elements', expect(fixture.debugElement.nativeElement).toHaveText('1;');
inject( }));
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0); it('should reflect moved elements', async(() => {
(<number[]>fixture.debugElement.componentInstance.items).push(1); TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
fixture.detectChanges(); let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2;1;'); ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0);
async.done(); (<number[]>fixture.debugElement.componentInstance.items).push(1);
}); fixture.detectChanges();
}));
it('should reflect a mix of all changes (additions/removals/moves)', expect(fixture.debugElement.nativeElement).toHaveText('2;1;');
inject( }));
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = [6, 2, 7, 0, 4, 8]; it('should reflect a mix of all changes (additions/removals/moves)', async(() => {
fixture.detectChanges(); TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('6;2;7;0;4;8;'); fixture.debugElement.componentInstance.items = [6, 2, 7, 0, 4, 8];
async.done(); fixture.detectChanges();
});
}));
it('should iterate over an array of objects', expect(fixture.debugElement.nativeElement).toHaveText('6;2;7;0;4;8;');
inject( }));
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
'<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>';
tcb.overrideTemplate(TestComponent, template) it('should iterate over an array of objects', async(() => {
.createAsync(TestComponent) const template = '<ul><li template="ngFor let item of items">{{item["name"]}};</li></ul>';
.then((fixture) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
// INIT // INIT
fixture.debugElement.componentInstance.items = fixture.debugElement.componentInstance.items = [{'name': 'misko'}, {'name': 'shyam'}];
[{'name': 'misko'}, {'name': 'shyam'}]; fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;');
expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;');
// GROW // GROW
(<any[]>fixture.debugElement.componentInstance.items).push({'name': 'adam'}); (<any[]>fixture.debugElement.componentInstance.items).push({'name': 'adam'});
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;adam;'); expect(fixture.debugElement.nativeElement).toHaveText('misko;shyam;adam;');
// SHRINK // SHRINK
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 2); ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 2);
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0); ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('shyam;'); expect(fixture.debugElement.nativeElement).toHaveText('shyam;');
async.done(); }));
});
}));
it('should gracefully handle nulls', it('should gracefully handle nulls', async(() => {
inject( const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>'; fixture.detectChanges();
tcb.overrideTemplate(TestComponent, template) expect(fixture.debugElement.nativeElement).toHaveText('');
.createAsync(TestComponent) }));
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('');
async.done();
});
}));
it('should gracefully handle ref changing to null and back', it('should gracefully handle ref changing to null and back', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.detectChanges();
tcb.overrideTemplate(TestComponent, TEMPLATE) expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
fixture.debugElement.componentInstance.items = null; fixture.debugElement.componentInstance.items = null;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.items = [1, 2, 3]; fixture.debugElement.componentInstance.items = [1, 2, 3];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;'); expect(fixture.debugElement.nativeElement).toHaveText('1;2;3;');
async.done(); }));
});
}));
it('should throw on non-iterable ref and suggest using an array', it('should throw on non-iterable ref and suggest using an array', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.debugElement.componentInstance.items = 'whaaa';
tcb.overrideTemplate(TestComponent, TEMPLATE).createAsync(TestComponent).then((fixture) => { expect(() => fixture.detectChanges())
fixture.debugElement.componentInstance.items = 'whaaa'; .toThrowError(
expect(() => fixture.detectChanges()) /Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/);
.toThrowError( }));
/Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/);
async.done();
});
}));
it('should throw on ref changing to string', it('should throw on ref changing to string', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.detectChanges();
tcb.overrideTemplate(TestComponent, TEMPLATE) expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
fixture.debugElement.componentInstance.items = 'whaaa'; fixture.debugElement.componentInstance.items = 'whaaa';
expect(() => fixture.detectChanges()).toThrowError(); expect(() => fixture.detectChanges()).toThrowError();
async.done(); }));
});
}));
it('should works with duplicates', it('should works with duplicates', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { var a = new Foo();
tcb.overrideTemplate(TestComponent, TEMPLATE) fixture.debugElement.componentInstance.items = [a, a];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('foo;foo;');
var a = new Foo(); }));
fixture.debugElement.componentInstance.items = [a, a];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('foo;foo;');
async.done();
});
}));
it('should repeat over nested arrays', it('should repeat over nested arrays', async(() => {
inject( const template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<div template="ngFor let item of items">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<div template="ngFor let subitem of item">' +
const template = '<div>' + '{{subitem}}-{{item.length}};' +
'<div template="ngFor let item of items">' + '</div>|' +
'<div template="ngFor let subitem of item">' + '</div>' +
'{{subitem}}-{{item.length}};' + '</div>';
'</div>|' + TestBed.overrideComponent(TestComponent, {set: {template: template}});
'</div>' + let fixture = TestBed.createComponent(TestComponent);
'</div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { fixture.detectChanges();
fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']]; fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;|c-1;|');
fixture.detectChanges();
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;|c-1;|');
fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']]; fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('e-1;|f-2;g-2;|'); expect(fixture.debugElement.nativeElement).toHaveText('e-1;|f-2;g-2;|');
}));
async.done(); it('should repeat over nested arrays with no intermediate element', async(() => {
}); const template = '<div><template ngFor let-item [ngForOf]="items">' +
})); '<div template="ngFor let subitem of item">' +
'{{subitem}}-{{item.length}};' +
'</div></template></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should repeat over nested arrays with no intermediate element', fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;c-1;');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = '<div><template ngFor let-item [ngForOf]="items">' +
'<div template="ngFor let subitem of item">' +
'{{subitem}}-{{item.length}};' +
'</div></template></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('e-1;f-2;g-2;');
fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']]; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;c-1;');
fixture.debugElement.componentInstance.items = [['e'], ['f', 'g']]; it('should repeat over nested ngIf that are the last node in the ngFor temlate', async(() => {
fixture.detectChanges(); const template =
expect(fixture.debugElement.nativeElement).toHaveText('e-1;f-2;g-2;'); `<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
async.done(); `<div *ngIf="i % 2 == 0">even|</div></template></div>`;
});
}));
it('should repeat over nested ngIf that are the last node in the ngFor temlate', TestBed.overrideComponent(TestComponent, {set: {template: template}});
inject( let fixture = TestBed.createComponent(TestComponent);
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
`<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
`<div *ngIf="i % 2 == 0">even|</div></template></div>`;
tcb.overrideTemplate(TestComponent, template) const el = fixture.debugElement.nativeElement;
.createAsync(TestComponent) const items = [1];
.then((fixture) => { fixture.debugElement.componentInstance.items = items;
const el = fixture.debugElement.nativeElement; fixture.detectChanges();
const items = [1]; expect(el).toHaveText('0|even|');
fixture.debugElement.componentInstance.items = items;
fixture.detectChanges();
expect(el).toHaveText('0|even|');
items.push(1); items.push(1);
fixture.detectChanges(); fixture.detectChanges();
expect(el).toHaveText('0|even|1|'); expect(el).toHaveText('0|even|1|');
items.push(1); items.push(1);
fixture.detectChanges(); fixture.detectChanges();
expect(el).toHaveText('0|even|1|2|even|'); expect(el).toHaveText('0|even|1|2|even|');
}));
async.done(); it('should display indices correctly', async(() => {
}); const template =
})); '<div><copy-me template="ngFor: let item of items; let i=index">{{i.toString()}}</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should display indices correctly', fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
'<div><copy-me template="ngFor: let item of items; let i=index">{{i.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
fixture.debugElement.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0]; it('should display first item correctly', async(() => {
fixture.detectChanges(); const template =
expect(fixture.debugElement.nativeElement).toHaveText('0123456789'); '<div><copy-me template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</copy-me></div>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
}));
it('should display first item correctly', fixture.debugElement.componentInstance.items = [0, 1, 2];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
'<div><copy-me template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [2, 1];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
fixture.debugElement.componentInstance.items = [0, 1, 2]; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse');
fixture.debugElement.componentInstance.items = [2, 1]; it('should display last item correctly', async(() => {
fixture.detectChanges(); const template =
expect(fixture.debugElement.nativeElement).toHaveText('truefalse'); '<div><copy-me template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</copy-me></div>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
}));
it('should display last item correctly', fixture.debugElement.componentInstance.items = [0, 1, 2];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('falsefalsetrue');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
'<div><copy-me template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [2, 1];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('falsetrue');
fixture.debugElement.componentInstance.items = [0, 1, 2]; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsefalsetrue');
fixture.debugElement.componentInstance.items = [2, 1]; it('should display even items correctly', async(() => {
fixture.detectChanges(); const template =
expect(fixture.debugElement.nativeElement).toHaveText('falsetrue'); '<div><copy-me template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</copy-me></div>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
}));
it('should display even items correctly', fixture.debugElement.componentInstance.items = [0, 1, 2];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('truefalsetrue');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
'<div><copy-me template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [2, 1];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
fixture.debugElement.componentInstance.items = [0, 1, 2]; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalsetrue');
fixture.debugElement.componentInstance.items = [2, 1]; it('should display odd items correctly', async(() => {
fixture.detectChanges(); const template =
expect(fixture.debugElement.nativeElement).toHaveText('truefalse'); '<div><copy-me template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
}));
it('should display odd items correctly', fixture.debugElement.componentInstance.items = [0, 1, 2, 3];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('falsetruefalsetrue');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
'<div><copy-me template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [2, 1];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('falsetrue');
fixture.debugElement.componentInstance.items = [0, 1, 2, 3]; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetruefalsetrue');
fixture.debugElement.componentInstance.items = [2, 1]; it('should allow to use a custom template', async(() => {
fixture.detectChanges(); const tcTemplate =
expect(fixture.debugElement.nativeElement).toHaveText('falsetrue'); '<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: tcTemplate}});
}); 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);
it('should allow to use a custom template', const testComponent = fixture.debugElement.children[0];
inject( testComponent.componentInstance.items = ['a', 'b', 'c'];
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
tcb.overrideTemplate( }));
TestComponent,
'<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>')
.overrideTemplate(
ComponentUsingTestComponent,
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
async.done(); it('should use a default template if a custom one is null', async(() => {
}); const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
})); [ngForTemplate]="contentTpl" let-i="index">{{i}}: {{item}};</template></ul>`;
TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
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);
it('should use a default template if a custom one is null', const testComponent = fixture.debugElement.children[0];
inject( testComponent.componentInstance.items = ['a', 'b', 'c'];
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
tcb.overrideTemplate(TestComponent, `<ul><template ngFor let-item [ngForOf]="items" }));
[ngForTemplate]="contentTpl" let-i="index">{{i}}: {{item}};</template></ul>`)
.overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
async.done(); it('should use a custom template when both default and a custom one are present', async(() => {
}); const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
})); [ngForTemplate]="contentTpl" let-i="index">{{i}}=> {{item}};</template></ul>`;
TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
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);
it('should use a custom template when both default and a custom one are present', const testComponent = fixture.debugElement.children[0];
inject( testComponent.componentInstance.items = ['a', 'b', 'c'];
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
tcb.overrideTemplate(TestComponent, `<ul><template ngFor let-item [ngForOf]="items" }));
[ngForTemplate]="contentTpl" let-i="index">{{i}}=> {{item}};</template></ul>`)
.overrideTemplate(
ComponentUsingTestComponent,
'<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>')
.createAsync(ComponentUsingTestComponent)
.then((fixture) => {
const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
async.done();
});
}));
describe('track by', () => { describe('track by', () => {
it('should set the context to the component instance', it('should set the context to the component instance', async(() => {
inject( const template =
[TestComponentBuilder, AsyncTestCompleter], `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
const template = let fixture = TestBed.createComponent(TestComponent);
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
thisArg = null;
fixture.detectChanges();
expect(thisArg).toBe(fixture.debugElement.componentInstance);
async.done();
});
}));
it('should not replace tracked items', thisArg = null;
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(thisArg).toBe(fixture.debugElement.componentInstance);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { }));
const template =
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById" let-i="index"> it('should not replace tracked items', async(() => {
const template =
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById" let-i="index">
<p>{{items[i]}}</p> <p>{{items[i]}}</p>
</template>`; </template>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
var buildItemList = () => {
fixture.debugElement.componentInstance.items = [{'id': 'a'}];
fixture.detectChanges();
return fixture.debugElement.queryAll(By.css('p'))[0];
};
var firstP = buildItemList(); var buildItemList = () => {
var finalP = buildItemList(); fixture.debugElement.componentInstance.items = [{'id': 'a'}];
expect(finalP.nativeElement).toBe(firstP.nativeElement); fixture.detectChanges();
async.done(); return fixture.debugElement.queryAll(By.css('p'))[0];
}); };
}));
it('should update implicit local variable on view', var firstP = buildItemList();
inject( var finalP = buildItemList();
[TestComponentBuilder, AsyncTestCompleter], expect(finalP.nativeElement).toBe(firstP.nativeElement);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { }));
const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
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');
async.done();
});
}));
it('should move items around and keep them updated ',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
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');
async.done();
});
}));
it('should handle added and removed items properly when tracking by index', it('should update implicit local variable on view', async(() => {
inject( const template =
[TestComponentBuilder, AsyncTestCompleter], `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
const template = let fixture = TestBed.createComponent(TestComponent);
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'blue'}];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('blue');
fixture.debugElement.componentInstance.items = ['a', 'b', 'c', 'd']; fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'red'}];
fixture.detectChanges(); fixture.detectChanges();
fixture.debugElement.componentInstance.items = ['e', 'f', 'g', 'h']; expect(fixture.debugElement.nativeElement).toHaveText('red');
fixture.detectChanges(); }));
fixture.debugElement.componentInstance.items = ['e', 'f', 'h']; it('should move items around and keep them updated ', async(() => {
fixture.detectChanges(); const template =
expect(fixture.debugElement.nativeElement).toHaveText('efh'); `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
}));
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');
}));
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.debugElement.componentInstance.items = ['a', 'b', 'c', 'd'];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = ['e', 'f', 'g', 'h'];
fixture.detectChanges();
fixture.debugElement.componentInstance.items = ['e', 'f', 'h'];
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('efh');
}));
}); });
}); });
} }

328
modules/@angular/common/test/directives/ng_if_spec.ts
View File

@ -8,236 +8,166 @@
import {NgIf} from '@angular/common'; import {NgIf} from '@angular/common';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
export function main() { export function main() {
describe('ngIf directive', () => { describe('ngIf directive', () => {
it('should work in a template attribute',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) beforeEach(() => {
.createAsync(TestComponent) TestBed.configureTestingModule({
.then((fixture) => { declarations: [TestComponent],
fixture.detectChanges(); });
expect(getDOM() });
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello');
async.done();
});
}));
it('should work in a template element', it('should work in a template attribute', async(() => {
inject( const template = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html =
'<div><template [ngIf]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
tcb.overrideTemplate(TestComponent, html) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.detectChanges();
fixture.detectChanges(); expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
expect(getDOM() .toEqual(1);
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') expect(fixture.debugElement.nativeElement).toHaveText('hello');
.length) }));
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello2');
async.done();
});
}));
it('should toggle node when condition changes', it('should work in a template element', async(() => {
inject( const template =
[TestComponentBuilder, AsyncTestCompleter], '<div><template [ngIf]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.detectChanges();
fixture.debugElement.componentInstance.booleanCondition = false; expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
fixture.detectChanges(); .toEqual(1);
expect(getDOM() expect(fixture.debugElement.nativeElement).toHaveText('hello2');
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') }));
.length)
.toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.booleanCondition = true; it('should toggle node when condition changes', async(() => {
fixture.detectChanges(); const template = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
expect(getDOM()
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello');
fixture.debugElement.componentInstance.booleanCondition = false; TestBed.overrideComponent(TestComponent, {set: {template: template}});
fixture.detectChanges(); let fixture = TestBed.createComponent(TestComponent);
expect(getDOM() fixture.debugElement.componentInstance.booleanCondition = false;
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') fixture.detectChanges();
.length) expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.toEqual(0); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
async.done(); fixture.debugElement.componentInstance.booleanCondition = true;
}); fixture.detectChanges();
})); expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello');
it('should handle nested if correctly', fixture.debugElement.componentInstance.booleanCondition = false;
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { .toEqual(0);
var html = expect(fixture.debugElement.nativeElement).toHaveText('');
'<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>'; }));
tcb.overrideTemplate(TestComponent, html) it('should handle nested if correctly', async(() => {
.createAsync(TestComponent) const template =
.then((fixture) => { '<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>';
fixture.debugElement.componentInstance.booleanCondition = false;
fixture.detectChanges();
expect(getDOM()
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.booleanCondition = true; TestBed.overrideComponent(TestComponent, {set: {template: template}});
fixture.detectChanges(); let fixture = TestBed.createComponent(TestComponent);
expect(getDOM() fixture.debugElement.componentInstance.booleanCondition = false;
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') fixture.detectChanges();
.length) expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.toEqual(1); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.nestedBooleanCondition = false; fixture.debugElement.componentInstance.booleanCondition = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') .toEqual(1);
.length) expect(fixture.debugElement.nativeElement).toHaveText('hello');
.toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.nestedBooleanCondition = true; fixture.debugElement.componentInstance.nestedBooleanCondition = false;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') .toEqual(0);
.length) expect(fixture.debugElement.nativeElement).toHaveText('');
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello');
fixture.debugElement.componentInstance.booleanCondition = false; fixture.debugElement.componentInstance.nestedBooleanCondition = true;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') .toEqual(1);
.length) expect(fixture.debugElement.nativeElement).toHaveText('hello');
.toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText('');
async.done(); fixture.debugElement.componentInstance.booleanCondition = false;
}); fixture.detectChanges();
})); expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText('');
}));
it('should update several nodes with if', it('should update several nodes with if', async(() => {
inject( const template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' +
var html = '<div>' + '<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' + '</div>';
'<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>';
tcb.overrideTemplate(TestComponent, html) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.detectChanges();
fixture.detectChanges(); expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
expect(getDOM() .toEqual(3);
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') expect(getDOM().getText(fixture.debugElement.nativeElement))
.length) .toEqual('helloNumberhelloStringhelloFunction');
.toEqual(3);
expect(getDOM().getText(fixture.debugElement.nativeElement))
.toEqual('helloNumberhelloStringhelloFunction');
fixture.debugElement.componentInstance.numberCondition = 0; fixture.debugElement.componentInstance.numberCondition = 0;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') .toEqual(1);
.length) expect(fixture.debugElement.nativeElement).toHaveText('helloString');
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('helloString');
fixture.debugElement.componentInstance.numberCondition = 1; fixture.debugElement.componentInstance.numberCondition = 1;
fixture.debugElement.componentInstance.stringCondition = 'bar'; fixture.debugElement.componentInstance.stringCondition = 'bar';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') .toEqual(1);
.length) expect(fixture.debugElement.nativeElement).toHaveText('helloNumber');
.toEqual(1); }));
expect(fixture.debugElement.nativeElement).toHaveText('helloNumber');
async.done();
});
}));
it('should not add the element twice if the condition goes from true to true (JS)', it('should not add the element twice if the condition goes from true to true (JS)',
inject( async(() => {
[TestComponentBuilder, AsyncTestCompleter], const template = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
tcb.overrideTemplate(TestComponent, html) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.detectChanges();
fixture.detectChanges(); expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
expect(getDOM() .toEqual(1);
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') expect(fixture.debugElement.nativeElement).toHaveText('hello');
.length)
.toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello');
fixture.debugElement.componentInstance.numberCondition = 2; fixture.debugElement.componentInstance.numberCondition = 2;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me') .toEqual(1);
.length) expect(fixture.debugElement.nativeElement).toHaveText('hello');
.toEqual(1); }));
expect(fixture.debugElement.nativeElement).toHaveText('hello');
async.done(); it('should not recreate the element if the condition goes from true to true (JS)', async(() => {
}); const template = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
}));
it('should not recreate the element if the condition goes from true to true (JS)', TestBed.overrideComponent(TestComponent, {set: {template: template}});
inject( let fixture = TestBed.createComponent(TestComponent);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { getDOM().addClass(
var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>'; getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), 'foo');
tcb.overrideTemplate(TestComponent, html) fixture.debugElement.componentInstance.numberCondition = 2;
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(getDOM().hasClass(
fixture.detectChanges(); getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), 'foo'))
getDOM().addClass( .toBe(true);
getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), }));
'foo');
fixture.debugElement.componentInstance.numberCondition = 2;
fixture.detectChanges();
expect(getDOM().hasClass(
getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'),
'foo'))
.toBe(true);
async.done();
});
}));
}); });
} }

217
modules/@angular/common/test/directives/ng_plural_spec.ts
View File

@ -8,157 +8,120 @@
import {NgLocalization, NgPlural, NgPluralCase} from '@angular/common'; import {NgLocalization, NgPlural, NgPluralCase} from '@angular/common';
import {Component, Injectable} from '@angular/core'; import {Component, Injectable} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
export function main() { export function main() {
describe('switch', () => { describe('switch', () => {
beforeEachProviders(() => [{provide: NgLocalization, useClass: TestLocalization}]);
it('should display the template according to the exact value', beforeEach(() => {
inject( TestBed.configureTestingModule({
[TestComponentBuilder, AsyncTestCompleter], declarations: [TestComponent],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { providers: [{provide: NgLocalization, useClass: TestLocalization}]
var template = '<div>' + });
'<ul [ngPlural]="switchValue">' + });
'<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
'<template ngPluralCase="=1"><li>you have one message.</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) it('should display the template according to the exact value', async(() => {
.createAsync(TestComponent) var template = '<div>' +
.then((fixture) => { '<ul [ngPlural]="switchValue">' +
fixture.debugElement.componentInstance.switchValue = 0; '<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
fixture.detectChanges(); '<template ngPluralCase="=1"><li>you have one message.</li></template>' +
expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.'); '</ul></div>';
fixture.debugElement.componentInstance.switchValue = 1; TestBed.overrideComponent(TestComponent, {set: {template: template}});
fixture.detectChanges(); let fixture = TestBed.createComponent(TestComponent);
expect(fixture.debugElement.nativeElement).toHaveText('you have one message.'); fixture.debugElement.componentInstance.switchValue = 0;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.');
async.done(); fixture.debugElement.componentInstance.switchValue = 1;
}); fixture.detectChanges();
})); expect(fixture.debugElement.nativeElement).toHaveText('you have one message.');
}));
// https://github.com/angular/angular/issues/9868 // https://github.com/angular/angular/issues/9868
// https://github.com/angular/angular/issues/9882 // https://github.com/angular/angular/issues/9882
it('should not throw when ngPluralCase contains expressions', it('should not throw when ngPluralCase contains expressions', async(() => {
inject( var template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<ul [ngPlural]="switchValue">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<template ngPluralCase="=0"><li>{{ switchValue }}</li></template>' +
var template = '<div>' + '</ul></div>';
'<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="=0"><li>{{ switchValue }}</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.debugElement.componentInstance.switchValue = 0;
fixture.debugElement.componentInstance.switchValue = 0; expect(() => fixture.detectChanges()).not.toThrow();
expect(() => fixture.detectChanges()).not.toThrow(); }));
async.done();
});
}));
it('should be applicable to <ng-container> elements', it('should be applicable to <ng-container> elements', async(() => {
inject( var template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<ng-container [ngPlural]="switchValue">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<template ngPluralCase="=0">you have no messages.</template>' +
var template = '<div>' + '<template ngPluralCase="=1">you have one message.</template>' +
'<ng-container [ngPlural]="switchValue">' + '</ng-container></div>';
'<template ngPluralCase="=0">you have no messages.</template>' +
'<template ngPluralCase="=1">you have one message.</template>' +
'</ng-container></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.debugElement.componentInstance.switchValue = 0;
fixture.debugElement.componentInstance.switchValue = 0; fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.');
expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.');
fixture.debugElement.componentInstance.switchValue = 1; fixture.debugElement.componentInstance.switchValue = 1;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('you have one message.'); expect(fixture.debugElement.nativeElement).toHaveText('you have one message.');
}));
async.done(); it('should display the template according to the category', async(() => {
}); var template = '<div>' +
})); '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="many"><li>you have many messages.</li></template>' +
'</ul></div>';
it('should display the template according to the category', TestBed.overrideComponent(TestComponent, {set: {template: template}});
inject( let fixture = TestBed.createComponent(TestComponent);
[TestComponentBuilder, AsyncTestCompleter], fixture.debugElement.componentInstance.switchValue = 2;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.detectChanges();
var template = '<div>' + expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.');
'<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="many"><li>you have many messages.</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.switchValue = 8;
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('you have many messages.');
fixture.debugElement.componentInstance.switchValue = 2; }));
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('you have a few messages.');
fixture.debugElement.componentInstance.switchValue = 8; it('should default to other when no matches are found', async(() => {
fixture.detectChanges(); var template = '<div>' +
expect(fixture.debugElement.nativeElement).toHaveText('you have many messages.'); '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="other"><li>default message.</li></template>' +
'</ul></div>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
})); fixture.debugElement.componentInstance.switchValue = 100;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('default message.');
}));
it('should default to other when no matches are found', it('should prioritize value matches over category matches', async(() => {
inject( var template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<ul [ngPlural]="switchValue">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
var template = '<div>' + '<template ngPluralCase="=2">you have two messages.</template>' +
'<ul [ngPlural]="switchValue">' + '</ul></div>';
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="other"><li>default message.</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.debugElement.componentInstance.switchValue = 2;
fixture.debugElement.componentInstance.switchValue = 100; fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('you have two messages.');
expect(fixture.debugElement.nativeElement).toHaveText('default message.');
async.done(); fixture.debugElement.componentInstance.switchValue = 3;
}); fixture.detectChanges();
})); expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.');
}));
it('should prioritize value matches over category matches',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' +
'<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="=2">you have two messages.</template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.switchValue = 2;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('you have two messages.');
fixture.debugElement.componentInstance.switchValue = 3;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('you have a few messages.');
async.done();
});
}));
}); });
} }

257
modules/@angular/common/test/directives/ng_style_spec.ts
View File

@ -6,8 +6,8 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, xdescribe, describe, expect, iit, inject, it, xit,} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, xdescribe, describe, expect, iit, it, xit,} from '@angular/core/testing/testing_internal';
import {TestComponentBuilder, ComponentFixture} from '@angular/core/testing'; import {async, TestBed, ComponentFixture} from '@angular/core/testing';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
@ -20,188 +20,137 @@ function expectNativeEl(fixture: ComponentFixture<any>) {
export function main() { export function main() {
describe('binding to CSS styles', () => { describe('binding to CSS styles', () => {
it('should add styles specified in an object literal', beforeEach(() => {
inject( TestBed.configureTestingModule({
[TestComponentBuilder, AsyncTestCompleter], declarations: [TestComponent],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { });
var template = `<div [ngStyle]="{'max-width': '40px'}"></div>`; });
tcb.overrideTemplate(TestComponent, template) it('should add styles specified in an object literal', async(() => {
.createAsync(TestComponent) var template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
.then((fixture) => {
fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
})); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
}));
it('should add and change styles specified in an object expression', it('should add and change styles specified in an object expression', async(() => {
inject( var template = `<div [ngStyle]="expr"></div>`;
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { var expr: Map<string, any>;
var expr: Map<string, any>;
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
expr = fixture.debugElement.componentInstance.expr; expr = fixture.debugElement.componentInstance.expr;
(expr as any)['max-width'] = '30%'; (expr as any)['max-width'] = '30%';
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'}); expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});
}));
async.done(); it('should add and remove styles specified using style.unit notation', async(() => {
}); var template = `<div [ngStyle]="{'max-width.px': expr}"></div>`;
}));
it('should add and remove styles specified using style.unit notation', TestBed.overrideComponent(TestComponent, {set: {template: template}});
inject( let fixture = TestBed.createComponent(TestComponent);
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="{'max-width.px': expr}"></div>`;
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.expr = '40';
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.componentInstance.expr = '40'; fixture.debugElement.componentInstance.expr = null;
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); expectNativeEl(fixture).not.toHaveCssStyle('max-width');
}));
fixture.debugElement.componentInstance.expr = null; it('should update styles using style.unit notation when unit changes', async(() => {
fixture.detectChanges(); var template = `<div [ngStyle]="expr"></div>`;
expectNativeEl(fixture).not.toHaveCssStyle('max-width');
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
}));
it('should update styles using style.unit notation when unit changes', fixture.debugElement.componentInstance.expr = {'max-width.px': '40'};
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.expr = {'max-width.em': '40'};
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expectNativeEl(fixture).toHaveCssStyle({'max-width': '40em'});
}));
fixture.debugElement.componentInstance.expr = {'max-width.px': '40'};
fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.componentInstance.expr = {'max-width.em': '40'};
fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40em'});
async.done();
});
}));
// keyValueDiffer is sensitive to key order #9115 // keyValueDiffer is sensitive to key order #9115
it('should change styles specified in an object expression', it('should change styles specified in an object expression', async(() => {
inject( const template = `<div [ngStyle]="expr"></div>`;
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = `<div [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.debugElement.componentInstance.expr = {
fixture.debugElement.componentInstance.expr = { // height, width order is important here
// height, width order is important here height: '10px',
height: '10px', width: '10px'
width: '10px' };
};
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'height': '10px', 'width': '10px'}); expectNativeEl(fixture).toHaveCssStyle({'height': '10px', 'width': '10px'});
fixture.debugElement.componentInstance.expr = { fixture.debugElement.componentInstance.expr = {
// width, height order is important here // width, height order is important here
width: '5px', width: '5px',
height: '5px', height: '5px',
}; };
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'height': '5px', 'width': '5px'}); expectNativeEl(fixture).toHaveCssStyle({'height': '5px', 'width': '5px'});
}));
async.done(); it('should remove styles when deleting a key in an object expression', async(() => {
}); var template = `<div [ngStyle]="expr"></div>`;
}));
it('should remove styles when deleting a key in an object expression', TestBed.overrideComponent(TestComponent, {set: {template: template}});
inject( let fixture = TestBed.createComponent(TestComponent);
[TestComponentBuilder, AsyncTestCompleter], fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { fixture.detectChanges();
var template = `<div [ngStyle]="expr"></div>`; expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
tcb.overrideTemplate(TestComponent, template) delete fixture.debugElement.componentInstance.expr['max-width'];
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expectNativeEl(fixture).not.toHaveCssStyle('max-width');
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; }));
fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
delete fixture.debugElement.componentInstance.expr['max-width']; it('should co-operate with the style attribute', async(() => {
fixture.detectChanges(); var template = `<div style="font-size: 12px" [ngStyle]="expr"></div>`;
expectNativeEl(fixture).not.toHaveCssStyle('max-width');
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
})); fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'});
it('should co-operate with the style attribute', delete fixture.debugElement.componentInstance.expr['max-width'];
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expectNativeEl(fixture).not.toHaveCssStyle('max-width');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
var template = `<div style="font-size: 12px" [ngStyle]="expr"></div>`; }));
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle(
{'max-width': '40px', 'font-size': '12px'});
delete fixture.debugElement.componentInstance.expr['max-width'];
fixture.detectChanges();
expectNativeEl(fixture).not.toHaveCssStyle('max-width');
expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
async.done();
});
}));
it('should co-operate with the style.[styleName]="expr" special-case in the compiler', it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
inject( async(() => {
[TestComponentBuilder, AsyncTestCompleter], var template = `<div [style.font-size.px]="12" [ngStyle]="expr"></div>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [style.font-size.px]="12" [ngStyle]="expr"></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; fixture.detectChanges();
fixture.detectChanges(); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'});
expectNativeEl(fixture).toHaveCssStyle(
{'max-width': '40px', 'font-size': '12px'});
delete fixture.debugElement.componentInstance.expr['max-width']; delete fixture.debugElement.componentInstance.expr['max-width'];
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).not.toHaveCssStyle('max-width'); expectNativeEl(fixture).not.toHaveCssStyle('max-width');
expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'}); expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
}));
async.done();
});
}));
}); });
} }

245
modules/@angular/common/test/directives/ng_switch_spec.ts
View File

@ -8,172 +8,143 @@
import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common'; import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
export function main() { export function main() {
describe('switch', () => { describe('switch', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent],
});
});
describe('switch value changes', () => { describe('switch value changes', () => {
it('should switch amongst when values', it('should switch amongst when values', async(() => {
inject( var template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<ul [ngSwitch]="switchValue">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<template ngSwitchCase="a"><li>when a</li></template>' +
var template = '<div>' + '<template ngSwitchCase="b"><li>when b</li></template>' +
'<ul [ngSwitch]="switchValue">' + '</ul></div>';
'<template ngSwitchCase="a"><li>when a</li></template>' +
'<template ngSwitchCase="b"><li>when b</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('');
expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.switchValue = 'a'; fixture.debugElement.componentInstance.switchValue = 'a';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when a'); expect(fixture.debugElement.nativeElement).toHaveText('when a');
fixture.debugElement.componentInstance.switchValue = 'b'; fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when b'); expect(fixture.debugElement.nativeElement).toHaveText('when b');
}));
async.done();
});
}));
// TODO(robwormald): deprecate and remove // TODO(robwormald): deprecate and remove
it('should switch amongst when values using switchWhen', it('should switch amongst when values using switchWhen', async(() => {
inject( var template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<ul [ngSwitch]="switchValue">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<template ngSwitchWhen="a"><li>when a</li></template>' +
var template = '<div>' + '<template ngSwitchWhen="b"><li>when b</li></template>' +
'<ul [ngSwitch]="switchValue">' + '</ul></div>';
'<template ngSwitchWhen="a"><li>when a</li></template>' +
'<template ngSwitchWhen="b"><li>when b</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('');
expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.switchValue = 'a'; fixture.debugElement.componentInstance.switchValue = 'a';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when a'); expect(fixture.debugElement.nativeElement).toHaveText('when a');
fixture.debugElement.componentInstance.switchValue = 'b'; fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when b'); expect(fixture.debugElement.nativeElement).toHaveText('when b');
}));
async.done(); it('should switch amongst when values with fallback to default', async(() => {
}); var template = '<div>' +
})); '<ul [ngSwitch]="switchValue">' +
'<li template="ngSwitchCase \'a\'">when a</li>' +
'<li template="ngSwitchDefault">when default</li>' +
'</ul></div>';
it('should switch amongst when values with fallback to default', TestBed.overrideComponent(TestComponent, {set: {template: template}});
inject( let fixture = TestBed.createComponent(TestComponent);
[TestComponentBuilder, AsyncTestCompleter], fixture.detectChanges();
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { expect(fixture.debugElement.nativeElement).toHaveText('when default');
var template = '<div>' +
'<ul [ngSwitch]="switchValue">' +
'<li template="ngSwitchCase \'a\'">when a</li>' +
'<li template="ngSwitchDefault">when default</li>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.switchValue = 'a';
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('when a');
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when default');
fixture.debugElement.componentInstance.switchValue = 'a'; fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when a'); expect(fixture.debugElement.nativeElement).toHaveText('when default');
}));
fixture.debugElement.componentInstance.switchValue = 'b'; it('should support multiple whens with the same value', async(() => {
fixture.detectChanges(); var template = '<div>' +
expect(fixture.debugElement.nativeElement).toHaveText('when default'); '<ul [ngSwitch]="switchValue">' +
'<template ngSwitchCase="a"><li>when a1;</li></template>' +
'<template ngSwitchCase="b"><li>when b1;</li></template>' +
'<template ngSwitchCase="a"><li>when a2;</li></template>' +
'<template ngSwitchCase="b"><li>when b2;</li></template>' +
'<template ngSwitchDefault><li>when default1;</li></template>' +
'<template ngSwitchDefault><li>when default2;</li></template>' +
'</ul></div>';
async.done(); TestBed.overrideComponent(TestComponent, {set: {template: template}});
}); let fixture = TestBed.createComponent(TestComponent);
})); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when default1;when default2;');
it('should support multiple whens with the same value', fixture.debugElement.componentInstance.switchValue = 'a';
inject( fixture.detectChanges();
[TestComponentBuilder, AsyncTestCompleter], expect(fixture.debugElement.nativeElement).toHaveText('when a1;when a2;');
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' +
'<ul [ngSwitch]="switchValue">' +
'<template ngSwitchCase="a"><li>when a1;</li></template>' +
'<template ngSwitchCase="b"><li>when b1;</li></template>' +
'<template ngSwitchCase="a"><li>when a2;</li></template>' +
'<template ngSwitchCase="b"><li>when b2;</li></template>' +
'<template ngSwitchDefault><li>when default1;</li></template>' +
'<template ngSwitchDefault><li>when default2;</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.switchValue = 'b';
.createAsync(TestComponent) fixture.detectChanges();
.then((fixture) => { expect(fixture.debugElement.nativeElement).toHaveText('when b1;when b2;');
fixture.detectChanges(); }));
expect(fixture.debugElement.nativeElement)
.toHaveText('when default1;when default2;');
fixture.debugElement.componentInstance.switchValue = 'a';
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when a1;when a2;');
fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when b1;when b2;');
async.done();
});
}));
}); });
describe('when values changes', () => { describe('when values changes', () => {
it('should switch amongst when values', it('should switch amongst when values', async(() => {
inject( var template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter], '<ul [ngSwitch]="switchValue">' +
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { '<template [ngSwitchCase]="when1"><li>when 1;</li></template>' +
var template = '<div>' + '<template [ngSwitchCase]="when2"><li>when 2;</li></template>' +
'<ul [ngSwitch]="switchValue">' + '<template ngSwitchDefault><li>when default;</li></template>' +
'<template [ngSwitchCase]="when1"><li>when 1;</li></template>' + '</ul></div>';
'<template [ngSwitchCase]="when2"><li>when 2;</li></template>' +
'<template ngSwitchDefault><li>when default;</li></template>' +
'</ul></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => { fixture.debugElement.componentInstance.when1 = 'a';
fixture.debugElement.componentInstance.when1 = 'a'; fixture.debugElement.componentInstance.when2 = 'b';
fixture.debugElement.componentInstance.when2 = 'b'; fixture.debugElement.componentInstance.switchValue = 'a';
fixture.debugElement.componentInstance.switchValue = 'a'; fixture.detectChanges();
fixture.detectChanges(); expect(fixture.debugElement.nativeElement).toHaveText('when 1;');
expect(fixture.debugElement.nativeElement).toHaveText('when 1;');
fixture.debugElement.componentInstance.switchValue = 'b'; fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when 2;'); expect(fixture.debugElement.nativeElement).toHaveText('when 2;');
fixture.debugElement.componentInstance.switchValue = 'c'; fixture.debugElement.componentInstance.switchValue = 'c';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when default;'); expect(fixture.debugElement.nativeElement).toHaveText('when default;');
fixture.debugElement.componentInstance.when1 = 'c'; fixture.debugElement.componentInstance.when1 = 'c';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when 1;'); expect(fixture.debugElement.nativeElement).toHaveText('when 1;');
fixture.debugElement.componentInstance.when1 = 'd'; fixture.debugElement.componentInstance.when1 = 'd';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when default;'); expect(fixture.debugElement.nativeElement).toHaveText('when default;');
}));
async.done();
});
}));
}); });
}); });
} }

265
modules/@angular/common/test/directives/ng_template_outlet_spec.ts
View File

@ -8,200 +8,149 @@
import {NgTemplateOutlet} from '@angular/common'; import {NgTemplateOutlet} from '@angular/common';
import {Component, ContentChildren, Directive, QueryList, TemplateRef} from '@angular/core'; import {Component, ContentChildren, Directive, QueryList, TemplateRef} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
export function main() { export function main() {
describe('insert', () => { describe('insert', () => {
it('should do nothing if templateRef is null',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<template [ngTemplateOutlet]="null"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); beforeEach(() => {
expect(fixture.nativeElement).toHaveText(''); TestBed.configureTestingModule({
declarations: [TestComponent],
});
});
async.done(); it('should do nothing if templateRef is null', async(() => {
}); var template = `<template [ngTemplateOutlet]="null"></template>`;
})); TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should insert content specified by TemplateRef', fixture.detectChanges();
inject( expect(fixture.nativeElement).toHaveText('');
[TestComponentBuilder, AsyncTestCompleter], }));
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); it('should insert content specified by TemplateRef', async(() => {
expect(fixture.nativeElement).toHaveText(''); var template =
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
var refs = fixture.debugElement.children[0].references['refs']; fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('');
fixture.componentInstance.currentTplRef = refs.tplRefs.first; var refs = fixture.debugElement.children[0].references['refs'];
fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('foo');
async.done(); fixture.componentInstance.currentTplRef = refs.tplRefs.first;
}); fixture.detectChanges();
})); expect(fixture.nativeElement).toHaveText('foo');
}));
it('should clear content if TemplateRef becomes null', it('should clear content if TemplateRef becomes null', async(() => {
inject( var template =
[TestComponentBuilder, AsyncTestCompleter], `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: template}});
var template = let fixture = TestBed.createComponent(TestComponent);
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; var refs = fixture.debugElement.children[0].references['refs'];
fixture.componentInstance.currentTplRef = refs.tplRefs.first; fixture.componentInstance.currentTplRef = refs.tplRefs.first;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('foo'); expect(fixture.nativeElement).toHaveText('foo');
fixture.componentInstance.currentTplRef = null; fixture.componentInstance.currentTplRef = null;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
}));
async.done(); it('should swap content if TemplateRef changes', async(() => {
}); var template =
})); `<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should swap content if TemplateRef changes', fixture.detectChanges();
inject( var refs = fixture.debugElement.children[0].references['refs'];
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
`<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.componentInstance.currentTplRef = refs.tplRefs.first;
var refs = fixture.debugElement.children[0].references['refs']; fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('foo');
fixture.componentInstance.currentTplRef = refs.tplRefs.first; fixture.componentInstance.currentTplRef = refs.tplRefs.last;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('foo'); expect(fixture.nativeElement).toHaveText('bar');
}));
fixture.componentInstance.currentTplRef = refs.tplRefs.last; it('should display template if context is null', async(() => {
fixture.detectChanges(); var template =
expect(fixture.nativeElement).toHaveText('bar'); `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="null"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
async.done(); fixture.detectChanges();
}); expect(fixture.nativeElement).toHaveText('');
}));
it('should display template if context is null', var refs = fixture.debugElement.children[0].references['refs'];
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="null"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.componentInstance.currentTplRef = refs.tplRefs.first;
expect(fixture.nativeElement).toHaveText(''); fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('foo');
}));
var refs = fixture.debugElement.children[0].references['refs']; it('should reflect initial context and changes', async(() => {
var template =
`<tpl-refs #refs="tplRefs"><template let-foo="foo"><span>{{foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
fixture.componentInstance.currentTplRef = refs.tplRefs.first; var refs = fixture.debugElement.children[0].references['refs'];
fixture.detectChanges(); fixture.componentInstance.currentTplRef = refs.tplRefs.first;
expect(fixture.nativeElement).toHaveText('foo');
async.done(); fixture.detectChanges();
}); expect(fixture.debugElement.nativeElement).toHaveText('bar');
}));
it('should reflect initial context and changes', fixture.componentInstance.context.foo = 'alter-bar';
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
`<tpl-refs #refs="tplRefs"><template let-foo="foo"><span>{{foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; fixture.detectChanges();
fixture.componentInstance.currentTplRef = refs.tplRefs.first; expect(fixture.debugElement.nativeElement).toHaveText('alter-bar');
}));
fixture.detectChanges(); it('should reflect user defined $implicit property in the context', async(() => {
expect(fixture.debugElement.nativeElement).toHaveText('bar'); var template =
`<tpl-refs #refs="tplRefs"><template let-ctx><span>{{ctx.foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
fixture.componentInstance.context.foo = 'alter-bar'; var refs = fixture.debugElement.children[0].references['refs'];
fixture.componentInstance.currentTplRef = refs.tplRefs.first;
fixture.detectChanges(); fixture.componentInstance.context = {$implicit: fixture.componentInstance.context};
expect(fixture.debugElement.nativeElement).toHaveText('alter-bar'); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('bar');
}));
async.done(); it('should reflect context re-binding', async(() => {
}); var template =
})); `<tpl-refs #refs="tplRefs"><template let-shawshank="shawshank"><span>{{shawshank}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
it('should reflect user defined $implicit property in the context', var refs = fixture.debugElement.children[0].references['refs'];
inject( fixture.componentInstance.currentTplRef = refs.tplRefs.first;
[TestComponentBuilder, AsyncTestCompleter], fixture.componentInstance.context = {shawshank: 'brooks'};
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
`<tpl-refs #refs="tplRefs"><template let-ctx><span>{{ctx.foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; fixture.detectChanges();
fixture.componentInstance.currentTplRef = refs.tplRefs.first; expect(fixture.debugElement.nativeElement).toHaveText('brooks');
fixture.componentInstance.context = { fixture.componentInstance.context = {shawshank: 'was here'};
$implicit: fixture.componentInstance.context
};
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('bar');
async.done(); fixture.detectChanges();
}); expect(fixture.debugElement.nativeElement).toHaveText('was here');
})); }));
it('should reflect context re-binding',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template =
`<tpl-refs #refs="tplRefs"><template let-shawshank="shawshank"><span>{{shawshank}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></template>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs'];
fixture.componentInstance.currentTplRef = refs.tplRefs.first;
fixture.componentInstance.context = {shawshank: 'brooks'};
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('brooks');
fixture.componentInstance.context = {shawshank: 'was here'};
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('was here');
async.done();
});
}));
}); });
} }

79
modules/@angular/common/test/directives/non_bindable_spec.ts
View File

@ -8,59 +8,48 @@
import {Component, Directive} from '@angular/core'; import {Component, Directive} from '@angular/core';
import {ElementRef} from '@angular/core/src/linker/element_ref'; import {ElementRef} from '@angular/core/src/linker/element_ref';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
export function main() { export function main() {
describe('non-bindable', () => { describe('non-bindable', () => {
it('should not interpolate children',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>{{text}}<span ngNonBindable>{{text}}</span></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('foo{{text}}');
async.done();
});
}));
it('should ignore directives on child nodes', beforeEach(() => {
inject( TestBed.configureTestingModule({
[TestComponentBuilder, AsyncTestCompleter], declarations: [TestComponent],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { });
var template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>'; });
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges();
// We must use getDOM().querySelector instead of fixture.query here it('should not interpolate children', async(() => {
// since the elements inside are not compiled. var template = '<div>{{text}}<span ngNonBindable>{{text}}</span></div>';
var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child'); TestBed.overrideComponent(TestComponent, {set: {template: template}});
expect(getDOM().hasClass(span, 'compiled')).toBeFalsy(); let fixture = TestBed.createComponent(TestComponent);
async.done(); fixture.detectChanges();
}); expect(fixture.debugElement.nativeElement).toHaveText('foo{{text}}');
})); }));
it('should trigger directives on the same node', it('should ignore directives on child nodes', async(() => {
inject( var template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>';
[TestComponentBuilder, AsyncTestCompleter], TestBed.overrideComponent(TestComponent, {set: {template: template}});
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { let fixture = TestBed.createComponent(TestComponent);
var template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>'; fixture.detectChanges();
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent) // We must use getDOM().querySelector instead of fixture.query here
.then((fixture) => { // since the elements inside are not compiled.
fixture.detectChanges(); var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child');
var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child'); expect(getDOM().hasClass(span, 'compiled')).toBeFalsy();
expect(getDOM().hasClass(span, 'compiled')).toBeTruthy(); }));
async.done();
}); it('should trigger directives on the same node', async(() => {
})); var template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child');
expect(getDOM().hasClass(span, 'compiled')).toBeTruthy();
}));
}); });
} }

36
modules/@angular/common/test/pipes/json_pipe_spec.ts
View File

@ -8,8 +8,8 @@
import {JsonPipe} from '@angular/common'; import {JsonPipe} from '@angular/common';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, afterEach, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {afterEach, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
import {Json, StringWrapper} from '../../src/facade/lang'; import {Json, StringWrapper} from '../../src/facade/lang';
@ -55,23 +55,25 @@ export function main() {
}); });
describe('integration', () => { describe('integration', () => {
it('should work with mutable objects',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.createAsync(TestComp).then((fixture) => {
let mutable: number[] = [1];
fixture.debugElement.componentInstance.data = mutable;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1\n]');
mutable.push(2); beforeEach(() => {
fixture.detectChanges(); TestBed.configureTestingModule({
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1,\n 2\n]'); declarations: [TestComp],
});
});
async.done(); it('should work with mutable objects', async(() => {
}); let fixture = TestBed.createComponent(TestComp);
})); let mutable: number[] = [1];
fixture.debugElement.componentInstance.data = mutable;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1\n]');
mutable.push(2);
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1,\n 2\n]');
}));
}); });
}); });
} }

34
modules/@angular/common/test/pipes/slice_pipe_spec.ts
View File

@ -8,8 +8,8 @@
import {SlicePipe} from '@angular/common'; import {SlicePipe} from '@angular/common';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestBed, async} from '@angular/core/testing';
import {AsyncTestCompleter, afterEach, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal'; import {afterEach, beforeEach, ddescribe, describe, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
import {browserDetection} from '@angular/platform-browser/testing/browser_util'; import {browserDetection} from '@angular/platform-browser/testing/browser_util';
import {expect} from '@angular/platform-browser/testing/matchers'; import {expect} from '@angular/platform-browser/testing/matchers';
@ -88,23 +88,23 @@ export function main() {
}); });
describe('integration', () => { describe('integration', () => {
it('should work with mutable arrays', beforeEach(() => {
inject( TestBed.configureTestingModule({
[TestComponentBuilder, AsyncTestCompleter], declarations: [TestComp],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { });
tcb.createAsync(TestComp).then((fixture) => { });
let mutable: number[] = [1, 2];
fixture.debugElement.componentInstance.data = mutable;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2');
mutable.push(3); it('should work with mutable arrays', async(() => {
fixture.detectChanges(); let fixture = TestBed.createComponent(TestComp);
expect(fixture.debugElement.nativeElement).toHaveText('2,3'); let mutable: number[] = [1, 2];
fixture.debugElement.componentInstance.data = mutable;
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2');
async.done(); mutable.push(3);
}); fixture.detectChanges();
})); expect(fixture.debugElement.nativeElement).toHaveText('2,3');
}));
}); });
}); });
} }