diff --git a/modules/angular2/src/debug/debug_element.ts b/modules/angular2/src/debug/debug_element.ts index 47dac8ae10..02fdde7fa4 100644 --- a/modules/angular2/src/debug/debug_element.ts +++ b/modules/angular2/src/debug/debug_element.ts @@ -87,6 +87,8 @@ export class DebugElement { return this._elementInjector.get(type); } + getLocal(name: string): any { return this._parentView.locals.get(name); } + /** * Return the first descendant TestElememt matching the given predicate * and scope. diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts index 0c3643a459..2adab993f1 100644 --- a/modules/angular2/test/core/compiler/integration_spec.ts +++ b/modules/angular2/test/core/compiler/integration_spec.ts @@ -14,12 +14,11 @@ import { it, xit, containsRegexp, - stringifyElement + stringifyElement, + TestComponentBuilder } from 'angular2/test_lib'; -import {TestBed} from 'angular2/src/test_lib/test_bed'; - import {DOM} from 'angular2/src/dom/dom_adapter'; import { Type, @@ -76,58 +75,55 @@ const ANCHOR_ELEMENT = CONST_EXPR(new OpaqueToken('AnchorElement')); export function main() { describe('integration tests', function() { - var ctx; beforeEachBindings(() => [bind(ANCHOR_ELEMENT).toValue(el('
'))]); - beforeEach(() => { ctx = new MyComp(); }); - - describe('react to record changes', function() { it('should consume text node changes', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({template: '
{{ctxProp}}
'})); - tb.createView(MyComp, {context: ctx}) - .then((view) => { - ctx.ctxProp = 'Hello World!'; + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({template: '
{{ctxProp}}
'})) + .createAsync(MyComp) + .then((rootTC) => { + rootTC.componentInstance.ctxProp = 'Hello World!'; - view.detectChanges(); - expect(DOM.getInnerHTML(view.rootNodes[0])).toEqual('Hello World!'); + rootTC.detectChanges(); + expect(rootTC.nativeElement).toHaveText('Hello World!'); async.done(); }); })); it('should consume element binding changes', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({template: '
'})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({template: '
'})) + .createAsync(MyComp) + .then((rootTC) => { - tb.createView(MyComp, {context: ctx}) - .then((view) => { + rootTC.componentInstance.ctxProp = 'Hello World!'; + rootTC.detectChanges(); - ctx.ctxProp = 'Hello World!'; - view.detectChanges(); - - expect(view.rootNodes[0].id).toEqual('Hello World!'); + expect(rootTC.componentViewChildren[0].nativeElement.id).toEqual('Hello World!'); async.done(); }); })); it('should consume binding to aria-* attributes', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, - new viewAnn.View({template: '
'})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, + new viewAnn.View({template: '
'})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - ctx.ctxProp = 'Initial aria label'; - view.detectChanges(); - expect(DOM.getAttribute(view.rootNodes[0], 'aria-label')) + rootTC.componentInstance.ctxProp = 'Initial aria label'; + rootTC.detectChanges(); + expect( + DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'aria-label')) .toEqual('Initial aria label'); - ctx.ctxProp = 'Changed aria label'; - view.detectChanges(); - expect(DOM.getAttribute(view.rootNodes[0], 'aria-label')) + rootTC.componentInstance.ctxProp = 'Changed aria label'; + rootTC.detectChanges(); + expect( + DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'aria-label')) .toEqual('Changed aria label'); async.done(); @@ -135,84 +131,86 @@ export function main() { })); it('should consume binding to property names where attr name and property name do not match', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, - new viewAnn.View({template: '
'})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, + new viewAnn.View({template: '
'})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - view.detectChanges(); - expect(view.rootNodes[0].tabIndex).toEqual(0); + rootTC.detectChanges(); + expect(rootTC.componentViewChildren[0].nativeElement.tabIndex).toEqual(0); - ctx.ctxNumProp = 5; - view.detectChanges(); - expect(view.rootNodes[0].tabIndex).toEqual(5); + rootTC.componentInstance.ctxNumProp = 5; + rootTC.detectChanges(); + expect(rootTC.componentViewChildren[0].nativeElement.tabIndex).toEqual(5); async.done(); }); })); it('should consume binding to camel-cased properties using dash-cased syntax in templates', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, - new viewAnn.View({template: ''})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, + new viewAnn.View({template: ''})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - view.detectChanges(); - expect(view.rootNodes[0].readOnly).toBeFalsy(); + rootTC.detectChanges(); + expect(rootTC.componentViewChildren[0].nativeElement.readOnly).toBeFalsy(); - ctx.ctxBoolProp = true; - view.detectChanges(); - expect(view.rootNodes[0].readOnly).toBeTruthy(); + rootTC.componentInstance.ctxBoolProp = true; + rootTC.detectChanges(); + expect(rootTC.componentViewChildren[0].nativeElement.readOnly).toBeTruthy(); async.done(); }); })); it('should consume binding to inner-html', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, - new viewAnn.View({template: '
'})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, + new viewAnn.View({template: '
'})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - ctx.ctxProp = 'Some HTML'; - view.detectChanges(); - expect(DOM.getInnerHTML(view.rootNodes[0])).toEqual('Some HTML'); + rootTC.componentInstance.ctxProp = 'Some HTML'; + rootTC.detectChanges(); + expect(DOM.getInnerHTML(rootTC.componentViewChildren[0].nativeElement)) + .toEqual('Some HTML'); - ctx.ctxProp = 'Some other
HTML
'; - view.detectChanges(); - expect(DOM.getInnerHTML(view.rootNodes[0])).toEqual('Some other
HTML
'); + rootTC.componentInstance.ctxProp = 'Some other
HTML
'; + rootTC.detectChanges(); + expect(DOM.getInnerHTML(rootTC.componentViewChildren[0].nativeElement)) + .toEqual('Some other
HTML
'); async.done(); }); })); it('should consume directive watch expression change.', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { var tpl = '
' + '
' + '
' + '
' + '
' + '
'; - tb.overrideView(MyComp, new viewAnn.View({template: tpl, directives: [MyDir]})); + tcb.overrideView(MyComp, new viewAnn.View({template: tpl, directives: [MyDir]})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - ctx.ctxProp = 'Hello World!'; - view.detectChanges(); + rootTC.componentInstance.ctxProp = 'Hello World!'; + rootTC.detectChanges(); - expect(view.rawView.elementInjectors[0].get(MyDir).dirProp) + expect(rootTC.componentViewChildren[0].inject(MyDir).dirProp) .toEqual('Hello World!'); - expect(view.rawView.elementInjectors[1].get(MyDir).dirProp).toEqual('Hi there!'); - expect(view.rawView.elementInjectors[2].get(MyDir).dirProp).toEqual('Hi there!'); - expect(view.rawView.elementInjectors[3].get(MyDir).dirProp) + expect(rootTC.componentViewChildren[1].inject(MyDir).dirProp).toEqual('Hi there!'); + expect(rootTC.componentViewChildren[2].inject(MyDir).dirProp).toEqual('Hi there!'); + expect(rootTC.componentViewChildren[3].inject(MyDir).dirProp) .toEqual('One more Hello World!'); async.done(); }); @@ -229,88 +227,92 @@ export function main() { }); it("should support pipes in bindings", - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({ - template: '
', - directives: [MyDir] - })); + inject([TestComponentBuilder, AsyncTestCompleter], + (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({ + template: '
', + directives: [MyDir] + })) - tb.createView(MyComp, {context: ctx}) - .then((view) => { - ctx.ctxProp = 'a'; - view.detectChanges(); + .createAsync(MyComp) + .then((rootTC) => { + rootTC.componentInstance.ctxProp = 'a'; + rootTC.detectChanges(); - var dir = view.rawView.locals.get("dir"); - expect(dir.dirProp).toEqual('aa'); - async.done(); - }); - })); + var dir = rootTC.componentViewChildren[0].getLocal('dir'); + expect(dir.dirProp).toEqual('aa'); + async.done(); + }); + })); }); it('should support nested components.', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView( - MyComp, - new viewAnn.View({template: '', directives: [ChildComp]})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView( + MyComp, + new viewAnn.View({template: '', directives: [ChildComp]})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - view.detectChanges(); + rootTC.detectChanges(); - expect(view.rootNodes).toHaveText('hello'); + expect(rootTC.nativeElement).toHaveText('hello'); async.done(); }); })); // GH issue 328 - https://github.com/angular/angular/issues/328 it('should support different directive types on a single node', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({ - template: '', - directives: [MyDir, ChildComp] - })); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({ + template: '', + directives: [MyDir, ChildComp] + })) - tb.createView(MyComp, {context: ctx}) - .then((view) => { + .createAsync(MyComp) + .then((rootTC) => { - ctx.ctxProp = 'Hello World!'; - view.detectChanges(); + rootTC.componentInstance.ctxProp = 'Hello World!'; + rootTC.detectChanges(); - var elInj = view.rawView.elementInjectors[0]; - expect(elInj.get(MyDir).dirProp).toEqual('Hello World!'); - expect(elInj.get(ChildComp).dirProp).toEqual(null); + var tc = rootTC.componentViewChildren[0]; + + expect(tc.inject(MyDir).dirProp).toEqual('Hello World!'); + expect(tc.inject(ChildComp).dirProp).toEqual(null); async.done(); }); })); it('should support directives where a binding attribute is not given', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({ - // No attribute "el-prop" specified. - template: '

', - directives: [MyDir] - })); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({ + // No attribute "el-prop" specified. + template: '

', + directives: [MyDir] + })) - tb.createView(MyComp, {context: ctx}).then((view) => { async.done(); }); + .createAsync(MyComp) + .then((rootTC) => { async.done(); }); })); it('should support directives where a selector matches property binding', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView( - MyComp, new viewAnn.View({template: '

', directives: [IdDir]})); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View( + {template: '

', directives: [IdDir]})) - tb.createView(MyComp, {context: ctx}) - .then((view) => { - var idDir = view.rawView.elementInjectors[0].get(IdDir); + .createAsync(MyComp) + .then((rootTC) => { + var tc = rootTC.componentViewChildren[0]; + var idDir = tc.inject(IdDir); - ctx.ctxProp = 'some_id'; - view.detectChanges(); + rootTC.componentInstance.ctxProp = 'some_id'; + rootTC.detectChanges(); expect(idDir.id).toEqual('some_id'); - ctx.ctxProp = 'other_id'; - view.detectChanges(); + rootTC.componentInstance.ctxProp = 'other_id'; + rootTC.detectChanges(); expect(idDir.id).toEqual('other_id'); async.done(); @@ -318,87 +320,88 @@ export function main() { })); it('should allow specifying directives as bindings', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({ - template: '', - directives: [bind(ChildComp).toClass(ChildComp)] - })); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({ + template: '', + directives: [bind(ChildComp).toClass(ChildComp)] + })) - tb.createView(MyComp, {context: ctx}) - .then((view) => { - view.detectChanges(); + .createAsync(MyComp) + .then((rootTC) => { + rootTC.detectChanges(); - expect(view.rootNodes).toHaveText('hello'); + expect(rootTC.nativeElement).toHaveText('hello'); async.done(); }); })); it('should read directives metadata from their binding token', - inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => { - tb.overrideView(MyComp, new viewAnn.View({ - template: '
', - directives: [bind(PublicApi).toClass(PrivateImpl), NeedsPublicApi] - })); + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + tcb.overrideView(MyComp, new viewAnn.View({ + template: '
', + directives: [bind(PublicApi).toClass(PrivateImpl), NeedsPublicApi] + })) - tb.createView(MyComp, {context: ctx}).then((view) => { async.done(); }); + .createAsync(MyComp) + .then((rootTC) => { async.done(); }); })); it('should support template directives via `