refactor: code cleanup
This commit is contained in:
parent
fa4723a208
commit
cba885a1fb
|
@ -6,9 +6,7 @@
|
||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {resolveForwardRef} from '../di/forward_ref';
|
|
||||||
import {OpaqueToken} from '../di/opaque_token';
|
import {OpaqueToken} from '../di/opaque_token';
|
||||||
import {StringWrapper, isString, stringify} from '../facade/lang';
|
|
||||||
import {Type} from '../type';
|
import {Type} from '../type';
|
||||||
import {makeParamDecorator, makePropDecorator} from '../util/decorators';
|
import {makeParamDecorator, makePropDecorator} from '../util/decorators';
|
||||||
|
|
||||||
|
@ -48,7 +46,6 @@ import {makeParamDecorator, makePropDecorator} from '../util/decorators';
|
||||||
*/
|
*/
|
||||||
export const ANALYZE_FOR_ENTRY_COMPONENTS = new OpaqueToken('AnalyzeForEntryComponents');
|
export const ANALYZE_FOR_ENTRY_COMPONENTS = new OpaqueToken('AnalyzeForEntryComponents');
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Type of the Attribute decorator / constructor function.
|
* Type of the Attribute decorator / constructor function.
|
||||||
*
|
*
|
||||||
|
@ -56,55 +53,56 @@ export const ANALYZE_FOR_ENTRY_COMPONENTS = new OpaqueToken('AnalyzeForEntryComp
|
||||||
*/
|
*/
|
||||||
export interface AttributeDecorator {
|
export interface AttributeDecorator {
|
||||||
/**
|
/**
|
||||||
* Specifies that a constant attribute value should be injected.
|
* Specifies that a constant attribute value should be injected.
|
||||||
*
|
*
|
||||||
* The directive can inject constant string literals of host element attributes.
|
* The directive can inject constant string literals of host element attributes.
|
||||||
*
|
*
|
||||||
* ### Example
|
* ### Example
|
||||||
*
|
*
|
||||||
* Suppose we have an `<input>` element and want to know its `type`.
|
* Suppose we have an `<input>` element and want to know its `type`.
|
||||||
*
|
*
|
||||||
* ```html
|
* ```html
|
||||||
* <input type="text">
|
* <input type="text">
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* A decorator can inject string literal `text` like so:
|
* A decorator can inject string literal `text` like so:
|
||||||
*
|
*
|
||||||
* {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
|
* {@example core/ts/metadata/metadata.ts region='attributeMetadata'}
|
||||||
*
|
*
|
||||||
* ### Example as TypeScript Decorator
|
* ### Example as TypeScript Decorator
|
||||||
*
|
*
|
||||||
* {@example core/ts/metadata/metadata.ts region='attributeFactory'}
|
* {@example core/ts/metadata/metadata.ts region='attributeFactory'}
|
||||||
*
|
*
|
||||||
* ### Example as ES5 DSL
|
* ### Example as ES5 DSL
|
||||||
*
|
*
|
||||||
* ```
|
* ```
|
||||||
* var MyComponent = ng
|
* var MyComponent = ng
|
||||||
* .Component({...})
|
* .Component({...})
|
||||||
* .Class({
|
* .Class({
|
||||||
* constructor: [new ng.Attribute('title'), function(title) {
|
* constructor: [new ng.Attribute('title'), function(title) {
|
||||||
* ...
|
* ...
|
||||||
* }]
|
* }]
|
||||||
* })
|
* })
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* ### Example as ES5 annotation
|
* ### Example as ES5 annotation
|
||||||
*
|
*
|
||||||
* ```
|
* ```
|
||||||
* var MyComponent = function(title) {
|
* var MyComponent = function(title) {
|
||||||
* ...
|
* ...
|
||||||
* };
|
* };
|
||||||
*
|
*
|
||||||
* MyComponent.annotations = [
|
* MyComponent.annotations = [
|
||||||
* new ng.Component({...})
|
* new ng.Component({...})
|
||||||
* ]
|
* ]
|
||||||
* MyComponent.parameters = [
|
* MyComponent.parameters = [
|
||||||
* [new ng.Attribute('title')]
|
* [new ng.Attribute('title')]
|
||||||
* ]
|
* ]
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* @stable
|
* @stable
|
||||||
*/ (name: string): any;
|
*/
|
||||||
|
(name: string): any;
|
||||||
new (name: string): Attribute;
|
new (name: string): Attribute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -210,8 +208,12 @@ export const ContentChildren: ContentChildrenDecorator =
|
||||||
<ContentChildrenDecorator>makePropDecorator(
|
<ContentChildrenDecorator>makePropDecorator(
|
||||||
'ContentChildren',
|
'ContentChildren',
|
||||||
[
|
[
|
||||||
['selector', undefined],
|
['selector', undefined], {
|
||||||
{first: false, isViewQuery: false, descendants: false, read: undefined}
|
first: false,
|
||||||
|
isViewQuery: false,
|
||||||
|
descendants: false,
|
||||||
|
read: undefined,
|
||||||
|
}
|
||||||
],
|
],
|
||||||
Query);
|
Query);
|
||||||
|
|
||||||
|
@ -341,7 +343,6 @@ export const ViewChildren: ViewChildrenDecorator = makePropDecorator(
|
||||||
],
|
],
|
||||||
Query);
|
Query);
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Type of the ViewChild decorator / constructor function.
|
* Type of the ViewChild decorator / constructor function.
|
||||||
*
|
*
|
||||||
|
@ -370,8 +371,6 @@ export interface ViewChildDecorator {
|
||||||
* * **selector** - the directive type or the name used for querying.
|
* * **selector** - the directive type or the name used for querying.
|
||||||
* * **read** - read a different token from the queried elements.
|
* * **read** - read a different token from the queried elements.
|
||||||
*
|
*
|
||||||
* Let's look at an example!!!!:
|
|
||||||
*
|
|
||||||
* {@example core/di/ts/viewChild/view_child_example.ts region='Component'}
|
* {@example core/di/ts/viewChild/view_child_example.ts region='Component'}
|
||||||
*
|
*
|
||||||
* **npm package**: `@angular/core`
|
* **npm package**: `@angular/core`
|
||||||
|
|
|
@ -6,11 +6,11 @@
|
||||||
* found in the LICENSE file at https://angular.io/license
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, ContentChild, ContentChildren, Directive, QueryList, TemplateRef, ViewChild, ViewChildren, ViewContainerRef, asNativeElements} from '@angular/core';
|
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, ContentChild, ContentChildren, Directive, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef, asNativeElements} from '@angular/core';
|
||||||
import {TestBed, async} from '@angular/core/testing';
|
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
|
||||||
import {expect} from '@angular/platform-browser/testing/matchers';
|
import {expect} from '@angular/platform-browser/testing/matchers';
|
||||||
|
|
||||||
import {isPresent, stringify} from '../../src/facade/lang';
|
import {stringify} from '../../src/facade/lang';
|
||||||
|
|
||||||
export function main() {
|
export function main() {
|
||||||
describe('Query API', () => {
|
describe('Query API', () => {
|
||||||
|
@ -54,10 +54,7 @@ export function main() {
|
||||||
'<div text="too-deep"></div>' +
|
'<div text="too-deep"></div>' +
|
||||||
'</div></needs-query>' +
|
'</div></needs-query>' +
|
||||||
'<div text="4"></div>';
|
'<div text="4"></div>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
|
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
|
||||||
});
|
});
|
||||||
|
@ -65,15 +62,10 @@ export function main() {
|
||||||
it('should contain all direct child directives in the content dom', () => {
|
it('should contain all direct child directives in the content dom', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-content-children #q><div text="foo"></div></needs-content-children>';
|
'<needs-content-children #q><div text="foo"></div></needs-content-children>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
|
const q = view.debugElement.children[0].references['q'];
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.textDirChildren.length).toEqual(1);
|
expect(q.textDirChildren.length).toEqual(1);
|
||||||
expect(q.numberOfChildrenAfterContentInit).toEqual(1);
|
expect(q.numberOfChildrenAfterContentInit).toEqual(1);
|
||||||
});
|
});
|
||||||
|
@ -81,19 +73,14 @@ export function main() {
|
||||||
it('should contain the first content child', () => {
|
it('should contain the first content child', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
|
'<needs-content-child #q><div *ngIf="shouldShow" text="foo"></div></needs-content-child>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmp(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.componentInstance.shouldShow = true;
|
view.componentInstance.shouldShow = true;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
const q: NeedsContentChild = view.debugElement.children[0].references['q'];
|
||||||
var q: NeedsContentChild = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
|
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
|
||||||
|
|
||||||
view.componentInstance.shouldShow = false;
|
view.componentInstance.shouldShow = false;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.logs).toEqual([
|
expect(q.logs).toEqual([
|
||||||
['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
|
['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
|
||||||
]);
|
]);
|
||||||
|
@ -101,17 +88,13 @@ export function main() {
|
||||||
|
|
||||||
it('should contain the first view child', () => {
|
it('should contain the first view child', () => {
|
||||||
const template = '<needs-view-child #q></needs-view-child>';
|
const template = '<needs-view-child #q></needs-view-child>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
var q: NeedsViewChild = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
|
const q: NeedsViewChild = view.debugElement.children[0].references['q'];
|
||||||
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
|
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
|
||||||
|
|
||||||
q.shouldShow = false;
|
q.shouldShow = false;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.logs).toEqual([
|
expect(q.logs).toEqual([
|
||||||
['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
|
['setter', 'foo'], ['init', 'foo'], ['check', 'foo'], ['setter', null], ['check', null]
|
||||||
]);
|
]);
|
||||||
|
@ -120,20 +103,17 @@ export function main() {
|
||||||
it('should set static view and content children already after the constructor call', () => {
|
it('should set static view and content children already after the constructor call', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-static-content-view-child #q><div text="contentFoo"></div></needs-static-content-view-child>';
|
'<needs-static-content-view-child #q><div text="contentFoo"></div></needs-static-content-view-child>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmp(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsStaticContentAndViewChild = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsStaticContentAndViewChild = view.debugElement.children[0].references['q'];
|
|
||||||
expect(q.contentChild.text).toBeFalsy();
|
expect(q.contentChild.text).toBeFalsy();
|
||||||
expect(q.viewChild.text).toBeFalsy();
|
expect(q.viewChild.text).toBeFalsy();
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.contentChild.text).toEqual('contentFoo');
|
expect(q.contentChild.text).toEqual('contentFoo');
|
||||||
expect(q.viewChild.text).toEqual('viewFoo');
|
expect(q.viewChild.text).toEqual('viewFoo');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should contain the first view child accross embedded views', () => {
|
it('should contain the first view child across embedded views', () => {
|
||||||
TestBed.overrideComponent(
|
TestBed.overrideComponent(
|
||||||
MyComp0, {set: {template: '<needs-view-child #q></needs-view-child>'}});
|
MyComp0, {set: {template: '<needs-view-child #q></needs-view-child>'}});
|
||||||
TestBed.overrideComponent(NeedsViewChild, {
|
TestBed.overrideComponent(NeedsViewChild, {
|
||||||
|
@ -145,22 +125,19 @@ export function main() {
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const view = TestBed.createComponent(MyComp0);
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
var q: NeedsViewChild = view.debugElement.children[0].references['q'];
|
const q: NeedsViewChild = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
|
expect(q.logs).toEqual([['setter', 'foo'], ['init', 'foo'], ['check', 'foo']]);
|
||||||
|
|
||||||
q.shouldShow = false;
|
q.shouldShow = false;
|
||||||
q.shouldShow2 = true;
|
q.shouldShow2 = true;
|
||||||
q.logs = [];
|
q.logs = [];
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.logs).toEqual([['setter', 'bar'], ['check', 'bar']]);
|
expect(q.logs).toEqual([['setter', 'bar'], ['check', 'bar']]);
|
||||||
|
|
||||||
q.shouldShow = false;
|
q.shouldShow = false;
|
||||||
q.shouldShow2 = false;
|
q.shouldShow2 = false;
|
||||||
q.logs = [];
|
q.logs = [];
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.logs).toEqual([['setter', null], ['check', null]]);
|
expect(q.logs).toEqual([['setter', null], ['check', null]]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -170,10 +147,8 @@ export function main() {
|
||||||
'<div text="4"></div>' +
|
'<div text="4"></div>' +
|
||||||
'</div></needs-query-desc>' +
|
'</div></needs-query-desc>' +
|
||||||
'<div text="5"></div>';
|
'<div text="5"></div>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
|
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|4|');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -181,10 +156,8 @@ export function main() {
|
||||||
const template = '<div text="1"></div>' +
|
const template = '<div text="1"></div>' +
|
||||||
'<needs-query text="2"><div text="3"></div></needs-query>' +
|
'<needs-query text="2"><div text="3"></div></needs-query>' +
|
||||||
'<div text="4"></div>';
|
'<div text="4"></div>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
|
expect(asNativeElements(view.debugElement.children)).toHaveText('2|3|');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -192,11 +165,7 @@ export function main() {
|
||||||
const template = '<div text="1"></div>' +
|
const template = '<div text="1"></div>' +
|
||||||
'<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
|
'<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
|
||||||
'<div text="4"></div>';
|
'<div text="4"></div>';
|
||||||
;
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
|
expect(asNativeElements(view.debugElement.children)).toHaveText('2|');
|
||||||
|
|
||||||
view.componentInstance.shouldShow = true;
|
view.componentInstance.shouldShow = true;
|
||||||
|
@ -208,24 +177,18 @@ export function main() {
|
||||||
const template = '<div text="1"></div>' +
|
const template = '<div text="1"></div>' +
|
||||||
'<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
|
'<needs-query text="2"><div *ngIf="shouldShow" [text]="\'3\'"></div></needs-query>' +
|
||||||
'<div text="4"></div>';
|
'<div text="4"></div>';
|
||||||
;
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
|
||||||
const fixture = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
fixture.componentInstance.shouldShow = true;
|
view.componentInstance.shouldShow = true;
|
||||||
fixture.detectChanges();
|
view.detectChanges();
|
||||||
fixture.destroy();
|
view.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should reflect moved directives', () => {
|
it('should reflect moved directives', () => {
|
||||||
const template = '<div text="1"></div>' +
|
const template = '<div text="1"></div>' +
|
||||||
'<needs-query text="2"><div *ngFor="let i of list" [text]="i"></div></needs-query>' +
|
'<needs-query text="2"><div *ngFor="let i of list" [text]="i"></div></needs-query>' +
|
||||||
'<div text="4"></div>';
|
'<div text="4"></div>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
|
expect(asNativeElements(view.debugElement.children)).toHaveText('2|1d|2d|3d|');
|
||||||
|
|
||||||
view.componentInstance.list = ['3d', '2d'];
|
view.componentInstance.list = ['3d', '2d'];
|
||||||
|
@ -246,11 +209,8 @@ export function main() {
|
||||||
describe('query for TemplateRef', () => {
|
describe('query for TemplateRef', () => {
|
||||||
it('should find TemplateRefs in the light and shadow dom', () => {
|
it('should find TemplateRefs in the light and shadow dom', () => {
|
||||||
const template = '<needs-tpl><template><div>light</div></template></needs-tpl>';
|
const template = '<needs-tpl><template><div>light</div></template></needs-tpl>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const needsTpl: NeedsTpl = view.debugElement.children[0].injector.get(NeedsTpl);
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
var needsTpl: NeedsTpl = view.debugElement.children[0].injector.get(NeedsTpl);
|
|
||||||
|
|
||||||
expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).rootNodes[0])
|
expect(needsTpl.vc.createEmbeddedView(needsTpl.query.first).rootNodes[0])
|
||||||
.toHaveText('light');
|
.toHaveText('light');
|
||||||
|
@ -261,11 +221,8 @@ export function main() {
|
||||||
it('should find named TemplateRefs', () => {
|
it('should find named TemplateRefs', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-named-tpl><template #tpl><div>light</div></template></needs-named-tpl>';
|
'<needs-named-tpl><template #tpl><div>light</div></template></needs-named-tpl>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const needsTpl: NeedsNamedTpl = view.debugElement.children[0].injector.get(NeedsNamedTpl);
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
var needsTpl: NeedsNamedTpl = view.debugElement.children[0].injector.get(NeedsNamedTpl);
|
|
||||||
expect(needsTpl.vc.createEmbeddedView(needsTpl.contentTpl).rootNodes[0])
|
expect(needsTpl.vc.createEmbeddedView(needsTpl.contentTpl).rootNodes[0])
|
||||||
.toHaveText('light');
|
.toHaveText('light');
|
||||||
expect(needsTpl.vc.createEmbeddedView(needsTpl.viewTpl).rootNodes[0]).toHaveText('shadow');
|
expect(needsTpl.vc.createEmbeddedView(needsTpl.viewTpl).rootNodes[0]).toHaveText('shadow');
|
||||||
|
@ -276,12 +233,9 @@ export function main() {
|
||||||
it('should contain all content children', () => {
|
it('should contain all content children', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-content-children-read #q text="ca"><div #q text="cb"></div></needs-content-children-read>';
|
'<needs-content-children-read #q text="ca"><div #q text="cb"></div></needs-content-children-read>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
const comp: NeedsContentChildrenWithRead =
|
||||||
|
|
||||||
var comp: NeedsContentChildrenWithRead =
|
|
||||||
view.debugElement.children[0].injector.get(NeedsContentChildrenWithRead);
|
view.debugElement.children[0].injector.get(NeedsContentChildrenWithRead);
|
||||||
expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['ca', 'cb']);
|
expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['ca', 'cb']);
|
||||||
});
|
});
|
||||||
|
@ -289,36 +243,27 @@ export function main() {
|
||||||
it('should contain the first content child', () => {
|
it('should contain the first content child', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-content-child-read><div #q text="ca"></div></needs-content-child-read>';
|
'<needs-content-child-read><div #q text="ca"></div></needs-content-child-read>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
const comp: NeedsContentChildWithRead =
|
||||||
|
|
||||||
var comp: NeedsContentChildWithRead =
|
|
||||||
view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
|
view.debugElement.children[0].injector.get(NeedsContentChildWithRead);
|
||||||
expect(comp.textDirChild.text).toEqual('ca');
|
expect(comp.textDirChild.text).toEqual('ca');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should contain the first view child', () => {
|
it('should contain the first view child', () => {
|
||||||
const template = '<needs-view-child-read></needs-view-child-read>';
|
const template = '<needs-view-child-read></needs-view-child-read>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
const comp: NeedsViewChildWithRead =
|
||||||
|
|
||||||
var comp: NeedsViewChildWithRead =
|
|
||||||
view.debugElement.children[0].injector.get(NeedsViewChildWithRead);
|
view.debugElement.children[0].injector.get(NeedsViewChildWithRead);
|
||||||
expect(comp.textDirChild.text).toEqual('va');
|
expect(comp.textDirChild.text).toEqual('va');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should contain all child directives in the view', () => {
|
it('should contain all child directives in the view', () => {
|
||||||
const template = '<needs-view-children-read></needs-view-children-read>';
|
const template = '<needs-view-children-read></needs-view-children-read>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
const comp: NeedsViewChildrenWithRead =
|
||||||
|
|
||||||
var comp: NeedsViewChildrenWithRead =
|
|
||||||
view.debugElement.children[0].injector.get(NeedsViewChildrenWithRead);
|
view.debugElement.children[0].injector.get(NeedsViewChildrenWithRead);
|
||||||
expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['va', 'vb']);
|
expect(comp.textDirChildren.map(textDirective => textDirective.text)).toEqual(['va', 'vb']);
|
||||||
});
|
});
|
||||||
|
@ -326,12 +271,9 @@ export function main() {
|
||||||
it('should support reading a ViewContainer', () => {
|
it('should support reading a ViewContainer', () => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-viewcontainer-read><template>hello</template></needs-viewcontainer-read>';
|
'<needs-viewcontainer-read><template>hello</template></needs-viewcontainer-read>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
const comp: NeedsViewContainerWithRead =
|
||||||
|
|
||||||
var comp: NeedsViewContainerWithRead =
|
|
||||||
view.debugElement.children[0].injector.get(NeedsViewContainerWithRead);
|
view.debugElement.children[0].injector.get(NeedsViewContainerWithRead);
|
||||||
comp.createView();
|
comp.createView();
|
||||||
expect(view.debugElement.children[0].nativeElement).toHaveText('hello');
|
expect(view.debugElement.children[0].nativeElement).toHaveText('hello');
|
||||||
|
@ -344,11 +286,9 @@ export function main() {
|
||||||
'<div text="1"></div>' +
|
'<div text="1"></div>' +
|
||||||
'<div *ngIf="shouldShow" text="2"></div>' +
|
'<div *ngIf="shouldShow" text="2"></div>' +
|
||||||
'</needs-query>';
|
'</needs-query>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
const q = view.debugElement.children[0].references['q'];
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
q.query.changes.subscribe({
|
q.query.changes.subscribe({
|
||||||
next: () => {
|
next: () => {
|
||||||
|
@ -365,23 +305,18 @@ export function main() {
|
||||||
() => {
|
() => {
|
||||||
const template =
|
const template =
|
||||||
'<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
|
'<needs-query #q *ngIf="shouldShow"><div text="foo"></div></needs-query>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.componentInstance.shouldShow = true;
|
view.componentInstance.shouldShow = true;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
var q: NeedsQuery = view.debugElement.children[0].references['q'];
|
const q: NeedsQuery = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
expect(q.query.length).toEqual(1);
|
expect(q.query.length).toEqual(1);
|
||||||
|
|
||||||
view.componentInstance.shouldShow = false;
|
view.componentInstance.shouldShow = false;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
view.componentInstance.shouldShow = true;
|
view.componentInstance.shouldShow = true;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
const q2: NeedsQuery = view.debugElement.children[0].references['q'];
|
||||||
var q2: NeedsQuery = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
expect(q2.query.length).toEqual(1);
|
expect(q2.query.length).toEqual(1);
|
||||||
});
|
});
|
||||||
|
@ -393,15 +328,11 @@ export function main() {
|
||||||
const template = '<needs-query-by-ref-binding #q>' +
|
const template = '<needs-query-by-ref-binding #q>' +
|
||||||
'<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
|
'<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
|
||||||
'</needs-query-by-ref-binding>';
|
'</needs-query-by-ref-binding>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.componentInstance.list = ['1d', '2d'];
|
view.componentInstance.list = ['1d', '2d'];
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.query.first.text).toEqual('1d');
|
expect(q.query.first.text).toEqual('1d');
|
||||||
expect(q.query.last.text).toEqual('2d');
|
expect(q.query.last.text).toEqual('2d');
|
||||||
});
|
});
|
||||||
|
@ -411,11 +342,8 @@ export function main() {
|
||||||
'<div text="one" #textLabel1="textDir"></div>' +
|
'<div text="one" #textLabel1="textDir"></div>' +
|
||||||
'<div text="two" #textLabel2="textDir"></div>' +
|
'<div text="two" #textLabel2="textDir"></div>' +
|
||||||
'</needs-query-by-ref-bindings>';
|
'</needs-query-by-ref-bindings>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.first.text).toEqual('one');
|
expect(q.query.first.text).toEqual('one');
|
||||||
expect(q.query.last.text).toEqual('two');
|
expect(q.query.last.text).toEqual('two');
|
||||||
|
@ -425,19 +353,13 @@ export function main() {
|
||||||
const template = '<needs-query-by-ref-binding #q>' +
|
const template = '<needs-query-by-ref-binding #q>' +
|
||||||
'<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
|
'<div *ngFor="let item of list" [text]="item" #textLabel="textDir"></div>' +
|
||||||
'</needs-query-by-ref-binding>';
|
'</needs-query-by-ref-binding>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.componentInstance.list = ['1d', '2d'];
|
view.componentInstance.list = ['1d', '2d'];
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
view.componentInstance.list = ['2d', '1d'];
|
view.componentInstance.list = ['2d', '1d'];
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.query.last.text).toEqual('1d');
|
expect(q.query.last.text).toEqual('1d');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -447,15 +369,11 @@ export function main() {
|
||||||
'<div #textLabel>{{item}}</div>' +
|
'<div #textLabel>{{item}}</div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'</needs-query-by-ref-binding>';
|
'</needs-query-by-ref-binding>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.componentInstance.list = ['1d', '2d'];
|
view.componentInstance.list = ['1d', '2d'];
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.query.first.nativeElement).toHaveText('1d');
|
expect(q.query.first.nativeElement).toHaveText('1d');
|
||||||
expect(q.query.last.nativeElement).toHaveText('2d');
|
expect(q.query.last.nativeElement).toHaveText('2d');
|
||||||
});
|
});
|
||||||
|
@ -464,36 +382,23 @@ export function main() {
|
||||||
const template = '<needs-query-and-project #q>' +
|
const template = '<needs-query-and-project #q>' +
|
||||||
'<div text="hello"></div><div text="world"></div>' +
|
'<div text="hello"></div><div text="world"></div>' +
|
||||||
'</needs-query-and-project>';
|
'</needs-query-and-project>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
|
expect(asNativeElements(view.debugElement.children)).toHaveText('hello|world|');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should support querying the view by using a view query', () => {
|
it('should support querying the view by using a view query', () => {
|
||||||
const template = '<needs-view-query-by-ref-binding #q></needs-view-query-by-ref-binding>';
|
const template = '<needs-view-query-by-ref-binding #q></needs-view-query-by-ref-binding>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
|
||||||
|
|
||||||
var q: NeedsViewQueryByLabel = view.debugElement.children[0].references['q'];
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
|
const q: NeedsViewQueryByLabel = view.debugElement.children[0].references['q'];
|
||||||
expect(q.query.first.nativeElement).toHaveText('text');
|
expect(q.query.first.nativeElement).toHaveText('text');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should contain all child directives in the view dom', () => {
|
it('should contain all child directives in the view dom', () => {
|
||||||
const template = '<needs-view-children #q></needs-view-children>';
|
const template = '<needs-view-children #q></needs-view-children>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.textDirChildren.length).toEqual(1);
|
expect(q.textDirChildren.length).toEqual(1);
|
||||||
expect(q.numberOfChildrenAfterViewInit).toEqual(1);
|
expect(q.numberOfChildrenAfterViewInit).toEqual(1);
|
||||||
});
|
});
|
||||||
|
@ -502,61 +407,40 @@ export function main() {
|
||||||
describe('querying in the view', () => {
|
describe('querying in the view', () => {
|
||||||
it('should contain all the elements in the view with that have the given directive', () => {
|
it('should contain all the elements in the view with that have the given directive', () => {
|
||||||
const template = '<needs-view-query #q><div text="ignoreme"></div></needs-view-query>';
|
const template = '<needs-view-query #q><div text="ignoreme"></div></needs-view-query>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQuery = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQuery = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not include directive present on the host element', () => {
|
it('should not include directive present on the host element', () => {
|
||||||
const template = '<needs-view-query #q text="self"></needs-view-query>';
|
const template = '<needs-view-query #q text="self"></needs-view-query>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQuery = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQuery = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should reflect changes in the component', () => {
|
it('should reflect changes in the component', () => {
|
||||||
const template = '<needs-view-query-if #q></needs-view-query-if>';
|
const template = '<needs-view-query-if #q></needs-view-query-if>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQueryIf = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQueryIf = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.length).toBe(0);
|
expect(q.query.length).toBe(0);
|
||||||
|
|
||||||
q.show = true;
|
q.show = true;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
expect(q.query.length).toBe(1);
|
expect(q.query.length).toBe(1);
|
||||||
|
|
||||||
expect(q.query.first.text).toEqual('1');
|
expect(q.query.first.text).toEqual('1');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not be affected by other changes in the component', () => {
|
it('should not be affected by other changes in the component', () => {
|
||||||
const template = '<needs-view-query-nested-if #q></needs-view-query-nested-if>';
|
const template = '<needs-view-query-nested-if #q></needs-view-query-nested-if>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQueryNestedIf = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQueryNestedIf = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.length).toEqual(1);
|
expect(q.query.length).toEqual(1);
|
||||||
expect(q.query.first.text).toEqual('1');
|
expect(q.query.first.text).toEqual('1');
|
||||||
|
|
||||||
q.show = false;
|
q.show = false;
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.query.length).toEqual(1);
|
expect(q.query.length).toEqual(1);
|
||||||
expect(q.query.first.text).toEqual('1');
|
expect(q.query.first.text).toEqual('1');
|
||||||
});
|
});
|
||||||
|
@ -564,66 +448,46 @@ export function main() {
|
||||||
it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
|
it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
|
||||||
() => {
|
() => {
|
||||||
const template = '<needs-view-query-order #q></needs-view-query-order>';
|
const template = '<needs-view-query-order #q></needs-view-query-order>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQueryOrder = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQueryOrder = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
||||||
|
|
||||||
q.list = ['-3', '2'];
|
q.list = ['-3', '2'];
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
|
it('should maintain directives in pre-order depth-first DOM order after dynamic insertion',
|
||||||
() => {
|
() => {
|
||||||
const template = '<needs-view-query-order-with-p #q></needs-view-query-order-with-p>';
|
const template = '<needs-view-query-order-with-p #q></needs-view-query-order-with-p>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQueryOrderWithParent = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '2', '3', '4']);
|
||||||
|
|
||||||
q.list = ['-3', '2'];
|
q.list = ['-3', '2'];
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', '-3', '2', '4']);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle long ngFor cycles', () => {
|
it('should handle long ngFor cycles', () => {
|
||||||
const template = '<needs-view-query-order #q></needs-view-query-order>';
|
const template = '<needs-view-query-order #q></needs-view-query-order>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q: NeedsViewQueryOrder = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
var q: NeedsViewQueryOrder = view.debugElement.children[0].references['q'];
|
|
||||||
|
|
||||||
// no significance to 50, just a reasonably large cycle.
|
// no significance to 50, just a reasonably large cycle.
|
||||||
for (var i = 0; i < 50; i++) {
|
for (let i = 0; i < 50; i++) {
|
||||||
var newString = i.toString();
|
const newString = i.toString();
|
||||||
q.list = [newString];
|
q.list = [newString];
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', newString, '4']);
|
expect(q.query.map((d: TextDirective) => d.text)).toEqual(['1', newString, '4']);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should support more than three queries', () => {
|
it('should support more than three queries', () => {
|
||||||
const template = '<needs-four-queries #q><div text="1"></div></needs-four-queries>';
|
const template = '<needs-four-queries #q><div text="1"></div></needs-four-queries>';
|
||||||
TestBed.overrideComponent(MyComp0, {set: {template}});
|
const view = createTestCmpAndDetectChanges(MyComp0, template);
|
||||||
const view = TestBed.createComponent(MyComp0);
|
const q = view.debugElement.children[0].references['q'];
|
||||||
|
|
||||||
view.detectChanges();
|
|
||||||
|
|
||||||
var q = view.debugElement.children[0].references['q'];
|
|
||||||
expect(q.query1).toBeDefined();
|
expect(q.query1).toBeDefined();
|
||||||
expect(q.query2).toBeDefined();
|
expect(q.query2).toBeDefined();
|
||||||
expect(q.query3).toBeDefined();
|
expect(q.query3).toBeDefined();
|
||||||
|
@ -663,27 +527,19 @@ class NeedsContentChild implements AfterContentInit, AfterContentChecked {
|
||||||
@ContentChild(TextDirective)
|
@ContentChild(TextDirective)
|
||||||
set child(value) {
|
set child(value) {
|
||||||
this._child = value;
|
this._child = value;
|
||||||
this.logs.push(['setter', isPresent(value) ? value.text : null]);
|
this.logs.push(['setter', value ? value.text : null]);
|
||||||
}
|
}
|
||||||
|
|
||||||
get child() { return this._child; }
|
get child() { return this._child; }
|
||||||
logs: any[] /** TODO #9100 */ = [];
|
logs: any[] /** TODO #9100 */ = [];
|
||||||
|
|
||||||
ngAfterContentInit() { this.logs.push(['init', isPresent(this.child) ? this.child.text : null]); }
|
ngAfterContentInit() { this.logs.push(['init', this.child ? this.child.text : null]); }
|
||||||
|
|
||||||
ngAfterContentChecked() {
|
ngAfterContentChecked() { this.logs.push(['check', this.child ? this.child.text : null]); }
|
||||||
this.logs.push(['check', isPresent(this.child) ? this.child.text : null]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({selector: 'needs-view-child', template: `<div *ngIf="shouldShow" text="foo"></div>`})
|
||||||
selector: 'needs-view-child',
|
class NeedsViewChild implements AfterViewInit, AfterViewChecked {
|
||||||
template: `
|
|
||||||
<div *ngIf="shouldShow" text="foo"></div>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
class NeedsViewChild implements AfterViewInit,
|
|
||||||
AfterViewChecked {
|
|
||||||
shouldShow: boolean = true;
|
shouldShow: boolean = true;
|
||||||
shouldShow2: boolean = false;
|
shouldShow2: boolean = false;
|
||||||
/** @internal */
|
/** @internal */
|
||||||
|
@ -692,34 +548,37 @@ class NeedsViewChild implements AfterViewInit,
|
||||||
@ViewChild(TextDirective)
|
@ViewChild(TextDirective)
|
||||||
set child(value) {
|
set child(value) {
|
||||||
this._child = value;
|
this._child = value;
|
||||||
this.logs.push(['setter', isPresent(value) ? value.text : null]);
|
this.logs.push(['setter', value ? value.text : null]);
|
||||||
}
|
}
|
||||||
|
|
||||||
get child() { return this._child; }
|
get child() { return this._child; }
|
||||||
logs: any[] /** TODO #9100 */ = [];
|
logs: any[] /** TODO #9100 */ = [];
|
||||||
|
|
||||||
ngAfterViewInit() { this.logs.push(['init', isPresent(this.child) ? this.child.text : null]); }
|
ngAfterViewInit() { this.logs.push(['init', this.child ? this.child.text : null]); }
|
||||||
|
|
||||||
ngAfterViewChecked() {
|
ngAfterViewChecked() { this.logs.push(['check', this.child ? this.child.text : null]); }
|
||||||
this.logs.push(['check', isPresent(this.child) ? this.child.text : null]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
function createTestCmp<T>(type: Type<T>, template: string): ComponentFixture<T> {
|
||||||
selector: 'needs-static-content-view-child',
|
const view = TestBed.overrideComponent(type, {set: {template}}).createComponent(type);
|
||||||
template: `
|
return view;
|
||||||
<div text="viewFoo"></div>
|
}
|
||||||
`
|
|
||||||
})
|
|
||||||
|
function createTestCmpAndDetectChanges<T>(type: Type<T>, template: string): ComponentFixture<T> {
|
||||||
|
const view = createTestCmp(type, template);
|
||||||
|
view.detectChanges();
|
||||||
|
return view;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'needs-static-content-view-child', template: `<div text="viewFoo"></div>`})
|
||||||
class NeedsStaticContentAndViewChild {
|
class NeedsStaticContentAndViewChild {
|
||||||
@ContentChild(TextDirective) contentChild: TextDirective;
|
@ContentChild(TextDirective) contentChild: TextDirective;
|
||||||
|
|
||||||
@ViewChild(TextDirective) viewChild: TextDirective;
|
@ViewChild(TextDirective) viewChild: TextDirective;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Directive({selector: '[dir]'})
|
@Directive({selector: '[dir]'})
|
||||||
class InertDirective {
|
class InertDirective {
|
||||||
constructor() {}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -780,9 +639,8 @@ class NeedsViewQuery {
|
||||||
|
|
||||||
@Component({selector: 'needs-view-query-if', template: '<div *ngIf="show" text="1"></div>'})
|
@Component({selector: 'needs-view-query-if', template: '<div *ngIf="show" text="1"></div>'})
|
||||||
class NeedsViewQueryIf {
|
class NeedsViewQueryIf {
|
||||||
show: boolean;
|
show: boolean = false;
|
||||||
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor() { this.show = false; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -790,9 +648,8 @@ class NeedsViewQueryIf {
|
||||||
template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
|
template: '<div text="1"><div *ngIf="show"><div dir></div></div></div>'
|
||||||
})
|
})
|
||||||
class NeedsViewQueryNestedIf {
|
class NeedsViewQueryNestedIf {
|
||||||
show: boolean;
|
show: boolean = true;
|
||||||
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
constructor() { this.show = true; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -803,8 +660,7 @@ class NeedsViewQueryNestedIf {
|
||||||
})
|
})
|
||||||
class NeedsViewQueryOrder {
|
class NeedsViewQueryOrder {
|
||||||
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
list: string[];
|
list: string[] = ['2', '3'];
|
||||||
constructor() { this.list = ['2', '3']; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -815,8 +671,7 @@ class NeedsViewQueryOrder {
|
||||||
})
|
})
|
||||||
class NeedsViewQueryOrderWithParent {
|
class NeedsViewQueryOrderWithParent {
|
||||||
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
@ViewChildren(TextDirective) query: QueryList<TextDirective>;
|
||||||
list: string[];
|
list: string[] = ['2', '3'];
|
||||||
constructor() { this.list = ['2', '3']; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'needs-tpl', template: '<template><div>shadow</div></template>'})
|
@Component({selector: 'needs-tpl', template: '<template><div>shadow</div></template>'})
|
||||||
|
@ -879,12 +734,8 @@ class HasNullQueryCondition {
|
||||||
|
|
||||||
@Component({selector: 'my-comp', template: ''})
|
@Component({selector: 'my-comp', template: ''})
|
||||||
class MyComp0 {
|
class MyComp0 {
|
||||||
shouldShow: boolean;
|
shouldShow: boolean = false;
|
||||||
list: any /** TODO #9100 */;
|
list: string[] = ['1d', '2d', '3d'];
|
||||||
constructor() {
|
|
||||||
this.shouldShow = false;
|
|
||||||
this.list = ['1d', '2d', '3d'];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'my-comp', template: ''})
|
@Component({selector: 'my-comp', template: ''})
|
||||||
|
|
|
@ -9,8 +9,7 @@
|
||||||
import {CompilerOptions, Component, Directive, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, NgModuleRef, NgZone, OpaqueToken, Pipe, PlatformRef, Provider, SchemaMetadata, Type} from '@angular/core';
|
import {CompilerOptions, Component, Directive, Injector, ModuleWithComponentFactories, NgModule, NgModuleFactory, NgModuleRef, NgZone, OpaqueToken, Pipe, PlatformRef, Provider, SchemaMetadata, Type} from '@angular/core';
|
||||||
import {AsyncTestCompleter} from './async_test_completer';
|
import {AsyncTestCompleter} from './async_test_completer';
|
||||||
import {ComponentFixture} from './component_fixture';
|
import {ComponentFixture} from './component_fixture';
|
||||||
import {ListWrapper} from './facade/collection';
|
import {stringify} from './facade/lang';
|
||||||
import {FunctionWrapper, stringify} from './facade/lang';
|
|
||||||
import {MetadataOverride} from './metadata_override';
|
import {MetadataOverride} from './metadata_override';
|
||||||
import {TestingCompiler, TestingCompilerFactory} from './test_compiler';
|
import {TestingCompiler, TestingCompilerFactory} from './test_compiler';
|
||||||
|
|
||||||
|
@ -25,23 +24,26 @@ export class TestComponentRenderer {
|
||||||
insertRootElement(rootElementId: string) {}
|
insertRootElement(rootElementId: string) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
var _nextRootElementId = 0;
|
let _nextRootElementId = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @experimental
|
* @experimental
|
||||||
*/
|
*/
|
||||||
export var ComponentFixtureAutoDetect = new OpaqueToken('ComponentFixtureAutoDetect');
|
export const ComponentFixtureAutoDetect = new OpaqueToken('ComponentFixtureAutoDetect');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @experimental
|
* @experimental
|
||||||
*/
|
*/
|
||||||
export var ComponentFixtureNoNgZone = new OpaqueToken('ComponentFixtureNoNgZone');
|
export const ComponentFixtureNoNgZone = new OpaqueToken('ComponentFixtureNoNgZone');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @experimental
|
* @experimental
|
||||||
*/
|
*/
|
||||||
export type TestModuleMetadata = {
|
export type TestModuleMetadata = {
|
||||||
providers?: any[]; declarations?: any[]; imports?: any[]; schemas?: Array<SchemaMetadata|any[]>;
|
providers?: any[],
|
||||||
|
declarations?: any[],
|
||||||
|
imports?: any[],
|
||||||
|
schemas?: Array<SchemaMetadata|any[]>,
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -63,7 +65,7 @@ export class TestBed implements Injector {
|
||||||
*/
|
*/
|
||||||
static initTestEnvironment(ngModule: Type<any>, platform: PlatformRef): TestBed {
|
static initTestEnvironment(ngModule: Type<any>, platform: PlatformRef): TestBed {
|
||||||
const testBed = getTestBed();
|
const testBed = getTestBed();
|
||||||
getTestBed().initTestEnvironment(ngModule, platform);
|
testBed.initTestEnvironment(ngModule, platform);
|
||||||
return testBed;
|
return testBed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -216,16 +218,16 @@ export class TestBed implements Injector {
|
||||||
configureTestingModule(moduleDef: TestModuleMetadata) {
|
configureTestingModule(moduleDef: TestModuleMetadata) {
|
||||||
this._assertNotInstantiated('TestBed.configureTestingModule', 'configure the test module');
|
this._assertNotInstantiated('TestBed.configureTestingModule', 'configure the test module');
|
||||||
if (moduleDef.providers) {
|
if (moduleDef.providers) {
|
||||||
this._providers = ListWrapper.concat(this._providers, moduleDef.providers);
|
this._providers.push(...moduleDef.providers);
|
||||||
}
|
}
|
||||||
if (moduleDef.declarations) {
|
if (moduleDef.declarations) {
|
||||||
this._declarations = ListWrapper.concat(this._declarations, moduleDef.declarations);
|
this._declarations.push(...moduleDef.declarations);
|
||||||
}
|
}
|
||||||
if (moduleDef.imports) {
|
if (moduleDef.imports) {
|
||||||
this._imports = ListWrapper.concat(this._imports, moduleDef.imports);
|
this._imports.push(...moduleDef.imports);
|
||||||
}
|
}
|
||||||
if (moduleDef.schemas) {
|
if (moduleDef.schemas) {
|
||||||
this._schemas = ListWrapper.concat(this._schemas, moduleDef.schemas);
|
this._schemas.push(...moduleDef.schemas);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -304,14 +306,14 @@ export class TestBed implements Injector {
|
||||||
}
|
}
|
||||||
// Tests can inject things from the ng module and from the compiler,
|
// Tests can inject things from the ng module and from the compiler,
|
||||||
// but the ng module can't inject things from the compiler and vice versa.
|
// but the ng module can't inject things from the compiler and vice versa.
|
||||||
let result = this._moduleRef.injector.get(token, UNDEFINED);
|
const result = this._moduleRef.injector.get(token, UNDEFINED);
|
||||||
return result === UNDEFINED ? this._compiler.injector.get(token, notFoundValue) : result;
|
return result === UNDEFINED ? this._compiler.injector.get(token, notFoundValue) : result;
|
||||||
}
|
}
|
||||||
|
|
||||||
execute(tokens: any[], fn: Function): any {
|
execute(tokens: any[], fn: Function): any {
|
||||||
this._initIfNeeded();
|
this._initIfNeeded();
|
||||||
var params = tokens.map(t => this.get(t));
|
const params = tokens.map(t => this.get(t));
|
||||||
return FunctionWrapper.apply(fn, params);
|
return fn(...params);
|
||||||
}
|
}
|
||||||
|
|
||||||
overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
|
overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): void {
|
||||||
|
@ -350,26 +352,23 @@ export class TestBed implements Injector {
|
||||||
testComponentRenderer.insertRootElement(rootElId);
|
testComponentRenderer.insertRootElement(rootElId);
|
||||||
|
|
||||||
const initComponent = () => {
|
const initComponent = () => {
|
||||||
var componentRef = componentFactory.create(this, [], `#${rootElId}`);
|
const componentRef = componentFactory.create(this, [], `#${rootElId}`);
|
||||||
return new ComponentFixture<T>(componentRef, ngZone, autoDetect);
|
return new ComponentFixture<T>(componentRef, ngZone, autoDetect);
|
||||||
};
|
};
|
||||||
|
|
||||||
const fixture = ngZone == null ? initComponent() : ngZone.run(initComponent);
|
const fixture = !ngZone ? initComponent() : ngZone.run(initComponent);
|
||||||
this._activeFixtures.push(fixture);
|
this._activeFixtures.push(fixture);
|
||||||
return fixture;
|
return fixture;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var _testBed: TestBed = null;
|
let _testBed: TestBed = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @experimental
|
* @experimental
|
||||||
*/
|
*/
|
||||||
export function getTestBed() {
|
export function getTestBed() {
|
||||||
if (_testBed == null) {
|
return _testBed = _testBed || new TestBed();
|
||||||
_testBed = new TestBed();
|
|
||||||
}
|
|
||||||
return _testBed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -397,14 +396,14 @@ export function getTestBed() {
|
||||||
* @stable
|
* @stable
|
||||||
*/
|
*/
|
||||||
export function inject(tokens: any[], fn: Function): () => any {
|
export function inject(tokens: any[], fn: Function): () => any {
|
||||||
let testBed = getTestBed();
|
const testBed = getTestBed();
|
||||||
if (tokens.indexOf(AsyncTestCompleter) >= 0) {
|
if (tokens.indexOf(AsyncTestCompleter) >= 0) {
|
||||||
return () =>
|
return () =>
|
||||||
// Return an async test method that returns a Promise if AsyncTestCompleter is one of
|
// Return an async test method that returns a Promise if AsyncTestCompleter is one of
|
||||||
// the
|
// the
|
||||||
// injected tokens.
|
// injected tokens.
|
||||||
testBed.compileComponents().then(() => {
|
testBed.compileComponents().then(() => {
|
||||||
let completer: AsyncTestCompleter = testBed.get(AsyncTestCompleter);
|
const completer: AsyncTestCompleter = testBed.get(AsyncTestCompleter);
|
||||||
testBed.execute(tokens, fn);
|
testBed.execute(tokens, fn);
|
||||||
return completer.promise;
|
return completer.promise;
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue