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

chore(test): migrate directives tests to testcomponentbuilder 

Part of #2354
This commit is contained in:
Julie Ralph 2015-06-24 13:07:15 -07:00
parent d3dda614dd
commit 85d6ae38b9
5 changed files with 465 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

284
modules/angular2/test/directives/class_spec.ts
View File

@ -1,5 +1,6 @@
import { import {
AsyncTestCompleter, AsyncTestCompleter,
TestComponentBuilder,
beforeEach, beforeEach,
beforeEachBindings, beforeEachBindings,
ddescribe, ddescribe,
@ -14,7 +15,6 @@ import {
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection'; import {List, ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
import {Component, View} from 'angular2/angular2'; import {Component, View} from 'angular2/angular2';
import {TestBed} from 'angular2/src/test_lib/test_bed';
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {CSSClass} from 'angular2/src/directives/class'; import {CSSClass} from 'angular2/src/directives/class';
@ -24,76 +24,90 @@ export function main() {
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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="{foo: true, bar: false}"></div>'; var template = '<div [class]="{foo: true, bar: false}"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
async.done(); 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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="{foo: condition, bar: !condition}"></div>'; var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
view.context.condition = false; rootTC.componentInstance.condition = false;
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding bar');
async.done(); 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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>'; var template = '<div [class]="objExpr"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
StringMapWrapper.set(view.context.objExpr, 'bar', true); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar');
StringMapWrapper.set(view.context.objExpr, 'baz', true); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'baz', true);
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar baz');
StringMapWrapper.delete(view.context.objExpr, 'bar'); StringMapWrapper.delete(rootTC.componentInstance.objExpr, 'bar');
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo baz'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo baz');
async.done(); 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([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>'; var template = '<div [class]="objExpr"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
view.context.objExpr = {foo: true, bar: true}; rootTC.componentInstance.objExpr = {foo: true, bar: true};
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar');
view.context.objExpr = {baz: true}; rootTC.componentInstance.objExpr = {baz: true};
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding baz'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding baz');
async.done(); async.done();
}); });
@ -103,58 +117,68 @@ export function main() {
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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="['foo', 'bar']"></div>`; var template = `<div [class]="['foo', 'bar']"></div>`;
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar');
async.done(); 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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="arrExpr"></div>'; var template = '<div [class]="arrExpr"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
.then((rootTC) => {
var arrExpr: List<string> = view.context.arrExpr; var arrExpr: List<string> = rootTC.componentInstance.arrExpr;
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
arrExpr.push('bar'); arrExpr.push('bar');
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar');
arrExpr[1] = 'baz'; arrExpr[1] = 'baz';
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo baz'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo baz');
ListWrapper.remove(view.context.arrExpr, 'baz'); ListWrapper.remove(rootTC.componentInstance.arrExpr, 'baz');
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
async.done(); async.done();
}); });
})); }));
it('should add and remove classes when a reference changes', it('should add and remove classes when a reference changes',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="arrExpr"></div>'; var template = '<div [class]="arrExpr"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
view.context.arrExpr = ['bar']; rootTC.componentInstance.arrExpr = ['bar'];
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding bar');
async.done(); async.done();
}); });
@ -164,34 +188,40 @@ export function main() {
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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [class]="'foo bar'"></div>`; var template = `<div [class]="'foo bar'"></div>`;
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar');
async.done(); 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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="strExpr"></div>'; var template = '<div [class]="strExpr"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
view.context.strExpr = 'foo bar'; rootTC.componentInstance.strExpr = 'foo bar';
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo bar');
view.context.strExpr = 'baz'; rootTC.componentInstance.strExpr = 'baz';
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding baz'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding baz');
async.done(); async.done();
}); });
@ -199,78 +229,92 @@ export function main() {
}); });
it('should remove active classes when expression evaluates to null', it('should remove active classes when expression evaluates to null',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr"></div>'; var template = '<div [class]="objExpr"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('ng-binding foo'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding foo');
view.context.objExpr = null; rootTC.componentInstance.objExpr = null;
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding');
view.context.objExpr = {'foo': false, 'bar': true}; rootTC.componentInstance.objExpr = {'foo': false, 'bar': true};
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('ng-binding bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('ng-binding bar');
async.done(); async.done();
}); });
})); }));
it('should have no effect when activated by a static class attribute', it('should have no effect when activated by a static class attribute',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo"></div>'; var template = '<div class="init foo"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
rootTC.detectChanges();
// TODO(pk): in CJS className isn't initialized properly if we don't mutate classes // TODO(pk): in CJS className isn't initialized properly if we don't mutate classes
expect(ListWrapper.join(DOM.classList(view.rootNodes[0]), ' ')) expect(ListWrapper.join(DOM.classList(rootTC.componentViewChildren[0].nativeElement),
' '))
.toEqual('init foo ng-binding'); .toEqual('init foo ng-binding');
async.done(); async.done();
}); });
})); }));
it('should co-operate with the class attribute', it('should co-operate with the class attribute',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [class]="objExpr" class="init foo"></div>'; var template = '<div [class]="objExpr" class="init foo"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
StringMapWrapper.set(view.context.objExpr, 'bar', true); .then((rootTC) => {
view.detectChanges(); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('init foo ng-binding bar');
StringMapWrapper.set(view.context.objExpr, 'foo', false); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('init ng-binding bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('init ng-binding bar');
async.done(); 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',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>'; var template = '<div class="init foo" [class]="objExpr" [class.baz]="condition"></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz'); rootTC.detectChanges();
expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('init foo ng-binding baz');
StringMapWrapper.set(view.context.objExpr, 'bar', true); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('init foo ng-binding baz bar');
StringMapWrapper.set(view.context.objExpr, 'foo', false); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('init ng-binding baz bar');
view.context.condition = false; rootTC.componentInstance.condition = false;
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes[0].className).toEqual('init ng-binding bar'); expect(rootTC.componentViewChildren[0].nativeElement.className)
.toEqual('init ng-binding bar');
async.done(); async.done();
}); });

