iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: convert to using TestBed

Browse Source
This commit is contained in:
Victor Berchet 2015-03-30 17:11:18 +02:00
parent 438c2b31e4
commit 52c55d0ee8
6 changed files with 359 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
modules/angular2/test/directives/class_spec.js vendored
View File

@ -15,151 +15,123 @@ import {
import {StringMapWrapper} from 'angular2/src/facade/collection'; import {StringMapWrapper} from 'angular2/src/facade/collection';
import {Injector, bind} from 'angular2/di';
import {Compiler} from 'angular2/src/core/compiler/compiler';
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
import {Template} from 'angular2/src/core/annotations/template'; import {Template} from 'angular2/src/core/annotations/template';
import {Decorator, Component} from 'angular2/src/core/annotations/annotations'; import {Component} from 'angular2/src/core/annotations/annotations';
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock'; import {TestBed} from 'angular2/src/test_lib/test_bed';
import {CSSClass} from 'angular2/src/directives/class'; import {CSSClass} from 'angular2/src/directives/class';
export function main() { export function main() {
describe('binding to CSS class list', () => { describe('binding to CSS class list', () => {
var view, cd, compiler, component, tplResolver; it('should add classes specified in an object literal',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
beforeEachBindings(() => [
bind(TemplateResolver).toClass(MockTemplateResolver)
]);
beforeEach(inject([Compiler, TemplateResolver], (c, t) => {
compiler = c;
tplResolver = t;
}));
function createView(pv) {
component = new TestComponent();
view = pv.instantiate(null, null);
view.hydrate(new Injector([]), null, null, component, null);
cd = view.changeDetector;
}
function compileWithTemplate(html) {
var template = new Template({
inline: html,
directives: [CSSClass]
});
tplResolver.setTemplate(TestComponent, template);
return compiler.compile(TestComponent);
}
it('should add classes specified in an object literal', inject([AsyncTestCompleter], (async) => {
var template = '<div [class]="{foo: true, bar: false}"></div>'; var template = '<div [class]="{foo: true, bar: false}"></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges(); tb.createView(TestComponent, {html: template}).then((view) => {
view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo'); expect(view.nodes[0].className).toEqual('ng-binding foo');
async.done(); async.done();
}); });
})); }));
it('should add and remove classes based on changes in object literal values', inject([AsyncTestCompleter], (async) => { it('should add and remove classes based on changes in object literal values',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div [class]="{foo: condition, bar: !condition}"></div>'; var template = '<div [class]="{foo: condition, bar: !condition}"></div>';
compileWithTemplate(template).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo'); expect(view.nodes[0].className).toEqual('ng-binding foo');
component.condition = false; view.context.condition = false;
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding bar'); expect(view.nodes[0].className).toEqual('ng-binding bar');
async.done(); async.done();
}); });
})); }));
it('should add and remove classes based on changes to the expression object', inject([AsyncTestCompleter], (async) => { it('should add and remove classes based on changes to the expression object',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div [class]="expr"></div>'; var template = '<div [class]="expr"></div>';
compileWithTemplate(template).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo'); expect(view.nodes[0].className).toEqual('ng-binding foo');
StringMapWrapper.set(component.expr, 'bar', true); StringMapWrapper.set(view.context.expr, 'bar', true);
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo bar'); expect(view.nodes[0].className).toEqual('ng-binding foo bar');
StringMapWrapper.set(component.expr, 'baz', true); StringMapWrapper.set(view.context.expr, 'baz', true);
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo bar baz'); expect(view.nodes[0].className).toEqual('ng-binding foo bar baz');
StringMapWrapper.delete(component.expr, 'bar'); StringMapWrapper.delete(view.context.expr, 'bar');
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo baz'); expect(view.nodes[0].className).toEqual('ng-binding foo baz');
async.done(); async.done();
}); });
})); }));
it('should retain existing classes when expression evaluates to null', inject([AsyncTestCompleter], (async) => { it('should retain existing classes when expression evaluates to null',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div [class]="expr"></div>'; var template = '<div [class]="expr"></div>';
compileWithTemplate(template).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo'); expect(view.nodes[0].className).toEqual('ng-binding foo');
component.expr = null; view.context.expr = null;
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding foo'); expect(view.nodes[0].className).toEqual('ng-binding foo');
component.expr = {'foo': false, 'bar': true}; view.context.expr = {'foo': false, 'bar': true};
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('ng-binding bar'); expect(view.nodes[0].className).toEqual('ng-binding bar');
async.done(); async.done();
}); });
})); }));
it('should co-operate with the class attribute', inject([AsyncTestCompleter], (async) => { it('should co-operate with the class attribute',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div [class]="expr" class="init foo"></div>'; var template = '<div [class]="expr" class="init foo"></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
StringMapWrapper.set(component.expr, 'bar', true); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); StringMapWrapper.set(view.context.expr, 'bar', true);
view.detectChanges();
expect(view.nodes[0].className).toEqual('init foo ng-binding bar'); expect(view.nodes[0].className).toEqual('init foo ng-binding bar');
StringMapWrapper.set(component.expr, 'foo', false); StringMapWrapper.set(view.context.expr, 'foo', false);
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('init ng-binding bar'); expect(view.nodes[0].className).toEqual('init ng-binding bar');
async.done(); async.done();
}); });
})); }));
it('should co-operate with the class attribute and class.name binding', inject([AsyncTestCompleter], (async) => { it('should co-operate with the class attribute and class.name binding',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div class="init foo" [class]="expr" [class.baz]="condition"></div>'; var template = '<div class="init foo" [class]="expr" [class.baz]="condition"></div>';
compileWithTemplate(template).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('init foo ng-binding baz'); expect(view.nodes[0].className).toEqual('init foo ng-binding baz');
StringMapWrapper.set(component.expr, 'bar', true); StringMapWrapper.set(view.context.expr, 'bar', true);
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('init foo ng-binding baz bar'); expect(view.nodes[0].className).toEqual('init foo ng-binding baz bar');
StringMapWrapper.set(component.expr, 'foo', false); StringMapWrapper.set(view.context.expr, 'foo', false);
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('init ng-binding baz bar'); expect(view.nodes[0].className).toEqual('init ng-binding baz bar');
component.condition = false; view.context.condition = false;
cd.detectChanges(); view.detectChanges();
expect(view.nodes[0].className).toEqual('init ng-binding bar'); expect(view.nodes[0].className).toEqual('init ng-binding bar');
async.done(); async.done();
@ -169,6 +141,7 @@ export function main() {
} }
@Component({selector: 'test-cmp'}) @Component({selector: 'test-cmp'})
@Template({directives: [CSSClass]})
class TestComponent { class TestComponent {
condition:boolean; condition:boolean;
expr; expr;

219
modules/angular2/test/directives/for_spec.js vendored
View File

@ -15,245 +15,207 @@ import {
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {ListWrapper} from 'angular2/src/facade/collection'; import {ListWrapper} from 'angular2/src/facade/collection';
import {Injector} from 'angular2/di'; import {Component} from 'angular2/src/core/annotations/annotations';
import {Compiler} from 'angular2/src/core/compiler/compiler';
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
import {Template} from 'angular2/src/core/annotations/template'; import {Template} from 'angular2/src/core/annotations/template';
import {Decorator, Component, Viewport} from 'angular2/src/core/annotations/annotations';
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
import {For} from 'angular2/src/directives/for'; import {For} from 'angular2/src/directives/for';
import {bind} from 'angular2/di'; import {TestBed} from 'angular2/src/test_lib/test_bed';
export function main() { export function main() {
describe('for', () => { describe('for', () => {
var view, cd, compiler, component, tplResolver;
beforeEachBindings(() => [
bind(TemplateResolver).toClass(MockTemplateResolver),
]);
beforeEach(inject([Compiler, TemplateResolver], (c, t) => {
compiler = c;
tplResolver = t;
}));
function createView(pv) {
component = new TestComponent();
view = pv.instantiate(null, null);
view.hydrate(new Injector([]), null, null, component, null);
cd = view.changeDetector;
}
function compileWithTemplate(html) {
var template = new Template({
inline: html,
directives: [For]
});
tplResolver.setTemplate(TestComponent, template);
return compiler.compile(TestComponent);
}
var TEMPLATE = '<div><copy-me template="for #item of items">{{item.toString()}};</copy-me></div>'; var TEMPLATE = '<div><copy-me template="for #item of items">{{item.toString()}};</copy-me></div>';
it('should reflect initial elements', inject([AsyncTestCompleter], (async) => { it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate(TEMPLATE).then((pv) => { tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('1;2;'); expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
async.done(); async.done();
}); });
})); }));
it('should reflect added elements', inject([AsyncTestCompleter], (async) => { it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate(TEMPLATE).then((pv) => { tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
ListWrapper.push(component.items, 3); ListWrapper.push(view.context.items, 3);
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;'); expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;');
async.done(); async.done();
}); });
})); }));
it('should reflect removed elements', inject([AsyncTestCompleter], (async) => { it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate(TEMPLATE).then((pv) => { tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
ListWrapper.removeAt(component.items, 1); ListWrapper.removeAt(view.context.items, 1);
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('1;'); expect(DOM.getText(view.nodes[0])).toEqual('1;');
async.done(); async.done();
}); });
})); }));
it('should reflect moved elements', inject([AsyncTestCompleter], (async) => { it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate(TEMPLATE).then((pv) => { tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
ListWrapper.removeAt(component.items, 0); ListWrapper.removeAt(view.context.items, 0);
ListWrapper.push(component.items, 1); ListWrapper.push(view.context.items, 1);
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('2;1;'); expect(DOM.getText(view.nodes[0])).toEqual('2;1;');
async.done(); async.done();
}); });
})); }));
it('should reflect a mix of all changes (additions/removals/moves)', inject([AsyncTestCompleter], (async) => { it('should reflect a mix of all changes (additions/removals/moves)',
compileWithTemplate(TEMPLATE).then((pv) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
createView(pv); tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
component.items = [0, 1, 2, 3, 4, 5]; view.context.items = [0, 1, 2, 3, 4, 5];
cd.detectChanges(); view.detectChanges();
component.items = [6, 2, 7, 0, 4, 8]; view.context.items = [6, 2, 7, 0, 4, 8];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('6;2;7;0;4;8;'); expect(DOM.getText(view.nodes[0])).toEqual('6;2;7;0;4;8;');
async.done(); async.done();
}); });
})); }));
it('should iterate over an array of objects', inject([AsyncTestCompleter], (async) => { it('should iterate over an array of objects', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate('<ul><li template="for #item of items">{{item["name"]}};</li></ul>').then((pv) => { var template = '<ul><li template="for #item of items">{{item["name"]}};</li></ul>';
createView(pv);
tb.createView(TestComponent, {html: template}).then((view) => {
// INIT // INIT
component.items = [{'name': 'misko'}, {'name':'shyam'}]; view.context.items = [{'name': 'misko'}, {'name':'shyam'}];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;'); expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;');
// GROW // GROW
ListWrapper.push(component.items, {'name': 'adam'}); ListWrapper.push(view.context.items, {'name': 'adam'});
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;adam;'); expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;adam;');
// SHRINK // SHRINK
ListWrapper.removeAt(component.items, 2); ListWrapper.removeAt(view.context.items, 2);
ListWrapper.removeAt(component.items, 0); ListWrapper.removeAt(view.context.items, 0);
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('shyam;'); expect(DOM.getText(view.nodes[0])).toEqual('shyam;');
async.done(); async.done();
}); });
})); }));
it('should gracefully handle nulls', inject([AsyncTestCompleter], (async) => { it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate('<ul><li template="for #item of null">{{item}};</li></ul>').then((pv) => { var template = '<ul><li template="for #item of null">{{item}};</li></ul>';
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
async.done(); async.done();
}); });
})); }));
it('should gracefully handle ref changing to null and back', inject([AsyncTestCompleter], (async) => { it('should gracefully handle ref changing to null and back',
compileWithTemplate(TEMPLATE).then((pv) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
createView(pv); tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('1;2;'); expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
component.items = null; view.context.items = null;
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
component.items = [1, 2, 3]; view.context.items = [1, 2, 3];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;'); expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;');
async.done(); async.done();
}); });
})); }));
it('should throw on ref changing to string', inject([AsyncTestCompleter], (async) => { it('should throw on ref changing to string', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate(TEMPLATE).then((pv) => { tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('1;2;'); expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
component.items = 'whaaa'; view.context.items = 'whaaa';
expect(() => cd.detectChanges()).toThrowError(); expect(() => view.detectChanges()).toThrowError();
async.done(); async.done();
}); });
})); }));
it('should works with duplicates', inject([AsyncTestCompleter], (async) => { it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate(TEMPLATE).then((pv) => { tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
createView(pv);
var a = new Foo(); var a = new Foo();
component.items = [a, a]; view.context.items = [a, a];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('foo;foo;'); expect(DOM.getText(view.nodes[0])).toEqual('foo;foo;');
async.done(); async.done();
}); });
})); }));
it('should repeat over nested arrays', inject([AsyncTestCompleter], (async) => { it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate( var template =
'<div>'+ '<div>'+
'<div template="for #item of items">' + '<div template="for #item of items">' +
'<div template="for #subitem of item">' + '<div template="for #subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div>|'+ '</div>|'+
'</div>'+ '</div>'+
'</div>' '</div>';
).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
component.items = [['a', 'b'], ['c']]; view.context.items = [['a', 'b'], ['c']];
cd.detectChanges(); view.detectChanges();
cd.detectChanges(); view.detectChanges();
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;|c-1;|'); expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;|c-1;|');
component.items = [['e'], ['f', 'g']]; view.context.items = [['e'], ['f', 'g']];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('e-1;|f-2;g-2;|'); expect(DOM.getText(view.nodes[0])).toEqual('e-1;|f-2;g-2;|');
async.done(); async.done();
}); });
})); }));
it('should repeat over nested arrays with no intermediate element', inject([AsyncTestCompleter], (async) => { it('should repeat over nested arrays with no intermediate element',
compileWithTemplate( inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template =
'<div><template [for] #item [of]="items">' + '<div><template [for] #item [of]="items">' +
'<div template="for #subitem of item">' + '<div template="for #subitem of item">' +
'{{subitem}}-{{item.length}};' + '{{subitem}}-{{item.length}};' +
'</div></template></div>' '</div></template></div>';
).then((pv) => {
createView(pv);
component.items = [['a', 'b'], ['c']]; tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.context.items = [['a', 'b'], ['c']];
view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;c-1;'); expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;c-1;');
component.items = [['e'], ['f', 'g']]; view.context.items = [['e'], ['f', 'g']];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('e-1;f-2;g-2;'); expect(DOM.getText(view.nodes[0])).toEqual('e-1;f-2;g-2;');
async.done(); async.done();
}); });
})); }));
it('should display indices correctly', inject([AsyncTestCompleter], (async) => { it('should display indices correctly',
var INDEX_TEMPLATE = inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template =
'<div><copy-me template="for: var item of items; var i=index">{{i.toString()}}</copy-me></div>'; '<div><copy-me template="for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
compileWithTemplate(INDEX_TEMPLATE).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
component.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; view.context.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('0123456789'); expect(DOM.getText(view.nodes[0])).toEqual('0123456789');
component.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0]; view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('0123456789'); expect(DOM.getText(view.nodes[0])).toEqual('0123456789');
async.done(); async.done();
}); });
@ -269,6 +231,7 @@ class Foo {
} }
@Component({selector: 'test-cmp'}) @Component({selector: 'test-cmp'})
@Template({directives: [For]})
class TestComponent { class TestComponent {
items: any; items: any;
constructor() { constructor() {

170
modules/angular2/test/directives/if_spec.js vendored
View File

@ -14,99 +14,53 @@ import {
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {Injector} from 'angular2/di'; import {TestBed} from 'angular2/src/test_lib/test_bed';
import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {Component} from 'angular2/src/core/annotations/annotations'; import {Component} from 'angular2/src/core/annotations/annotations';
import {Template} from 'angular2/src/core/annotations/template'; import {Template} from 'angular2/src/core/annotations/template';
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
import {If} from 'angular2/src/directives/if'; import {If} from 'angular2/src/directives/if';
export function main() { export function main() {
describe('if directive', () => { describe('if directive', () => {
var view, cd, compiler, component, tplResolver; it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
beforeEach(() => {
var urlResolver = new UrlResolver();
tplResolver = new MockTemplateResolver();
compiler = new Compiler(
dynamicChangeDetection,
new TemplateLoader(null, null),
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
tplResolver,
new ComponentUrlMapper(),
urlResolver
);
});
function createView(pv) {
component = new TestComponent();
view = pv.instantiate(null, null);
view.hydrate(new Injector([]), null, null, component, null);
cd = view.changeDetector;
}
function compileWithTemplate(html) {
var template = new Template({
inline: html,
directives: [If]
});
tplResolver.setTemplate(TestComponent, template);
return compiler.compile(TestComponent);
}
it('should work in a template attribute', inject([AsyncTestCompleter], (async) => {
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello'); expect(DOM.getText(view.nodes[0])).toEqual('hello');
async.done(); async.done();
}); });
})); }));
it('should work in a template element', inject([AsyncTestCompleter], (async) => { it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate('<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => { var html = '<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
createView(pv);
cd.detectChanges();
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello2'); expect(DOM.getText(view.nodes[0])).toEqual('hello2');
async.done(); async.done();
}); });
})); }));
it('should toggle node when condition changes', inject([AsyncTestCompleter], (async) => { it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => { var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
createView(pv);
component.booleanCondition = false; tb.createView(TestComponent, {html: html}).then((view) => {
cd.detectChanges(); view.context.booleanCondition = false;
view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
view.context.booleanCondition = true;
component.booleanCondition = true; view.detectChanges();
cd.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello'); expect(DOM.getText(view.nodes[0])).toEqual('hello');
component.booleanCondition = false; view.context.booleanCondition = false;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
@ -114,32 +68,32 @@ export function main() {
}); });
})); }));
it('should handle nested if correctly', inject([AsyncTestCompleter], (async) => { it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
compileWithTemplate('<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>').then((pv) => { var html = '<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>';
createView(pv);
component.booleanCondition = false; tb.createView(TestComponent, {html: html}).then((view) => {
cd.detectChanges(); view.context.booleanCondition = false;
view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
component.booleanCondition = true; view.context.booleanCondition = true;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello'); expect(DOM.getText(view.nodes[0])).toEqual('hello');
component.nestedBooleanCondition = false; view.context.nestedBooleanCondition = false;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
component.nestedBooleanCondition = true; view.context.nestedBooleanCondition = true;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello'); expect(DOM.getText(view.nodes[0])).toEqual('hello');
component.booleanCondition = false; view.context.booleanCondition = false;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
@ -147,28 +101,27 @@ export function main() {
}); });
})); }));
it('should update several nodes with if', inject([AsyncTestCompleter], (async) => { it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var templateString = var html =
'<div>' + '<div>' +
'<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' + '<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' + '<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' + '<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>'; '</div>';
compileWithTemplate(templateString).then((pv) => {
createView(pv);
cd.detectChanges(); tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(3); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(3);
expect(DOM.getText(view.nodes[0])).toEqual('helloNumberhelloStringhelloFunction'); expect(DOM.getText(view.nodes[0])).toEqual('helloNumberhelloStringhelloFunction');
component.numberCondition = 0; view.context.numberCondition = 0;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('helloString'); expect(DOM.getText(view.nodes[0])).toEqual('helloString');
component.numberCondition = 1; view.context.numberCondition = 1;
component.stringCondition = "bar"; view.context.stringCondition = "bar";
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('helloNumber'); expect(DOM.getText(view.nodes[0])).toEqual('helloNumber');
async.done(); async.done();
@ -176,17 +129,18 @@ 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)', inject([AsyncTestCompleter], (async) => { it('should not add the element twice if the condition goes from true to true (JS)',
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
createView(pv); var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
cd.detectChanges(); tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello'); expect(DOM.getText(view.nodes[0])).toEqual('hello');
component.numberCondition = 2; view.context.numberCondition = 2;
cd.detectChanges(); view.detectChanges();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
expect(DOM.getText(view.nodes[0])).toEqual('hello'); expect(DOM.getText(view.nodes[0])).toEqual('hello');
@ -194,25 +148,30 @@ export function main() {
}); });
})); }));
it('should not recreate the element if the condition goes from true to true (JS)', inject([AsyncTestCompleter], (async) => { it('should not recreate the element if the condition goes from true to true (JS)',
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => { inject([TestBed, AsyncTestCompleter], (tb, async) => {
createView(pv); var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
cd.detectChanges(); tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
DOM.addClass(view.nodes[0].childNodes[1], "foo"); DOM.addClass(view.nodes[0].childNodes[1], "foo");
component.numberCondition = 2; view.context.numberCondition = 2;
cd.detectChanges(); view.detectChanges();
expect(DOM.hasClass(view.nodes[0].childNodes[1], "foo")).toBe(true); expect(DOM.hasClass(view.nodes[0].childNodes[1], "foo")).toBe(true);
async.done(); async.done();
}); });
})); }));
} else { }
it('should not create the element if the condition is not a boolean (DART)', inject([AsyncTestCompleter], (async) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => { if (IS_DARTIUM) {
createView(pv); it('should not create the element if the condition is not a boolean (DART)',
expect(function(){cd.detectChanges();}).toThrowError(); inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html}).then((view) => {
expect(() => view.detectChanges()).toThrowError();
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0); expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
async.done(); async.done();
@ -224,6 +183,7 @@ export function main() {
} }
@Component({selector: 'test-cmp'}) @Component({selector: 'test-cmp'})
@Template({directives: [If]})
class TestComponent { class TestComponent {
booleanCondition: boolean; booleanCondition: boolean;
nestedBooleanCondition: boolean; nestedBooleanCondition: boolean;

70
modules/angular2/test/directives/non_bindable_spec.js vendored
View File

@ -11,86 +11,41 @@ import {
xit, xit,
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {Injector} from 'angular2/di';
import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {Decorator, Component} from 'angular2/src/core/annotations/annotations'; import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
import {Template} from 'angular2/src/core/annotations/template'; import {Template} from 'angular2/src/core/annotations/template';
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
import {NgElement} from 'angular2/src/core/dom/element'; import {NgElement} from 'angular2/src/core/dom/element';
import {NonBindable} from 'angular2/src/directives/non_bindable'; import {NonBindable} from 'angular2/src/directives/non_bindable';
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
import {TestBed} from 'angular2/src/test_lib/test_bed';
export function main() { export function main() {
describe('non-bindable', () => { describe('non-bindable', () => {
var view, cd, compiler, component, tplResolver; it('should not interpolate children', inject([TestBed, AsyncTestCompleter], (tb, async) => {
beforeEach(() => {
var urlResolver = new UrlResolver();
tplResolver = new MockTemplateResolver();
compiler = new Compiler(
dynamicChangeDetection,
new TemplateLoader(null, null),
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
tplResolver,
new ComponentUrlMapper(),
urlResolver
);
});
function createView(pv) {
component = new TestComponent();
view = pv.instantiate(null, null);
view.hydrate(new Injector([]), null, null, component, null);
cd = view.changeDetector;
}
function compileWithTemplate(html) {
var template = new Template({
inline: html,
directives: [NonBindable, TestDecorator]
});
tplResolver.setTemplate(TestComponent, template);
return compiler.compile(TestComponent);
}
it('should not interpolate children', inject([AsyncTestCompleter], (async) => {
var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>'; var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => { tb.createView(TestComponent, {html: template}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('foo{{text}}'); expect(DOM.getText(view.nodes[0])).toEqual('foo{{text}}');
async.done(); async.done();
}); });
})); }));
it('should ignore directives on child nodes', inject([AsyncTestCompleter], (async) => { it('should ignore directives on child nodes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div non-bindable><span id=child test-dec>{{text}}</span></div>'; var template = '<div non-bindable><span id=child test-dec>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => { tb.createView(TestComponent, {html: template}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
var span = DOM.querySelector(view.nodes[0], '#child'); var span = DOM.querySelector(view.nodes[0], '#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', inject([AsyncTestCompleter], (async) => { it('should trigger directives on the same node', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div><span id=child non-bindable test-dec>{{text}}</span></div>'; var template = '<div><span id=child non-bindable test-dec>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => { tb.createView(TestComponent, {html: template}).then((view) => {
createView(pv); view.detectChanges();
cd.detectChanges();
var span = DOM.querySelector(view.nodes[0], '#child'); var span = DOM.querySelector(view.nodes[0], '#child');
expect(DOM.hasClass(span, 'compiled')).toBeTruthy(); expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
async.done(); async.done();
@ -100,6 +55,7 @@ export function main() {
} }
@Component({selector: 'test-cmp'}) @Component({selector: 'test-cmp'})
@Template({directives: [NonBindable, TestDecorator]})
class TestComponent { class TestComponent {
text: string; text: string;
constructor() { constructor() {

132
modules/angular2/test/directives/switch_spec.js vendored
View File

@ -11,105 +11,66 @@ import {
xit, xit,
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {Injector} from 'angular2/di';
import {Lexer, Parser, dynamicChangeDetection} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {Component} from 'angular2/src/core/annotations/annotations'; import {Component} from 'angular2/src/core/annotations/annotations';
import {Template} from 'angular2/src/core/annotations/template'; import {Template} from 'angular2/src/core/annotations/template';
import {TemplateLoader} from 'angular2/core';
import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch'; import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
import {TestBed} from 'angular2/src/test_lib/test_bed';
export function main() { export function main() {
describe('switch', () => { describe('switch', () => {
var view, cd, compiler, component, tplResolver;
beforeEach(() => {
var urlResolver = new UrlResolver();
tplResolver = new MockTemplateResolver();
compiler = new Compiler(
dynamicChangeDetection,
new TemplateLoader(null, null),
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
tplResolver,
new ComponentUrlMapper(),
urlResolver
);
});
function createView(pv) {
component = new TestComponent();
view = pv.instantiate(null, null);
view.hydrate(new Injector([]), null, null, component, null);
cd = view.changeDetector;
}
function compileWithTemplate(html) {
var template = new Template({
inline: html,
directives: [Switch, SwitchWhen, SwitchDefault]
});
tplResolver.setTemplate(TestComponent, template);
return compiler.compile(TestComponent);
}
describe('switch value changes', () => { describe('switch value changes', () => {
it('should switch amongst when values', inject([AsyncTestCompleter], (async) => { it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a</li></template>' + '<template [switch-when]="\'a\'"><li>when a</li></template>' +
'<template [switch-when]="\'b\'"><li>when b</li></template>' + '<template [switch-when]="\'b\'"><li>when b</li></template>' +
'</ul></div>'; '</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual(''); expect(DOM.getText(view.nodes[0])).toEqual('');
component.switchValue = 'a'; view.context.switchValue = 'a';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when a'); expect(DOM.getText(view.nodes[0])).toEqual('when a');
component.switchValue = 'b'; view.context.switchValue = 'b';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when b'); expect(DOM.getText(view.nodes[0])).toEqual('when b');
async.done(); async.done();
}); });
})); }));
it('should switch amongst when values with fallback to default', inject([AsyncTestCompleter], (async) => { it('should switch amongst when values with fallback to default',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [switch]="switchValue">' +
'<li template="switch-when \'a\'">when a</li>' + '<li template="switch-when \'a\'">when a</li>' +
'<li template="switch-default">when default</li>' + '<li template="switch-default">when default</li>' +
'</ul></div>'; '</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
// expect(DOM.getText(view.nodes[0])).toEqual('when default');
component.switchValue = 'a'; tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when default');
view.context.switchValue = 'a';
view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when a'); expect(DOM.getText(view.nodes[0])).toEqual('when a');
// component.switchValue = 'b'; view.context.switchValue = 'b';
// cd.detectChanges(); view.detectChanges();
// expect(DOM.getText(view.nodes[0])).toEqual('when default'); expect(DOM.getText(view.nodes[0])).toEqual('when default');
async.done(); async.done();
}); });
})); }));
it('should support multiple whens with the same value', inject([AsyncTestCompleter], (async) => { it('should support multiple whens with the same value',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a1;</li></template>' + '<template [switch-when]="\'a\'"><li>when a1;</li></template>' +
@ -119,17 +80,17 @@ export function main() {
'<template [switch-default]><li>when default1;</li></template>' + '<template [switch-default]><li>when default1;</li></template>' +
'<template [switch-default]><li>when default2;</li></template>' + '<template [switch-default]><li>when default2;</li></template>' +
'</ul></div>'; '</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv); tb.createView(TestComponent, {html: template}).then((view) => {
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when default1;when default2;'); expect(DOM.getText(view.nodes[0])).toEqual('when default1;when default2;');
component.switchValue = 'a'; view.context.switchValue = 'a';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when a1;when a2;'); expect(DOM.getText(view.nodes[0])).toEqual('when a1;when a2;');
component.switchValue = 'b'; view.context.switchValue = 'b';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when b1;when b2;'); expect(DOM.getText(view.nodes[0])).toEqual('when b1;when b2;');
async.done(); async.done();
@ -138,36 +99,36 @@ export function main() {
}); });
describe('when values changes', () => { describe('when values changes', () => {
it('should switch amongst when values', inject([AsyncTestCompleter], (async) => { it('should switch amongst when values',
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var template = '<div>' + var template = '<div>' +
'<ul [switch]="switchValue">' + '<ul [switch]="switchValue">' +
'<template [switch-when]="when1"><li>when 1;</li></template>' + '<template [switch-when]="when1"><li>when 1;</li></template>' +
'<template [switch-when]="when2"><li>when 2;</li></template>' + '<template [switch-when]="when2"><li>when 2;</li></template>' +
'<template [switch-default]><li>when default;</li></template>' + '<template [switch-default]><li>when default;</li></template>' +
'</ul></div>'; '</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
component.when1 = 'a'; tb.createView(TestComponent, {html: template}).then((view) => {
component.when2 = 'b'; view.context.when1 = 'a';
component.switchValue = 'a'; view.context.when2 = 'b';
cd.detectChanges(); view.context.switchValue = 'a';
view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when 1;'); expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
component.switchValue = 'b'; view.context.switchValue = 'b';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when 2;'); expect(DOM.getText(view.nodes[0])).toEqual('when 2;');
component.switchValue = 'c'; view.context.switchValue = 'c';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when default;'); expect(DOM.getText(view.nodes[0])).toEqual('when default;');
component.when1 = 'c'; view.context.when1 = 'c';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when 1;'); expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
component.when1 = 'd'; view.context.when1 = 'd';
cd.detectChanges(); view.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('when default;'); expect(DOM.getText(view.nodes[0])).toEqual('when default;');
async.done(); async.done();
@ -178,6 +139,7 @@ export function main() {
} }
@Component({selector: 'test-cmp'}) @Component({selector: 'test-cmp'})
@Template({directives: [Switch, SwitchWhen, SwitchDefault]})
class TestComponent { class TestComponent {
switchValue: any; switchValue: any;
when1: any; when1: any;

199
modules/angular2/test/forms/integration_spec.js vendored
View File

@ -10,70 +10,25 @@ import {
iit, iit,
inject, inject,
it, it,
queryView,
xit xit
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {DOM} from 'angular2/src/dom/dom_adapter'; import {DOM} from 'angular2/src/dom/dom_adapter';
import {Inject, Injectable} from 'angular2/di'; import {Inject} from 'angular2/di';
import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
import {Injector} from 'angular2/di';
import {Component, Decorator, Template, PropertySetter} from 'angular2/angular2'; import {Component, Decorator, Template, PropertySetter} from 'angular2/angular2';
import {TestBed} from 'angular2/src/test_lib/test_bed';
import {ControlGroupDirective, ControlDirective, Control, ControlGroup, OptionalControl, import {ControlGroupDirective, ControlDirective, Control, ControlGroup, OptionalControl,
ControlValueAccessor, RequiredValidatorDirective, CheckboxControlValueAccessor, ControlValueAccessor, RequiredValidatorDirective, CheckboxControlValueAccessor,
DefaultValueAccessor, Validators} from 'angular2/forms'; DefaultValueAccessor, Validators} from 'angular2/forms';
export function main() { export function main() {
function detectChanges(view) {
view.changeDetector.detectChanges();
}
function compile(componentType, template, context, callback) {
var tplResolver = new MockTemplateResolver();
var urlResolver = new UrlResolver();
var compiler = new Compiler(dynamicChangeDetection,
new TemplateLoader(null, null),
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy(new StyleUrlResolver(urlResolver)),
tplResolver,
new ComponentUrlMapper(),
urlResolver
);
tplResolver.setTemplate(componentType, new Template({
inline: template,
directives: [ControlGroupDirective, ControlDirective, WrappedValue, RequiredValidatorDirective,
CheckboxControlValueAccessor, DefaultValueAccessor]
}));
compiler.compile(componentType).then((pv) => {
var eventManager = new EventManager([new DomEventsPlugin()], new FakeVmTurnZone());
var view = pv.instantiate(null, eventManager);
view.hydrate(new Injector([]), null, null, context, null);
detectChanges(view);
callback(view);
});
}
if (DOM.supportsDOMEvents()) { if (DOM.supportsDOMEvents()) {
describe("integration tests", () => { describe("integration tests", () => {
it("should initialize DOM elements with the given form object", inject([AsyncTestCompleter], (async) => { it("should initialize DOM elements with the given form object",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({ var ctx = new MyComp(new ControlGroup({
"login": new Control("loginValue") "login": new Control("loginValue")
})); }));
@ -82,14 +37,16 @@ export function main() {
<input type="text" control="login"> <input type="text" control="login">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input");
expect(input.value).toEqual("loginValue"); expect(input.value).toEqual("loginValue");
async.done(); async.done();
}); });
})); }));
it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => { it("should update the control group values on DOM change",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var form = new ControlGroup({ var form = new ControlGroup({
"login": new Control("oldValue") "login": new Control("oldValue")
}); });
@ -99,8 +56,9 @@ export function main() {
<input type="text" control="login"> <input type="text" control="login">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input");
input.value = "updatedValue"; input.value = "updatedValue";
dispatchEvent(input, "change"); dispatchEvent(input, "change");
@ -110,14 +68,15 @@ export function main() {
}); });
})); }));
it("should work with single controls", inject([AsyncTestCompleter], (async) => { it("should work with single controls", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var control = new Control("loginValue"); var control = new Control("loginValue");
var ctx = new MyComp(control); var ctx = new MyComp(control);
var t = `<div><input type="text" [control]="form"></div>`; var t = `<div><input type="text" [control]="form"></div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.value).toEqual("loginValue"); expect(input.value).toEqual("loginValue");
input.value = "updatedValue"; input.value = "updatedValue";
@ -128,7 +87,8 @@ export function main() {
}); });
})); }));
it("should update DOM elements when rebinding the control group", inject([AsyncTestCompleter], (async) => { it("should update DOM elements when rebinding the control group",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var form = new ControlGroup({ var form = new ControlGroup({
"login": new Control("oldValue") "login": new Control("oldValue")
}); });
@ -138,19 +98,21 @@ export function main() {
<input type="text" control="login"> <input type="text" control="login">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
view.detectChanges();
ctx.form = new ControlGroup({ ctx.form = new ControlGroup({
"login": new Control("newValue") "login": new Control("newValue")
}); });
detectChanges(view); view.detectChanges();
var input = queryView(view, "input") var input = view.querySelector("input")
expect(input.value).toEqual("newValue"); expect(input.value).toEqual("newValue");
async.done(); async.done();
}); });
})); }));
it("should update DOM element when rebinding the control name", inject([AsyncTestCompleter], (async) => { it("should update DOM element when rebinding the control name",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({ var ctx = new MyComp(new ControlGroup({
"one": new Control("one"), "one": new Control("one"),
"two": new Control("two") "two": new Control("two")
@ -160,12 +122,13 @@ export function main() {
<input type="text" [control]="name"> <input type="text" [control]="name">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.value).toEqual("one"); expect(input.value).toEqual("one");
ctx.name = "two"; ctx.name = "two";
detectChanges(view); view.detectChanges();
expect(input.value).toEqual("two"); expect(input.value).toEqual("two");
async.done(); async.done();
@ -173,15 +136,16 @@ export function main() {
})); }));
describe("different control types", () => { describe("different control types", () => {
it("should support <input type=text>", inject([AsyncTestCompleter], (async) => { it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({"text": new Control("old")})); var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
var t = `<div [control-group]="form"> var t = `<div [control-group]="form">
<input type="text" control="text"> <input type="text" control="text">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.value).toEqual("old"); expect(input.value).toEqual("old");
input.value = "new"; input.value = "new";
@ -192,15 +156,16 @@ export function main() {
}); });
})); }));
it("should support <input> without type", inject([AsyncTestCompleter], (async) => { it("should support <input> without type", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({"text": new Control("old")})); var ctx = new MyComp(new ControlGroup({"text": new Control("old")}));
var t = `<div [control-group]="form"> var t = `<div [control-group]="form">
<input control="text"> <input control="text">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.value).toEqual("old"); expect(input.value).toEqual("old");
input.value = "new"; input.value = "new";
@ -211,15 +176,16 @@ export function main() {
}); });
})); }));
it("should support <textarea>", inject([AsyncTestCompleter], (async) => { it("should support <textarea>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({"text": new Control('old')})); var ctx = new MyComp(new ControlGroup({"text": new Control('old')}));
var t = `<div [control-group]="form"> var t = `<div [control-group]="form">
<textarea control="text"></textarea> <textarea control="text"></textarea>
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var textarea = queryView(view, "textarea") view.detectChanges();
var textarea = view.querySelector("textarea")
expect(textarea.value).toEqual("old"); expect(textarea.value).toEqual("old");
textarea.value = "new"; textarea.value = "new";
@ -230,15 +196,16 @@ export function main() {
}); });
})); }));
it("should support <type=checkbox>", inject([AsyncTestCompleter], (async) => { it("should support <type=checkbox>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)})); var ctx = new MyComp(new ControlGroup({"checkbox": new Control(true)}));
var t = `<div [control-group]="form"> var t = `<div [control-group]="form">
<input type="checkbox" control="checkbox"> <input type="checkbox" control="checkbox">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.checked).toBe(true); expect(input.checked).toBe(true);
input.checked = false; input.checked = false;
@ -249,7 +216,7 @@ export function main() {
}); });
})); }));
it("should support <select>", inject([AsyncTestCompleter], (async) => { it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({"city": new Control("SF")})); var ctx = new MyComp(new ControlGroup({"city": new Control("SF")}));
var t = `<div [control-group]="form"> var t = `<div [control-group]="form">
@ -259,9 +226,10 @@ export function main() {
</select> </select>
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var select = queryView(view, "select") view.detectChanges();
var sfOption = queryView(view, "option") var select = view.querySelector("select")
var sfOption = view.querySelector("option")
expect(select.value).toEqual('SF'); expect(select.value).toEqual('SF');
expect(sfOption.selected).toBe(true); expect(sfOption.selected).toBe(true);
@ -274,15 +242,16 @@ export function main() {
}); });
})); }));
it("should support custom value accessors", inject([AsyncTestCompleter], (async) => { it("should support custom value accessors", inject([TestBed, AsyncTestCompleter], (tb, async) => {
var ctx = new MyComp(new ControlGroup({"name": new Control("aa")})); var ctx = new MyComp(new ControlGroup({"name": new Control("aa")}));
var t = `<div [control-group]="form"> var t = `<div [control-group]="form">
<input type="text" control="name" wrapped-value> <input type="text" control="name" wrapped-value>
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.value).toEqual("!aa!"); expect(input.value).toEqual("!aa!");
input.value = "!bb!"; input.value = "!bb!";
@ -295,7 +264,8 @@ export function main() {
}); });
describe("validations", () => { describe("validations", () => {
it("should use validators defined in html", inject([AsyncTestCompleter], (async) => { it("should use validators defined in html",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var form = new ControlGroup({"login": new Control("aa")}); var form = new ControlGroup({"login": new Control("aa")});
var ctx = new MyComp(form); var ctx = new MyComp(form);
@ -303,10 +273,11 @@ export function main() {
<input type="text" control="login" required> <input type="text" control="login" required>
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
view.detectChanges();
expect(form.valid).toEqual(true); expect(form.valid).toEqual(true);
var input = queryView(view, "input"); var input = view.querySelector("input");
input.value = ""; input.value = "";
dispatchEvent(input, "change"); dispatchEvent(input, "change");
@ -316,7 +287,8 @@ export function main() {
}); });
})); }));
it("should use validators defined in the model", inject([AsyncTestCompleter], (async) => { it("should use validators defined in the model",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var form = new ControlGroup({"login": new Control("aa", Validators.required)}); var form = new ControlGroup({"login": new Control("aa", Validators.required)});
var ctx = new MyComp(form); var ctx = new MyComp(form);
@ -324,10 +296,11 @@ export function main() {
<input type="text" control="login"> <input type="text" control="login">
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
view.detectChanges();
expect(form.valid).toEqual(true); expect(form.valid).toEqual(true);
var input = queryView(view, "input"); var input = view.querySelector("input");
input.value = ""; input.value = "";
dispatchEvent(input, "change"); dispatchEvent(input, "change");
@ -339,7 +312,8 @@ export function main() {
}); });
describe("nested forms", () => { describe("nested forms", () => {
it("should init DOM with the given form object", inject([AsyncTestCompleter], (async) => { it("should init DOM with the given form object",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var form = new ControlGroup({ var form = new ControlGroup({
"nested": new ControlGroup({ "nested": new ControlGroup({
"login": new Control("value") "login": new Control("value")
@ -353,14 +327,16 @@ export function main() {
</div> </div>
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
expect(input.value).toEqual("value"); expect(input.value).toEqual("value");
async.done(); async.done();
}); });
})); }));
it("should update the control group values on DOM change", inject([AsyncTestCompleter], (async) => { it("should update the control group values on DOM change",
inject([TestBed, AsyncTestCompleter], (tb, async) => {
var form = new ControlGroup({ var form = new ControlGroup({
"nested": new ControlGroup({ "nested": new ControlGroup({
"login": new Control("value") "login": new Control("value")
@ -374,8 +350,9 @@ export function main() {
</div> </div>
</div>`; </div>`;
compile(MyComp, t, ctx, (view) => { tb.createView(MyComp, {context: ctx, html: t}).then((view) => {
var input = queryView(view, "input") view.detectChanges();
var input = view.querySelector("input")
input.value = "updatedValue"; input.value = "updatedValue";
dispatchEvent(input, "change"); dispatchEvent(input, "change");
@ -389,9 +366,14 @@ export function main() {
} }
} }
@Component({ @Component({selector: "my-comp"})
selector: "my-comp" @Template({directives: [
}) ControlGroupDirective,
ControlDirective,
WrappedValue,
RequiredValidatorDirective,
CheckboxControlValueAccessor,
DefaultValueAccessor]})
class MyComp { class MyComp {
form:any; form:any;
name:string; name:string;
@ -402,7 +384,6 @@ class MyComp {
} }
} }
@Decorator({ @Decorator({
selector:'[wrapped-value]', selector:'[wrapped-value]',
events: { events: {
@ -426,17 +407,3 @@ class WrappedValue {
this.onChange(value.substring(1, value.length - 1)); this.onChange(value.substring(1, value.length - 1));
} }
} }
class FakeVmTurnZone extends VmTurnZone {
constructor() {
super({enableLongStackTrace: false});
}
run(fn) {
fn();
}
runOutsideAngular(fn) {
fn();
}
}