feat(debug): replace DebugElement with new Debug DOM

Now, using `ng.probe(element)` in the browser console returns
a DebugElement when in dev mode.

`ComponentFixture#debugElement` also returns a new DebugElement.

Breaking Change:

This is a breaking change for unit tests. The API for the DebugElement
has changed. Now, there is a DebugElement or DebugNode for every node
in the DOM, not only nodes with an ElementRef. `componentViewChildren` is
removed, and `childNodes` is a list of ElementNodes corresponding to every
child in the DOM. `query` no longer takes a scope parameter, since
the entire rendered DOM is included in the `childNodes`.

Before:

```
componentFixture.debugElement.componentViewChildren[0];
```

After
```
// Depending on the DOM structure of your component, the
// index may have changed or the first component child
// may be a sub-child.
componentFixture.debugElement.children[0];
```

Before:

```
debugElement.query(By.css('div'), Scope.all());
```

After:

```
debugElement.query(By.css('div'));
```

Before:

```
componentFixture.debugElement.elementRef;
```

After:

```
componentFixture.elementRef;
```
This commit is contained in:
Julie Ralph
2016-01-13 21:35:21 -08:00
committed by Alex Eagle
parent ae7d2ab515
commit e1bf3d33f8
45 changed files with 1243 additions and 1220 deletions
@@ -17,12 +17,11 @@ import {
} from 'angular2/testing_internal';
import {OnDestroy} from 'angular2/core';
import {Injector, inspectElement} from 'angular2/core';
import {Injector} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {By} from 'angular2/platform/common_dom';
import {Component, View, ViewMetadata} from 'angular2/src/core/metadata';
import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
import {ElementRef} from 'angular2/src/core/linker/element_ref';
import {ElementRef, ElementRef_} from 'angular2/src/core/linker/element_ref';
import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {ComponentFixture_} from "angular2/src/testing/test_component_builder";
@@ -34,76 +33,6 @@ export function main() {
describe('DynamicComponentLoader', function() {
describe("loading into a location", () => {
it('should work',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
async.done();
});
});
}));
it('should return a disposable component ref',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.debugElement.elementRef, 'loc')
.then(ref => {
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("Location;");
async.done();
});
});
}));
it('should allow to dispose even if the location has been removed',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp]
}))
.overrideView(
ChildComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
tc.debugElement.componentInstance.ctxBoolProp = true;
tc.detectChanges();
var childCompEl = tc.debugElement.query(By.css('child-cmp'));
loader.loadIntoLocation(DynamicallyLoaded, childCompEl.elementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
tc.debugElement.componentInstance.ctxBoolProp = false;
tc.detectChanges();
expect(tc.debugElement.nativeElement).toHaveText("");
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("");
async.done();
});
});
}));
it('should update host properties',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
@@ -112,21 +41,94 @@ export function main() {
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef, 'loc')
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
.then(ref => {
ref.instance.id = "new value";
tc.detectChanges();
var newlyInsertedElement =
DOM.childNodes(tc.debugElement.nativeElement)[1];
expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
async.done();
});
});
}));
it('should return a disposable component ref',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoaded, tc.elementRef, 'loc')
.then(ref => {
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("Location;");
async.done();
});
});
}));
it('should allow to dispose even if the location has been removed',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp *ngIf="ctxBoolProp"></child-cmp>',
directives: [NgIf, ChildComp]
}))
.overrideView(
ChildComp,
new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
tc.debugElement.componentInstance.ctxBoolProp = true;
tc.detectChanges();
var childCompEl = (<ElementRef_>tc.elementRef).internalElement;
// TODO(juliemr): This is hideous, see if there's a better way to handle
// child element refs now.
var childElementRef =
childCompEl.componentView.appElements[0].nestedViews[0].appElements[0].ref;
loader.loadIntoLocation(DynamicallyLoaded, childElementRef, 'loc')
.then(ref => {
expect(tc.debugElement.nativeElement)
.toHaveText("Location;DynamicallyLoaded;");
tc.debugElement.componentInstance.ctxBoolProp = false;
tc.detectChanges();
expect(tc.debugElement.nativeElement).toHaveText("");
ref.dispose();
expect(tc.debugElement.nativeElement).toHaveText("");
async.done();
});
});
}));
it('should update host properties',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(
MyComp, new ViewMetadata(
{template: '<location #loc></location>', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithHostProps, tc.elementRef, 'loc')
.then(ref => {
ref.instance.id = "new value";
tc.detectChanges();
var newlyInsertedElement =
DOM.childNodes(tc.debugElement.nativeElement)[1];
expect((<HTMLElement>newlyInsertedElement).id).toEqual("new value");
async.done();
});
});
}));
it('should leave the view tree in a consistent state if hydration fails',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
@@ -139,8 +141,8 @@ export function main() {
tc.debugElement
PromiseWrapper.catchError(
loader.loadIntoLocation(DynamicallyLoadedThrows,
tc.debugElement.elementRef, 'loc'),
loader.loadIntoLocation(DynamicallyLoadedThrows, tc.elementRef,
'loc'),
error => {
expect(error.message).toContain("ThrownInConstructor");
expect(() => tc.detectChanges()).not.toThrow();
@@ -159,8 +161,7 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
expect(() => loader.loadIntoLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef,
'someUnknownVariable'))
tc.elementRef, 'someUnknownVariable'))
.toThrowError('Could not find variable someUnknownVariable');
async.done();
});
@@ -173,9 +174,8 @@ export function main() {
new ViewMetadata({template: '<div #loc></div>', directives: []}))
.createAsync(MyComp)
.then((tc) => {
loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, 'loc', null,
[[DOM.createTextNode('hello')]])
loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
'loc', null, [[DOM.createTextNode('hello')]])
.then(ref => {
tc.detectChanges();
expect(tc.nativeElement).toHaveText('dynamic(hello)');
@@ -193,8 +193,8 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
PromiseWrapper.catchError(
loader.loadIntoLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, 'loc', null, []),
loader.loadIntoLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
'loc', null, []),
(e) => {
expect(e.message).toContain(
`The component ${stringify(DynamicallyLoadedWithNgContent)} has 1 <ng-content> elements, but only 0 slots were provided`);
@@ -215,7 +215,7 @@ export function main() {
}))
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
.then(ref => {
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(DOM.nextSibling(tc.debugElement.nativeElement))
@@ -227,38 +227,38 @@ export function main() {
}));
it('should return a disposable component ref',
inject(
[DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><location #loc></location></div>',
directives: [Location]
}))
.
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
(loader, tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<div><location #loc></location></div>',
directives: [Location]
}))
.
createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.debugElement.elementRef)
.then(ref => {
loader.loadNextToLocation(DynamicallyLoaded2, tc.debugElement.elementRef)
.then(ref2 => {
var firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
var secondSibling = DOM.nextSibling(firstSibling);
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(firstSibling).toHaveText("DynamicallyLoaded;");
expect(secondSibling).toHaveText("DynamicallyLoaded2;");
createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoaded, tc.elementRef)
.then(ref => {
loader.loadNextToLocation(DynamicallyLoaded2, tc.elementRef)
.then(ref2 => {
var firstSibling =
DOM.nextSibling(tc.debugElement.nativeElement);
var secondSibling = DOM.nextSibling(firstSibling);
expect(tc.debugElement.nativeElement).toHaveText("Location;");
expect(firstSibling).toHaveText("DynamicallyLoaded;");
expect(secondSibling).toHaveText("DynamicallyLoaded2;");
ref2.dispose();
ref2.dispose();
firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
secondSibling = DOM.nextSibling(firstSibling);
expect(secondSibling).toBeNull();
firstSibling = DOM.nextSibling(tc.debugElement.nativeElement);
secondSibling = DOM.nextSibling(firstSibling);
expect(secondSibling).toBeNull();
async.done();
});
});
});
}));
async.done();
});
});
});
}));
it('should update host properties',
inject([DynamicComponentLoader, TestComponentBuilder, AsyncTestCompleter],
@@ -271,8 +271,7 @@ export function main() {
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoadedWithHostProps,
tc.debugElement.elementRef)
loader.loadNextToLocation(DynamicallyLoadedWithHostProps, tc.elementRef)
.then(ref => {
ref.instance.id = "new value";
@@ -293,9 +292,8 @@ export function main() {
tcb.overrideView(MyComp, new ViewMetadata({template: '', directives: [Location]}))
.createAsync(MyComp)
.then((tc) => {
loader.loadNextToLocation(DynamicallyLoadedWithNgContent,
tc.debugElement.elementRef, null,
[[DOM.createTextNode('hello')]])
loader.loadNextToLocation(DynamicallyLoadedWithNgContent, tc.elementRef,
null, [[DOM.createTextNode('hello')]])
.then(ref => {
tc.detectChanges();
var newlyInsertedElement =
@@ -3,7 +3,7 @@ library angular2.test.di.integration_dart_spec;
import 'package:angular2/angular2.dart';
import 'package:angular2/core.dart';
import 'package:angular2/src/core/debug/debug_element.dart';
import 'package:angular2/src/core/debug/debug_node.dart';
import 'package:angular2/testing_internal.dart';
import 'package:observe/observe.dart';
import 'package:angular2/src/core/change_detection/differs/default_iterable_differ.dart';
@@ -56,7 +56,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('[Hello, World]');
async.done();
});
@@ -112,7 +112,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('prop:foo-prop;map:foo-map');
async.done();
});
@@ -149,7 +149,7 @@ main() {
.createAsync(Dummy)
.then((tc) {
tc.detectChanges();
var cmp = tc.debugElement.componentViewChildren[0]
var cmp = tc.debugElement.children[0]
.inject(OnChangeComponent);
expect(cmp.prop).toEqual('hello');
expect(cmp.changes.containsKey('prop')).toEqual(true);
@@ -178,7 +178,7 @@ main() {
tc.detectChanges();
expect(log.result()).toEqual("check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('12');
tc.detectChanges();
@@ -194,7 +194,7 @@ main() {
// we changed the list => a check
expect(log.result()).toEqual("check; check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('123');
// we replaced the list => a check
@@ -204,7 +204,7 @@ main() {
tc.detectChanges();
expect(log.result()).toEqual("check; check; check");
expect(asNativeElements(tc.debugElement.componentViewChildren))
expect(asNativeElements(tc.debugElement.children))
.toHaveText('567');
});
})));
@@ -160,8 +160,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.id)
.toEqual('Hello World!');
expect(fixture.debugElement.children[0].nativeElement.id).toEqual('Hello World!');
async.done();
});
}));
@@ -176,15 +175,13 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Initial aria label';
fixture.detectChanges();
expect(
DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'aria-label'))
DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Initial aria label');
fixture.debugElement.componentInstance.ctxProp = 'Changed aria label';
fixture.detectChanges();
expect(
DOM.getAttribute(fixture.debugElement.componentViewChildren[0].nativeElement,
'aria-label'))
DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'aria-label'))
.toEqual('Changed aria label');
async.done();
@@ -201,14 +198,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'bar';
fixture.detectChanges();
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toEqual('bar');
fixture.debugElement.componentInstance.ctxProp = null;
fixture.detectChanges();
expect(DOM.hasAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, 'foo'))
expect(DOM.hasAttribute(fixture.debugElement.children[0].nativeElement, 'foo'))
.toBeFalsy();
async.done();
@@ -225,14 +220,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = '10';
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'height'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('10px');
fixture.debugElement.componentInstance.ctxProp = null;
fixture.detectChanges();
expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
'height'))
expect(DOM.getStyle(fixture.debugElement.children[0].nativeElement, 'height'))
.toEqual('');
async.done();
@@ -248,13 +241,11 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
.toEqual(0);
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(0);
fixture.debugElement.componentInstance.ctxNumProp = 5;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.tabIndex)
.toEqual(5);
expect(fixture.debugElement.children[0].nativeElement.tabIndex).toEqual(5);
async.done();
});
@@ -269,13 +260,11 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
.toBeFalsy();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeFalsy();
fixture.debugElement.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].nativeElement.readOnly)
.toBeTruthy();
expect(fixture.debugElement.children[0].nativeElement.readOnly).toBeTruthy();
async.done();
});
@@ -291,14 +280,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Some <span>HTML</span>';
fixture.detectChanges();
expect(
DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some <span>HTML</span>');
fixture.debugElement.componentInstance.ctxProp = 'Some other <div>HTML</div>';
fixture.detectChanges();
expect(
DOM.getInnerHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getInnerHTML(fixture.debugElement.children[0].nativeElement))
.toEqual('Some other <div>HTML</div>');
async.done();
@@ -313,7 +300,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var nativeEl = fixture.debugElement.componentViewChildren[0].nativeElement;
var nativeEl = fixture.debugElement.children[0].nativeElement;
fixture.debugElement.componentInstance.ctxProp = 'foo bar';
fixture.detectChanges();
@@ -340,13 +327,12 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[0].inject(MyDir).dirProp)
.toEqual('Hello World!');
expect(fixture.debugElement.componentViewChildren[1].inject(MyDir).dirProp)
.toEqual('Hi there!');
expect(fixture.debugElement.componentViewChildren[2].inject(MyDir).dirProp)
.toEqual('Hi there!');
expect(fixture.debugElement.componentViewChildren[3].inject(MyDir).dirProp)
var containerSpan = fixture.debugElement.children[0];
expect(containerSpan.children[0].inject(MyDir).dirProp).toEqual('Hello World!');
expect(containerSpan.children[1].inject(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[2].inject(MyDir).dirProp).toEqual('Hi there!');
expect(containerSpan.children[3].inject(MyDir).dirProp)
.toEqual('One more Hello World!');
async.done();
});
@@ -368,7 +354,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'a';
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].getLocal('dir');
var dir = fixture.debugElement.children[0].getLocal('dir');
expect(dir.dirProp).toEqual('aa');
async.done();
});
@@ -405,7 +391,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxProp = 'Hello World!';
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
expect(tc.inject(MyDir).dirProp).toEqual('Hello World!');
expect(tc.inject(ChildComp).dirProp).toEqual(null);
@@ -447,7 +433,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var idDir = tc.inject(IdDir);
fixture.debugElement.componentInstance.ctxProp = 'some_id';
@@ -563,7 +549,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
expect(fixture.debugElement.children[0].children[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
async.done();
@@ -579,7 +565,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('localdir'))
expect(fixture.debugElement.children[0].children[0].getLocal('localdir'))
.toBeAnInstanceOf(ExportDir);
async.done();
@@ -620,34 +606,31 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var childCmp = fixture.debugElement.children[0].children[0];
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.componentViewChildren[0].getLocal('bob'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.not.toBe(
fixture.debugElement.componentViewChildren[0].getLocal('bob'));
expect(childCmp.getLocal('alice')).toBeAnInstanceOf(ChildComp);
expect(childCmp.getLocal('bob')).toBeAnInstanceOf(ChildComp);
expect(childCmp.getLocal('alice')).not.toBe(childCmp.getLocal('bob'));
async.done();
})}));
it('should assign the component instance to a var- with shorthand syntax',
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp #alice></child-cmp>',
directives: [ChildComp]
}))
(tcb: TestComponentBuilder,
async) => {tcb.overrideView(MyComp, new ViewMetadata({
template: '<child-cmp #alice></child-cmp>',
directives: [ChildComp]
}))
.createAsync(MyComp)
.then((fixture) => {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
expect(fixture.debugElement.children[0].getLocal('alice'))
.toBeAnInstanceOf(ChildComp);
async.done();
})}));
async.done();
})}));
it('should assign the element instance to a user-defined variable',
inject([TestComponentBuilder, AsyncTestCompleter],
@@ -660,7 +643,7 @@ function declareTests() {
.then((fixture) => {
var value =
fixture.debugElement.componentViewChildren[0].getLocal('alice');
fixture.debugElement.children[0].children[0].getLocal('alice');
expect(value).not.toBe(null);
expect(value.tagName.toLowerCase()).toEqual('div');
@@ -677,7 +660,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
expect(fixture.debugElement.componentViewChildren[0].getLocal('superAlice'))
expect(fixture.debugElement.children[0].children[0].getLocal('superAlice'))
.toBeAnInstanceOf(ChildComp);
async.done();
@@ -719,7 +702,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
@@ -745,7 +728,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.debugElement.componentInstance.ctxProp = "one";
fixture.detectChanges();
@@ -771,7 +754,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.debugElement.componentInstance.ctxProp = "one";
fixture.detectChanges();
@@ -797,7 +780,7 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var cmp = fixture.debugElement.componentViewChildren[0].getLocal('cmp');
var cmp = fixture.debugElement.children[0].getLocal('cmp');
fixture.detectChanges();
expect(cmp.numberOfChecks).toEqual(1);
@@ -830,8 +813,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var childComponent =
fixture.debugElement.componentViewChildren[0].getLocal('child');
var childComponent = fixture.debugElement.children[0].getLocal('child');
expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
async.done();
@@ -853,7 +835,7 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[0].children[1];
var tc = fixture.debugElement.children[0].children[0].children[0];
var childComponent = tc.getLocal('child');
expect(childComponent.myHost).toBeAnInstanceOf(SomeDirective);
@@ -872,7 +854,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var emitter = tc.inject(DirectiveEmittingEvent);
var listener = tc.inject(DirectiveListeningEvent);
@@ -907,9 +889,10 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.childNodes[0];
var emitter = tc.inject(DirectiveEmittingEvent);
var myComp = tc.inject(MyComp);
var myComp = fixture.debugElement.inject(MyComp);
var listener = tc.inject(DirectiveListeningEvent);
myComp.ctxProp = '';
@@ -934,7 +917,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var dir = tc.inject(DirectiveWithTwoWayBinding);
fixture.debugElement.componentInstance.ctxProp = 'one';
@@ -961,7 +944,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
dispatchEvent(tc.nativeElement, 'domEvent');
@@ -988,7 +971,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
dispatchEvent(DOM.getGlobalEventTarget("window"), 'domEvent');
expect(listener.eventTypes).toEqual(['window_domEvent']);
@@ -1017,8 +1000,7 @@ function declareTests() {
.then((fixture) => {
fixture.detectChanges();
expect(DOM.getAttribute(
fixture.debugElement.componentViewChildren[0].nativeElement, "role"))
expect(DOM.getAttribute(fixture.debugElement.children[0].nativeElement, "role"))
.toEqual("button");
async.done();
@@ -1034,7 +1016,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var updateHost = tc.inject(DirectiveUpdatingHostProperties);
updateHost.id = "newId";
@@ -1066,17 +1048,15 @@ function declareTests() {
.then((fixture) => {
var dispatchedEvent = DOM.createMouseEvent('click');
var dispatchedEvent2 = DOM.createMouseEvent('click');
DOM.dispatchEvent(fixture.debugElement.componentViewChildren[0].nativeElement,
DOM.dispatchEvent(fixture.debugElement.children[0].nativeElement,
dispatchedEvent);
DOM.dispatchEvent(fixture.debugElement.componentViewChildren[1].nativeElement,
DOM.dispatchEvent(fixture.debugElement.children[1].nativeElement,
dispatchedEvent2);
expect(DOM.isPrevented(dispatchedEvent)).toBe(true);
expect(DOM.isPrevented(dispatchedEvent2)).toBe(false);
expect(
DOM.getChecked(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getChecked(fixture.debugElement.children[0].nativeElement))
.toBeFalsy();
expect(
DOM.getChecked(fixture.debugElement.componentViewChildren[1].nativeElement))
expect(DOM.getChecked(fixture.debugElement.children[1].nativeElement))
.toBeTruthy();
async.done();
});
@@ -1098,7 +1078,7 @@ function declareTests() {
fixture.debugElement.componentInstance.ctxBoolProp = true;
fixture.detectChanges();
var tc = fixture.debugElement.componentViewChildren[1];
var tc = fixture.debugElement.children[0];
var listener = tc.inject(DirectiveListeningDomEvent);
var listenerother = tc.inject(DirectiveListeningDomEventOther);
@@ -1136,11 +1116,11 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0].children[0];
var dynamicVp = tc.inject(DynamicViewport);
dynamicVp.done.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.componentViewChildren[1].nativeElement)
expect(fixture.debugElement.children[0].children[1].nativeElement)
.toHaveText('dynamic greet');
async.done();
});
@@ -1157,7 +1137,7 @@ function declareTests() {
{template: '<input static type="text" title>', directives: [NeedsAttribute]}))
.createAsync(MyComp)
.then((fixture) => {
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
var needsAttribute = tc.inject(NeedsAttribute);
expect(needsAttribute.typeAttribute).toEqual('text');
expect(needsAttribute.staticAttribute).toEqual('');
@@ -1183,7 +1163,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
var comp = fixture.debugElement.children[0].getLocal("consuming");
expect(comp.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@@ -1201,7 +1181,7 @@ function declareTests() {
}))
.createAsync(DirectiveProvidingInjectableInView)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("consuming");
var comp = fixture.debugElement.children[0].getLocal("consuming");
expect(comp.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@@ -1231,7 +1211,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
var comp = fixture.debugElement.componentViewChildren[0].getLocal("dir");
var comp = fixture.debugElement.children[0].getLocal("dir");
expect(comp.directive.injectable).toBeAnInstanceOf(InjectableService);
async.done();
@@ -1257,7 +1237,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var gpComp = fixture.debugElement.componentViewChildren[0];
var gpComp = fixture.debugElement.children[0];
var parentComp = gpComp.children[0];
var childComp = parentComp.children[0];
@@ -1289,8 +1269,7 @@ function declareTests() {
}))
.createAsync(MyComp)
.then((fixture) => {
var providing =
fixture.debugElement.componentViewChildren[0].getLocal("providing");
var providing = fixture.debugElement.children[0].getLocal("providing");
expect(providing.created).toBe(false);
fixture.debugElement.componentInstance.ctxBoolProp = true;
@@ -1435,7 +1414,7 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var tc = fixture.debugElement.componentViewChildren[0];
var tc = fixture.debugElement.children[0];
tc.inject(DirectiveEmittingEvent).fireEvent("boom");
try {
@@ -1750,8 +1729,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
expect(dir.dirProp).toEqual("aaa");
async.done();
});
@@ -1766,13 +1744,11 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
dir.myAttr = "aaa";
fixture.detectChanges();
expect(
DOM.getOuterHTML(fixture.debugElement.componentViewChildren[0].nativeElement))
expect(DOM.getOuterHTML(fixture.debugElement.children[0].nativeElement))
.toContain('my-attr="aaa"');
async.done();
});
@@ -1791,8 +1767,8 @@ function declareTests() {
tcb.createAsync(MyComp).then(root => { fixture = root; });
tick();
var emitter = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var emitter =
fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
emitter.fireEvent('fired !');
tick();
@@ -1802,24 +1778,23 @@ function declareTests() {
it('should support host listener decorators',
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<with-prop-decorators></with-prop-decorators>',
directives: [DirectiveWithPropDecorators]
}))
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.componentViewChildren[0].inject(
DirectiveWithPropDecorators);
var native = fixture.debugElement.componentViewChildren[0].nativeElement;
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
async) => {
tcb.overrideView(MyComp, new ViewMetadata({
template: '<with-prop-decorators></with-prop-decorators>',
directives: [DirectiveWithPropDecorators]
}))
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var dir = fixture.debugElement.children[0].inject(DirectiveWithPropDecorators);
var native = fixture.debugElement.children[0].nativeElement;
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
expect(dir.target).toBe(native);
async.done();
});
}));
expect(dir.target).toBe(native);
async.done();
});
}));
}
it('should support defining views in the component decorator',
@@ -1831,7 +1806,7 @@ function declareTests() {
.createAsync(MyComp)
.then((fixture) => {
fixture.detectChanges();
var native = fixture.debugElement.componentViewChildren[0].nativeElement;
var native = fixture.debugElement.children[0].nativeElement;
expect(native).toHaveText("No View Decorator: 123");
async.done();
});
@@ -21,7 +21,6 @@ import {
} from 'angular2/testing_internal';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {AppViewListener} from 'angular2/src/core/linker/view_listener';
import {
bind,
@@ -34,17 +33,15 @@ import {
View,
ViewContainerRef,
ViewEncapsulation,
ViewMetadata,
Scope
ViewMetadata
} from 'angular2/core';
import {
By,
} from 'angular2/platform/common_dom';
import {getAllDebugNodes} from 'angular2/src/core/debug/debug_node';
export function main() {
describe('projection', () => {
beforeEachProviders(() => [provide(AppViewListener, {useClass: AppViewListener})]);
it('should support simple components',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MainComp, new ViewMetadata({
@@ -199,7 +196,8 @@ export function main() {
.then((main) => {
var viewportDirectives =
main.debugElement.queryAll(By.directive(ManualViewportDirective))
main.debugElement.children[0]
.childNodes.filter(By.directive(ManualViewportDirective))
.map(de => de.inject(ManualViewportDirective));
expect(main.debugElement.nativeElement).toHaveText('(, B)');
@@ -244,8 +242,8 @@ export function main() {
.then((main) => {
var viewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('OUTER(INNER(INNERINNER(,BC)))');
viewportDirective.show();
@@ -269,8 +267,8 @@ export function main() {
.then((main) => {
var viewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, BC)');
@@ -336,12 +334,20 @@ export function main() {
}))
.createAsync(MainComp)
.then((main) => {
var sourceDirective;
// We can't use the child nodes to get a hold of this because it's not in the dom at
// all.
getAllDebugNodes().forEach((debug) => {
if (debug.providerTokens.indexOf(ManualViewportDirective) !== -1) {
sourceDirective = debug.inject(ManualViewportDirective);
}
});
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('START()END');
projectDirective.show(sourceDirective.templateRef);
@@ -361,10 +367,11 @@ export function main() {
.then((main) => {
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('SIMPLE()START()END');
projectDirective.show(sourceDirective.templateRef);
@@ -389,10 +396,11 @@ export function main() {
.then((main) => {
var sourceDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
var projectDirective: ProjectDirective =
main.debugElement.query(By.directive(ProjectDirective)).inject(ProjectDirective);
main.debugElement.queryAllNodes(By.directive(ProjectDirective))[0].inject(
ProjectDirective);
expect(main.debugElement.nativeElement).toHaveText('(, B)START()END');
projectDirective.show(sourceDirective.templateRef);
@@ -419,8 +427,8 @@ export function main() {
main.detectChanges();
var manualDirective: ManualViewportDirective =
main.debugElement.query(By.directive(ManualViewportDirective))
.inject(ManualViewportDirective);
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('TREE(0:)');
manualDirective.show();
main.detectChanges();
@@ -480,12 +488,12 @@ export function main() {
expect(main.debugElement.nativeElement).toHaveText('MAIN()');
var viewportElement =
main.debugElement.componentViewChildren[0].componentViewChildren[0];
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[0];
viewportElement.inject(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST())');
viewportElement =
main.debugElement.componentViewChildren[0].componentViewChildren[1];
main.debugElement.queryAllNodes(By.directive(ManualViewportDirective))[1];
viewportElement.inject(ManualViewportDirective).show();
expect(main.debugElement.nativeElement).toHaveText('MAIN(FIRST(SECOND(a)))');
@@ -540,21 +548,24 @@ export function main() {
.then((main) => {
var conditionalComp =
main.debugElement.query(By.directive(ConditionalContentComponent));
var viewViewportDir =
conditionalComp.query(By.directive(ManualViewportDirective), Scope.view)
.inject(ManualViewportDirective);
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[0].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)');
viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(AC, D)');
var contentViewportDir =
conditionalComp.query(By.directive(ManualViewportDirective), Scope.light)
.inject(ManualViewportDirective);
conditionalComp.queryAllNodes(By.directive(ManualViewportDirective))[1].inject(
ManualViewportDirective);
expect(main.debugElement.nativeElement).toHaveText('(, D)');
expect(main.debugElement.nativeElement).toHaveText('(, D)');
// first show content viewport, then the view viewport,
// i.e. projection needs to take create of already
// created views
contentViewportDir.show();
viewViewportDir.show();
expect(main.debugElement.nativeElement).toHaveText('(ABC, D)');
// hide view viewport, and test that it also hides
@@ -53,8 +53,7 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@@ -70,7 +69,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
view.detectChanges();
@@ -92,7 +91,7 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
@@ -121,7 +120,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.log).toEqual([["setter", "foo"], ["init", "foo"], ["check", "foo"]]);
@@ -181,8 +180,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|4|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
async.done();
});
@@ -198,8 +196,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@@ -217,12 +214,11 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren)).toHaveText('2|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
async.done();
});
@@ -258,13 +254,11 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|1d|2d|3d|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
view.debugElement.componentInstance.list = ['3d', '2d'];
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('2|3d|2d|');
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3d|2d|');
async.done();
});
@@ -279,8 +273,7 @@ export function main() {
.createAsync(MyComp)
.then((view) => {
view.detectChanges();
var needsTpl: NeedsTpl =
view.debugElement.componentViewChildren[0].inject(NeedsTpl);
var needsTpl: NeedsTpl = view.debugElement.children[0].inject(NeedsTpl);
expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).hasLocal('light'))
.toBe(true);
@@ -304,7 +297,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.detectChanges();
ObservableWrapper.subscribe(q.query.changes, (_) => {
@@ -329,8 +322,8 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q1 = view.debugElement.componentViewChildren[0].getLocal("q1");
var q2 = view.debugElement.componentViewChildren[0].getLocal("q2");
var q1 = view.debugElement.children[0].getLocal("q1");
var q2 = view.debugElement.children[0].getLocal("q2");
var firedQ2 = false;
@@ -354,7 +347,8 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
var q: NeedsQuery = view.debugElement.children[0].getLocal('q');
expect(q.query.length).toEqual(1);
view.debugElement.componentInstance.shouldShow = false;
@@ -363,7 +357,7 @@ export function main() {
view.debugElement.componentInstance.shouldShow = true;
view.detectChanges();
var q2: NeedsQuery = view.debugElement.componentViewChildren[1].getLocal('q');
var q2: NeedsQuery = view.debugElement.children[0].getLocal('q');
expect(q2.query.length).toEqual(1);
@@ -382,7 +376,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@@ -405,7 +399,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.detectChanges();
expect(q.query.first.text).toEqual("one");
@@ -424,7 +418,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@@ -451,7 +445,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q = view.debugElement.componentViewChildren[0].getLocal("q");
var q = view.debugElement.children[0].getLocal("q");
view.debugElement.componentInstance.list = ['1d', '2d'];
@@ -475,8 +469,7 @@ export function main() {
.then((view) => {
view.detectChanges();
expect(asNativeElements(view.debugElement.componentViewChildren))
.toHaveText('hello|world|');
expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
async.done();
});
@@ -489,8 +482,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryByLabel =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryByLabel = view.debugElement.children[0].getLocal("q");
view.detectChanges();
expect(q.query.first.nativeElement).toHaveText("text");
@@ -508,7 +500,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
view.detectChanges();
@@ -529,7 +521,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -546,7 +538,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQuery = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQuery = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -563,7 +555,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryIf = view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryIf = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -586,8 +578,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryNestedIf =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryNestedIf = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -612,8 +603,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrder =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -636,8 +626,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrderWithParent =
view.debugElement.componentViewChildren[0].getLocal("q");
var q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].getLocal("q");
view.detectChanges();
@@ -660,8 +649,7 @@ export function main() {
tcb.overrideTemplate(MyComp, template)
.createAsync(MyComp)
.then((view) => {
var q: NeedsViewQueryOrder =
view.debugElement.componentViewChildren[0].getLocal('q');
var q: NeedsViewQueryOrder = view.debugElement.children[0].getLocal('q');
// no significance to 50, just a reasonably large cycle.
for (var i = 0; i < 50; i++) {
@@ -685,7 +673,7 @@ export function main() {
.then((view) => {
view.detectChanges();
var q = view.debugElement.componentViewChildren[0].getLocal('q');
var q = view.debugElement.children[0].getLocal('q');
expect(q.query1).toBeDefined();
expect(q.query2).toBeDefined();
expect(q.query3).toBeDefined();