229
modules/angular2/test/directives/ng_for_spec.ts
View File

@ -1,5 +1,6 @@
import { import {
AsyncTestCompleter, AsyncTestCompleter,
TestComponentBuilder,
beforeEach, beforeEach,
beforeEachBindings, beforeEachBindings,
ddescribe, ddescribe,
@ -12,15 +13,12 @@ import {
xit, xit,
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {ListWrapper} from 'angular2/src/facade/collection'; import {ListWrapper} from 'angular2/src/facade/collection';
import {Component, View} from 'angular2/angular2'; import {Component, View} from 'angular2/angular2';
import {NgFor} from 'angular2/src/directives/ng_for'; import {NgFor} from 'angular2/src/directives/ng_for';
import {TestBed} from 'angular2/src/test_lib/test_bed';
export function main() { export function main() {
describe('ng-for', () => { describe('ng-for', () => {
@ -28,157 +26,167 @@ export function main() {
'<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>'; '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
it('should reflect initial elements', it('should reflect initial elements',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('1;2;');
async.done(); async.done();
}); });
})); }));
it('should reflect added elements', it('should reflect added elements',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
rootTC.detectChanges();
(<number[]>view.context.items).push(3); (<number[]>rootTC.componentInstance.items).push(3);
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;'); expect(rootTC.nativeElement).toHaveText('1;2;3;');
async.done(); async.done();
}); });
})); }));
it('should reflect removed elements', it('should reflect removed elements',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
rootTC.detectChanges();
ListWrapper.removeAt(view.context.items, 1); ListWrapper.removeAt(rootTC.componentInstance.items, 1);
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('1;'); expect(rootTC.nativeElement).toHaveText('1;');
async.done(); async.done();
}); });
})); }));
it('should reflect moved elements', it('should reflect moved elements',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
rootTC.detectChanges();
ListWrapper.removeAt(view.context.items, 0); ListWrapper.removeAt(rootTC.componentInstance.items, 0);
(<number[]>view.context.items).push(1); (<number[]>rootTC.componentInstance.items).push(1);
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('2;1;'); expect(rootTC.nativeElement).toHaveText('2;1;');
async.done(); async.done();
}); });
})); }));
it('should reflect a mix of all changes (additions/removals/moves)', it('should reflect a mix of all changes (additions/removals/moves)',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.context.items = [0, 1, 2, 3, 4, 5]; .then((rootTC) => {
view.detectChanges(); rootTC.componentInstance.items = [0, 1, 2, 3, 4, 5];
rootTC.detectChanges();
view.context.items = [6, 2, 7, 0, 4, 8]; rootTC.componentInstance.items = [6, 2, 7, 0, 4, 8];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('6;2;7;0;4;8;'); expect(rootTC.nativeElement).toHaveText('6;2;7;0;4;8;');
async.done(); async.done();
}); });
})); }));
it('should iterate over an array of objects', it('should iterate over an array of objects',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>'; var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
.then((rootTC) => {
// INIT // INIT
view.context.items = [{'name': 'misko'}, {'name': 'shyam'}]; rootTC.componentInstance.items = [{'name': 'misko'}, {'name': 'shyam'}];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;'); expect(rootTC.nativeElement).toHaveText('misko;shyam;');
// GROW // GROW
(<any[]>view.context.items).push({'name': 'adam'}); (<any[]>rootTC.componentInstance.items).push({'name': 'adam'});
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;adam;'); expect(rootTC.nativeElement).toHaveText('misko;shyam;adam;');
// SHRINK // SHRINK
ListWrapper.removeAt(view.context.items, 2); ListWrapper.removeAt(rootTC.componentInstance.items, 2);
ListWrapper.removeAt(view.context.items, 0); ListWrapper.removeAt(rootTC.componentInstance.items, 0);
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('shyam;'); expect(rootTC.nativeElement).toHaveText('shyam;');
async.done(); async.done();
}); });
})); }));
it('should gracefully handle nulls', it('should gracefully handle nulls',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>'; var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual(''); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('');
async.done(); async.done();
}); });
})); }));
it('should gracefully handle ref changing to null and back', it('should gracefully handle ref changing to null and back',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('1;2;');
view.context.items = null; rootTC.componentInstance.items = null;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(rootTC.nativeElement).toHaveText('');
view.context.items = [1, 2, 3]; rootTC.componentInstance.items = [1, 2, 3];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;'); expect(rootTC.nativeElement).toHaveText('1;2;3;');
async.done(); async.done();
}); });
})); }));
it('should throw on ref changing to string', it('should throw on ref changing to string',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('1;2;');
view.context.items = 'whaaa'; rootTC.componentInstance.items = 'whaaa';
expect(() => view.detectChanges()).toThrowError(); expect(() => rootTC.detectChanges()).toThrowError();
async.done(); async.done();
}); });
})); }));
it('should works with duplicates', it('should works with duplicates',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tb.createView(TestComponent, {html: TEMPLATE}) tcb.overrideTemplate(TestComponent, TEMPLATE)
.then((view) => { .createAsync(TestComponent)
.then((rootTC) => {
var a = new Foo(); var a = new Foo();
view.context.items = [a, a]; rootTC.componentInstance.items = [a, a];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('foo;foo;'); expect(rootTC.nativeElement).toHaveText('foo;foo;');
async.done(); async.done();
}); });
})); }));
it('should repeat over nested arrays', it('should repeat over nested arrays',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<div template="ng-for #item of items">' + '<div template="ng-for #item of items">' +
'<div template="ng-for #subitem of item">' + '<div template="ng-for #subitem of item">' +
@ -187,56 +195,59 @@ export function main() {
'</div>' + '</div>' +
'</div>'; '</div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.context.items = [['a', 'b'], ['c']]; .then((rootTC) => {
view.detectChanges(); rootTC.componentInstance.items = [['a', 'b'], ['c']];
view.detectChanges(); rootTC.detectChanges();
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;|c-1;|'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('a-2;b-2;|c-1;|');
view.context.items = [['e'], ['f', 'g']]; rootTC.componentInstance.items = [['e'], ['f', 'g']];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;|f-2;g-2;|'); expect(rootTC.nativeElement).toHaveText('e-1;|f-2;g-2;|');
async.done(); async.done();
}); });
})); }));
it('should repeat over nested arrays with no intermediate element', it('should repeat over nested arrays with no intermediate element',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div><template ng-for #item [ng-for-of]="items">' + var template = '<div><template ng-for #item [ng-for-of]="items">' +
'<div template="ng-for #subitem of item">' + '<div template="ng-for #subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div></template></div>'; '</div></template></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.context.items = [['a', 'b'], ['c']]; .then((rootTC) => {
view.detectChanges(); rootTC.componentInstance.items = [['a', 'b'], ['c']];
expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;c-1;'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('a-2;b-2;c-1;');
view.context.items = [['e'], ['f', 'g']]; rootTC.componentInstance.items = [['e'], ['f', 'g']];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;f-2;g-2;'); expect(rootTC.nativeElement).toHaveText('e-1;f-2;g-2;');
async.done(); async.done();
}); });
})); }));
it('should display indices correctly', it('should display indices correctly',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = var template =
'<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>'; '<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.context.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; .then((rootTC) => {
view.detectChanges(); rootTC.componentInstance.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('0123456789');
view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0]; rootTC.componentInstance.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789'); expect(rootTC.nativeElement).toHaveText('0123456789');
async.done(); async.done();
}); });
})); }));

191
modules/angular2/test/directives/ng_if_spec.ts
View File

@ -1,5 +1,7 @@
import { import {
AsyncTestCompleter, AsyncTestCompleter,
TestComponentBuilder,
By,
beforeEach, beforeEach,
ddescribe, ddescribe,
describe, describe,
@ -14,8 +16,6 @@ import {
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {TestBed} from 'angular2/src/test_lib/test_bed';
import {Component, View} from 'angular2/angular2'; import {Component, View} from 'angular2/angular2';
import {NgIf} from 'angular2/src/directives/ng_if'; import {NgIf} from 'angular2/src/directives/ng_if';
@ -23,95 +23,99 @@ import {NgIf} from 'angular2/src/directives/ng_if';
export function main() { export function main() {
describe('ng-if directive', () => { describe('ng-if directive', () => {
it('should work in a template attribute', it('should work in a template attribute',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('hello'); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('hello');
async.done(); async.done();
}); });
})); }));
it('should work in a template element', it('should work in a template element',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = var html =
'<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>'; '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('hello2'); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('hello2');
async.done(); async.done();
}); });
})); }));
it('should toggle node when condition changes', it('should toggle node when condition changes',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.context.booleanCondition = false; .then((rootTC) => {
view.detectChanges(); rootTC.componentInstance.booleanCondition = false;
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
view.context.booleanCondition = true; rootTC.componentInstance.booleanCondition = true;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(DOM.getText(view.rootNodes[0])).toEqual('hello'); expect(rootTC.nativeElement).toHaveText('hello');
view.context.booleanCondition = false; rootTC.componentInstance.booleanCondition = false;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(rootTC.nativeElement).toHaveText('');
async.done(); async.done();
}); });
})); }));
it('should handle nested if correctly', it('should handle nested if correctly',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = var html =
'<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>'; '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.context.booleanCondition = false; .then((rootTC) => {
view.detectChanges(); rootTC.componentInstance.booleanCondition = false;
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
view.context.booleanCondition = true; rootTC.componentInstance.booleanCondition = true;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(DOM.getText(view.rootNodes[0])).toEqual('hello'); expect(rootTC.nativeElement).toHaveText('hello');
view.context.nestedBooleanCondition = false; rootTC.componentInstance.nestedBooleanCondition = false;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(rootTC.nativeElement).toHaveText('');
view.context.nestedBooleanCondition = true; rootTC.componentInstance.nestedBooleanCondition = true;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(DOM.getText(view.rootNodes[0])).toEqual('hello'); expect(rootTC.nativeElement).toHaveText('hello');
view.context.booleanCondition = false; rootTC.componentInstance.booleanCondition = false;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(rootTC.nativeElement).toHaveText('');
async.done(); async.done();
}); });
})); }));
it('should update several nodes with if', it('should update several nodes with if',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = var html =
'<div>' + '<div>' +
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' + '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
@ -119,23 +123,24 @@ export function main() {
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' + '<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>'; '</div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(3); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])) expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(3);
expect(DOM.getText(rootTC.nativeElement))
.toEqual('helloNumberhelloStringhelloFunction'); .toEqual('helloNumberhelloStringhelloFunction');
view.context.numberCondition = 0; rootTC.componentInstance.numberCondition = 0;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(DOM.getText(view.rootNodes[0])).toEqual('helloString'); expect(rootTC.nativeElement).toHaveText('helloString');
view.context.numberCondition = 1; rootTC.componentInstance.numberCondition = 1;
view.context.stringCondition = "bar"; rootTC.componentInstance.stringCondition = "bar";
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(DOM.getText(view.rootNodes[0])).toEqual('helloNumber'); expect(rootTC.nativeElement).toHaveText('helloNumber');
async.done(); async.done();
}); });
})); }));
@ -143,36 +148,39 @@ export function main() {
if (!IS_DARTIUM) { if (!IS_DARTIUM) {
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([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('hello'); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('hello');
view.context.numberCondition = 2; rootTC.componentInstance.numberCondition = 2;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(DOM.getText(view.rootNodes[0])).toEqual('hello'); expect(rootTC.nativeElement).toHaveText('hello');
async.done(); 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)',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
DOM.addClass(view.rootNodes[0].childNodes[1], "foo"); rootTC.detectChanges();
DOM.addClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo");
view.context.numberCondition = 2; rootTC.componentInstance.numberCondition = 2;
view.detectChanges(); rootTC.detectChanges();
expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true); expect(DOM.hasClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo"))
.toBe(true);
async.done(); async.done();
}); });
@ -181,14 +189,15 @@ export function main() {
if (IS_DARTIUM) { if (IS_DARTIUM) {
it('should not create the element if the condition is not a boolean (DART)', it('should not create the element if the condition is not a boolean (DART)',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>'; var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}) tcb.overrideTemplate(TestComponent, html)
.then((view) => { .createAsync(TestComponent)
expect(() => view.detectChanges()).toThrowError(); .then((rootTC) => {
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0); expect(() => rootTC.detectChanges()).toThrowError();
expect(DOM.getText(view.rootNodes[0])).toEqual(''); expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
async.done(); async.done();
}); });
})); }));

