diff --git a/modules/@angular/core/test/linker/ng_container_integration_spec.ts b/modules/@angular/core/test/linker/ng_container_integration_spec.ts index 711ff717a0..6c947ce5b1 100644 --- a/modules/@angular/core/test/linker/ng_container_integration_spec.ts +++ b/modules/@angular/core/test/linker/ng_container_integration_spec.ts @@ -8,8 +8,8 @@ import {NgIf} from '@angular/common'; import {AfterContentInit, AfterViewInit, Component, ContentChildren, Directive, Input, QueryList, ViewChildren} from '@angular/core'; -import {TestBed} from '@angular/core/testing'; -import {AsyncTestCompleter, TestComponentBuilder, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal'; +import {TestBed, async} from '@angular/core/testing'; +import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, describe, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal'; import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter'; import {expect} from '@angular/platform-browser/testing/matchers'; @@ -21,170 +21,130 @@ export function main() { function declareTests({useJit}: {useJit: boolean}) { describe('', function() { - beforeEach(() => { TestBed.configureCompiler({useJit: useJit}); }); + beforeEach(() => { + TestBed.configureCompiler({useJit: useJit}); + TestBed.configureTestingModule( + {declarations: [MyComp, NeedsContentChildren, NeedsViewChildren, TextDirective, Simple]}); + }); - it('should support the "i18n" attribute', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - tcb.overrideTemplate(MyComp, 'foo') - .createAsync(MyComp) - .then((fixture) => { - fixture.detectChanges(); + it('should support the "i18n" attribute', () => { + const template = 'foo'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const el = fixture.debugElement.nativeElement; - expect(el).toHaveText('foo'); + fixture.detectChanges(); - async.done(); - }); - })); + const el = fixture.debugElement.nativeElement; + expect(el).toHaveText('foo'); + }); - it('should be rendered as comment with children as siblings', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - tcb.overrideTemplate(MyComp, '

') - .createAsync(MyComp) - .then((fixture) => { - fixture.detectChanges(); + it('should be rendered as comment with children as siblings', () => { + const template = '

'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const el = fixture.debugElement.nativeElement; - const children = getDOM().childNodes(el); - expect(children.length).toBe(2); - expect(getDOM().isCommentNode(children[0])).toBe(true); - expect(getDOM().tagName(children[1]).toUpperCase()).toEqual('P'); + fixture.detectChanges(); - async.done(); - }); - })); + const el = fixture.debugElement.nativeElement; + const children = getDOM().childNodes(el); + expect(children.length).toBe(2); + expect(getDOM().isCommentNode(children[0])).toBe(true); + expect(getDOM().tagName(children[1]).toUpperCase()).toEqual('P'); + }); - it('should support nesting', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - tcb.overrideTemplate( - MyComp, - '12') - .createAsync(MyComp) - .then((fixture) => { - fixture.detectChanges(); + it('should support nesting', () => { + const template = + '12'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const el = fixture.debugElement.nativeElement; - const children = getDOM().childNodes(el); - expect(children.length).toBe(5); - expect(getDOM().isCommentNode(children[0])).toBe(true); - expect(children[1]).toHaveText('1'); - expect(getDOM().isCommentNode(children[2])).toBe(true); - expect(getDOM().isCommentNode(children[3])).toBe(true); - expect(children[4]).toHaveText('2'); + fixture.detectChanges(); - async.done(); - }); - })); + const el = fixture.debugElement.nativeElement; + const children = getDOM().childNodes(el); + expect(children.length).toBe(5); + expect(getDOM().isCommentNode(children[0])).toBe(true); + expect(children[1]).toHaveText('1'); + expect(getDOM().isCommentNode(children[2])).toBe(true); + expect(getDOM().isCommentNode(children[3])).toBe(true); + expect(children[4]).toHaveText('2'); + }); - it('should group inner nodes', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - tcb.overrideTemplate( - MyComp, '

') - .createAsync(MyComp) - .then((fixture) => { - fixture.debugElement.componentInstance.ctxBoolProp = true; - fixture.detectChanges(); + it('should group inner nodes', () => { + const template = '

'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const el = fixture.debugElement.nativeElement; - const children = getDOM().childNodes(el); + fixture.debugElement.componentInstance.ctxBoolProp = true; + fixture.detectChanges(); - expect(children.length).toBe(4); - // ngIf anchor - expect(getDOM().isCommentNode(children[0])).toBe(true); - // ng-container anchor - expect(getDOM().isCommentNode(children[1])).toBe(true); - expect(getDOM().tagName(children[2]).toUpperCase()).toEqual('P'); - expect(getDOM().tagName(children[3]).toUpperCase()).toEqual('B'); + const el = fixture.debugElement.nativeElement; + const children = getDOM().childNodes(el); - fixture.debugElement.componentInstance.ctxBoolProp = false; - fixture.detectChanges(); + expect(children.length).toBe(4); + // ngIf anchor + expect(getDOM().isCommentNode(children[0])).toBe(true); + // ng-container anchor + expect(getDOM().isCommentNode(children[1])).toBe(true); + expect(getDOM().tagName(children[2]).toUpperCase()).toEqual('P'); + expect(getDOM().tagName(children[3]).toUpperCase()).toEqual('B'); - expect(children.length).toBe(1); - expect(getDOM().isCommentNode(children[0])).toBe(true); + fixture.debugElement.componentInstance.ctxBoolProp = false; + fixture.detectChanges(); - async.done(); - }); - })); + expect(children.length).toBe(1); + expect(getDOM().isCommentNode(children[0])).toBe(true); + }); - it('should work with static content projection', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - tcb.overrideTemplate( - MyComp, `

1

2

`) - .createAsync(MyComp) - .then((fixture) => { - fixture.detectChanges(); + it('should work with static content projection', () => { + const template = `

1

2

`; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const el = fixture.debugElement.nativeElement; - expect(el).toHaveText('SIMPLE(12)'); + fixture.detectChanges(); - async.done(); - }); - })); + const el = fixture.debugElement.nativeElement; + expect(el).toHaveText('SIMPLE(12)'); + }); - it('should support injecting the container from children', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - tcb.overrideTemplate( - MyComp, `

`) - .createAsync(MyComp) - .then((fixture) => { - fixture.detectChanges(); + it('should support injecting the container from children', () => { + const template = `

`; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - const dir = fixture.debugElement.children[0].injector.get(TextDirective); - expect(dir).toBeAnInstanceOf(TextDirective); - expect(dir.text).toEqual('container'); + fixture.detectChanges(); - async.done(); - }); - })); + const dir = fixture.debugElement.children[0].injector.get(TextDirective); + expect(dir).toBeAnInstanceOf(TextDirective); + expect(dir.text).toEqual('container'); + }); - it('should contain all direct child directives in a (content dom)', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - const template = - '
'; + it('should contain all direct child directives in a (content dom)', () => { + const template = + '
'; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - tcb.overrideTemplate(MyComp, template).createAsync(MyComp).then((view) => { - view.detectChanges(); - var q = view.debugElement.children[0].references['q']; - view.detectChanges(); + fixture.detectChanges(); + var q = fixture.debugElement.children[0].references['q']; + fixture.detectChanges(); - expect(q.textDirChildren.length).toEqual(1); - expect(q.numberOfChildrenAfterContentInit).toEqual(1); + expect(q.textDirChildren.length).toEqual(1); + expect(q.numberOfChildrenAfterContentInit).toEqual(1); + }); - async.done(); - }); - })); + it('should contain all child directives in a (view dom)', () => { + const template = ''; + TestBed.overrideComponent(MyComp, {set: {template}}); + const fixture = TestBed.createComponent(MyComp); - it('should contain all child directives in a (view dom)', - inject( - [TestComponentBuilder, AsyncTestCompleter], - (tcb: TestComponentBuilder, async: AsyncTestCompleter) => { - const template = ''; + fixture.detectChanges(); + var q = fixture.debugElement.children[0].references['q']; + fixture.detectChanges(); - tcb.overrideTemplate(MyComp, template).createAsync(MyComp).then((view) => { - view.detectChanges(); - var q = view.debugElement.children[0].references['q']; - view.detectChanges(); - - expect(q.textDirChildren.length).toEqual(1); - expect(q.numberOfChildrenAfterViewInit).toEqual(1); - - async.done(); - }); - })); + expect(q.textDirChildren.length).toEqual(1); + expect(q.numberOfChildrenAfterViewInit).toEqual(1); + }); }); } @@ -201,8 +161,7 @@ class NeedsContentChildren implements AfterContentInit { ngAfterContentInit() { this.numberOfChildrenAfterContentInit = this.textDirChildren.length; } } -@Component( - {selector: 'needs-view-children', template: '
', directives: [TextDirective]}) +@Component({selector: 'needs-view-children', template: '
'}) class NeedsViewChildren implements AfterViewInit { @ViewChildren(TextDirective) textDirChildren: QueryList; numberOfChildrenAfterViewInit: number; @@ -210,15 +169,11 @@ class NeedsViewChildren implements AfterViewInit { ngAfterViewInit() { this.numberOfChildrenAfterViewInit = this.textDirChildren.length; } } -@Component({selector: 'simple', template: 'SIMPLE()', directives: []}) +@Component({selector: 'simple', template: 'SIMPLE()'}) class Simple { } -@Component({ - selector: 'my-comp', - directives: [NeedsContentChildren, NeedsViewChildren, TextDirective, NgIf, Simple], - template: '' -}) +@Component({selector: 'my-comp', template: ''}) class MyComp { ctxBoolProp: boolean = false; }