iSharkFly-Docs
/
angular-docs-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

444
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,110 +20,78 @@ 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', async(() => {
let template = '<div *ngFor="let item of items" [ngClass]="item"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
it('should clean up when the directive is destroyed',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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.debugElement.componentInstance.items = [['0']];
fixture.detectChanges(); fixture.detectChanges();
fixture.debugElement.componentInstance.items = [['1']]; fixture.debugElement.componentInstance.items = [['1']];
detectChangesAndCheck(fixture, '1'); detectChangesAndCheck(fixture, '1');
async.done();
});
})); }));
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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); 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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo-bar fooBar'); 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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); 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', it('should add and remove classes based on changes to the expression object', 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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'foo bar'); detectChangesAndCheck(fixture, 'foo bar');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'baz', true);
fixture.debugElement.componentInstance.objExpr, 'baz', true);
detectChangesAndCheck(fixture, 'foo bar baz'); detectChangesAndCheck(fixture, 'foo bar baz');
StringMapWrapper.delete(fixture.debugElement.componentInstance.objExpr, 'bar'); StringMapWrapper.delete(fixture.debugElement.componentInstance.objExpr, 'bar');
detectChangesAndCheck(fixture, 'foo baz'); 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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.objExpr = {foo: true, bar: true}; fixture.debugElement.componentInstance.objExpr = {foo: true, bar: true};
@ -130,20 +99,13 @@ export function main() {
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', it('should remove active classes when expression evaluates to null', 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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.objExpr = null; fixture.debugElement.componentInstance.objExpr = null;
@ -151,83 +113,46 @@ export function main() {
fixture.debugElement.componentInstance.objExpr = {'foo': false, 'bar': true}; fixture.debugElement.componentInstance.objExpr = {'foo': false, 'bar': true};
detectChangesAndCheck(fixture, 'bar'); 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)
.then((fixture) => {
fixture.debugElement.componentInstance.objExpr = {
'bar baz': true,
'bar1 baz1': true
};
detectChangesAndCheck(fixture, 'bar baz bar1 baz1'); detectChangesAndCheck(fixture, 'bar baz bar1 baz1');
fixture.debugElement.componentInstance.objExpr = { fixture.debugElement.componentInstance.objExpr = {'bar baz': false, 'bar1 baz1': true};
'bar baz': false,
'bar1 baz1': true
};
detectChangesAndCheck(fixture, 'bar1 baz1'); detectChangesAndCheck(fixture, 'bar1 baz1');
async.done();
});
})); }));
it('should split by one or more spaces between classes', it('should split by one or more spaces between classes', 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)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.objExpr = {'foo bar baz': true}; fixture.debugElement.componentInstance.objExpr = {'foo bar baz': true};
detectChangesAndCheck(fixture, 'foo bar baz'); 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)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar'); 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>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
var arrExpr: string[] = fixture.debugElement.componentInstance.arrExpr; var arrExpr: string[] = fixture.debugElement.componentInstance.arrExpr;
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
@ -239,115 +164,65 @@ export function main() {
ListWrapper.remove(fixture.debugElement.componentInstance.arrExpr, 'baz'); ListWrapper.remove(fixture.debugElement.componentInstance.arrExpr, 'baz');
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
async.done();
});
})); }));
it('should add and remove classes when a reference changes', it('should add and remove classes when a reference changes', 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>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.arrExpr = ['bar']; fixture.debugElement.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(fixture, 'bar'); detectChangesAndCheck(fixture, 'bar');
async.done();
});
})); }));
it('should take initial classes into account 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 class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.arrExpr = ['bar']; fixture.debugElement.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(fixture, 'foo bar'); detectChangesAndCheck(fixture, 'foo bar');
async.done();
});
})); }));
it('should ignore empty or blank class names', it('should ignore empty or blank class names', 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 class="foo" [ngClass]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.arrExpr = ['', ' ']; fixture.debugElement.componentInstance.arrExpr = ['', ' '];
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
async.done();
});
})); }));
it('should trim blanks from class names', it('should trim blanks from class names', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div class="foo" [ngClass]="arrExpr"></div>'; var template = '<div class="foo" [ngClass]="arrExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.arrExpr = [' bar ']; fixture.debugElement.componentInstance.arrExpr = [' bar '];
detectChangesAndCheck(fixture, 'foo 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="arrExpr"></div>'; var template = '<div [ngClass]="arrExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template) fixture.debugElement.componentInstance.arrExpr = ['foo bar baz', 'foo1 bar1 baz1'];
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.arrExpr =
['foo bar baz', 'foo1 bar1 baz1'];
detectChangesAndCheck(fixture, 'foo bar baz foo1 bar1 baz1'); detectChangesAndCheck(fixture, 'foo bar baz foo1 bar1 baz1');
fixture.debugElement.componentInstance.arrExpr = ['foo bar baz foobar']; fixture.debugElement.componentInstance.arrExpr = ['foo bar baz foobar'];
detectChangesAndCheck(fixture, '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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="setExpr"></div>'; var template = '<div [ngClass]="setExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
var setExpr = new Set<string>(); var setExpr = new Set<string>();
setExpr.add('bar'); setExpr.add('bar');
fixture.debugElement.componentInstance.setExpr = setExpr; fixture.debugElement.componentInstance.setExpr = setExpr;
@ -357,36 +232,22 @@ export function main() {
setExpr.add('baz'); setExpr.add('baz');
fixture.debugElement.componentInstance.setExpr = setExpr; fixture.debugElement.componentInstance.setExpr = setExpr;
detectChangesAndCheck(fixture, 'baz'); 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngClass]="'foo bar foo-bar fooBar'"></div>`; var template = `<div [ngClass]="'foo bar foo-bar fooBar'"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar'); 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="strExpr"></div>'; var template = '<div [ngClass]="strExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.strExpr = 'foo bar'; fixture.debugElement.componentInstance.strExpr = 'foo bar';
@ -396,178 +257,115 @@ export function main() {
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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngClass]="strExpr"></div>`; var template = `<div [ngClass]="strExpr"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.strExpr = null; fixture.debugElement.componentInstance.strExpr = null;
detectChangesAndCheck(fixture, ''); 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],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div class="foo" [ngClass]="strExpr"></div>`; var template = `<div class="foo" [ngClass]="strExpr"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
fixture.debugElement.componentInstance.strExpr = null; fixture.debugElement.componentInstance.strExpr = null;
detectChangesAndCheck(fixture, 'foo'); detectChangesAndCheck(fixture, 'foo');
async.done();
});
})); }));
it('should ignore empty and blank strings', it('should ignore empty and blank strings', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div class="foo" [ngClass]="strExpr"></div>`; var template = `<div class="foo" [ngClass]="strExpr"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.strExpr = ''; fixture.debugElement.componentInstance.strExpr = '';
detectChangesAndCheck(fixture, 'foo'); 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div [ngClass]="objExpr" class="init foo"></div>'; var template = '<div [ngClass]="objExpr" class="init foo"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent) StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
.then((fixture) => {
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'init foo bar'); detectChangesAndCheck(fixture, 'init foo bar');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
fixture.debugElement.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(fixture, 'init bar'); detectChangesAndCheck(fixture, 'init bar');
fixture.debugElement.componentInstance.objExpr = null; fixture.debugElement.componentInstance.objExpr = null;
detectChangesAndCheck(fixture, 'init foo'); detectChangesAndCheck(fixture, 'init foo');
async.done();
});
})); }));
it('should co-operate with the interpolated class attribute', it('should co-operate with the interpolated class attribute', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`; var template = `<div [ngClass]="objExpr" class="{{'init foo'}}"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent) StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
.then((fixture) => {
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo bar`); detectChangesAndCheck(fixture, `init foo bar`);
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
fixture.debugElement.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(fixture, `init bar`); detectChangesAndCheck(fixture, `init bar`);
fixture.debugElement.componentInstance.objExpr = null; fixture.debugElement.componentInstance.objExpr = null;
detectChangesAndCheck(fixture, `init foo`); detectChangesAndCheck(fixture, `init foo`);
async.done();
});
})); }));
it('should co-operate with the class attribute and binding to it', it('should co-operate with the class attribute and binding to it', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`; var template = `<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`;
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent) StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
.then((fixture) => {
StringMapWrapper.set(
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, `init foo bar`); detectChangesAndCheck(fixture, `init foo bar`);
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
fixture.debugElement.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(fixture, `init bar`); detectChangesAndCheck(fixture, `init bar`);
fixture.debugElement.componentInstance.objExpr = null; fixture.debugElement.componentInstance.objExpr = null;
detectChangesAndCheck(fixture, `init foo`); detectChangesAndCheck(fixture, `init foo`);
async.done();
});
})); }));
it('should co-operate with the class attribute and class.name binding', it('should co-operate with the class attribute and class.name binding', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
'<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>'; '<div class="init foo" [ngClass]="objExpr" [class.baz]="condition"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'init foo baz'); detectChangesAndCheck(fixture, 'init foo baz');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'init foo baz bar'); detectChangesAndCheck(fixture, 'init foo baz bar');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false);
fixture.debugElement.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(fixture, 'init baz bar'); detectChangesAndCheck(fixture, 'init baz bar');
fixture.debugElement.componentInstance.condition = false; fixture.debugElement.componentInstance.condition = false;
detectChangesAndCheck(fixture, 'init bar'); 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],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>'; var template = '<div class="init" [ngClass]="objExpr" [class]="strExpr"></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
tcb.overrideTemplate(TestComponent, template) let fixture = TestBed.createComponent(TestComponent);
.createAsync(TestComponent)
.then((fixture) => {
detectChangesAndCheck(fixture, 'init foo'); detectChangesAndCheck(fixture, 'init foo');
StringMapWrapper.set( StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true);
fixture.debugElement.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(fixture, 'init foo bar'); detectChangesAndCheck(fixture, 'init foo bar');
fixture.debugElement.componentInstance.strExpr = 'baz'; fixture.debugElement.componentInstance.strExpr = 'baz';
@ -575,11 +373,7 @@ export function main() {
fixture.debugElement.componentInstance.objExpr = null; fixture.debugElement.componentInstance.objExpr = null;
detectChangesAndCheck(fixture, 'init baz'); detectChangesAndCheck(fixture, 'init baz');
async.done();
});
})); }));
}); });
}); });
} }