114
modules/angular2/test/directives/ng_switch_spec.ts
View File

@ -1,5 +1,6 @@
import { import {
AsyncTestCompleter, AsyncTestCompleter,
TestComponentBuilder,
beforeEach, beforeEach,
ddescribe, ddescribe,
describe, describe,
@ -10,69 +11,68 @@ import {
it, it,
xit, xit,
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Component, View} from 'angular2/angular2'; import {Component, View} from 'angular2/angular2';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch'; import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
import {TestBed} from 'angular2/src/test_lib/test_bed';
export function main() { export function main() {
describe('switch', () => { describe('switch', () => {
describe('switch value changes', () => { describe('switch value changes', () => {
it('should switch amongst when values', it('should switch amongst when values',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' + '<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' + '<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual(''); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('');
view.context.switchValue = 'a'; rootTC.componentInstance.switchValue = 'a';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when a'); expect(rootTC.nativeElement).toHaveText('when a');
view.context.switchValue = 'b'; rootTC.componentInstance.switchValue = 'b';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when b'); expect(rootTC.nativeElement).toHaveText('when b');
async.done(); async.done();
}); });
})); }));
it('should switch amongst when values with fallback to default', it('should switch amongst when values with fallback to default',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<li template="ng-switch-when \'a\'">when a</li>' + '<li template="ng-switch-when \'a\'">when a</li>' +
'<li template="ng-switch-default">when default</li>' + '<li template="ng-switch-default">when default</li>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual('when default'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default');
view.context.switchValue = 'a'; rootTC.componentInstance.switchValue = 'a';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when a'); expect(rootTC.nativeElement).toHaveText('when a');
view.context.switchValue = 'b'; rootTC.componentInstance.switchValue = 'b';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default'); expect(rootTC.nativeElement).toHaveText('when default');
async.done(); async.done();
}); });
})); }));
it('should support multiple whens with the same value', it('should support multiple whens with the same value',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' + '<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
@ -83,18 +83,19 @@ export function main() {
'<template ng-switch-default><li>when default2;</li></template>' + '<template ng-switch-default><li>when default2;</li></template>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual('when default1;when default2;'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default1;when default2;');
view.context.switchValue = 'a'; rootTC.componentInstance.switchValue = 'a';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;'); expect(rootTC.nativeElement).toHaveText('when a1;when a2;');
view.context.switchValue = 'b'; rootTC.componentInstance.switchValue = 'b';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;'); expect(rootTC.nativeElement).toHaveText('when b1;when b2;');
async.done(); async.done();
}); });
@ -103,7 +104,7 @@ export function main() {
describe('when values changes', () => { describe('when values changes', () => {
it('should switch amongst when values', it('should switch amongst when values',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [ng-switch]="switchValue">' + '<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' + '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
@ -111,29 +112,30 @@ export function main() {
'<template ng-switch-default><li>when default;</li></template>' + '<template ng-switch-default><li>when default;</li></template>' +
'</ul></div>'; '</ul></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.context.when1 = 'a'; .then((rootTC) => {
view.context.when2 = 'b'; rootTC.componentInstance.when1 = 'a';
view.context.switchValue = 'a'; rootTC.componentInstance.when2 = 'b';
view.detectChanges(); rootTC.componentInstance.switchValue = 'a';
expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when 1;');
view.context.switchValue = 'b'; rootTC.componentInstance.switchValue = 'b';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;'); expect(rootTC.nativeElement).toHaveText('when 2;');
view.context.switchValue = 'c'; rootTC.componentInstance.switchValue = 'c';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;'); expect(rootTC.nativeElement).toHaveText('when default;');
view.context.when1 = 'c'; rootTC.componentInstance.when1 = 'c';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;'); expect(rootTC.nativeElement).toHaveText('when 1;');
view.context.when1 = 'd'; rootTC.componentInstance.when1 = 'd';
view.detectChanges(); rootTC.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;'); expect(rootTC.nativeElement).toHaveText('when default;');
async.done(); async.done();
}); });

40
modules/angular2/test/directives/non_bindable_spec.ts
View File

@ -1,5 +1,7 @@
import { import {
AsyncTestCompleter, AsyncTestCompleter,
TestComponentBuilder,
By,
beforeEach, beforeEach,
ddescribe, ddescribe,
describe, describe,
@ -18,40 +20,44 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable'; import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
import {TestBed} from 'angular2/src/test_lib/test_bed';
export function main() { export function main() {
describe('non-bindable', () => { describe('non-bindable', () => {
it('should not interpolate children', it('should not interpolate children',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>'; var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
expect(DOM.getText(view.rootNodes[0])).toEqual('foo{{text}}'); rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('foo{{text}}');
async.done(); async.done();
}); });
})); }));
it('should ignore directives on child nodes', it('should ignore directives on child nodes',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>'; var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
var span = DOM.querySelector(view.rootNodes[0], '#child'); rootTC.detectChanges();
// We must use DOM.querySelector instead of rootTC.query here
// since the elements inside are not compiled.
var span = DOM.querySelector(rootTC.nativeElement, '#child');
expect(DOM.hasClass(span, 'compiled')).toBeFalsy(); expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
async.done(); async.done();
}); });
})); }));
it('should trigger directives on the same node', it('should trigger directives on the same node',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>'; var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
tb.createView(TestComponent, {html: template}) tcb.overrideTemplate(TestComponent, template)
.then((view) => { .createAsync(TestComponent)
view.detectChanges(); .then((rootTC) => {
var span = DOM.querySelector(view.rootNodes[0], '#child'); rootTC.detectChanges();
var span = DOM.querySelector(rootTC.nativeElement, '#child');
expect(DOM.hasClass(span, 'compiled')).toBeTruthy(); expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
async.done(); async.done();
}); });