2017-12-01 17:23:03 -05:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2018-02-26 19:58:15 -05:00
|
|
|
import {ChangeDetectorRef, ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
|
2017-12-01 17:23:03 -05:00
|
|
|
|
2018-01-17 13:09:05 -05:00
|
|
|
import {defineComponent} from '../../src/render3/definition';
|
2018-03-01 01:18:34 -05:00
|
|
|
import {InjectFlags, bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector, injectAttribute} from '../../src/render3/di';
|
2018-03-04 23:21:23 -05:00
|
|
|
import {NgOnChangesFeature, PublicFeature, defineDirective, directiveInject, injectChangeDetectorRef, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
|
2018-03-13 14:48:09 -04:00
|
|
|
import {bind, container, containerRefreshEnd, containerRefreshStart, createLNode, createLView, createTView, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, enterView, interpolation2, leaveView, load, projection, projectionDef, text, textBinding} from '../../src/render3/instructions';
|
2018-01-09 21:38:17 -05:00
|
|
|
import {LInjector} from '../../src/render3/interfaces/injector';
|
|
|
|
import {LNodeFlags} from '../../src/render3/interfaces/node';
|
2018-02-23 16:17:20 -05:00
|
|
|
import {LViewFlags} from '../../src/render3/interfaces/view';
|
2018-02-26 19:58:15 -05:00
|
|
|
import {ViewRef} from '../../src/render3/view_ref';
|
2017-12-01 17:23:03 -05:00
|
|
|
|
2018-02-26 19:58:15 -05:00
|
|
|
import {renderComponent, renderToHtml, toHtml} from './render_util';
|
2017-12-01 17:23:03 -05:00
|
|
|
|
|
|
|
describe('di', () => {
|
|
|
|
describe('no dependencies', () => {
|
|
|
|
it('should create directive with no deps', () => {
|
|
|
|
class Directive {
|
|
|
|
value: string = 'Created';
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({type: Directive, factory: () => new Directive});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
function Template(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(0, 'div', null, [Directive]);
|
|
|
|
{ text(2); }
|
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-16 19:58:07 -05:00
|
|
|
textBinding(2, bind(load<Directive>(1).value));
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
expect(renderToHtml(Template, {})).toEqual('<div>Created</div>');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('view dependencies', () => {
|
|
|
|
it('should create directive with inter view dependencies', () => {
|
|
|
|
class DirectiveA {
|
|
|
|
value: string = 'A';
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective(
|
|
|
|
{type: DirectiveA, factory: () => new DirectiveA, features: [PublicFeature]});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class DirectiveB {
|
|
|
|
value: string = 'B';
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective(
|
|
|
|
{type: DirectiveB, factory: () => new DirectiveB, features: [PublicFeature]});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class DirectiveC {
|
|
|
|
value: string;
|
|
|
|
constructor(a: DirectiveA, b: DirectiveB) { this.value = a.value + b.value; }
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: DirectiveC,
|
2018-03-04 23:21:23 -05:00
|
|
|
factory: () => new DirectiveC(directiveInject(DirectiveA), directiveInject(DirectiveB))
|
2018-01-22 18:27:21 -05:00
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
function Template(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(0, 'div', null, [DirectiveA]);
|
2017-12-01 17:23:03 -05:00
|
|
|
{
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(2, 'span', null, [DirectiveB, DirectiveC]);
|
|
|
|
{ text(5); }
|
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-16 19:58:07 -05:00
|
|
|
textBinding(5, bind(load<DirectiveC>(4).value));
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
expect(renderToHtml(Template, {})).toEqual('<div><span>AB</span></div>');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('ElementRef', () => {
|
|
|
|
it('should create directive with ElementRef dependencies', () => {
|
|
|
|
class Directive {
|
|
|
|
value: string;
|
|
|
|
constructor(public elementRef: ElementRef) {
|
|
|
|
this.value = (elementRef.constructor as any).name;
|
|
|
|
}
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: Directive,
|
|
|
|
factory: () => new Directive(injectElementRef()),
|
|
|
|
features: [PublicFeature]
|
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class DirectiveSameInstance {
|
|
|
|
value: boolean;
|
|
|
|
constructor(elementRef: ElementRef, directive: Directive) {
|
|
|
|
this.value = elementRef === directive.elementRef;
|
|
|
|
}
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: DirectiveSameInstance,
|
2018-03-04 23:21:23 -05:00
|
|
|
factory: () => new DirectiveSameInstance(injectElementRef(), directiveInject(Directive))
|
2018-01-22 18:27:21 -05:00
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
function Template(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(0, 'div', null, [Directive, DirectiveSameInstance]);
|
|
|
|
{ text(3); }
|
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
textBinding(
|
2018-02-16 19:58:07 -05:00
|
|
|
3, interpolation2(
|
|
|
|
'', load<Directive>(1).value, '-', load<DirectiveSameInstance>(2).value, ''));
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
expect(renderToHtml(Template, {})).toEqual('<div>ElementRef-true</div>');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('TemplateRef', () => {
|
|
|
|
it('should create directive with TemplateRef dependencies', () => {
|
|
|
|
class Directive {
|
|
|
|
value: string;
|
|
|
|
constructor(public templateRef: TemplateRef<any>) {
|
|
|
|
this.value = (templateRef.constructor as any).name;
|
|
|
|
}
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: Directive,
|
|
|
|
factory: () => new Directive(injectTemplateRef()),
|
|
|
|
features: [PublicFeature]
|
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class DirectiveSameInstance {
|
|
|
|
value: boolean;
|
|
|
|
constructor(templateRef: TemplateRef<any>, directive: Directive) {
|
|
|
|
this.value = templateRef === directive.templateRef;
|
|
|
|
}
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: DirectiveSameInstance,
|
2018-03-04 23:21:23 -05:00
|
|
|
factory: () => new DirectiveSameInstance(injectTemplateRef(), directiveInject(Directive))
|
2018-01-22 18:27:21 -05:00
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function Template(ctx: any, cm: any) {
|
|
|
|
if (cm) {
|
2018-02-06 19:11:20 -05:00
|
|
|
container(0, [Directive, DirectiveSameInstance], function() {});
|
|
|
|
text(3);
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
textBinding(
|
2018-02-16 19:58:07 -05:00
|
|
|
3, interpolation2(
|
|
|
|
'', load<Directive>(1).value, '-', load<DirectiveSameInstance>(2).value, ''));
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
expect(renderToHtml(Template, {})).toEqual('TemplateRef-true');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('ViewContainerRef', () => {
|
|
|
|
it('should create directive with ViewContainerRef dependencies', () => {
|
|
|
|
class Directive {
|
|
|
|
value: string;
|
|
|
|
constructor(public viewContainerRef: ViewContainerRef) {
|
|
|
|
this.value = (viewContainerRef.constructor as any).name;
|
|
|
|
}
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: Directive,
|
|
|
|
factory: () => new Directive(injectViewContainerRef()),
|
|
|
|
features: [PublicFeature]
|
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class DirectiveSameInstance {
|
|
|
|
value: boolean;
|
|
|
|
constructor(viewContainerRef: ViewContainerRef, directive: Directive) {
|
|
|
|
this.value = viewContainerRef === directive.viewContainerRef;
|
|
|
|
}
|
2018-01-09 00:57:50 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
2018-01-22 18:27:21 -05:00
|
|
|
type: DirectiveSameInstance,
|
2018-03-04 23:21:23 -05:00
|
|
|
factory:
|
|
|
|
() => new DirectiveSameInstance(injectViewContainerRef(), directiveInject(Directive))
|
2018-01-09 00:57:50 -05:00
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
function Template(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(0, 'div', null, [Directive, DirectiveSameInstance]);
|
|
|
|
{ text(3); }
|
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
textBinding(
|
2018-02-16 19:58:07 -05:00
|
|
|
3, interpolation2(
|
|
|
|
'', load<Directive>(1).value, '-', load<DirectiveSameInstance>(2).value, ''));
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
expect(renderToHtml(Template, {})).toEqual('<div>ViewContainerRef-true</div>');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-02-26 19:58:15 -05:00
|
|
|
describe('ChangeDetectorRef', () => {
|
|
|
|
let dir: Directive;
|
|
|
|
let dirSameInstance: DirectiveSameInstance;
|
|
|
|
let comp: MyComp;
|
|
|
|
|
|
|
|
class MyComp {
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyComp,
|
|
|
|
tag: 'my-comp',
|
|
|
|
factory: () => comp = new MyComp(injectChangeDetectorRef()),
|
|
|
|
template: function(ctx: MyComp, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
projectionDef(0);
|
|
|
|
projection(1, 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
class Directive {
|
|
|
|
value: string;
|
|
|
|
constructor(public cdr: ChangeDetectorRef) { this.value = (cdr.constructor as any).name; }
|
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: Directive,
|
|
|
|
factory: () => dir = new Directive(injectChangeDetectorRef()),
|
|
|
|
features: [PublicFeature],
|
|
|
|
exportAs: 'dir'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
class DirectiveSameInstance {
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
|
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: DirectiveSameInstance,
|
|
|
|
factory: () => dirSameInstance = new DirectiveSameInstance(injectChangeDetectorRef())
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const $e0_attrs$ = ['dir', '', 'dirSameInstance', ''];
|
|
|
|
|
|
|
|
it('should inject current component ChangeDetectorRef into directives on components', () => {
|
|
|
|
class MyApp {
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyApp,
|
|
|
|
tag: 'my-app',
|
|
|
|
factory: () => new MyApp(),
|
|
|
|
/** <my-comp dir dirSameInstance #dir="dir"></my-comp> {{ dir.value }} */
|
|
|
|
template: function(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
elementStart(0, MyComp, $e0_attrs$, [Directive, DirectiveSameInstance]);
|
|
|
|
elementEnd();
|
|
|
|
text(4);
|
|
|
|
}
|
|
|
|
textBinding(4, bind(load<Directive>(2).value));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = renderComponent(MyApp);
|
|
|
|
// ChangeDetectorRef is the token, ViewRef has historically been the constructor
|
|
|
|
expect(toHtml(app)).toEqual('<my-comp dir="" dirsameinstance=""></my-comp>ViewRef');
|
|
|
|
expect((comp !.cdr as ViewRef<MyComp>).context).toBe(comp);
|
|
|
|
|
|
|
|
expect(dir !.cdr).toBe(comp !.cdr);
|
|
|
|
expect(dir !.cdr).toBe(dirSameInstance !.cdr);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should inject host component ChangeDetectorRef into directives on elements', () => {
|
|
|
|
|
|
|
|
class MyApp {
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyApp,
|
|
|
|
tag: 'my-app',
|
|
|
|
factory: () => new MyApp(injectChangeDetectorRef()),
|
|
|
|
/** <div dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
|
|
|
|
template: function(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
elementStart(0, 'div', $e0_attrs$, [Directive, DirectiveSameInstance]);
|
|
|
|
{ text(3); }
|
|
|
|
elementEnd();
|
|
|
|
}
|
|
|
|
textBinding(3, bind(load<Directive>(1).value));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = renderComponent(MyApp);
|
|
|
|
expect(toHtml(app)).toEqual('<div dir="" dirsameinstance="">ViewRef</div>');
|
|
|
|
expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
|
|
|
|
|
|
|
|
expect(dir !.cdr).toBe(app.cdr);
|
|
|
|
expect(dir !.cdr).toBe(dirSameInstance !.cdr);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should inject host component ChangeDetectorRef into directives in ContentChildren', () => {
|
|
|
|
class MyApp {
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyApp,
|
|
|
|
tag: 'my-app',
|
|
|
|
factory: () => new MyApp(injectChangeDetectorRef()),
|
|
|
|
/**
|
|
|
|
* <my-comp>
|
|
|
|
* <div dir dirSameInstance #dir="dir"></div>
|
|
|
|
* </my-comp>
|
|
|
|
* {{ dir.value }}
|
|
|
|
*/
|
|
|
|
template: function(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
elementStart(0, MyComp);
|
|
|
|
{
|
|
|
|
elementStart(2, 'div', $e0_attrs$, [Directive, DirectiveSameInstance]);
|
|
|
|
elementEnd();
|
|
|
|
}
|
|
|
|
elementEnd();
|
|
|
|
text(5);
|
|
|
|
}
|
|
|
|
textBinding(5, bind(load<Directive>(3).value));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = renderComponent(MyApp);
|
|
|
|
expect(toHtml(app))
|
|
|
|
.toEqual('<my-comp><div dir="" dirsameinstance=""></div></my-comp>ViewRef');
|
|
|
|
expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
|
|
|
|
|
|
|
|
expect(dir !.cdr).toBe(app !.cdr);
|
|
|
|
expect(dir !.cdr).toBe(dirSameInstance !.cdr);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should inject host component ChangeDetectorRef into directives in embedded views', () => {
|
|
|
|
|
|
|
|
class MyApp {
|
|
|
|
showing = true;
|
|
|
|
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyApp,
|
|
|
|
tag: 'my-app',
|
|
|
|
factory: () => new MyApp(injectChangeDetectorRef()),
|
|
|
|
/**
|
|
|
|
* % if (showing) {
|
|
|
|
* <div dir dirSameInstance #dir="dir"> {{ dir.value }} </div>
|
|
|
|
* % }
|
|
|
|
*/
|
|
|
|
template: function(ctx: MyApp, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
container(0);
|
|
|
|
}
|
|
|
|
containerRefreshStart(0);
|
|
|
|
{
|
|
|
|
if (ctx.showing) {
|
|
|
|
if (embeddedViewStart(0)) {
|
|
|
|
elementStart(0, 'div', $e0_attrs$, [Directive, DirectiveSameInstance]);
|
|
|
|
{ text(3); }
|
|
|
|
elementEnd();
|
|
|
|
}
|
|
|
|
textBinding(3, bind(load<Directive>(1).value));
|
|
|
|
}
|
|
|
|
embeddedViewEnd();
|
|
|
|
}
|
|
|
|
containerRefreshEnd();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = renderComponent(MyApp);
|
|
|
|
expect(toHtml(app)).toEqual('<div dir="" dirsameinstance="">ViewRef</div>');
|
|
|
|
expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
|
|
|
|
|
|
|
|
expect(dir !.cdr).toBe(app.cdr);
|
|
|
|
expect(dir !.cdr).toBe(dirSameInstance !.cdr);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should inject host component ChangeDetectorRef into directives on containers', () => {
|
|
|
|
class IfDirective {
|
|
|
|
/* @Input */
|
|
|
|
myIf = true;
|
|
|
|
|
|
|
|
constructor(public template: TemplateRef<any>, public vcr: ViewContainerRef) {}
|
|
|
|
|
|
|
|
ngOnChanges() {
|
|
|
|
if (this.myIf) {
|
|
|
|
this.vcr.createEmbeddedView(this.template);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: IfDirective,
|
|
|
|
factory: () => new IfDirective(injectTemplateRef(), injectViewContainerRef()),
|
|
|
|
inputs: {myIf: 'myIf'},
|
2018-03-12 14:18:50 -04:00
|
|
|
features: [PublicFeature, NgOnChangesFeature()]
|
2018-02-26 19:58:15 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
class MyApp {
|
|
|
|
showing = true;
|
|
|
|
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyApp,
|
|
|
|
tag: 'my-app',
|
|
|
|
factory: () => new MyApp(injectChangeDetectorRef()),
|
|
|
|
/** <div *myIf="showing" dir dirSameInstance #dir="dir"> {{ dir.value }} </div> */
|
|
|
|
template: function(ctx: MyApp, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
container(0, [IfDirective], C1);
|
|
|
|
}
|
|
|
|
containerRefreshStart(0);
|
|
|
|
containerRefreshEnd();
|
|
|
|
|
|
|
|
function C1(ctx1: any, cm1: boolean) {
|
|
|
|
if (cm1) {
|
|
|
|
elementStart(0, 'div', $e0_attrs$, [Directive, DirectiveSameInstance]);
|
|
|
|
{ text(3); }
|
|
|
|
elementEnd();
|
|
|
|
}
|
|
|
|
textBinding(3, bind(load<Directive>(1).value));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = renderComponent(MyApp);
|
|
|
|
expect(toHtml(app)).toEqual('<div dir="" dirsameinstance="">ViewRef</div>');
|
|
|
|
expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
|
|
|
|
|
|
|
|
expect(dir !.cdr).toBe(app.cdr);
|
|
|
|
expect(dir !.cdr).toBe(dirSameInstance !.cdr);
|
|
|
|
});
|
|
|
|
|
2018-03-01 01:18:34 -05:00
|
|
|
it('should injectAttribute', () => {
|
|
|
|
let exist: string|undefined = 'wrong';
|
|
|
|
let nonExist: string|undefined = 'wrong';
|
|
|
|
class MyApp {
|
|
|
|
static ngComponentDef = defineComponent({
|
|
|
|
type: MyApp,
|
|
|
|
tag: 'my-app',
|
|
|
|
factory: () => new MyApp(),
|
|
|
|
template: function(ctx: MyApp, cm: boolean) {
|
|
|
|
if (cm) {
|
|
|
|
elementStart(0, 'div', ['exist', 'existValue', 'other', 'ignore']);
|
|
|
|
exist = injectAttribute('exist');
|
|
|
|
nonExist = injectAttribute('nonExist');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const app = renderComponent(MyApp);
|
|
|
|
expect(exist).toEqual('existValue');
|
|
|
|
expect(nonExist).toEqual(undefined);
|
|
|
|
});
|
|
|
|
|
2018-02-26 19:58:15 -05:00
|
|
|
});
|
|
|
|
|
2017-12-01 17:23:03 -05:00
|
|
|
describe('inject', () => {
|
|
|
|
describe('bloom filter', () => {
|
2018-01-08 23:17:13 -05:00
|
|
|
let di: LInjector;
|
2017-12-01 17:23:03 -05:00
|
|
|
beforeEach(() => {
|
|
|
|
di = {} as any;
|
|
|
|
di.bf0 = 0;
|
|
|
|
di.bf1 = 0;
|
|
|
|
di.bf2 = 0;
|
|
|
|
di.bf3 = 0;
|
2018-03-14 16:29:48 -04:00
|
|
|
di.bf4 = 0;
|
|
|
|
di.bf5 = 0;
|
|
|
|
di.bf6 = 0;
|
|
|
|
di.bf7 = 0;
|
|
|
|
di.bf3 = 0;
|
2017-12-01 17:23:03 -05:00
|
|
|
di.cbf0 = 0;
|
|
|
|
di.cbf1 = 0;
|
|
|
|
di.cbf2 = 0;
|
|
|
|
di.cbf3 = 0;
|
2018-03-14 16:29:48 -04:00
|
|
|
di.cbf4 = 0;
|
|
|
|
di.cbf5 = 0;
|
|
|
|
di.cbf6 = 0;
|
|
|
|
di.cbf7 = 0;
|
2017-12-01 17:23:03 -05:00
|
|
|
});
|
|
|
|
|
2018-03-14 16:29:48 -04:00
|
|
|
function bloomState() {
|
|
|
|
return [di.bf7, di.bf6, di.bf5, di.bf4, di.bf3, di.bf2, di.bf1, di.bf0];
|
|
|
|
}
|
2017-12-01 17:23:03 -05:00
|
|
|
|
|
|
|
it('should add values', () => {
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 0 } as any);
|
2018-03-14 16:29:48 -04:00
|
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 0, 0, 0, 1]);
|
2017-12-01 17:23:03 -05:00
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 32 + 1 } as any);
|
2018-03-14 16:29:48 -04:00
|
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 0, 0, 2, 1]);
|
2017-12-01 17:23:03 -05:00
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 64 + 2 } as any);
|
2018-03-14 16:29:48 -04:00
|
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 0, 4, 2, 1]);
|
2017-12-01 17:23:03 -05:00
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 96 + 3 } as any);
|
2018-03-14 16:29:48 -04:00
|
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 8, 4, 2, 1]);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 128 + 4 } as any);
|
|
|
|
expect(bloomState()).toEqual([0, 0, 0, 16, 8, 4, 2, 1]);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 160 + 5 } as any);
|
|
|
|
expect(bloomState()).toEqual([0, 0, 32, 16, 8, 4, 2, 1]);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 192 + 6 } as any);
|
|
|
|
expect(bloomState()).toEqual([0, 64, 32, 16, 8, 4, 2, 1]);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 224 + 7 } as any);
|
|
|
|
expect(bloomState()).toEqual([128, 64, 32, 16, 8, 4, 2, 1]);
|
2017-12-01 17:23:03 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
it('should query values', () => {
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 0 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 32 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 64 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 96 } as any);
|
2018-03-14 16:29:48 -04:00
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 127 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 161 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 188 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 223 } as any);
|
|
|
|
bloomAdd(di, { __NG_ELEMENT_ID__: 255 } as any);
|
2017-12-01 17:23:03 -05:00
|
|
|
|
|
|
|
expect(bloomFindPossibleInjector(di, 0)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 1)).toEqual(null);
|
|
|
|
expect(bloomFindPossibleInjector(di, 32)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 64)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 96)).toEqual(di);
|
2018-03-14 16:29:48 -04:00
|
|
|
expect(bloomFindPossibleInjector(di, 127)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 161)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 188)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 223)).toEqual(di);
|
|
|
|
expect(bloomFindPossibleInjector(di, 255)).toEqual(di);
|
2017-12-01 17:23:03 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-01-17 13:09:05 -05:00
|
|
|
describe('flags', () => {
|
|
|
|
it('should return defaultValue not found', () => {
|
|
|
|
class MyApp {
|
|
|
|
constructor(public value: string) {}
|
|
|
|
|
|
|
|
static ngComponentDef = defineComponent({
|
2018-01-23 13:57:48 -05:00
|
|
|
type: MyApp,
|
2018-01-17 13:09:05 -05:00
|
|
|
tag: 'my-app',
|
2018-03-04 23:21:23 -05:00
|
|
|
factory: () => new MyApp(
|
|
|
|
directiveInject(String as any, InjectFlags.Default, 'DefaultValue')),
|
2018-01-17 13:09:05 -05:00
|
|
|
template: () => null
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const myApp = renderComponent(MyApp);
|
|
|
|
expect(myApp.value).toEqual('DefaultValue');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-12-01 17:23:03 -05:00
|
|
|
it('should inject from parent view', () => {
|
2018-01-09 00:57:50 -05:00
|
|
|
class ParentDirective {
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: ParentDirective,
|
|
|
|
factory: () => new ParentDirective(),
|
|
|
|
features: [PublicFeature]
|
|
|
|
});
|
2018-01-09 00:57:50 -05:00
|
|
|
}
|
2017-12-01 17:23:03 -05:00
|
|
|
|
|
|
|
class ChildDirective {
|
|
|
|
value: string;
|
|
|
|
constructor(public parent: ParentDirective) {
|
|
|
|
this.value = (parent.constructor as any).name;
|
|
|
|
}
|
2018-01-09 00:57:50 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
2018-01-22 18:27:21 -05:00
|
|
|
type: ChildDirective,
|
2018-03-04 23:21:23 -05:00
|
|
|
factory: () => new ChildDirective(directiveInject(ParentDirective)),
|
2018-01-09 00:57:50 -05:00
|
|
|
features: [PublicFeature]
|
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
class Child2Directive {
|
|
|
|
value: boolean;
|
|
|
|
constructor(parent: ParentDirective, child: ChildDirective) {
|
|
|
|
this.value = parent === child.parent;
|
|
|
|
}
|
2018-01-22 18:27:21 -05:00
|
|
|
static ngDirectiveDef = defineDirective({
|
|
|
|
type: Child2Directive,
|
2018-03-04 23:21:23 -05:00
|
|
|
factory: () => new Child2Directive(
|
|
|
|
directiveInject(ParentDirective), directiveInject(ChildDirective))
|
2018-01-22 18:27:21 -05:00
|
|
|
});
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
function Template(ctx: any, cm: boolean) {
|
|
|
|
if (cm) {
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(0, 'div', null, [ParentDirective]);
|
|
|
|
{ container(2); }
|
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
containerRefreshStart(2);
|
2017-12-01 17:23:03 -05:00
|
|
|
{
|
2018-02-06 20:27:16 -05:00
|
|
|
if (embeddedViewStart(0)) {
|
2018-02-06 19:11:20 -05:00
|
|
|
elementStart(0, 'span', null, [ChildDirective, Child2Directive]);
|
|
|
|
{ text(3); }
|
|
|
|
elementEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
textBinding(
|
2018-02-16 19:58:07 -05:00
|
|
|
3, interpolation2(
|
|
|
|
'', load<ChildDirective>(1).value, '-', load<Child2Directive>(2).value, ''));
|
2018-02-06 20:27:16 -05:00
|
|
|
embeddedViewEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
2018-02-06 19:11:20 -05:00
|
|
|
containerRefreshEnd();
|
2017-12-01 17:23:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
expect(renderToHtml(Template, {})).toEqual('<div><span>ParentDirective-true</span></div>');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should inject from module Injector', () => {
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('getOrCreateNodeInjector', () => {
|
|
|
|
it('should handle initial undefined state', () => {
|
2018-02-23 16:17:20 -05:00
|
|
|
const contentView =
|
|
|
|
createLView(-1, null !, createTView(), null, null, LViewFlags.CheckAlways);
|
2017-12-01 17:23:03 -05:00
|
|
|
const oldView = enterView(contentView, null !);
|
|
|
|
try {
|
2017-12-08 14:48:54 -05:00
|
|
|
const parent = createLNode(0, LNodeFlags.Element, null, null);
|
2017-12-01 17:23:03 -05:00
|
|
|
|
|
|
|
// Simulate the situation where the previous parent is not initialized.
|
|
|
|
// This happens on first bootstrap because we don't init existing values
|
|
|
|
// so that we have smaller HelloWorld.
|
|
|
|
(parent as{parent: any}).parent = undefined;
|
|
|
|
|
|
|
|
const injector = getOrCreateNodeInjector();
|
|
|
|
expect(injector).not.toBe(null);
|
|
|
|
} finally {
|
|
|
|
leaveView(oldView);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|