379
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,60 +22,44 @@ 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) => { it('should reflect initial elements', async(() => {
TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;'); expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
async.done();
});
})); }));
it('should reflect added elements', it('should reflect added elements', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
(<number[]>fixture.debugElement.componentInstance.items).push(3); (<number[]>fixture.debugElement.componentInstance.items).push(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 reflect removed elements', it('should reflect removed elements', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 1); ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 1);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;'); expect(fixture.debugElement.nativeElement).toHaveText('1;');
async.done();
});
})); }));
it('should reflect moved elements', it('should reflect moved elements', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0); ListWrapper.removeAt(fixture.debugElement.componentInstance.items, 0);
@ -83,17 +67,11 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2;1;'); expect(fixture.debugElement.nativeElement).toHaveText('2;1;');
async.done();
});
})); }));
it('should reflect a mix of all changes (additions/removals/moves)', it('should reflect a mix of all changes (additions/removals/moves)', async(() => {
inject( TestBed.overrideComponent(TestComponent, {set: {template: TEMPLATE}});
[TestComponentBuilder, AsyncTestCompleter], let fixture = TestBed.createComponent(TestComponent);
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5]; fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5];
fixture.detectChanges(); fixture.detectChanges();
@ -101,24 +79,15 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('6;2;7;0;4;8;'); expect(fixture.debugElement.nativeElement).toHaveText('6;2;7;0;4;8;');
async.done();
});
})); }));
it('should iterate over an array of objects', it('should iterate over an array of objects', async(() => {
inject( const template = '<ul><li template="ngFor let item of items">{{item["name"]}};</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 items">{{item["name"]}};</li></ul>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
// 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;');
@ -134,31 +103,19 @@ export function main() {
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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>'; const template = '<ul><li template="ngFor let item of null">{{item}};</li></ul>';
tcb.overrideTemplate(TestComponent, template) 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('');
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) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;'); expect(fixture.debugElement.nativeElement).toHaveText('1;2;');
@ -169,58 +126,37 @@ export function main() {
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) => {
tcb.overrideTemplate(TestComponent, TEMPLATE).createAsync(TestComponent).then((fixture) => {
fixture.debugElement.componentInstance.items = 'whaaa'; fixture.debugElement.componentInstance.items = 'whaaa';
expect(() => fixture.detectChanges()) expect(() => fixture.detectChanges())
.toThrowError( .toThrowError(
/Cannot find a differ supporting object 'whaaa' of type 'string'. NgFor only supports binding to Iterables such as Arrays/); /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) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('1;2;'); 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) => {
tcb.overrideTemplate(TestComponent, TEMPLATE)
.createAsync(TestComponent)
.then((fixture) => {
var a = new Foo(); var a = new Foo();
fixture.debugElement.componentInstance.items = [a, a]; fixture.debugElement.componentInstance.items = [a, a];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('foo;foo;'); expect(fixture.debugElement.nativeElement).toHaveText('foo;foo;');
async.done();
});
})); }));
it('should repeat over nested arrays', it('should repeat over nested arrays', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = '<div>' + const template = '<div>' +
'<div template="ngFor let item of items">' + '<div template="ngFor let item of items">' +
'<div template="ngFor let subitem of item">' + '<div template="ngFor let subitem of item">' +
@ -228,10 +164,9 @@ export function main() {
'</div>|' + '</div>|' +
'</div>' + '</div>' +
'</div>'; '</div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']]; fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']];
fixture.detectChanges(); fixture.detectChanges();
fixture.detectChanges(); fixture.detectChanges();
@ -241,23 +176,16 @@ export function main() {
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', it('should repeat over nested arrays with no intermediate element', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = '<div><template ngFor let-item [ngForOf]="items">' + const template = '<div><template ngFor let-item [ngForOf]="items">' +
'<div template="ngFor let subitem of item">' + '<div template="ngFor let subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div></template></div>'; '</div></template></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']]; fixture.debugElement.componentInstance.items = [['a', 'b'], ['c']];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;c-1;'); expect(fixture.debugElement.nativeElement).toHaveText('a-2;b-2;c-1;');
@ -265,21 +193,16 @@ export function main() {
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 ngIf that are the last node in the ngFor temlate', it('should repeat over nested ngIf that are the last node in the ngFor temlate', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
`<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` + `<div><template ngFor let-item [ngForOf]="items" let-i="index"><div>{{i}}|</div>` +
`<div *ngIf="i % 2 == 0">even|</div></template></div>`; `<div *ngIf="i % 2 == 0">even|</div></template></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
const el = fixture.debugElement.nativeElement; const el = fixture.debugElement.nativeElement;
const items = [1]; const items = [1];
fixture.debugElement.componentInstance.items = items; fixture.debugElement.componentInstance.items = items;
@ -293,21 +216,14 @@ export function main() {
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', it('should display indices correctly', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
'<div><copy-me template="ngFor: let item of items; let i=index">{{i.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let i=index">{{i.toString()}}</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; fixture.debugElement.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('0123456789'); expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
@ -315,20 +231,14 @@ export function main() {
fixture.debugElement.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0]; fixture.debugElement.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('0123456789'); expect(fixture.debugElement.nativeElement).toHaveText('0123456789');
async.done();
});
})); }));
it('should display first item correctly', it('should display first item correctly', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
'<div><copy-me template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isFirst=first">{{isFirst.toString()}}</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2]; fixture.debugElement.componentInstance.items = [0, 1, 2];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse'); expect(fixture.debugElement.nativeElement).toHaveText('truefalsefalse');
@ -336,20 +246,14 @@ export function main() {
fixture.debugElement.componentInstance.items = [2, 1]; fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalse'); expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
async.done();
});
})); }));
it('should display last item correctly', it('should display last item correctly', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
'<div><copy-me template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isLast=last">{{isLast.toString()}}</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2]; fixture.debugElement.componentInstance.items = [0, 1, 2];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsefalsetrue'); expect(fixture.debugElement.nativeElement).toHaveText('falsefalsetrue');
@ -357,20 +261,14 @@ export function main() {
fixture.debugElement.componentInstance.items = [2, 1]; fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetrue'); expect(fixture.debugElement.nativeElement).toHaveText('falsetrue');
async.done();
});
})); }));
it('should display even items correctly', it('should display even items correctly', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
'<div><copy-me template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isEven=even">{{isEven.toString()}}</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2]; fixture.debugElement.componentInstance.items = [0, 1, 2];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalsetrue'); expect(fixture.debugElement.nativeElement).toHaveText('truefalsetrue');
@ -378,20 +276,14 @@ export function main() {
fixture.debugElement.componentInstance.items = [2, 1]; fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('truefalse'); expect(fixture.debugElement.nativeElement).toHaveText('truefalse');
async.done();
});
})); }));
it('should display odd items correctly', it('should display odd items correctly', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
'<div><copy-me template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</copy-me></div>'; '<div><copy-me template="ngFor: let item of items; let isOdd=odd">{{isOdd.toString()}}</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((fixture) => {
fixture.debugElement.componentInstance.items = [0, 1, 2, 3]; fixture.debugElement.componentInstance.items = [0, 1, 2, 3];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetruefalsetrue'); expect(fixture.debugElement.nativeElement).toHaveText('falsetruefalsetrue');
@ -399,97 +291,73 @@ export function main() {
fixture.debugElement.componentInstance.items = [2, 1]; fixture.debugElement.componentInstance.items = [2, 1];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('falsetrue'); expect(fixture.debugElement.nativeElement).toHaveText('falsetrue');
async.done();
});
})); }));
it('should allow to use a custom template', it('should allow to use a custom template', async(() => {
inject( const tcTemplate =
[TestComponentBuilder, AsyncTestCompleter], '<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>';
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: tcTemplate}});
tcb.overrideTemplate( const cutTemplate =
TestComponent, '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
'<ul><template ngFor [ngForOf]="items" [ngForTemplate]="contentTpl"></template></ul>') TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
.overrideTemplate( let fixture = TestBed.createComponent(ComponentUsingTestComponent);
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]; const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c']; testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges(); fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
async.done();
});
})); }));
it('should use a default template if a custom one is null', it('should use a default template if a custom one is null', async(() => {
inject( const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
[TestComponentBuilder, AsyncTestCompleter], [ngForTemplate]="contentTpl" let-i="index">{{i}}: {{item}};</template></ul>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
tcb.overrideTemplate(TestComponent, `<ul><template ngFor let-item [ngForOf]="items" const cutTemplate =
[ngForTemplate]="contentTpl" let-i="index">{{i}}: {{item}};</template></ul>`) '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
.overrideTemplate(ComponentUsingTestComponent, '<test-cmp></test-cmp>') TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
.createAsync(ComponentUsingTestComponent) let fixture = TestBed.createComponent(ComponentUsingTestComponent);
.then((fixture) => {
const testComponent = fixture.debugElement.children[0]; const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c']; testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges(); fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
async.done();
});
})); }));
it('should use a custom template when both default and a custom one are present', it('should use a custom template when both default and a custom one are present', async(() => {
inject( const testTemplate = `<ul><template ngFor let-item [ngForOf]="items"
[TestComponentBuilder, AsyncTestCompleter], [ngForTemplate]="contentTpl" let-i="index">{{i}}=> {{item}};</template></ul>`;
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { TestBed.overrideComponent(TestComponent, {set: {template: testTemplate}});
tcb.overrideTemplate(TestComponent, `<ul><template ngFor let-item [ngForOf]="items" const cutTemplate =
[ngForTemplate]="contentTpl" let-i="index">{{i}}=> {{item}};</template></ul>`) '<test-cmp><li template="let item; let i=index">{{i}}: {{item}};</li></test-cmp>';
.overrideTemplate( TestBed.overrideComponent(ComponentUsingTestComponent, {set: {template: cutTemplate}});
ComponentUsingTestComponent, let fixture = TestBed.createComponent(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]; const testComponent = fixture.debugElement.children[0];
testComponent.componentInstance.items = ['a', 'b', 'c']; testComponent.componentInstance.items = ['a', 'b', 'c'];
fixture.detectChanges(); fixture.detectChanges();
expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;'); expect(testComponent.nativeElement).toHaveText('0: a;1: b;2: c;');
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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`; `<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByContext.bind(this)"></template>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
thisArg = null; thisArg = null;
fixture.detectChanges(); fixture.detectChanges();
expect(thisArg).toBe(fixture.debugElement.componentInstance); expect(thisArg).toBe(fixture.debugElement.componentInstance);
async.done();
});
})); }));
it('should not replace tracked items', it('should not replace tracked items', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
`<template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById" let-i="index"> `<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 = () => { var buildItemList = () => {
fixture.debugElement.componentInstance.items = [{'id': 'a'}]; fixture.debugElement.componentInstance.items = [{'id': 'a'}];
fixture.detectChanges(); fixture.detectChanges();
@ -499,37 +367,27 @@ export function main() {
var firstP = buildItemList(); var firstP = buildItemList();
var finalP = buildItemList(); var finalP = buildItemList();
expect(finalP.nativeElement).toBe(firstP.nativeElement); expect(finalP.nativeElement).toBe(firstP.nativeElement);
async.done();
});
})); }));
it('should update implicit local variable on view', it('should update implicit local variable on view', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`; `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'blue'}]; fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'blue'}];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('blue'); expect(fixture.debugElement.nativeElement).toHaveText('blue');
fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'red'}]; fixture.debugElement.componentInstance.items = [{'id': 'a', 'color': 'red'}];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('red'); expect(fixture.debugElement.nativeElement).toHaveText('red');
async.done();
});
})); }));
it('should move items around and keep them updated ', it('should move items around and keep them updated ', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`; `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackById">{{item['color']}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.debugElement.componentInstance.items = fixture.debugElement.componentInstance.items =
[{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}]; [{'id': 'a', 'color': 'blue'}, {'id': 'b', 'color': 'yellow'}];
fixture.detectChanges(); fixture.detectChanges();
@ -538,19 +396,14 @@ export function main() {
[{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}]; [{'id': 'b', 'color': 'orange'}, {'id': 'a', 'color': 'red'}];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('orangered'); expect(fixture.debugElement.nativeElement).toHaveText('orangered');
async.done();
});
})); }));
it('should handle added and removed items properly when tracking by index', it('should handle added and removed items properly when tracking by index', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = const template =
`<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`; `<div><template ngFor let-item [ngForOf]="items" [ngForTrackBy]="trackByIndex">{{item}}</template></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.debugElement.componentInstance.items = ['a', 'b', 'c', 'd']; fixture.debugElement.componentInstance.items = ['a', 'b', 'c', 'd'];
fixture.detectChanges(); fixture.detectChanges();
fixture.debugElement.componentInstance.items = ['e', 'f', 'g', 'h']; fixture.debugElement.componentInstance.items = ['e', 'f', 'g', 'h'];
@ -558,8 +411,6 @@ export function main() {
fixture.debugElement.componentInstance.items = ['e', 'f', 'h']; fixture.debugElement.componentInstance.items = ['e', 'f', 'h'];
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('efh'); expect(fixture.debugElement.nativeElement).toHaveText('efh');
async.done();
});
})); }));
}); });
}); });

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

@ -8,235 +8,165 @@
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],
});
});
it('should work in a template attribute', async(() => {
const template = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
TestBed.overrideComponent(TestComponent, {set: {template: template}});
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.debugElement.nativeElement).toHaveText('hello');
async.done();
});
})); }));
it('should work in a template element', it('should work in a template element', async(() => {
inject( const template =
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html =
'<div><template [ngIf]="booleanCondition"><copy-me>hello2</copy-me></template></div>'; '<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() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello2'); expect(fixture.debugElement.nativeElement).toHaveText('hello2');
async.done();
});
})); }));
it('should toggle node when condition changes', it('should toggle node when condition changes', async(() => {
inject( const template = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';
[TestComponentBuilder, AsyncTestCompleter],
(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.debugElement.componentInstance.booleanCondition = false; fixture.debugElement.componentInstance.booleanCondition = false;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(0); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.booleanCondition = true; 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')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.debugElement.nativeElement).toHaveText('hello');
fixture.debugElement.componentInstance.booleanCondition = false; fixture.debugElement.componentInstance.booleanCondition = false;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(0); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
async.done();
});
})); }));
it('should handle nested if correctly', it('should handle nested if correctly', async(() => {
inject( const template =
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html =
'<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>'; '<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>';
tcb.overrideTemplate(TestComponent, html) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.debugElement.componentInstance.booleanCondition = false; fixture.debugElement.componentInstance.booleanCondition = false;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(0); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.booleanCondition = true; 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')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.debugElement.nativeElement).toHaveText('hello');
fixture.debugElement.componentInstance.nestedBooleanCondition = false; 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')
.length)
.toEqual(0); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
fixture.debugElement.componentInstance.nestedBooleanCondition = true; 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')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.debugElement.nativeElement).toHaveText('hello');
fixture.debugElement.componentInstance.booleanCondition = false; fixture.debugElement.componentInstance.booleanCondition = false;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(0); .toEqual(0);
expect(fixture.debugElement.nativeElement).toHaveText(''); expect(fixture.debugElement.nativeElement).toHaveText('');
async.done();
});
})); }));
it('should update several nodes with if', it('should update several nodes with if', async(() => {
inject( const template = '<div>' +
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var html = '<div>' +
'<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' + '<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' + '<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' + '<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>'; '</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() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(3); .toEqual(3);
expect(getDOM().getText(fixture.debugElement.nativeElement)) expect(getDOM().getText(fixture.debugElement.nativeElement))
.toEqual('helloNumberhelloStringhelloFunction'); .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')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('helloString'); 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')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('helloNumber'); 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() expect(getDOM().querySelectorAll(fixture.debugElement.nativeElement, 'copy-me').length)
.querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); 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')
.length)
.toEqual(1); .toEqual(1);
expect(fixture.debugElement.nativeElement).toHaveText('hello'); expect(fixture.debugElement.nativeElement).toHaveText('hello');
async.done();
});
})); }));
it('should not recreate the element if the condition goes from true to true (JS)', it('should not recreate the element if the condition goes from true to true (JS)', async(() => {
inject( const template = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';
[TestComponentBuilder, AsyncTestCompleter],
(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();
getDOM().addClass( getDOM().addClass(
getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), 'foo');
'foo');
fixture.debugElement.componentInstance.numberCondition = 2; fixture.debugElement.componentInstance.numberCondition = 2;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().hasClass( expect(getDOM().hasClass(
getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'), 'foo'))
'foo'))
.toBe(true); .toBe(true);
async.done();
});
})); }));
}); });
} }

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

@ -8,27 +8,29 @@
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}]
});
});
it('should display the template according to the exact value', async(() => {
var template = '<div>' + var template = '<div>' +
'<ul [ngPlural]="switchValue">' + '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="=0"><li>you have no messages.</li></template>' + '<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
'<template ngPluralCase="=1"><li>you have one message.</li></template>' + '<template ngPluralCase="=1"><li>you have one message.</li></template>' +
'</ul></div>'; '</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;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.'); expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.');
@ -36,45 +38,32 @@ export function main() {
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();
});
})); }));
// 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngPlural]="switchValue">' + '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="=0"><li>{{ switchValue }}</li></template>' + '<template ngPluralCase="=0"><li>{{ switchValue }}</li></template>' +
'</ul></div>'; '</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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ng-container [ngPlural]="switchValue">' + '<ng-container [ngPlural]="switchValue">' +
'<template ngPluralCase="=0">you have no messages.</template>' + '<template ngPluralCase="=0">you have no messages.</template>' +
'<template ngPluralCase="=1">you have one message.</template>' + '<template ngPluralCase="=1">you have one message.</template>' +
'</ng-container></div>'; '</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.');
@ -82,82 +71,56 @@ export function main() {
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', it('should display the template according to the category', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngPlural]="switchValue">' + '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' + '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="many"><li>you have many messages.</li></template>' + '<template ngPluralCase="many"><li>you have many messages.</li></template>' +
'</ul></div>'; '</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 = 2;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement) expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.');
.toHaveText('you have a few messages.');
fixture.debugElement.componentInstance.switchValue = 8; fixture.debugElement.componentInstance.switchValue = 8;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('you have many messages.'); expect(fixture.debugElement.nativeElement).toHaveText('you have many messages.');
async.done();
});
})); }));
it('should default to other when no matches are found', it('should default to other when no matches are found', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngPlural]="switchValue">' + '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' + '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="other"><li>default message.</li></template>' + '<template ngPluralCase="other"><li>default message.</li></template>' +
'</ul></div>'; '</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 = 100; fixture.debugElement.componentInstance.switchValue = 100;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('default message.'); expect(fixture.debugElement.nativeElement).toHaveText('default message.');
async.done();
});
})); }));
it('should prioritize value matches over category matches', it('should prioritize value matches over category matches', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngPlural]="switchValue">' + '<ul [ngPlural]="switchValue">' +
'<template ngPluralCase="few"><li>you have a few messages.</li></template>' + '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
'<template ngPluralCase="=2">you have two messages.</template>' + '<template ngPluralCase="=2">you have two messages.</template>' +
'</ul></div>'; '</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 = 2;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('you have two messages.'); expect(fixture.debugElement.nativeElement).toHaveText('you have two messages.');
fixture.debugElement.componentInstance.switchValue = 3; fixture.debugElement.componentInstance.switchValue = 3;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement) expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.');
.toHaveText('you have a few messages.');
async.done();
});
})); }));
}); });
} }

119
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,31 +20,26 @@ 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) => { });
});
it('should add styles specified in an object literal', async(() => {
var template = `<div [ngStyle]="{'max-width': '40px'}"></div>`; var template = `<div [ngStyle]="{'max-width': '40px'}"></div>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'}); expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
async.done();
});
})); }));
it('should add and change styles specified in an object expression', it('should add and change styles specified in an object expression', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="expr"></div>`; 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'};
@ -55,20 +50,13 @@ export function main() {
(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', it('should add and remove styles specified using style.unit notation', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="{'max-width.px': expr}"></div>`; var template = `<div [ngStyle]="{'max-width.px': 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 = '40'; fixture.debugElement.componentInstance.expr = '40';
fixture.detectChanges(); fixture.detectChanges();
@ -77,20 +65,13 @@ export function main() {
fixture.debugElement.componentInstance.expr = null; fixture.debugElement.componentInstance.expr = null;
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).not.toHaveCssStyle('max-width'); expectNativeEl(fixture).not.toHaveCssStyle('max-width');
async.done();
});
})); }));
it('should update styles using style.unit notation when unit changes', it('should update styles using style.unit notation when unit changes', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="expr"></div>`; 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) => {
fixture.debugElement.componentInstance.expr = {'max-width.px': '40'}; fixture.debugElement.componentInstance.expr = {'max-width.px': '40'};
fixture.detectChanges(); fixture.detectChanges();
@ -99,21 +80,14 @@ export function main() {
fixture.debugElement.componentInstance.expr = {'max-width.em': '40'}; fixture.debugElement.componentInstance.expr = {'max-width.em': '40'};
fixture.detectChanges(); fixture.detectChanges();
expectNativeEl(fixture).toHaveCssStyle({'max-width': '40em'}); 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const template = `<div [ngStyle]="expr"></div>`; 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',
@ -131,20 +105,13 @@ export function main() {
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', it('should remove styles when deleting a key in an object expression', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [ngStyle]="expr"></div>`; 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) => {
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'});
@ -152,55 +119,37 @@ export function main() {
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');
async.done();
});
})); }));
it('should co-operate with the style attribute', it('should co-operate with the style attribute', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div style="font-size: 12px" [ngStyle]="expr"></div>`; var template = `<div style="font-size: 12px" [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( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'});
{'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();
});
})); }));
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],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = `<div [style.font-size.px]="12" [ngStyle]="expr"></div>`; 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( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px', 'font-size': '12px'});
{'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();
});
})); }));
}); });
} }

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

