honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(test): migrate directives tests to testcomponentbuilder

Browse Source 
Part of #2354
This commit is contained in:
Julie Ralph
2015-06-24 21:58:36 -07:00
parent d3dda614dd
commit 85d6ae38b9
5 changed files with 465 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/test/directives/class_spec.ts
+164 -120
View File
File diff suppressed because it is too large Load Diff
modules/angular2/test/directives/ng_for_spec.ts
+120 -109
View File
File diff suppressed because it is too large Load Diff
modules/angular2/test/directives/ng_if_spec.ts
+100 -91
View File
@@ -1,5 +1,7 @@
import {
AsyncTestCompleter,
TestComponentBuilder,
By,
beforeEach,
ddescribe,
describe,
@@ -14,8 +16,6 @@ import {
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';
@@ -23,95 +23,99 @@ import {NgIf} from 'angular2/src/directives/ng_if';
export function main() {
describe('ng-if directive', () => {
it('should work in a template attribute',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
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');
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('hello');
async.done();
});
}));
it('should work in a template element',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, 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');
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('hello2');
async.done();
});
}));
it('should toggle node when condition changes',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>';
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('');
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.booleanCondition = false;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
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');
rootTC.componentInstance.booleanCondition = true;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('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('');
rootTC.componentInstance.booleanCondition = false;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
async.done();
});
}));
it('should handle nested if correctly',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, 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('');
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.booleanCondition = false;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
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');
rootTC.componentInstance.booleanCondition = true;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('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('');
rootTC.componentInstance.nestedBooleanCondition = false;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
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');
rootTC.componentInstance.nestedBooleanCondition = true;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('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('');
rootTC.componentInstance.booleanCondition = false;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
async.done();
});
}));
it('should update several nodes with if',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html =
'<div>' +
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
@@ -119,23 +123,24 @@ export function main() {
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</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]))
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(3);
expect(DOM.getText(rootTC.nativeElement))
.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');
rootTC.componentInstance.numberCondition = 0;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('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');
rootTC.componentInstance.numberCondition = 1;
rootTC.componentInstance.stringCondition = "bar";
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('helloNumber');
async.done();
});
}));
@@ -143,36 +148,39 @@ export function main() {
if (!IS_DARTIUM) {
it('should not add the element twice if the condition goes from true to true (JS)',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
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');
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('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');
rootTC.componentInstance.numberCondition = 2;
rootTC.detectChanges();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(1);
expect(rootTC.nativeElement).toHaveText('hello');
async.done();
});
}));
it('should not recreate the element if the condition goes from true to true (JS)',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
tb.createView(TestComponent, {html: html})
.then((view) => {
view.detectChanges();
DOM.addClass(view.rootNodes[0].childNodes[1], "foo");
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
DOM.addClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo");
view.context.numberCondition = 2;
view.detectChanges();
expect(DOM.hasClass(view.rootNodes[0].childNodes[1], "foo")).toBe(true);
rootTC.componentInstance.numberCondition = 2;
rootTC.detectChanges();
expect(DOM.hasClass(DOM.querySelector(rootTC.nativeElement, 'copy-me'), "foo"))
.toBe(true);
async.done();
});
@@ -181,14 +189,15 @@ export function main() {
if (IS_DARTIUM) {
it('should not create the element if the condition is not a boolean (DART)',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var html = '<div><copy-me template="ng-if numberCondition">hello</copy-me></div>';
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('');
tcb.overrideTemplate(TestComponent, html)
.createAsync(TestComponent)
.then((rootTC) => {
expect(() => rootTC.detectChanges()).toThrowError();
expect(DOM.querySelectorAll(rootTC.nativeElement, 'copy-me').length).toEqual(0);
expect(rootTC.nativeElement).toHaveText('');
async.done();
});
}));
modules/angular2/test/directives/ng_switch_spec.ts
+58 -56
View File
@@ -1,5 +1,6 @@
import {
AsyncTestCompleter,
TestComponentBuilder,
beforeEach,
ddescribe,
describe,
@@ -10,69 +11,68 @@ import {
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: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, 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('');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('');
view.context.switchValue = 'a';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
rootTC.componentInstance.switchValue = 'a';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when a');
view.context.switchValue = 'b';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when b');
rootTC.componentInstance.switchValue = 'b';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when b');
async.done();
});
}));
it('should switch amongst when values with fallback to default',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' +
'<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');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default');
view.context.switchValue = 'a';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when a');
rootTC.componentInstance.switchValue = 'a';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when a');
view.context.switchValue = 'b';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default');
rootTC.componentInstance.switchValue = 'b';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default');
async.done();
});
}));
it('should support multiple whens with the same value',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
@@ -83,18 +83,19 @@ export function main() {
'<template ng-switch-default><li>when default2;</li></template>' +
'</ul></div>';
tb.createView(TestComponent, {html: template})
.then((view) => {
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default1;when default2;');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default1;when default2;');
view.context.switchValue = 'a';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when a1;when a2;');
rootTC.componentInstance.switchValue = 'a';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when a1;when a2;');
view.context.switchValue = 'b';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when b1;when b2;');
rootTC.componentInstance.switchValue = 'b';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when b1;when b2;');
async.done();
});
@@ -103,7 +104,7 @@ export function main() {
describe('when values changes', () => {
it('should switch amongst when values',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
@@ -111,29 +112,30 @@ export function main() {
'<template ng-switch-default><li>when default;</li></template>' +
'</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;');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.when1 = 'a';
rootTC.componentInstance.when2 = 'b';
rootTC.componentInstance.switchValue = 'a';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when 1;');
view.context.switchValue = 'b';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when 2;');
rootTC.componentInstance.switchValue = 'b';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when 2;');
view.context.switchValue = 'c';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
rootTC.componentInstance.switchValue = 'c';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default;');
view.context.when1 = 'c';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when 1;');
rootTC.componentInstance.when1 = 'c';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when 1;');
view.context.when1 = 'd';
view.detectChanges();
expect(DOM.getText(view.rootNodes[0])).toEqual('when default;');
rootTC.componentInstance.when1 = 'd';
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('when default;');
async.done();
});
modules/angular2/test/directives/non_bindable_spec.ts
+23 -17
View File
@@ -1,5 +1,7 @@
import {
AsyncTestCompleter,
TestComponentBuilder,
By,
beforeEach,
ddescribe,
describe,
@@ -18,40 +20,44 @@ 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: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, 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}}');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('foo{{text}}');
async.done();
});
}));
it('should ignore directives on child nodes',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
tb.createView(TestComponent, {html: template})
.then((view) => {
view.detectChanges();
var span = DOM.querySelector(view.rootNodes[0], '#child');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
// We must use DOM.querySelector instead of rootTC.query here
// since the elements inside are not compiled.
var span = DOM.querySelector(rootTC.nativeElement, '#child');
expect(DOM.hasClass(span, 'compiled')).toBeFalsy();
async.done();
});
}));
it('should trigger directives on the same node',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
tb.createView(TestComponent, {html: template})
.then((view) => {
view.detectChanges();
var span = DOM.querySelector(view.rootNodes[0], '#child');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
var span = DOM.querySelector(rootTC.nativeElement, '#child');
expect(DOM.hasClass(span, 'compiled')).toBeTruthy();
async.done();
});