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:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user