@ -8,26 +8,29 @@
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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngSwitch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template ngSwitchCase="a"><li>when a</li></template>' + '<template ngSwitchCase="a"><li>when a</li></template>' +
'<template ngSwitchCase="b"><li>when b</li></template>' + '<template ngSwitchCase="b"><li>when b</li></template>' +
'</ul></div>'; '</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('');
@ -38,25 +41,18 @@ export function main() {
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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngSwitch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template ngSwitchWhen="a"><li>when a</li></template>' + '<template ngSwitchWhen="a"><li>when a</li></template>' +
'<template ngSwitchWhen="b"><li>when b</li></template>' + '<template ngSwitchWhen="b"><li>when b</li></template>' +
'</ul></div>'; '</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('');
@ -67,24 +63,17 @@ export function main() {
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', it('should switch amongst when values with fallback to default', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngSwitch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<li template="ngSwitchCase \'a\'">when a</li>' + '<li template="ngSwitchCase \'a\'">when a</li>' +
'<li template="ngSwitchDefault">when default</li>' + '<li template="ngSwitchDefault">when default</li>' +
'</ul></div>'; '</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('when default'); expect(fixture.debugElement.nativeElement).toHaveText('when default');
@ -95,15 +84,9 @@ export function main() {
fixture.debugElement.componentInstance.switchValue = 'b'; fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when default'); expect(fixture.debugElement.nativeElement).toHaveText('when default');
async.done();
});
})); }));
it('should support multiple whens with the same value', it('should support multiple whens with the same value', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngSwitch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template ngSwitchCase="a"><li>when a1;</li></template>' + '<template ngSwitchCase="a"><li>when a1;</li></template>' +
@ -114,12 +97,10 @@ export function main() {
'<template ngSwitchDefault><li>when default2;</li></template>' + '<template ngSwitchDefault><li>when default2;</li></template>' +
'</ul></div>'; '</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) expect(fixture.debugElement.nativeElement).toHaveText('when default1;when default2;');
.toHaveText('when default1;when default2;');
fixture.debugElement.componentInstance.switchValue = 'a'; fixture.debugElement.componentInstance.switchValue = 'a';
fixture.detectChanges(); fixture.detectChanges();
@ -128,17 +109,11 @@ export function main() {
fixture.debugElement.componentInstance.switchValue = 'b'; fixture.debugElement.componentInstance.switchValue = 'b';
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('when b1;when b2;'); 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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div>' + var template = '<div>' +
'<ul [ngSwitch]="switchValue">' + '<ul [ngSwitch]="switchValue">' +
'<template [ngSwitchCase]="when1"><li>when 1;</li></template>' + '<template [ngSwitchCase]="when1"><li>when 1;</li></template>' +
@ -146,9 +121,8 @@ export function main() {
'<template ngSwitchDefault><li>when default;</li></template>' + '<template ngSwitchDefault><li>when default;</li></template>' +
'</ul></div>'; '</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';
@ -170,9 +144,6 @@ export function main() {
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();
});
})); }));
}); });
}); });

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

