refactor (test/directives): ts'ify test/directives
Translate all of the AtScript code in .../test/directives to TypeScript. Closes #2167
This commit is contained in:
Ian Riley
Tobias Bosch
parent
5fe88d63ef
commit
ef3e12e803
|
|
@ -1,152 +0,0 @@
|
||||||
import {
|
|
||||||
AsyncTestCompleter,
|
|
||||||
beforeEach,
|
|
||||||
beforeEachBindings,
|
|
||||||
ddescribe,
|
|
||||||
xdescribe,
|
|
||||||
describe,
|
|
||||||
el,
|
|
||||||
expect,
|
|
||||||
iit,
|
|
||||||
inject,
|
|
||||||
it,
|
|
||||||
xit,
|
|
||||||
} from 'angular2/test_lib';
|
|
||||||
|
|
||||||
import {StringMapWrapper} from 'angular2/src/facade/collection';
|
|
||||||
|
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
||||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
|
||||||
|
|
||||||
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', () => {
|
|
||||||
|
|
||||||
it('should add classes specified in an object literal',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div [class]="{foo: true, bar: false}"></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
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>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
|
||||||
|
|
||||||
view.context.condition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding bar');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should add and remove classes based on changes to the expression object',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div [class]="expr"></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
|
||||||
|
|
||||||
StringMapWrapper.set(view.context.expr, 'bar', true);
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
|
|
||||||
|
|
||||||
StringMapWrapper.set(view.context.expr, 'baz', true);
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
|
|
||||||
|
|
||||||
StringMapWrapper.delete(view.context.expr, 'bar');
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should retain existing classes when expression evaluates to null',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div [class]="expr"></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
|
||||||
|
|
||||||
view.context.expr = null;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
|
||||||
|
|
||||||
view.context.expr = {'foo': false, 'bar': true};
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('ng-binding bar');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should co-operate with the class attribute',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div [class]="expr" class="init foo"></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
StringMapWrapper.set(view.context.expr, 'bar', true);
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar');
|
|
||||||
|
|
||||||
StringMapWrapper.set(view.context.expr, 'foo', false);
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
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>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz');
|
|
||||||
|
|
||||||
StringMapWrapper.set(view.context.expr, 'bar', true);
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar');
|
|
||||||
|
|
||||||
StringMapWrapper.set(view.context.expr, 'foo', false);
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar');
|
|
||||||
|
|
||||||
view.context.condition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({selector: 'test-cmp'})
|
|
||||||
@View({directives: [CSSClass]})
|
|
||||||
class TestComponent {
|
|
||||||
condition:boolean;
|
|
||||||
expr;
|
|
||||||
constructor() {
|
|
||||||
this.condition = true;
|
|
||||||
this.expr = {'foo': true, 'bar': false};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
import {
|
||||||
|
AsyncTestCompleter,
|
||||||
|
beforeEach,
|
||||||
|
beforeEachBindings,
|
||||||
|
ddescribe,
|
||||||
|
xdescribe,
|
||||||
|
describe,
|
||||||
|
el,
|
||||||
|
expect,
|
||||||
|
iit,
|
||||||
|
inject,
|
||||||
|
it,
|
||||||
|
xit,
|
||||||
|
} from 'angular2/test_lib';
|
||||||
|
|
||||||
|
import {StringMapWrapper} from 'angular2/src/facade/collection';
|
||||||
|
|
||||||
|
import {Component, View} from 'angular2/angular2';
|
||||||
|
|
||||||
|
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', () => {
|
||||||
|
|
||||||
|
it('should add classes specified in an object literal',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div [class]="{foo: true, bar: false}"></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
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>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
||||||
|
|
||||||
|
view.context.condition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding bar');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should add and remove classes based on changes to the expression object',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div [class]="expr"></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
||||||
|
|
||||||
|
StringMapWrapper.set(view.context.expr, 'bar', true);
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar');
|
||||||
|
|
||||||
|
StringMapWrapper.set(view.context.expr, 'baz', true);
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo bar baz');
|
||||||
|
|
||||||
|
StringMapWrapper.delete(view.context.expr, 'bar');
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo baz');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should retain existing classes when expression evaluates to null',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div [class]="expr"></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
||||||
|
|
||||||
|
view.context.expr = null;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding foo');
|
||||||
|
|
||||||
|
view.context.expr = {
|
||||||
|
'foo': false,
|
||||||
|
'bar': true
|
||||||
|
};
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('ng-binding bar');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should co-operate with the class attribute',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div [class]="expr" class="init foo"></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
StringMapWrapper.set(view.context.expr, 'bar', true);
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('init foo ng-binding bar');
|
||||||
|
|
||||||
|
StringMapWrapper.set(view.context.expr, 'foo', false);
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
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>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz');
|
||||||
|
|
||||||
|
StringMapWrapper.set(view.context.expr, 'bar', true);
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('init foo ng-binding baz bar');
|
||||||
|
|
||||||
|
StringMapWrapper.set(view.context.expr, 'foo', false);
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('init ng-binding baz bar');
|
||||||
|
|
||||||
|
view.context.condition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(view.rootNodes[0].className).toEqual('init ng-binding bar');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'test-cmp'})
|
||||||
|
@View({directives: [CSSClass]})
|
||||||
|
class TestComponent {
|
||||||
|
condition: boolean;
|
||||||
|
expr;
|
||||||
|
constructor() {
|
||||||
|
this.condition = true;
|
||||||
|
this.expr = {'foo': true, 'bar': false};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,240 +0,0 @@
|
||||||
import {
|
|
||||||
AsyncTestCompleter,
|
|
||||||
beforeEach,
|
|
||||||
beforeEachBindings,
|
|
||||||
ddescribe,
|
|
||||||
describe,
|
|
||||||
el,
|
|
||||||
expect,
|
|
||||||
iit,
|
|
||||||
inject,
|
|
||||||
it,
|
|
||||||
xit,
|
|
||||||
} from 'angular2/test_lib';
|
|
||||||
|
|
||||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
|
||||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
|
||||||
|
|
||||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
||||||
|
|
||||||
import {NgFor} from 'angular2/src/directives/ng_for';
|
|
||||||
|
|
||||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
|
||||||
|
|
||||||
|
|
||||||
export function main() {
|
|
||||||
describe('ng-for', () => {
|
|
||||||
var TEMPLATE = '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
|
|
||||||
|
|
||||||
it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
ListWrapper.push(view.context.items, 3);
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
ListWrapper.removeAt(view.context.items, 1);
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('1;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
ListWrapper.removeAt(view.context.items, 0);
|
|
||||||
ListWrapper.push(view.context.items, 1);
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('2;1;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
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();
|
|
||||||
|
|
||||||
view.context.items = [6, 2, 7, 0, 4, 8];
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('6;2;7;0;4;8;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should iterate over an array of objects', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
|
|
||||||
// INIT
|
|
||||||
view.context.items = [{'name': 'misko'}, {'name':'shyam'}];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;');
|
|
||||||
|
|
||||||
// GROW
|
|
||||||
ListWrapper.push(view.context.items, {'name': 'adam'});
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;adam;');
|
|
||||||
|
|
||||||
// SHRINK
|
|
||||||
ListWrapper.removeAt(view.context.items, 2);
|
|
||||||
ListWrapper.removeAt(view.context.items, 0);
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('shyam;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
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.rootNodes[0])).toEqual('1;2;');
|
|
||||||
|
|
||||||
view.context.items = null;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
view.context.items = [1, 2, 3];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
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.rootNodes[0])).toEqual('1;2;');
|
|
||||||
|
|
||||||
view.context.items = 'whaaa';
|
|
||||||
expect(() => view.detectChanges()).toThrowError();
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
|
|
||||||
var a = new Foo();
|
|
||||||
view.context.items = [a, a];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('foo;foo;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template =
|
|
||||||
'<div>'+
|
|
||||||
'<div template="ng-for #item of items">' +
|
|
||||||
'<div template="ng-for #subitem of item">' +
|
|
||||||
'{{subitem}}-{{item.length}};' +
|
|
||||||
'</div>|'+
|
|
||||||
'</div>'+
|
|
||||||
'</div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.context.items = [['a', 'b'], ['c']];
|
|
||||||
view.detectChanges();
|
|
||||||
view.detectChanges();
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;|c-1;|');
|
|
||||||
|
|
||||||
view.context.items = [['e'], ['f', 'g']];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;|f-2;g-2;|');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should repeat over nested arrays with no intermediate element',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template =
|
|
||||||
'<div><template [ng-for] #item [ng-for-of]="items">' +
|
|
||||||
'<div template="ng-for #subitem of item">' +
|
|
||||||
'{{subitem}}-{{item.length}};' +
|
|
||||||
'</div></template></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.context.items = [['a', 'b'], ['c']];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;c-1;');
|
|
||||||
|
|
||||||
view.context.items = [['e'], ['f', 'g']];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;f-2;g-2;');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should display indices correctly',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template =
|
|
||||||
'<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
|
|
||||||
|
|
||||||
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.rootNodes[0])).toEqual('0123456789');
|
|
||||||
|
|
||||||
view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
class Foo {
|
|
||||||
toString() {
|
|
||||||
return 'foo';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({selector: 'test-cmp'})
|
|
||||||
@View({directives: [NgFor]})
|
|
||||||
class TestComponent {
|
|
||||||
items: any;
|
|
||||||
constructor() {
|
|
||||||
this.items = [1, 2];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,248 @@
|
||||||
|
import {
|
||||||
|
AsyncTestCompleter,
|
||||||
|
beforeEach,
|
||||||
|
beforeEachBindings,
|
||||||
|
ddescribe,
|
||||||
|
describe,
|
||||||
|
el,
|
||||||
|
expect,
|
||||||
|
iit,
|
||||||
|
inject,
|
||||||
|
it,
|
||||||
|
xit,
|
||||||
|
} from 'angular2/test_lib';
|
||||||
|
|
||||||
|
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||||
|
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||||
|
|
||||||
|
import {Component, View} from 'angular2/angular2';
|
||||||
|
|
||||||
|
import {NgFor} from 'angular2/src/directives/ng_for';
|
||||||
|
|
||||||
|
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||||
|
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
describe('ng-for', () => {
|
||||||
|
var TEMPLATE =
|
||||||
|
'<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
|
||||||
|
|
||||||
|
it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
tb.createView(TestComponent, {html: TEMPLATE})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should reflect added elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
tb.createView(TestComponent, {html: TEMPLATE})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
ListWrapper.push(view.context.items, 3);
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should reflect removed elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
tb.createView(TestComponent, {html: TEMPLATE})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
ListWrapper.removeAt(view.context.items, 1);
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('1;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should reflect moved elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
tb.createView(TestComponent, {html: TEMPLATE})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
ListWrapper.removeAt(view.context.items, 0);
|
||||||
|
ListWrapper.push(view.context.items, 1);
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('2;1;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
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();
|
||||||
|
|
||||||
|
view.context.items = [6, 2, 7, 0, 4, 8];
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('6;2;7;0;4;8;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should iterate over an array of objects',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
|
||||||
|
// INIT
|
||||||
|
view.context.items = [{'name': 'misko'}, {'name': 'shyam'}];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;');
|
||||||
|
|
||||||
|
// GROW
|
||||||
|
ListWrapper.push(view.context.items, {'name': 'adam'});
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('misko;shyam;adam;');
|
||||||
|
|
||||||
|
// SHRINK
|
||||||
|
ListWrapper.removeAt(view.context.items, 2);
|
||||||
|
ListWrapper.removeAt(view.context.items, 0);
|
||||||
|
view.detectChanges();
|
||||||
|
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('shyam;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
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.rootNodes[0])).toEqual('1;2;');
|
||||||
|
|
||||||
|
view.context.items = null;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
view.context.items = [1, 2, 3];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('1;2;3;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
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.rootNodes[0])).toEqual('1;2;');
|
||||||
|
|
||||||
|
view.context.items = 'whaaa';
|
||||||
|
expect(() => view.detectChanges()).toThrowError();
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should works with duplicates', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
tb.createView(TestComponent, {html: TEMPLATE})
|
||||||
|
.then((view) => {
|
||||||
|
var a = new Foo();
|
||||||
|
view.context.items = [a, a];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('foo;foo;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div>' +
|
||||||
|
'<div template="ng-for #item of items">' +
|
||||||
|
'<div template="ng-for #subitem of item">' +
|
||||||
|
'{{subitem}}-{{item.length}};' +
|
||||||
|
'</div>|' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.context.items = [['a', 'b'], ['c']];
|
||||||
|
view.detectChanges();
|
||||||
|
view.detectChanges();
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;|c-1;|');
|
||||||
|
|
||||||
|
view.context.items = [['e'], ['f', 'g']];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;|f-2;g-2;|');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should repeat over nested arrays with no intermediate element',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div><template [ng-for] #item [ng-for-of]="items">' +
|
||||||
|
'<div template="ng-for #subitem of item">' +
|
||||||
|
'{{subitem}}-{{item.length}};' +
|
||||||
|
'</div></template></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.context.items = [['a', 'b'], ['c']];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('a-2;b-2;c-1;');
|
||||||
|
|
||||||
|
view.context.items = [['e'], ['f', 'g']];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('e-1;f-2;g-2;');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should display indices correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template =
|
||||||
|
'<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
|
||||||
|
|
||||||
|
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.rootNodes[0])).toEqual('0123456789');
|
||||||
|
|
||||||
|
view.context.items = [1, 2, 6, 7, 4, 3, 5, 8, 9, 0];
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('0123456789');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
class Foo {
|
||||||
|
toString() { return 'foo'; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'test-cmp'})
|
||||||
|
@View({directives: [NgFor]})
|
||||||
|
class TestComponent {
|
||||||
|
items: any;
|
||||||
|
constructor() { this.items = [1, 2]; }
|
||||||
|
}
|
||||||
|
|
@ -1,202 +0,0 @@
|
||||||
import {
|
|
||||||
AsyncTestCompleter,
|
|
||||||
beforeEach,
|
|
||||||
ddescribe,
|
|
||||||
describe,
|
|
||||||
el,
|
|
||||||
expect,
|
|
||||||
iit,
|
|
||||||
inject,
|
|
||||||
IS_DARTIUM,
|
|
||||||
it,
|
|
||||||
xit,
|
|
||||||
} from 'angular2/test_lib';
|
|
||||||
|
|
||||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
|
||||||
|
|
||||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
|
||||||
|
|
||||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
||||||
|
|
||||||
import {NgIf} from 'angular2/src/directives/ng_if';
|
|
||||||
|
|
||||||
export function main() {
|
|
||||||
describe('if directive', () => {
|
|
||||||
it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var html = '<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello2');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.context.booleanCondition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
view.context.booleanCondition = true;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
|
||||||
|
|
||||||
view.context.booleanCondition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var html = '<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.context.booleanCondition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
view.context.booleanCondition = true;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
|
||||||
|
|
||||||
view.context.nestedBooleanCondition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
view.context.nestedBooleanCondition = true;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
|
||||||
|
|
||||||
view.context.booleanCondition = false;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var html =
|
|
||||||
'<div>' +
|
|
||||||
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
|
|
||||||
'<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
|
|
||||||
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
|
|
||||||
'</div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(3);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('helloNumberhelloStringhelloFunction');
|
|
||||||
|
|
||||||
view.context.numberCondition = 0;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('helloString');
|
|
||||||
|
|
||||||
view.context.numberCondition = 1;
|
|
||||||
view.context.stringCondition = "bar";
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('helloNumber');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
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="ng-if numberCondition">hello</copy-me></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
|
||||||
|
|
||||||
view.context.numberCondition = 2;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
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="ng-if numberCondition">hello</copy-me></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
|
|
||||||
|
|
||||||
view.context.numberCondition = 2;
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
|
|
||||||
|
|
||||||
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="ng-if numberCondition">hello</copy-me></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: html}).then((view) => {
|
|
||||||
expect(() => view.detectChanges()).toThrowError();
|
|
||||||
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({selector: 'test-cmp'})
|
|
||||||
@View({directives: [NgIf]})
|
|
||||||
class TestComponent {
|
|
||||||
booleanCondition: boolean;
|
|
||||||
nestedBooleanCondition: boolean;
|
|
||||||
numberCondition: number;
|
|
||||||
stringCondition: string;
|
|
||||||
functionCondition: Function;
|
|
||||||
constructor() {
|
|
||||||
this.booleanCondition = true;
|
|
||||||
this.nestedBooleanCondition = true;
|
|
||||||
this.numberCondition = 1;
|
|
||||||
this.stringCondition = "foo";
|
|
||||||
this.functionCondition = function(s, n){
|
|
||||||
return s == "foo" && n == 1;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
import {
|
||||||
|
AsyncTestCompleter,
|
||||||
|
beforeEach,
|
||||||
|
ddescribe,
|
||||||
|
describe,
|
||||||
|
el,
|
||||||
|
expect,
|
||||||
|
iit,
|
||||||
|
inject,
|
||||||
|
IS_DARTIUM,
|
||||||
|
it,
|
||||||
|
xit,
|
||||||
|
} from 'angular2/test_lib';
|
||||||
|
|
||||||
|
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||||
|
|
||||||
|
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||||
|
|
||||||
|
import {Component, View} from 'angular2/angular2';
|
||||||
|
|
||||||
|
import {NgIf} from 'angular2/src/directives/ng_if';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
describe('if directive', () => {
|
||||||
|
it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should work in a template element', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var html =
|
||||||
|
'<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello2');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should toggle node when condition changes',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.context.booleanCondition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
view.context.booleanCondition = true;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
||||||
|
|
||||||
|
view.context.booleanCondition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should handle nested if correctly', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var html =
|
||||||
|
'<div><template [ng-if]="booleanCondition"><copy-me *ng-if="nestedBooleanCondition">hello</copy-me></template></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.context.booleanCondition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
view.context.booleanCondition = true;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
||||||
|
|
||||||
|
view.context.nestedBooleanCondition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
view.context.nestedBooleanCondition = true;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
||||||
|
|
||||||
|
view.context.booleanCondition = false;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should update several nodes with if', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var html =
|
||||||
|
'<div>' +
|
||||||
|
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
|
||||||
|
'<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
|
||||||
|
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(3);
|
||||||
|
expect(DOM.getText(view.rootNodes[0]))
|
||||||
|
.toEqual('helloNumberhelloStringhelloFunction');
|
||||||
|
|
||||||
|
view.context.numberCondition = 0;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('helloString');
|
||||||
|
|
||||||
|
view.context.numberCondition = 1;
|
||||||
|
view.context.stringCondition = "bar";
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('helloNumber');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
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="ng-if numberCondition">hello</copy-me></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
||||||
|
|
||||||
|
view.context.numberCondition = 2;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(1);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('hello');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
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="ng-if numberCondition">hello</copy-me></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
|
||||||
|
|
||||||
|
view.context.numberCondition = 2;
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
|
||||||
|
|
||||||
|
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="ng-if numberCondition">hello</copy-me></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: html})
|
||||||
|
.then((view) => {
|
||||||
|
expect(() => view.detectChanges()).toThrowError();
|
||||||
|
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'test-cmp'})
|
||||||
|
@View({directives: [NgIf]})
|
||||||
|
class TestComponent {
|
||||||
|
booleanCondition: boolean;
|
||||||
|
nestedBooleanCondition: boolean;
|
||||||
|
numberCondition: number;
|
||||||
|
stringCondition: string;
|
||||||
|
functionCondition: Function;
|
||||||
|
constructor() {
|
||||||
|
this.booleanCondition = true;
|
||||||
|
this.nestedBooleanCondition = true;
|
||||||
|
this.numberCondition = 1;
|
||||||
|
this.stringCondition = "foo";
|
||||||
|
this.functionCondition = function(s, n) { return s == "foo" && n == 1; };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,153 +0,0 @@
|
||||||
import {
|
|
||||||
AsyncTestCompleter,
|
|
||||||
beforeEach,
|
|
||||||
ddescribe,
|
|
||||||
describe,
|
|
||||||
el,
|
|
||||||
expect,
|
|
||||||
iit,
|
|
||||||
inject,
|
|
||||||
it,
|
|
||||||
xit,
|
|
||||||
} from 'angular2/test_lib';
|
|
||||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
|
||||||
|
|
||||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
||||||
|
|
||||||
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
|
|
||||||
|
|
||||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
|
||||||
|
|
||||||
export function main() {
|
|
||||||
describe('switch', () => {
|
|
||||||
describe('switch value changes', () => {
|
|
||||||
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div>' +
|
|
||||||
'<ul [ng-switch]="switchValue">' +
|
|
||||||
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
|
|
||||||
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
|
|
||||||
'</ul></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
|
||||||
|
|
||||||
view.context.switchValue = 'a';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
|
|
||||||
|
|
||||||
view.context.switchValue = 'b';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when b');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should switch amongst when values with fallback to default',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div>' +
|
|
||||||
'<ul [ng-switch]="switchValue">' +
|
|
||||||
'<li template="ng-switch-when \'a\'">when a</li>' +
|
|
||||||
'<li template="ng-switch-default">when default</li>' +
|
|
||||||
'</ul></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
|
|
||||||
|
|
||||||
view.context.switchValue = 'a';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
|
|
||||||
|
|
||||||
view.context.switchValue = 'b';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should support multiple whens with the same value',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div>' +
|
|
||||||
'<ul [ng-switch]="switchValue">' +
|
|
||||||
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
|
|
||||||
'<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
|
|
||||||
'<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
|
|
||||||
'<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
|
|
||||||
'<template [ng-switch-default]><li>when default1;</li></template>' +
|
|
||||||
'<template [ng-switch-default]><li>when default2;</li></template>' +
|
|
||||||
'</ul></div>';
|
|
||||||
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when default1;when default2;');
|
|
||||||
|
|
||||||
view.context.switchValue = 'a';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;');
|
|
||||||
|
|
||||||
view.context.switchValue = 'b';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('when values changes', () => {
|
|
||||||
it('should switch amongst when values',
|
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div>' +
|
|
||||||
'<ul [ng-switch]="switchValue">' +
|
|
||||||
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
|
|
||||||
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
|
|
||||||
'<template [ng-switch-default]><li>when default;</li></template>' +
|
|
||||||
'</ul></div>';
|
|
||||||
|
|
||||||
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.rootNodes[0])).toEqual('when 1;');
|
|
||||||
|
|
||||||
view.context.switchValue = 'b';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;');
|
|
||||||
|
|
||||||
view.context.switchValue = 'c';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
|
|
||||||
|
|
||||||
view.context.when1 = 'c';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;');
|
|
||||||
|
|
||||||
view.context.when1 = 'd';
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
|
|
||||||
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({selector: 'test-cmp'})
|
|
||||||
@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
|
|
||||||
class TestComponent {
|
|
||||||
switchValue: any;
|
|
||||||
when1: any;
|
|
||||||
when2: any;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.switchValue = null;
|
|
||||||
this.when1 = null;
|
|
||||||
this.when2 = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
import {
|
||||||
|
AsyncTestCompleter,
|
||||||
|
beforeEach,
|
||||||
|
ddescribe,
|
||||||
|
describe,
|
||||||
|
el,
|
||||||
|
expect,
|
||||||
|
iit,
|
||||||
|
inject,
|
||||||
|
it,
|
||||||
|
xit,
|
||||||
|
} from 'angular2/test_lib';
|
||||||
|
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||||
|
|
||||||
|
import {Component, View} from 'angular2/angular2';
|
||||||
|
|
||||||
|
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
|
||||||
|
|
||||||
|
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
describe('switch', () => {
|
||||||
|
describe('switch value changes', () => {
|
||||||
|
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div>' +
|
||||||
|
'<ul [ng-switch]="switchValue">' +
|
||||||
|
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
|
||||||
|
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
|
||||||
|
'</ul></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('');
|
||||||
|
|
||||||
|
view.context.switchValue = 'a';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
|
||||||
|
|
||||||
|
view.context.switchValue = 'b';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when b');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should switch amongst when values with fallback to default',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div>' +
|
||||||
|
'<ul [ng-switch]="switchValue">' +
|
||||||
|
'<li template="ng-switch-when \'a\'">when a</li>' +
|
||||||
|
'<li template="ng-switch-default">when default</li>' +
|
||||||
|
'</ul></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
|
||||||
|
|
||||||
|
view.context.switchValue = 'a';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
|
||||||
|
|
||||||
|
view.context.switchValue = 'b';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should support multiple whens with the same value',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div>' +
|
||||||
|
'<ul [ng-switch]="switchValue">' +
|
||||||
|
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
|
||||||
|
'<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
|
||||||
|
'<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
|
||||||
|
'<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
|
||||||
|
'<template [ng-switch-default]><li>when default1;</li></template>' +
|
||||||
|
'<template [ng-switch-default]><li>when default2;</li></template>' +
|
||||||
|
'</ul></div>';
|
||||||
|
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when default1;when default2;');
|
||||||
|
|
||||||
|
view.context.switchValue = 'a';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;');
|
||||||
|
|
||||||
|
view.context.switchValue = 'b';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when values changes', () => {
|
||||||
|
it('should switch amongst when values', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div>' +
|
||||||
|
'<ul [ng-switch]="switchValue">' +
|
||||||
|
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
|
||||||
|
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
|
||||||
|
'<template [ng-switch-default]><li>when default;</li></template>' +
|
||||||
|
'</ul></div>';
|
||||||
|
|
||||||
|
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.rootNodes[0])).toEqual('when 1;');
|
||||||
|
|
||||||
|
view.context.switchValue = 'b';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;');
|
||||||
|
|
||||||
|
view.context.switchValue = 'c';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
|
||||||
|
|
||||||
|
view.context.when1 = 'c';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;');
|
||||||
|
|
||||||
|
view.context.when1 = 'd';
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
|
||||||
|
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'test-cmp'})
|
||||||
|
@View({directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]})
|
||||||
|
class TestComponent {
|
||||||
|
switchValue: any;
|
||||||
|
when1: any;
|
||||||
|
when2: any;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.switchValue = null;
|
||||||
|
this.when1 = null;
|
||||||
|
this.when2 = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
import {
|
|
||||||
AsyncTestCompleter,
|
|
||||||
beforeEach,
|
|
||||||
ddescribe,
|
|
||||||
describe,
|
|
||||||
el,
|
|
||||||
expect,
|
|
||||||
iit,
|
|
||||||
inject,
|
|
||||||
it,
|
|
||||||
xit,
|
|
||||||
} from 'angular2/test_lib';
|
|
||||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
|
||||||
|
|
||||||
import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
|
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
||||||
|
|
||||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
|
||||||
|
|
||||||
import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
|
|
||||||
|
|
||||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
|
||||||
|
|
||||||
export function main() {
|
|
||||||
describe('non-bindable', () => {
|
|
||||||
it('should not interpolate children', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
expect(DOM.getText(view.rootNodes[0])).toEqual('foo{{text}}');
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should ignore directives on child nodes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
var span = DOM.querySelector(view.rootNodes[0], '#child');
|
|
||||||
expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
|
|
||||||
it('should trigger directives on the same node', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
|
||||||
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
|
|
||||||
tb.createView(TestComponent, {html: template}).then((view) => {
|
|
||||||
view.detectChanges();
|
|
||||||
var span = DOM.querySelector(view.rootNodes[0], '#child');
|
|
||||||
expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
|
|
||||||
async.done();
|
|
||||||
});
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({selector: 'test-cmp'})
|
|
||||||
@View({directives: [NgNonBindable, TestDirective]})
|
|
||||||
class TestComponent {
|
|
||||||
text: string;
|
|
||||||
constructor() {
|
|
||||||
this.text = 'foo';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Directive({
|
|
||||||
selector: '[test-dec]'
|
|
||||||
})
|
|
||||||
class TestDirective {
|
|
||||||
constructor(el: ElementRef) {
|
|
||||||
DOM.addClass(el.domElement, 'compiled');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
import {
|
||||||
|
AsyncTestCompleter,
|
||||||
|
beforeEach,
|
||||||
|
ddescribe,
|
||||||
|
describe,
|
||||||
|
el,
|
||||||
|
expect,
|
||||||
|
iit,
|
||||||
|
inject,
|
||||||
|
it,
|
||||||
|
xit,
|
||||||
|
} from 'angular2/test_lib';
|
||||||
|
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||||
|
|
||||||
|
import {Component, Directive, View} from 'angular2/angular2';
|
||||||
|
|
||||||
|
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||||
|
|
||||||
|
import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
|
||||||
|
|
||||||
|
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
describe('non-bindable', () => {
|
||||||
|
it('should not interpolate children', inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
expect(DOM.getText(view.rootNodes[0])).toEqual('foo{{text}}');
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should ignore directives on child nodes',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
var span = DOM.querySelector(view.rootNodes[0], '#child');
|
||||||
|
expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should trigger directives on the same node',
|
||||||
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
|
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
|
||||||
|
tb.createView(TestComponent, {html: template})
|
||||||
|
.then((view) => {
|
||||||
|
view.detectChanges();
|
||||||
|
var span = DOM.querySelector(view.rootNodes[0], '#child');
|
||||||
|
expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
|
||||||
|
async.done();
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
@Directive({selector: '[test-dec]'})
|
||||||
|
class TestDirective {
|
||||||
|
constructor(el: ElementRef) { DOM.addClass(el.domElement, 'compiled'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'test-cmp'})
|
||||||
|
@View({directives: [NgNonBindable, TestDirective]})
|
||||||
|
class TestComponent {
|
||||||
|
text: string;
|
||||||
|
constructor() { this.text = 'foo'; }
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue