test: convert to using TestBed
This commit is contained in:
Victor Berchet
131
modules/angular2/test/directives/class_spec.js
vendored
131
modules/angular2/test/directives/class_spec.js
vendored
@ -15,151 +15,123 @@ import {
|
||||
|
||||
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 {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';
|
||||
|
||||
export function main() {
|
||||
describe('binding to CSS class list', () => {
|
||||
|
||||
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: [CSSClass]
|
||||
});
|
||||
tplResolver.setTemplate(TestComponent, template);
|
||||
return compiler.compile(TestComponent);
|
||||
}
|
||||
|
||||
it('should add classes specified in an object literal', inject([AsyncTestCompleter], (async) => {
|
||||
it('should add classes specified in an object literal',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
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');
|
||||
|
||||
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>';
|
||||
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');
|
||||
|
||||
component.condition = false;
|
||||
cd.detectChanges();
|
||||
view.context.condition = false;
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('ng-binding bar');
|
||||
|
||||
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>';
|
||||
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');
|
||||
|
||||
StringMapWrapper.set(component.expr, 'bar', true);
|
||||
cd.detectChanges();
|
||||
StringMapWrapper.set(view.context.expr, 'bar', true);
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('ng-binding foo bar');
|
||||
|
||||
StringMapWrapper.set(component.expr, 'baz', true);
|
||||
cd.detectChanges();
|
||||
StringMapWrapper.set(view.context.expr, 'baz', true);
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('ng-binding foo bar baz');
|
||||
|
||||
StringMapWrapper.delete(component.expr, 'bar');
|
||||
cd.detectChanges();
|
||||
StringMapWrapper.delete(view.context.expr, 'bar');
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('ng-binding foo baz');
|
||||
|
||||
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>';
|
||||
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');
|
||||
|
||||
component.expr = null;
|
||||
cd.detectChanges();
|
||||
view.context.expr = null;
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('ng-binding foo');
|
||||
|
||||
component.expr = {'foo': false, 'bar': true};
|
||||
cd.detectChanges();
|
||||
view.context.expr = {'foo': false, 'bar': true};
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('ng-binding bar');
|
||||
|
||||
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>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
|
||||
StringMapWrapper.set(component.expr, 'bar', true);
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
StringMapWrapper.set(view.context.expr, 'bar', true);
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('init foo ng-binding bar');
|
||||
|
||||
StringMapWrapper.set(component.expr, 'foo', false);
|
||||
cd.detectChanges();
|
||||
StringMapWrapper.set(view.context.expr, 'foo', false);
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('init ng-binding bar');
|
||||
|
||||
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>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('init foo ng-binding baz');
|
||||
|
||||
StringMapWrapper.set(component.expr, 'bar', true);
|
||||
cd.detectChanges();
|
||||
StringMapWrapper.set(view.context.expr, 'bar', true);
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('init foo ng-binding baz bar');
|
||||
|
||||
StringMapWrapper.set(component.expr, 'foo', false);
|
||||
cd.detectChanges();
|
||||
StringMapWrapper.set(view.context.expr, 'foo', false);
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('init ng-binding baz bar');
|
||||
|
||||
component.condition = false;
|
||||
cd.detectChanges();
|
||||
view.context.condition = false;
|
||||
view.detectChanges();
|
||||
expect(view.nodes[0].className).toEqual('init ng-binding bar');
|
||||
|
||||
async.done();
|
||||
@ -169,6 +141,7 @@ export function main() {
|
||||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@Template({directives: [CSSClass]})
|
||||
class TestComponent {
|
||||
condition:boolean;
|
||||
expr;
|
||||
|
||||
219
modules/angular2/test/directives/for_spec.js
vendored
219
modules/angular2/test/directives/for_spec.js
vendored
@ -15,245 +15,207 @@ import {
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
|
||||
import {Injector} from 'angular2/di';
|
||||
|
||||
import {Compiler} from 'angular2/src/core/compiler/compiler';
|
||||
import {TemplateResolver} from 'angular2/src/core/compiler/template_resolver';
|
||||
|
||||
import {Component} from 'angular2/src/core/annotations/annotations';
|
||||
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 {bind} from 'angular2/di';
|
||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||
|
||||
|
||||
export function main() {
|
||||
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>';
|
||||
|
||||
it('should reflect initial elements', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
|
||||
it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should reflect added elements', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
||||
ListWrapper.push(component.items, 3);
|
||||
cd.detectChanges();
|
||||
ListWrapper.push(view.context.items, 3);
|
||||
view.detectChanges();
|
||||
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should reflect removed elements', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
||||
ListWrapper.removeAt(component.items, 1);
|
||||
cd.detectChanges();
|
||||
ListWrapper.removeAt(view.context.items, 1);
|
||||
view.detectChanges();
|
||||
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('1;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should reflect moved elements', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.detectChanges();
|
||||
|
||||
ListWrapper.removeAt(component.items, 0);
|
||||
ListWrapper.push(component.items, 1);
|
||||
cd.detectChanges();
|
||||
ListWrapper.removeAt(view.context.items, 0);
|
||||
ListWrapper.push(view.context.items, 1);
|
||||
view.detectChanges();
|
||||
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('2;1;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should reflect a mix of all changes (additions/removals/moves)', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
component.items = [0, 1, 2, 3, 4, 5];
|
||||
cd.detectChanges();
|
||||
it('should reflect a mix of all changes (additions/removals/moves)',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.context.items = [0, 1, 2, 3, 4, 5];
|
||||
view.detectChanges();
|
||||
|
||||
component.items = [6, 2, 7, 0, 4, 8];
|
||||
cd.detectChanges();
|
||||
view.context.items = [6, 2, 7, 0, 4, 8];
|
||||
view.detectChanges();
|
||||
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('6;2;7;0;4;8;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should iterate over an array of objects', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<ul><li template="for #item of items">{{item["name"]}};</li></ul>').then((pv) => {
|
||||
createView(pv);
|
||||
it('should iterate over an array of objects', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template = '<ul><li template="for #item of items">{{item["name"]}};</li></ul>';
|
||||
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
|
||||
// INIT
|
||||
component.items = [{'name': 'misko'}, {'name':'shyam'}];
|
||||
cd.detectChanges();
|
||||
view.context.items = [{'name': 'misko'}, {'name':'shyam'}];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;');
|
||||
|
||||
// GROW
|
||||
ListWrapper.push(component.items, {'name': 'adam'});
|
||||
cd.detectChanges();
|
||||
ListWrapper.push(view.context.items, {'name': 'adam'});
|
||||
view.detectChanges();
|
||||
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('misko;shyam;adam;');
|
||||
|
||||
// SHRINK
|
||||
ListWrapper.removeAt(component.items, 2);
|
||||
ListWrapper.removeAt(component.items, 0);
|
||||
cd.detectChanges();
|
||||
ListWrapper.removeAt(view.context.items, 2);
|
||||
ListWrapper.removeAt(view.context.items, 0);
|
||||
view.detectChanges();
|
||||
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('shyam;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should gracefully handle nulls', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<ul><li template="for #item of null">{{item}};</li></ul>').then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template = '<ul><li template="for #item of null">{{item}};</li></ul>';
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should gracefully handle ref changing to null and back', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should gracefully handle ref changing to null and back',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
|
||||
|
||||
component.items = null;
|
||||
cd.detectChanges();
|
||||
view.context.items = null;
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
component.items = [1, 2, 3];
|
||||
cd.detectChanges();
|
||||
view.context.items = [1, 2, 3];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('1;2;3;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should throw on ref changing to string', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should throw on ref changing to string', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('1;2;');
|
||||
|
||||
component.items = 'whaaa';
|
||||
expect(() => cd.detectChanges()).toThrowError();
|
||||
view.context.items = 'whaaa';
|
||||
expect(() => view.detectChanges()).toThrowError();
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should works with duplicates', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
||||
var a = new Foo();
|
||||
component.items = [a, a];
|
||||
cd.detectChanges();
|
||||
view.context.items = [a, a];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('foo;foo;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should repeat over nested arrays', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(
|
||||
it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template =
|
||||
'<div>'+
|
||||
'<div template="for #item of items">' +
|
||||
'<div template="for #subitem of item">' +
|
||||
'{{subitem}}-{{item.length}};' +
|
||||
'</div>|'+
|
||||
'</div>'+
|
||||
'</div>'
|
||||
).then((pv) => {
|
||||
createView(pv);
|
||||
component.items = [['a', 'b'], ['c']];
|
||||
cd.detectChanges();
|
||||
cd.detectChanges();
|
||||
cd.detectChanges();
|
||||
'</div>';
|
||||
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.context.items = [['a', 'b'], ['c']];
|
||||
view.detectChanges();
|
||||
view.detectChanges();
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;|c-1;|');
|
||||
|
||||
component.items = [['e'], ['f', 'g']];
|
||||
cd.detectChanges();
|
||||
view.context.items = [['e'], ['f', 'g']];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('e-1;|f-2;g-2;|');
|
||||
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should repeat over nested arrays with no intermediate element', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate(
|
||||
it('should repeat over nested arrays with no intermediate element',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template =
|
||||
'<div><template [for] #item [of]="items">' +
|
||||
'<div template="for #subitem of item">' +
|
||||
'{{subitem}}-{{item.length}};' +
|
||||
'</div></template></div>'
|
||||
).then((pv) => {
|
||||
createView(pv);
|
||||
'</div></template></div>';
|
||||
|
||||
component.items = [['a', 'b'], ['c']];
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.context.items = [['a', 'b'], ['c']];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('a-2;b-2;c-1;');
|
||||
|
||||
component.items = [['e'], ['f', 'g']];
|
||||
cd.detectChanges();
|
||||
view.context.items = [['e'], ['f', 'g']];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('e-1;f-2;g-2;');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display indices correctly', inject([AsyncTestCompleter], (async) => {
|
||||
var INDEX_TEMPLATE =
|
||||
it('should display indices correctly',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template =
|
||||
'<div><copy-me template="for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
|
||||
compileWithTemplate(INDEX_TEMPLATE).then((pv) => {
|
||||
createView(pv);
|
||||
component.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
cd.detectChanges();
|
||||
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.context.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('0123456789');
|
||||
|
||||
component.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
|
||||
cd.detectChanges();
|
||||
view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('0123456789');
|
||||
async.done();
|
||||
});
|
||||
@ -269,6 +231,7 @@ class Foo {
|
||||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@Template({directives: [For]})
|
||||
class TestComponent {
|
||||
items: any;
|
||||
constructor() {
|
||||
|
||||
186
modules/angular2/test/directives/if_spec.js
vendored
186
modules/angular2/test/directives/if_spec.js
vendored
@ -14,99 +14,53 @@ import {
|
||||
|
||||
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 {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 {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||
|
||||
import {Component} from 'angular2/src/core/annotations/annotations';
|
||||
import {Template} from 'angular2/src/core/annotations/template';
|
||||
|
||||
import {MockTemplateResolver} from 'angular2/src/mock/template_resolver_mock';
|
||||
|
||||
import {If} from 'angular2/src/directives/if';
|
||||
|
||||
export function main() {
|
||||
describe('if directive', () => {
|
||||
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: [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();
|
||||
it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('hello');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should work in a template element', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
|
||||
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('hello2');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should toggle node when condition changes', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
|
||||
createView(pv);
|
||||
it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
|
||||
|
||||
component.booleanCondition = false;
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.context.booleanCondition = false;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
|
||||
component.booleanCondition = true;
|
||||
cd.detectChanges();
|
||||
view.context.booleanCondition = true;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('hello');
|
||||
|
||||
component.booleanCondition = false;
|
||||
cd.detectChanges();
|
||||
view.context.booleanCondition = false;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
@ -114,32 +68,32 @@ export function main() {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should handle nested if correctly', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>').then((pv) => {
|
||||
createView(pv);
|
||||
it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><template [if]="booleanCondition"><copy-me *if="nestedBooleanCondition">hello</copy-me></template></div>';
|
||||
|
||||
component.booleanCondition = false;
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.context.booleanCondition = false;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
component.booleanCondition = true;
|
||||
cd.detectChanges();
|
||||
view.context.booleanCondition = true;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('hello');
|
||||
|
||||
component.nestedBooleanCondition = false;
|
||||
cd.detectChanges();
|
||||
view.context.nestedBooleanCondition = false;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
component.nestedBooleanCondition = true;
|
||||
cd.detectChanges();
|
||||
view.context.nestedBooleanCondition = true;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('hello');
|
||||
|
||||
component.booleanCondition = false;
|
||||
cd.detectChanges();
|
||||
view.context.booleanCondition = false;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
@ -147,28 +101,27 @@ export function main() {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should update several nodes with if', inject([AsyncTestCompleter], (async) => {
|
||||
var templateString =
|
||||
it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html =
|
||||
'<div>' +
|
||||
'<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
|
||||
'<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
|
||||
'<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
|
||||
'</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.getText(view.nodes[0])).toEqual('helloNumberhelloStringhelloFunction');
|
||||
|
||||
component.numberCondition = 0;
|
||||
cd.detectChanges();
|
||||
view.context.numberCondition = 0;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('helloString');
|
||||
|
||||
component.numberCondition = 1;
|
||||
component.stringCondition = "bar";
|
||||
cd.detectChanges();
|
||||
view.context.numberCondition = 1;
|
||||
view.context.stringCondition = "bar";
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('helloNumber');
|
||||
async.done();
|
||||
@ -176,17 +129,18 @@ export function main() {
|
||||
}));
|
||||
|
||||
|
||||
if (!IS_DARTIUM) {;
|
||||
it('should not add the element twice if the condition goes from true to true (JS)', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
|
||||
createView(pv);
|
||||
if (!IS_DARTIUM) {
|
||||
it('should not add the element twice if the condition goes from true to true (JS)',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
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.getText(view.nodes[0])).toEqual('hello');
|
||||
|
||||
component.numberCondition = 2;
|
||||
cd.detectChanges();
|
||||
view.context.numberCondition = 2;
|
||||
view.detectChanges();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(1);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('hello');
|
||||
|
||||
@ -194,29 +148,34 @@ export function main() {
|
||||
});
|
||||
}));
|
||||
|
||||
it('should not recreate the element if the condition goes from true to true (JS)', inject([AsyncTestCompleter], (async) => {
|
||||
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
|
||||
createView(pv);
|
||||
it('should not recreate the element if the condition goes from true to true (JS)',
|
||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var html = '<div><copy-me template="if numberCondition">hello</copy-me></div>';
|
||||
|
||||
cd.detectChanges();
|
||||
DOM.addClass(view.nodes[0].childNodes[1], "foo");
|
||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
||||
view.detectChanges();
|
||||
DOM.addClass(view.nodes[0].childNodes[1], "foo");
|
||||
|
||||
component.numberCondition = 2;
|
||||
cd.detectChanges();
|
||||
expect(DOM.hasClass(view.nodes[0].childNodes[1], "foo")).toBe(true);
|
||||
view.context.numberCondition = 2;
|
||||
view.detectChanges();
|
||||
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) => {
|
||||
createView(pv);
|
||||
expect(function(){cd.detectChanges();}).toThrowError();
|
||||
expect(DOM.querySelectorAll(view.nodes[0], 'copy-me').length).toEqual(0);
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
async.done();
|
||||
});
|
||||
}
|
||||
|
||||
if (IS_DARTIUM) {
|
||||
it('should not create the element if the condition is not a boolean (DART)',
|
||||
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.getText(view.nodes[0])).toEqual('');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
@ -224,6 +183,7 @@ export function main() {
|
||||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@Template({directives: [If]})
|
||||
class TestComponent {
|
||||
booleanCondition: boolean;
|
||||
nestedBooleanCondition: boolean;
|
||||
|
||||
@ -11,86 +11,41 @@ import {
|
||||
xit,
|
||||
} from 'angular2/test_lib';
|
||||
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 {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 {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() {
|
||||
describe('non-bindable', () => {
|
||||
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: [NonBindable, TestDecorator]
|
||||
});
|
||||
tplResolver.setTemplate(TestComponent, template);
|
||||
return compiler.compile(TestComponent);
|
||||
}
|
||||
|
||||
it('should not interpolate children', inject([AsyncTestCompleter], (async) => {
|
||||
it('should not interpolate children', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('foo{{text}}');
|
||||
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>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
var span = DOM.querySelector(view.nodes[0], '#child');
|
||||
expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
|
||||
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>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
var span = DOM.querySelector(view.nodes[0], '#child');
|
||||
expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
|
||||
async.done();
|
||||
@ -100,6 +55,7 @@ export function main() {
|
||||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@Template({directives: [NonBindable, TestDecorator]})
|
||||
class TestComponent {
|
||||
text: string;
|
||||
constructor() {
|
||||
|
||||
132
modules/angular2/test/directives/switch_spec.js
vendored
132
modules/angular2/test/directives/switch_spec.js
vendored
@ -11,105 +11,66 @@ import {
|
||||
xit,
|
||||
} from 'angular2/test_lib';
|
||||
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 {Template} from 'angular2/src/core/annotations/template';
|
||||
import {TemplateLoader} from 'angular2/core';
|
||||
|
||||
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() {
|
||||
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', () => {
|
||||
it('should switch amongst when values', inject([AsyncTestCompleter], (async) => {
|
||||
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||
var template = '<div>' +
|
||||
'<ul [switch]="switchValue">' +
|
||||
'<template [switch-when]="\'a\'"><li>when a</li></template>' +
|
||||
'<template [switch-when]="\'b\'"><li>when b</li></template>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('');
|
||||
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
view.context.switchValue = 'a';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when a');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
view.context.switchValue = 'b';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when b');
|
||||
|
||||
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>' +
|
||||
'<ul [switch]="switchValue">' +
|
||||
'<li template="switch-when \'a\'">when a</li>' +
|
||||
'<li template="switch-default">when default</li>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
// expect(DOM.getText(view.nodes[0])).toEqual('when default');
|
||||
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
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');
|
||||
|
||||
// component.switchValue = 'b';
|
||||
// cd.detectChanges();
|
||||
// expect(DOM.getText(view.nodes[0])).toEqual('when default');
|
||||
view.context.switchValue = 'b';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default');
|
||||
|
||||
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>' +
|
||||
'<ul [switch]="switchValue">' +
|
||||
'<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 default2;</li></template>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
cd.detectChanges();
|
||||
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default1;when default2;');
|
||||
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
view.context.switchValue = 'a';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when a1;when a2;');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
view.context.switchValue = 'b';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when b1;when b2;');
|
||||
|
||||
async.done();
|
||||
@ -138,36 +99,36 @@ export function main() {
|
||||
});
|
||||
|
||||
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>' +
|
||||
'<ul [switch]="switchValue">' +
|
||||
'<template [switch-when]="when1"><li>when 1;</li></template>' +
|
||||
'<template [switch-when]="when2"><li>when 2;</li></template>' +
|
||||
'<template [switch-default]><li>when default;</li></template>' +
|
||||
'</ul></div>';
|
||||
compileWithTemplate(template).then((pv) => {
|
||||
createView(pv);
|
||||
|
||||
component.when1 = 'a';
|
||||
component.when2 = 'b';
|
||||
component.switchValue = 'a';
|
||||
cd.detectChanges();
|
||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
||||
view.context.when1 = 'a';
|
||||
view.context.when2 = 'b';
|
||||
view.context.switchValue = 'a';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
|
||||
|
||||
component.switchValue = 'b';
|
||||
cd.detectChanges();
|
||||
view.context.switchValue = 'b';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when 2;');
|
||||
|
||||
component.switchValue = 'c';
|
||||
cd.detectChanges();
|
||||
view.context.switchValue = 'c';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default;');
|
||||
|
||||
component.when1 = 'c';
|
||||
cd.detectChanges();
|
||||
view.context.when1 = 'c';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when 1;');
|
||||
|
||||
component.when1 = 'd';
|
||||
cd.detectChanges();
|
||||
view.context.when1 = 'd';
|
||||
view.detectChanges();
|
||||
expect(DOM.getText(view.nodes[0])).toEqual('when default;');
|
||||
|
||||
async.done();
|
||||
@ -178,6 +139,7 @@ export function main() {
|
||||
}
|
||||
|
||||
@Component({selector: 'test-cmp'})
|
||||
@Template({directives: [Switch, SwitchWhen, SwitchDefault]})
|
||||
class TestComponent {
|
||||
switchValue: any;
|
||||
when1: any;
|
||||
|
||||
Reference in New Issue
Block a user