@ -8,37 +8,33 @@
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( beforeEach(() => {
[TestComponentBuilder, AsyncTestCompleter], TestBed.configureTestingModule({
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { declarations: [TestComponent],
});
});
it('should do nothing if templateRef is null', async(() => {
var template = `<template [ngTemplateOutlet]="null"></template>`; var template = `<template [ngTemplateOutlet]="null"></template>`;
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.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
async.done();
});
})); }));
it('should insert content specified by TemplateRef', it('should insert content specified by TemplateRef', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`; `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
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.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
@ -48,20 +44,13 @@ export function main() {
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');
async.done();
});
})); }));
it('should clear content if TemplateRef becomes null', it('should clear content if TemplateRef becomes null', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`; `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; var refs = fixture.debugElement.children[0].references['refs'];
@ -73,20 +62,13 @@ export function main() {
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', it('should swap content if TemplateRef changes', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`; `<tpl-refs #refs="tplRefs"><template>foo</template><template>bar</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef"></template>`;
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; var refs = fixture.debugElement.children[0].references['refs'];
@ -98,20 +80,13 @@ export function main() {
fixture.componentInstance.currentTplRef = refs.tplRefs.last; fixture.componentInstance.currentTplRef = refs.tplRefs.last;
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.nativeElement).toHaveText('bar'); expect(fixture.nativeElement).toHaveText('bar');
async.done();
});
})); }));
it('should display template if context is null', it('should display template if context is null', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="null"></template>`; `<tpl-refs #refs="tplRefs"><template>foo</template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="null"></template>`;
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.nativeElement).toHaveText(''); expect(fixture.nativeElement).toHaveText('');
@ -121,20 +96,13 @@ export function main() {
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');
async.done();
});
})); }));
it('should reflect initial context and changes', it('should reflect initial context and changes', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template let-foo="foo"><span>{{foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></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) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; var refs = fixture.debugElement.children[0].references['refs'];
@ -147,44 +115,28 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('alter-bar'); expect(fixture.debugElement.nativeElement).toHaveText('alter-bar');
async.done();
});
})); }));
it('should reflect user defined $implicit property in the context', it('should reflect user defined $implicit property in the context', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template let-ctx><span>{{ctx.foo}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></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) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(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.componentInstance.context = { fixture.componentInstance.context = {$implicit: fixture.componentInstance.context};
$implicit: fixture.componentInstance.context
};
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('bar'); expect(fixture.debugElement.nativeElement).toHaveText('bar');
async.done();
});
})); }));
it('should reflect context re-binding', it('should reflect context re-binding', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = var template =
`<tpl-refs #refs="tplRefs"><template let-shawshank="shawshank"><span>{{shawshank}}</span></template></tpl-refs><template [ngTemplateOutlet]="currentTplRef" [ngOutletContext]="context"></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) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
var refs = fixture.debugElement.children[0].references['refs']; var refs = fixture.debugElement.children[0].references['refs'];
@ -198,9 +150,6 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('was here'); expect(fixture.debugElement.nativeElement).toHaveText('was here');
async.done();
});
})); }));
}); });
} }

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

@ -8,58 +8,47 @@
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( beforeEach(() => {
[TestComponentBuilder, AsyncTestCompleter], TestBed.configureTestingModule({
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { declarations: [TestComponent],
});
});
it('should not interpolate children', async(() => {
var template = '<div>{{text}}<span ngNonBindable>{{text}}</span></div>'; var template = '<div>{{text}}<span ngNonBindable>{{text}}</span></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('foo{{text}}'); expect(fixture.debugElement.nativeElement).toHaveText('foo{{text}}');
async.done();
});
})); }));
it('should ignore directives on child nodes', it('should ignore directives on child nodes', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>'; var template = '<div ngNonBindable><span id=child test-dec>{{text}}</span></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
// We must use getDOM().querySelector instead of fixture.query here // We must use getDOM().querySelector instead of fixture.query here
// since the elements inside are not compiled. // since the elements inside are not compiled.
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')).toBeFalsy();
async.done();
});
})); }));
it('should trigger directives on the same node', it('should trigger directives on the same node', async(() => {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>'; var template = '<div><span id=child ngNonBindable test-dec>{{text}}</span></div>';
tcb.overrideTemplate(TestComponent, template) TestBed.overrideComponent(TestComponent, {set: {template: template}});
.createAsync(TestComponent) let fixture = TestBed.createComponent(TestComponent);
.then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child'); var span = getDOM().querySelector(fixture.debugElement.nativeElement, '#child');
expect(getDOM().hasClass(span, 'compiled')).toBeTruthy(); expect(getDOM().hasClass(span, 'compiled')).toBeTruthy();
async.done();
});
})); }));
}); });
} }

20
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,11 +55,15 @@ export function main() {
}); });
describe('integration', () => { describe('integration', () => {
it('should work with mutable objects',
inject( beforeEach(() => {
[TestComponentBuilder, AsyncTestCompleter], TestBed.configureTestingModule({
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { declarations: [TestComp],
tcb.createAsync(TestComp).then((fixture) => { });
});
it('should work with mutable objects', async(() => {
let fixture = TestBed.createComponent(TestComp);
let mutable: number[] = [1]; let mutable: number[] = [1];
fixture.debugElement.componentInstance.data = mutable; fixture.debugElement.componentInstance.data = mutable;
fixture.detectChanges(); fixture.detectChanges();
@ -69,8 +73,6 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('[\n 1,\n 2\n]'); expect(fixture.debugElement.nativeElement).toHaveText('[\n 1,\n 2\n]');
async.done();
});
})); }));
}); });
}); });

20
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,11 +88,14 @@ 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) => { });
it('should work with mutable arrays', async(() => {
let fixture = TestBed.createComponent(TestComp);
let mutable: number[] = [1, 2]; let mutable: number[] = [1, 2];
fixture.debugElement.componentInstance.data = mutable; fixture.debugElement.componentInstance.data = mutable;
fixture.detectChanges(); fixture.detectChanges();
@ -101,9 +104,6 @@ export function main() {
mutable.push(3); mutable.push(3);
fixture.detectChanges(); fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('2,3'); expect(fixture.debugElement.nativeElement).toHaveText('2,3');
async.done();
});
})); }));
}); });
}); });