angular-cn/modules/angular2/test/directives/if_spec.js

203 lines
7.5 KiB
JavaScript
Raw Normal View History

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';
2015-03-30 11:11:18 -04:00
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 {If} from 'angular2/src/directives/if';
export function main() {
describe('if directive', () => {
2015-03-30 11:11:18 -04:00
it('should work in a template attribute', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
2015-03-30 11:11:18 -04:00
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();
});
}));
2015-03-30 11:11:18 -04:00
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>';
2015-03-30 11:11:18 -04:00
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();
});
}));
2015-03-30 11:11:18 -04:00
it('should toggle node when condition changes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
var html = '<div><copy-me template="if booleanCondition">hello</copy-me></div>';
2015-03-30 11:11:18 -04:00
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('');
2015-03-30 11:11:18 -04:00
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');
2015-03-30 11:11:18 -04:00
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();
});
}));
2015-03-30 11:11:18 -04:00
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>';
2015-03-30 11:11:18 -04:00
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('');
2015-03-30 11:11:18 -04:00
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');
2015-03-30 11:11:18 -04:00
view.context.nestedBooleanCondition = false;
view.detectChanges();
expect(DOM.querySelectorAll(view.rootNodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.rootNodes[0])).toEqual('');
2015-03-30 11:11:18 -04:00
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');
2015-03-30 11:11:18 -04:00
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();
});
}));
2015-03-30 11:11:18 -04:00
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>';
2015-03-30 11:11:18 -04:00
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');
2015-03-30 11:11:18 -04:00
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');
2015-03-30 11:11:18 -04:00
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();
});
}));
2015-03-30 11:11:18 -04:00
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>';
2015-03-30 11:11:18 -04:00
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');
2015-03-30 11:11:18 -04:00
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();
});
}));
2015-03-30 11:11:18 -04:00
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>';
2015-03-30 11:11:18 -04:00
tb.createView(TestComponent, {html: html}).then((view) => {
view.detectChanges();
DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
2015-03-30 11:11:18 -04:00
view.context.numberCondition = 2;
view.detectChanges();
expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
2015-03-30 11:11:18 -04:00
async.done();
});
}));
2015-03-30 11:11:18 -04:00
}
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.rootNodes[0], 'copy-me').length).toEqual(0);
expect(DOM.getText(view.rootNodes[0])).toEqual('');
2015-03-30 11:11:18 -04:00
async.done();
});
}));
}
});
}
@Component({selector: 'test-cmp'})
2015-03-30 11:11:18 -04:00
@Template({directives: [If]})
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;
};
}
}