1731 lines
58 KiB
TypeScript
1731 lines
58 KiB
TypeScript
/**
|
|
* @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
|
|
*/
|
|
|
|
import {ChangeDetectorRef, Host, Inject, InjectFlags, Injector, Optional, Renderer2, Self, SkipSelf, TemplateRef, ViewContainerRef, ɵɵdefineInjectable, ɵɵdefineInjector} from '@angular/core';
|
|
import {createLView, createNodeAtIndex, createTView} from '@angular/core/src/render3/instructions/shared';
|
|
import {ComponentType, RenderFlags} from '@angular/core/src/render3/interfaces/definition';
|
|
|
|
import {createInjector} from '../../src/di/r3_injector';
|
|
import {ɵɵdefineComponent} from '../../src/render3/definition';
|
|
import {bloomAdd, bloomHasToken, bloomHashBitOrFactory as bloomHash, getOrCreateNodeInjectorForNode} from '../../src/render3/di';
|
|
import {ɵɵProvidersFeature, ɵɵallocHostVars, ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation2, ɵɵprojection, ɵɵprojectionDef, ɵɵreference, ɵɵtemplate, ɵɵtemplateRefExtractor, ɵɵtext, ɵɵtextBinding} from '../../src/render3/index';
|
|
import {TNODE} from '../../src/render3/interfaces/injector';
|
|
import {AttributeMarker, TNodeType} from '../../src/render3/interfaces/node';
|
|
import {isProceduralRenderer} from '../../src/render3/interfaces/renderer';
|
|
import {LViewFlags} from '../../src/render3/interfaces/view';
|
|
import {enterView, leaveView} from '../../src/render3/state';
|
|
import {ViewRef} from '../../src/render3/view_ref';
|
|
|
|
import {NgIf} from './common_with_def';
|
|
import {getRendererFactory2} from './imported_renderer2';
|
|
import {ComponentFixture, createComponent, createDirective, getDirectiveOnNode, renderComponent, toHtml} from './render_util';
|
|
|
|
describe('di', () => {
|
|
describe('no dependencies', () => {
|
|
it('should create directive with no deps', () => {
|
|
class Directive {
|
|
value: string = 'Created';
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: Directive,
|
|
selectors: [['', 'dir', '']],
|
|
factory: () => new Directive,
|
|
exportAs: ['dir']
|
|
});
|
|
}
|
|
|
|
/** <div dir #dir="dir"> {{ dir.value }} </div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dir', ''], ['dir', 'dir']);
|
|
{ ɵɵtext(2); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
const tmp = ɵɵreference(1) as any;
|
|
ɵɵtextBinding(2, ɵɵbind(tmp.value));
|
|
}
|
|
}, 3, 1, [Directive]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.html).toEqual('<div dir="">Created</div>');
|
|
});
|
|
});
|
|
|
|
describe('directive injection', () => {
|
|
let log: string[] = [];
|
|
|
|
class DirB {
|
|
value = 'DirB';
|
|
constructor() { log.push(this.value); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirB', '']],
|
|
type: DirB,
|
|
factory: () => new DirB(),
|
|
inputs: {value: 'value'}
|
|
});
|
|
}
|
|
|
|
beforeEach(() => log = []);
|
|
|
|
it('should create directive with intra view dependencies', () => {
|
|
class DirA {
|
|
value: string = 'DirA';
|
|
static ngDirectiveDef = ɵɵdefineDirective(
|
|
{type: DirA, selectors: [['', 'dirA', '']], factory: () => new DirA()});
|
|
}
|
|
|
|
class DirC {
|
|
value: string;
|
|
constructor(a: DirA, b: DirB) { this.value = a.value + b.value; }
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirC,
|
|
selectors: [['', 'dirC', '']],
|
|
factory: () => new DirC(ɵɵdirectiveInject(DirA), ɵɵdirectiveInject(DirB)),
|
|
exportAs: ['dirC']
|
|
});
|
|
}
|
|
|
|
/**
|
|
* <div dirA>
|
|
* <span dirB dirC #dir="dirC"> {{ dir.value }} </span>
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirA', '']);
|
|
{
|
|
ɵɵelementStart(1, 'span', ['dirB', '', 'dirC', ''], ['dir', 'dirC']);
|
|
{ ɵɵtext(3); }
|
|
ɵɵelementEnd();
|
|
}
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
const tmp = ɵɵreference(2) as any;
|
|
ɵɵtextBinding(3, ɵɵbind(tmp.value));
|
|
}
|
|
}, 4, 1, [DirA, DirB, DirC]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.html).toEqual('<div dira=""><span dirb="" dirc="">DirADirB</span></div>');
|
|
});
|
|
|
|
it('should instantiate injected directives in dependency order', () => {
|
|
class DirA {
|
|
constructor(dir: DirB) { log.push(`DirA (dep: ${dir.value})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirB)),
|
|
});
|
|
}
|
|
|
|
/** <div dirA dirB></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', '']);
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(['DirB', 'DirA (dep: DirB)']);
|
|
});
|
|
|
|
it('should fallback to the module injector', () => {
|
|
class DirA {
|
|
constructor(dir: DirB) { log.push(`DirA (dep: ${dir.value})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirB)),
|
|
});
|
|
}
|
|
|
|
// `<div dirB></div><div dirA></div>`
|
|
// - dirB is know to the node injectors (it uses the diPublic feature)
|
|
// - then when dirA tries to inject dirB, it will check the node injector first tree
|
|
// - if not found, it will check the module injector tree
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirB', '']);
|
|
ɵɵelement(1, 'div', ['dirA', '']);
|
|
}
|
|
}, 2, 0, [DirA, DirB]);
|
|
|
|
const fakeModuleInjector: any = {
|
|
get: function(token: any) {
|
|
const value = token === DirB ? 'module' : 'fail';
|
|
return {value: value};
|
|
}
|
|
};
|
|
|
|
new ComponentFixture(App, {injector: fakeModuleInjector});
|
|
expect(log).toEqual(['DirB', 'DirA (dep: module)']);
|
|
});
|
|
|
|
it('should instantiate injected directives before components', () => {
|
|
class Comp {
|
|
constructor(dir: DirB) { log.push(`Comp (dep: ${dir.value})`); }
|
|
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
selectors: [['comp']],
|
|
type: Comp,
|
|
consts: 0,
|
|
vars: 0,
|
|
factory: () => new Comp(ɵɵdirectiveInject(DirB)),
|
|
template: (rf: RenderFlags, ctx: Comp) => {}
|
|
});
|
|
}
|
|
|
|
/** <comp dirB></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirB', '']);
|
|
}
|
|
}, 1, 0, [Comp, DirB]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(['DirB', 'Comp (dep: DirB)']);
|
|
});
|
|
|
|
it('should inject directives in the correct order in a for loop', () => {
|
|
class DirA {
|
|
constructor(dir: DirB) { log.push(`DirA (dep: ${dir.value})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirB))
|
|
});
|
|
}
|
|
|
|
/**
|
|
* % for(let i = 0; i < 3; i++) {
|
|
* <div dirA dirB></div>
|
|
* % }
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵcontainer(0);
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵcontainerRefreshStart(0);
|
|
{
|
|
for (let i = 0; i < 3; i++) {
|
|
if (ɵɵembeddedViewStart(0, 1, 0)) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', '']);
|
|
}
|
|
ɵɵembeddedViewEnd();
|
|
}
|
|
}
|
|
ɵɵcontainerRefreshEnd();
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(
|
|
['DirB', 'DirA (dep: DirB)', 'DirB', 'DirA (dep: DirB)', 'DirB', 'DirA (dep: DirB)']);
|
|
});
|
|
|
|
it('should instantiate directives with multiple out-of-order dependencies', () => {
|
|
class DirA {
|
|
value = 'DirA';
|
|
constructor() { log.push(this.value); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective(
|
|
{selectors: [['', 'dirA', '']], type: DirA, factory: () => new DirA()});
|
|
}
|
|
|
|
class DirB {
|
|
constructor(dirA: DirA, dirC: DirC) {
|
|
log.push(`DirB (deps: ${dirA.value} and ${dirC.value})`);
|
|
}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirB', '']],
|
|
type: DirB,
|
|
factory: () => new DirB(ɵɵdirectiveInject(DirA), ɵɵdirectiveInject(DirC))
|
|
});
|
|
}
|
|
|
|
class DirC {
|
|
value = 'DirC';
|
|
constructor() { log.push(this.value); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective(
|
|
{selectors: [['', 'dirC', '']], type: DirC, factory: () => new DirC()});
|
|
}
|
|
|
|
/** <div dirA dirB dirC></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', '', 'dirC', '']);
|
|
}
|
|
}, 1, 0, [DirA, DirB, DirC]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(['DirA', 'DirC', 'DirB (deps: DirA and DirC)']);
|
|
});
|
|
|
|
it('should instantiate in the correct order for complex case', () => {
|
|
class Comp {
|
|
constructor(dir: DirD) { log.push(`Comp (dep: ${dir.value})`); }
|
|
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
selectors: [['comp']],
|
|
type: Comp,
|
|
consts: 0,
|
|
vars: 0,
|
|
factory: () => new Comp(ɵɵdirectiveInject(DirD)),
|
|
template: (ctx: any, fm: boolean) => {}
|
|
});
|
|
}
|
|
|
|
class DirA {
|
|
value = 'DirA';
|
|
constructor(dir: DirC) { log.push(`DirA (dep: ${dir.value})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirC))
|
|
});
|
|
}
|
|
|
|
class DirC {
|
|
value = 'DirC';
|
|
constructor(dir: DirB) { log.push(`DirC (dep: ${dir.value})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirC', '']],
|
|
type: DirC,
|
|
factory: () => new DirC(ɵɵdirectiveInject(DirB))
|
|
});
|
|
}
|
|
|
|
class DirD {
|
|
value = 'DirD';
|
|
constructor(dir: DirA) { log.push(`DirD (dep: ${dir.value})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirD', '']],
|
|
type: DirD,
|
|
factory: () => new DirD(ɵɵdirectiveInject(DirA))
|
|
});
|
|
}
|
|
|
|
/** <comp dirA dirB dirC dirD></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirA', '', 'dirB', '', 'dirC', '', 'dirD', '']);
|
|
}
|
|
}, 1, 0, [Comp, DirA, DirB, DirC, DirD]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(
|
|
['DirB', 'DirC (dep: DirB)', 'DirA (dep: DirC)', 'DirD (dep: DirA)', 'Comp (dep: DirD)']);
|
|
});
|
|
|
|
it('should instantiate in correct order with mixed parent and peer dependencies', () => {
|
|
class DirA {
|
|
constructor(dirB: DirB, app: App) {
|
|
log.push(`DirA (deps: ${dirB.value} and ${app.value})`);
|
|
}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirB), ɵɵdirectiveInject(App)),
|
|
});
|
|
}
|
|
|
|
class App {
|
|
value = 'App';
|
|
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
selectors: [['app']],
|
|
type: App,
|
|
factory: () => new App(),
|
|
consts: 1,
|
|
vars: 0,
|
|
/** <div dirA dirB dirC></div> */
|
|
template: (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', '', 'dirC', 'dirC']);
|
|
}
|
|
},
|
|
directives: [DirA, DirB]
|
|
});
|
|
}
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(['DirB', 'DirA (deps: DirB and App)']);
|
|
});
|
|
|
|
it('should not use a parent when peer dep is available', () => {
|
|
let count = 1;
|
|
|
|
class DirA {
|
|
constructor(dirB: DirB) { log.push(`DirA (dep: DirB - ${dirB.count})`); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirB)),
|
|
});
|
|
}
|
|
|
|
class DirB {
|
|
count: number;
|
|
|
|
constructor() {
|
|
log.push(`DirB`);
|
|
this.count = count++;
|
|
}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective(
|
|
{selectors: [['', 'dirB', '']], type: DirB, factory: () => new DirB()});
|
|
}
|
|
|
|
/** <div dirA dirB></div> */
|
|
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', '']);
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
/** <parent dirB></parent> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'parent', ['dirB', '']);
|
|
}
|
|
}, 1, 0, [Parent, DirB]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(log).toEqual(['DirB', 'DirB', 'DirA (dep: DirB - 2)']);
|
|
});
|
|
|
|
describe('dependencies in parent views', () => {
|
|
|
|
class DirA {
|
|
injector: Injector;
|
|
constructor(public dirB: DirB, public vcr: ViewContainerRef) {
|
|
this.injector = vcr.injector;
|
|
}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory:
|
|
() => new DirA(ɵɵdirectiveInject(DirB), ɵɵdirectiveInject(ViewContainerRef as any)),
|
|
exportAs: ['dirA']
|
|
});
|
|
}
|
|
|
|
/**
|
|
* <div dirA #dir="dirA">
|
|
* {{ dir.dirB.value }}
|
|
* </div>
|
|
*/
|
|
const Comp = createComponent('comp', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirA', ''], ['dir', 'dirA']);
|
|
{ ɵɵtext(2); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
const dir = ɵɵreference(1) as DirA;
|
|
ɵɵtextBinding(2, ɵɵbind(dir.dirB.value));
|
|
}
|
|
}, 3, 1, [DirA]);
|
|
|
|
it('should find dependencies on component hosts', () => {
|
|
/** <comp dirB>/comp> */
|
|
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirB', '']);
|
|
}
|
|
}, 1, 0, [Comp, DirB]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.hostElement.textContent).toEqual(`DirB`);
|
|
});
|
|
|
|
it('should find dependencies for directives in embedded views', () => {
|
|
|
|
function IfTemplate(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div');
|
|
{
|
|
ɵɵelementStart(1, 'div', ['dirA', ''], ['dir', 'dirA']);
|
|
{ ɵɵtext(3); }
|
|
ɵɵelementEnd();
|
|
}
|
|
ɵɵelementEnd();
|
|
}
|
|
|
|
if (rf & RenderFlags.Update) {
|
|
const dir = ɵɵreference(2) as DirA;
|
|
ɵɵtextBinding(3, ɵɵbind(dir.dirB.value));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* <div dirB>
|
|
* <div *ngIf="showing">
|
|
* <div dirA #dir="dirA"> {{ dir.dirB.value }} </div>
|
|
* </div>
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirB', '']);
|
|
{ ɵɵtemplate(1, IfTemplate, 4, 1, 'div', [AttributeMarker.Template, 'ngIf']); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.showing));
|
|
}
|
|
}, 2, 1, [DirA, DirB, NgIf]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
fixture.component.showing = true;
|
|
fixture.update();
|
|
|
|
expect(fixture.hostElement.textContent).toEqual(`DirB`);
|
|
});
|
|
|
|
it('should find dependencies of directives nested deeply in inline views', () => {
|
|
/**
|
|
* <div dirB>
|
|
* % if (!skipContent) {
|
|
* % if (!skipContent2) {
|
|
* <div dirA #dir="dirA"> {{ dir.dirB.value }} </div>
|
|
* % }
|
|
* % }
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirB', '']);
|
|
{ ɵɵcontainer(1); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵcontainerRefreshStart(1);
|
|
{
|
|
if (!ctx.skipContent) {
|
|
let rf1 = ɵɵembeddedViewStart(0, 1, 0);
|
|
{
|
|
if (rf1 & RenderFlags.Create) {
|
|
ɵɵcontainer(0);
|
|
}
|
|
if (rf1 & RenderFlags.Update) {
|
|
ɵɵcontainerRefreshStart(0);
|
|
{
|
|
if (!ctx.skipContent2) {
|
|
let rf2 = ɵɵembeddedViewStart(0, 3, 1);
|
|
{
|
|
if (rf2 & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirA', ''], ['dir', 'dirA']);
|
|
{ ɵɵtext(2); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf2 & RenderFlags.Update) {
|
|
const dir = ɵɵreference(1) as DirA;
|
|
ɵɵtextBinding(2, ɵɵbind(dir.dirB.value));
|
|
}
|
|
}
|
|
ɵɵembeddedViewEnd();
|
|
}
|
|
}
|
|
ɵɵcontainerRefreshEnd();
|
|
}
|
|
}
|
|
ɵɵembeddedViewEnd();
|
|
}
|
|
}
|
|
ɵɵcontainerRefreshEnd();
|
|
}
|
|
}, 2, 0, [DirA, DirB]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.hostElement.textContent).toEqual(`DirB`);
|
|
});
|
|
|
|
it('should find dependencies in declaration tree of ng-template (not insertion tree)', () => {
|
|
let structuralDir !: StructuralDir;
|
|
|
|
class StructuralDir {
|
|
// @Input()
|
|
tmp !: TemplateRef<any>;
|
|
|
|
constructor(public vcr: ViewContainerRef) {}
|
|
|
|
create() { this.vcr.createEmbeddedView(this.tmp); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: StructuralDir,
|
|
selectors: [['', 'structuralDir', '']],
|
|
factory: () => structuralDir =
|
|
new StructuralDir(ɵɵdirectiveInject(ViewContainerRef as any)),
|
|
inputs: {tmp: 'tmp'}
|
|
});
|
|
}
|
|
|
|
function FooTemplate(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirA', ''], ['dir', 'dirA']);
|
|
{ ɵɵtext(2); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
const dir = ɵɵreference(1) as DirA;
|
|
ɵɵtextBinding(2, ɵɵbind(dir.dirB.value));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* <div dirB value="declaration">
|
|
* <ng-template #foo>
|
|
* <div dirA dir="dirA"> {{ dir.dirB.value }} </div>
|
|
* </ng-template>
|
|
* </div>
|
|
*
|
|
* <div dirB value="insertion">
|
|
* <div structuralDir [tmp]="foo"></div>
|
|
* // insertion point
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirB', '', 'value', 'declaration']);
|
|
{
|
|
ɵɵtemplate(
|
|
1, FooTemplate, 3, 1, 'ng-template', null, ['foo', ''], ɵɵtemplateRefExtractor);
|
|
}
|
|
ɵɵelementEnd();
|
|
ɵɵelementStart(3, 'div', ['dirB', '', 'value', 'insertion']);
|
|
{ ɵɵelement(4, 'div', ['structuralDir', '']); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
const foo = ɵɵreference(2) as any;
|
|
ɵɵelementProperty(4, 'tmp', ɵɵbind(foo));
|
|
}
|
|
}, 5, 1, [DirA, DirB, StructuralDir]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
structuralDir.create();
|
|
fixture.update();
|
|
expect(fixture.hostElement.textContent).toEqual(`declaration`);
|
|
});
|
|
|
|
it('should create injectors on second template pass', () => {
|
|
/**
|
|
* <comp dirB></comp>
|
|
* <comp dirB></comp>
|
|
*/
|
|
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirB', '']);
|
|
ɵɵelement(1, 'comp', ['dirB', '']);
|
|
}
|
|
}, 2, 0, [Comp, DirB]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.hostElement.textContent).toEqual(`DirBDirB`);
|
|
});
|
|
|
|
it('should create injectors and host bindings in same view', () => {
|
|
let hostBindingDir !: HostBindingDir;
|
|
|
|
class HostBindingDir {
|
|
// @HostBinding('id')
|
|
id = 'foo';
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: HostBindingDir,
|
|
selectors: [['', 'hostBindingDir', '']],
|
|
factory: () => hostBindingDir = new HostBindingDir(),
|
|
hostBindings: (rf: RenderFlags, ctx: any, elementIndex: number) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵallocHostVars(1);
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵelementProperty(elementIndex, 'id', ɵɵbind(ctx.id));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
let dir !: DirA;
|
|
/**
|
|
* <div dirB hostBindingDir>
|
|
* <p dirA #dir="dirA">
|
|
* {{ dir.dirB.value }}
|
|
* </p>
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', [
|
|
'dirB',
|
|
'',
|
|
'hostBindingDir',
|
|
'',
|
|
]);
|
|
{
|
|
ɵɵelementStart(1, 'p', ['dirA', ''], ['dir', 'dirA']);
|
|
{ ɵɵtext(3); }
|
|
ɵɵelementEnd();
|
|
}
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
dir = ɵɵreference(2) as DirA;
|
|
ɵɵtextBinding(3, ɵɵbind(dir.dirB.value));
|
|
}
|
|
}, 4, 1, [HostBindingDir, DirA, DirB]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.hostElement.textContent).toEqual(`DirB`);
|
|
const hostDirEl = fixture.hostElement.querySelector('div') as HTMLElement;
|
|
expect(hostDirEl.id).toEqual('foo');
|
|
// The injector should not be overwritten by host bindings
|
|
expect(dir.vcr.injector).toEqual(dir.injector);
|
|
|
|
hostBindingDir.id = 'bar';
|
|
fixture.update();
|
|
expect(hostDirEl.id).toEqual('bar');
|
|
});
|
|
});
|
|
|
|
it('should create instance even when no injector present', () => {
|
|
class MyService {
|
|
value = 'MyService';
|
|
static ngInjectableDef =
|
|
ɵɵdefineInjectable({providedIn: 'root', factory: () => new MyService()});
|
|
}
|
|
|
|
class MyComponent {
|
|
constructor(public myService: MyService) {}
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: MyComponent,
|
|
selectors: [['my-component']],
|
|
consts: 1,
|
|
vars: 1,
|
|
factory: () => new MyComponent(ɵɵdirectiveInject(MyService)),
|
|
template: function(rf: RenderFlags, ctx: MyComponent) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵtext(0);
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵtextBinding(0, ɵɵbind(ctx.myService.value));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const fixture = new ComponentFixture(MyComponent);
|
|
fixture.update();
|
|
expect(fixture.html).toEqual('MyService');
|
|
});
|
|
|
|
it('should throw if directive is not found anywhere', () => {
|
|
class Dir {
|
|
constructor(siblingDir: OtherDir) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dir', '']],
|
|
type: Dir,
|
|
factory: () => new Dir(ɵɵdirectiveInject(OtherDir))
|
|
});
|
|
}
|
|
|
|
class OtherDir {
|
|
static ngDirectiveDef = ɵɵdefineDirective(
|
|
{selectors: [['', 'other', '']], type: OtherDir, factory: () => new OtherDir()});
|
|
}
|
|
|
|
/** <div dir></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dir', '']);
|
|
}
|
|
}, 1, 0, [Dir, OtherDir]);
|
|
|
|
expect(() => new ComponentFixture(App)).toThrowError(/Injector: NOT_FOUND \[OtherDir\]/);
|
|
});
|
|
|
|
it('should throw if directive is not found in ancestor tree', () => {
|
|
class Dir {
|
|
constructor(siblingDir: OtherDir) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dir', '']],
|
|
type: Dir,
|
|
factory: () => new Dir(ɵɵdirectiveInject(OtherDir))
|
|
});
|
|
}
|
|
|
|
class OtherDir {
|
|
static ngDirectiveDef = ɵɵdefineDirective(
|
|
{selectors: [['', 'other', '']], type: OtherDir, factory: () => new OtherDir()});
|
|
}
|
|
|
|
/**
|
|
* <div other></div>
|
|
* <div dir></div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['other', '']);
|
|
ɵɵelement(1, 'div', ['dir', '']);
|
|
}
|
|
}, 2, 0, [Dir, OtherDir]);
|
|
|
|
expect(() => new ComponentFixture(App)).toThrowError(/Injector: NOT_FOUND \[OtherDir\]/);
|
|
});
|
|
|
|
|
|
it('should throw if directives try to inject each other', () => {
|
|
class DirA {
|
|
constructor(dir: DirB) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirA', '']],
|
|
type: DirA,
|
|
factory: () => new DirA(ɵɵdirectiveInject(DirB))
|
|
});
|
|
}
|
|
|
|
class DirB {
|
|
constructor(dir: DirA) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dirB', '']],
|
|
type: DirB,
|
|
factory: () => new DirB(ɵɵdirectiveInject(DirA))
|
|
});
|
|
}
|
|
|
|
/** <div dirA dirB></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', '']);
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
expect(() => new ComponentFixture(App)).toThrowError(/Circular dep for/);
|
|
});
|
|
|
|
it('should throw if directive tries to inject itself', () => {
|
|
class Dir {
|
|
constructor(dir: Dir) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'dir', '']],
|
|
type: Dir,
|
|
factory: () => new Dir(ɵɵdirectiveInject(Dir))
|
|
});
|
|
}
|
|
|
|
/** <div dir></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dir', '']);
|
|
}
|
|
}, 1, 0, [Dir]);
|
|
|
|
expect(() => new ComponentFixture(App)).toThrowError(/Circular dep for/);
|
|
});
|
|
|
|
describe('flags', () => {
|
|
|
|
class DirB {
|
|
// TODO(issue/24571): remove '!'.
|
|
value !: string;
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirB,
|
|
selectors: [['', 'dirB', '']],
|
|
factory: () => new DirB(),
|
|
inputs: {value: 'dirB'}
|
|
});
|
|
}
|
|
|
|
describe('Optional', () => {
|
|
let dirA: DirA|null = null;
|
|
|
|
class DirA {
|
|
constructor(@Optional() public dirB: DirB|null) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory: () => dirA = new DirA(ɵɵdirectiveInject(DirB, InjectFlags.Optional))
|
|
});
|
|
}
|
|
|
|
beforeEach(() => dirA = null);
|
|
|
|
it('should not throw if dependency is @Optional (limp mode)', () => {
|
|
|
|
/** <div dirA></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '']);
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
expect(() => { new ComponentFixture(App); }).not.toThrow();
|
|
expect(dirA !.dirB).toEqual(null);
|
|
});
|
|
|
|
it('should not throw if dependency is @Optional (module injector)', () => {
|
|
class SomeModule {
|
|
static ngInjectorDef = ɵɵdefineInjector({factory: () => new SomeModule()});
|
|
}
|
|
|
|
/** <div dirA></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '']);
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
expect(() => {
|
|
const injector = createInjector(SomeModule);
|
|
new ComponentFixture(App, {injector});
|
|
}).not.toThrow();
|
|
expect(dirA !.dirB).toEqual(null);
|
|
});
|
|
|
|
it('should return null if @Optional dependency has @Self flag', () => {
|
|
let dirC !: DirC;
|
|
|
|
class DirC {
|
|
constructor(@Optional() @Self() public dirB: DirB|null) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirC,
|
|
selectors: [['', 'dirC', '']],
|
|
factory: () => dirC =
|
|
new DirC(ɵɵdirectiveInject(DirB, InjectFlags.Optional|InjectFlags.Self))
|
|
});
|
|
}
|
|
|
|
/** <div dirC></div> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirC', '']);
|
|
}
|
|
}, 1, 0, [DirC, DirB]);
|
|
|
|
expect(() => { new ComponentFixture(App); }).not.toThrow();
|
|
expect(dirC !.dirB).toEqual(null);
|
|
});
|
|
|
|
it('should not throw if dependency is @Optional but defined elsewhere', () => {
|
|
let dirA: DirA;
|
|
|
|
class DirA {
|
|
constructor(@Optional() public dirB: DirB|null) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory: () => dirA = new DirA(ɵɵdirectiveInject(DirB, InjectFlags.Optional))
|
|
});
|
|
}
|
|
|
|
/**
|
|
* <div dirB></div>
|
|
* <div dirA></div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirB', '']);
|
|
ɵɵelement(1, 'div', ['dirA', '']);
|
|
}
|
|
}, 2, 0, [DirA, DirB]);
|
|
|
|
expect(() => {
|
|
new ComponentFixture(App);
|
|
expect(dirA !.dirB).toEqual(null);
|
|
}).not.toThrow();
|
|
});
|
|
});
|
|
|
|
it('should skip the current node with @SkipSelf', () => {
|
|
let dirA: DirA;
|
|
|
|
class DirA {
|
|
constructor(@SkipSelf() public dirB: DirB) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory: () => dirA = new DirA(ɵɵdirectiveInject(DirB, InjectFlags.SkipSelf))
|
|
});
|
|
}
|
|
|
|
/** <div dirA dirB="self"></div> */
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '', 'dirB', 'self']);
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
/* <comp dirB="parent"></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirB', 'parent']);
|
|
}
|
|
}, 1, 0, [Comp, DirB]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(dirA !.dirB.value).toEqual('parent');
|
|
});
|
|
|
|
it('should check only the current node with @Self', () => {
|
|
let dirA: DirA;
|
|
|
|
class DirA {
|
|
constructor(@Self() public dirB: DirB) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory: () => dirA = new DirA(ɵɵdirectiveInject(DirB, InjectFlags.Self))
|
|
});
|
|
}
|
|
|
|
/**
|
|
* <div dirB>
|
|
* <div dirA></div>
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirB', '']);
|
|
ɵɵelement(1, 'div', ['dirA', '']);
|
|
ɵɵelementEnd();
|
|
}
|
|
}, 2, 0, [DirA, DirB]);
|
|
|
|
expect(() => {
|
|
new ComponentFixture(App);
|
|
}).toThrowError(/NodeInjector: NOT_FOUND \[DirB\]/);
|
|
});
|
|
|
|
it('should check only the current node with @Self even with false positive', () => {
|
|
let dirA: DirA;
|
|
|
|
class DirA {
|
|
constructor(@Self() public dirB: DirB) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory: () => dirA = new DirA(ɵɵdirectiveInject(DirB, InjectFlags.Self))
|
|
});
|
|
}
|
|
|
|
const DirC = createDirective('dirC');
|
|
|
|
/**
|
|
* <div dirB>
|
|
* <div dirA dirC></div>
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirB', '']);
|
|
ɵɵelement(1, 'div', ['dirA', '', 'dirC', '']);
|
|
ɵɵelementEnd();
|
|
}
|
|
}, 2, 0, [DirA, DirB, DirC]);
|
|
|
|
expect(() => {
|
|
(DirA as any)['__NG_ELEMENT_ID__'] = 1;
|
|
(DirC as any)['__NG_ELEMENT_ID__'] = 257;
|
|
new ComponentFixture(App);
|
|
}).toThrowError(/NodeInjector: NOT_FOUND \[DirB\]/);
|
|
});
|
|
|
|
describe('@Host', () => {
|
|
let dirA: DirA|null = null;
|
|
let dirString: DirString|null = null;
|
|
|
|
beforeEach(() => {
|
|
dirA = null;
|
|
dirString = null;
|
|
});
|
|
|
|
class DirA {
|
|
constructor(@Host() public dirB: DirB) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirA,
|
|
selectors: [['', 'dirA', '']],
|
|
factory: () => dirA = new DirA(ɵɵdirectiveInject(DirB, InjectFlags.Host))
|
|
});
|
|
}
|
|
|
|
class DirString {
|
|
constructor(@Host() public s: String) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirString,
|
|
selectors: [['', 'dirString', '']],
|
|
factory: () => dirString = new DirString(ɵɵdirectiveInject(String, InjectFlags.Host))
|
|
});
|
|
}
|
|
|
|
it('should find viewProviders on the host itself', () => {
|
|
/** <div dirString></div> */
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirString', '']);
|
|
}
|
|
}, 1, 0, [DirString], [], null, [], [{provide: String, useValue: 'Foo'}]);
|
|
|
|
/* <comp></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp');
|
|
}
|
|
}, 1, 0, [Comp]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(dirString !.s).toEqual('Foo');
|
|
});
|
|
|
|
it('should find host component on the host itself', () => {
|
|
let dirComp: DirComp|null = null;
|
|
|
|
class DirComp {
|
|
constructor(@Host() public comp: any) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirComp,
|
|
selectors: [['', 'dirCmp', '']],
|
|
factory: () => dirComp = new DirComp(ɵɵdirectiveInject(Comp, InjectFlags.Host))
|
|
});
|
|
}
|
|
|
|
/** <div dirCmp></div> */
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirCmp', '']);
|
|
}
|
|
}, 1, 0, [DirComp]);
|
|
|
|
/* <comp></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp');
|
|
}
|
|
}, 1, 0, [Comp]);
|
|
|
|
new ComponentFixture(App);
|
|
expect(dirComp !.comp instanceof Comp).toBeTruthy();
|
|
});
|
|
|
|
it('should not find providers on the host itself', () => {
|
|
/** <div dirString></div> */
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirString', '']);
|
|
}
|
|
}, 1, 0, [DirString], [], null, [{provide: String, useValue: 'Foo'}]);
|
|
|
|
/* <comp></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp');
|
|
}
|
|
}, 1, 0, [Comp]);
|
|
|
|
expect(() => {
|
|
new ComponentFixture(App);
|
|
}).toThrowError(/NodeInjector: NOT_FOUND \[String\]/);
|
|
});
|
|
|
|
it('should not find other directives on the host itself', () => {
|
|
/** <div dirA></div> */
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '']);
|
|
}
|
|
}, 1, 0, [DirA]);
|
|
|
|
/* <comp dirB></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirB', '']);
|
|
}
|
|
}, 1, 0, [Comp, DirB]);
|
|
|
|
expect(() => {
|
|
new ComponentFixture(App);
|
|
}).toThrowError(/NodeInjector: NOT_FOUND \[DirB\]/);
|
|
});
|
|
|
|
it('should not find providers on the host itself if in inline view', () => {
|
|
let comp !: any;
|
|
|
|
/**
|
|
* % if (showing) {
|
|
* <div dirA></div>
|
|
* % }
|
|
*/
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵcontainer(0);
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵcontainerRefreshStart(0);
|
|
{
|
|
if (ctx.showing) {
|
|
let rf1 = ɵɵembeddedViewStart(0, 1, 0);
|
|
if (rf1 & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '']);
|
|
}
|
|
ɵɵembeddedViewEnd();
|
|
}
|
|
}
|
|
ɵɵcontainerRefreshEnd();
|
|
}
|
|
}, 1, 0, [DirA, DirB]);
|
|
|
|
/* <comp dirB></comp> */
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp', ['dirB', '']);
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
comp = getDirectiveOnNode(0);
|
|
}
|
|
}, 1, 0, [Comp, DirB]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(() => {
|
|
comp.showing = true;
|
|
fixture.update();
|
|
}).toThrowError(/NodeInjector: NOT_FOUND \[DirB\]/);
|
|
});
|
|
|
|
it('should find providers across embedded views if not passing component boundary', () => {
|
|
let dirB !: DirB;
|
|
|
|
function IfTemplate(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirA', '']);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* <div dirB>
|
|
* <div *ngIf="showing" dirA></div>
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dirB', '']);
|
|
{
|
|
ɵɵtemplate(
|
|
1, IfTemplate, 1, 0, 'div', ['dirA', '', AttributeMarker.Template, 'ngIf']);
|
|
}
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.showing));
|
|
|
|
// testing only
|
|
dirB = getDirectiveOnNode(0);
|
|
}
|
|
}, 2, 1, [NgIf, DirA, DirB]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
fixture.component.showing = true;
|
|
fixture.update();
|
|
|
|
expect(dirA !.dirB).toEqual(dirB);
|
|
});
|
|
|
|
it('should not find component above the host', () => {
|
|
let dirComp: DirComp|null = null;
|
|
|
|
class DirComp {
|
|
constructor(@Host() public comp: any) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirComp,
|
|
selectors: [['', 'dirCmp', '']],
|
|
factory: () => dirComp = new DirComp(ɵɵdirectiveInject(App, InjectFlags.Host))
|
|
});
|
|
}
|
|
|
|
/** <div dirCmp></div> */
|
|
const Comp = createComponent('comp', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'div', ['dirCmp', '']);
|
|
}
|
|
}, 1, 0, [DirComp]);
|
|
|
|
/* <comp></comp> */
|
|
class App {
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: App,
|
|
selectors: [['app']],
|
|
consts: 1,
|
|
vars: 0,
|
|
factory: () => new App,
|
|
template: function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'comp');
|
|
}
|
|
},
|
|
directives: [Comp],
|
|
});
|
|
}
|
|
|
|
expect(() => {
|
|
new ComponentFixture(App);
|
|
}).toThrowError(/NodeInjector: NOT_FOUND \[App\]/);
|
|
});
|
|
|
|
describe('regression', () => {
|
|
// based on https://stackblitz.com/edit/angular-riss8k?file=src/app/app.component.ts
|
|
it('should allow directives with Host flag to inject view providers from containing component',
|
|
() => {
|
|
let controlContainers: ControlContainer[] = [];
|
|
let injectedControlContainer: ControlContainer|null = null;
|
|
|
|
class ControlContainer {}
|
|
|
|
/*
|
|
@Directive({
|
|
selector: '[group]',
|
|
providers: [{provide: ControlContainer, useExisting: GroupDirective}]
|
|
})
|
|
*/
|
|
class GroupDirective {
|
|
constructor() { controlContainers.push(this); }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: GroupDirective,
|
|
selectors: [['', 'group', '']],
|
|
factory: () => new GroupDirective(),
|
|
features: [ɵɵProvidersFeature(
|
|
[{provide: ControlContainer, useExisting: GroupDirective}])],
|
|
});
|
|
}
|
|
|
|
// @Directive({selector: '[controlName]'})
|
|
class ControlNameDirective {
|
|
constructor(@Host() @SkipSelf() @Inject(ControlContainer) parent:
|
|
ControlContainer) {
|
|
injectedControlContainer = parent;
|
|
}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: ControlNameDirective,
|
|
selectors: [['', 'controlName', '']],
|
|
factory: () => new ControlNameDirective(ɵɵdirectiveInject(
|
|
ControlContainer, InjectFlags.Host|InjectFlags.SkipSelf))
|
|
});
|
|
}
|
|
|
|
/*
|
|
@Component({
|
|
selector: 'child',
|
|
template: `
|
|
<input controlName type="text">
|
|
`,
|
|
viewProviders: [{provide: ControlContainer, useExisting: GroupDirective}]
|
|
})
|
|
*/
|
|
class ChildComponent {
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: ChildComponent,
|
|
selectors: [['child']],
|
|
consts: 1,
|
|
vars: 0,
|
|
factory: () => new ChildComponent(),
|
|
template: function(rf: RenderFlags, ctx: ChildComponent) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelement(0, 'input', ['controlName', '', 'type', 'text']);
|
|
}
|
|
},
|
|
directives: [ControlNameDirective],
|
|
features: [ɵɵProvidersFeature(
|
|
[], [{provide: ControlContainer, useExisting: GroupDirective}])],
|
|
});
|
|
}
|
|
/*
|
|
@Component({
|
|
selector: 'my-app',
|
|
template: `
|
|
<div group>
|
|
<child></child>
|
|
</div>
|
|
`
|
|
})
|
|
*/
|
|
class AppComponent {
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: AppComponent,
|
|
selectors: [['my-app']],
|
|
consts: 2,
|
|
vars: 0,
|
|
factory: () => new AppComponent(),
|
|
template: function(rf: RenderFlags, ctx: AppComponent) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['group', '']);
|
|
ɵɵelement(1, 'child');
|
|
ɵɵelementEnd();
|
|
}
|
|
},
|
|
directives: [ChildComponent, GroupDirective]
|
|
});
|
|
}
|
|
|
|
const fixture = new ComponentFixture(AppComponent as ComponentType<AppComponent>);
|
|
expect(fixture.html)
|
|
.toEqual(
|
|
'<div group=""><child><input controlname="" type="text"></child></div>');
|
|
|
|
expect(controlContainers).toEqual([injectedControlContainer !]);
|
|
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Special tokens', () => {
|
|
|
|
describe('ChangeDetectorRef', () => {
|
|
let dir: Directive;
|
|
let dirSameInstance: DirectiveSameInstance;
|
|
let comp: MyComp;
|
|
|
|
class MyComp {
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: MyComp,
|
|
selectors: [['my-comp']],
|
|
factory: () => comp = new MyComp(ɵɵdirectiveInject(ChangeDetectorRef as any)),
|
|
consts: 1,
|
|
vars: 0,
|
|
template: function(rf: RenderFlags, ctx: MyComp) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵprojectionDef();
|
|
ɵɵprojection(0);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
class Directive {
|
|
value: string;
|
|
|
|
constructor(public cdr: ChangeDetectorRef) { this.value = (cdr.constructor as any).name; }
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: Directive,
|
|
selectors: [['', 'dir', '']],
|
|
factory: () => dir = new Directive(ɵɵdirectiveInject(ChangeDetectorRef as any)),
|
|
exportAs: ['dir']
|
|
});
|
|
}
|
|
|
|
class DirectiveSameInstance {
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: DirectiveSameInstance,
|
|
selectors: [['', 'dirSame', '']],
|
|
factory: () => dirSameInstance =
|
|
new DirectiveSameInstance(ɵɵdirectiveInject(ChangeDetectorRef as any))
|
|
});
|
|
}
|
|
|
|
const directives = [MyComp, Directive, DirectiveSameInstance, NgIf];
|
|
|
|
/**
|
|
* This test needs to be moved to acceptance/di_spec.ts
|
|
* when Ivy compiler supports inline views.
|
|
*/
|
|
it('should inject host component ChangeDetectorRef into directives in embedded views', () => {
|
|
|
|
class MyApp {
|
|
showing = true;
|
|
|
|
constructor(public cdr: ChangeDetectorRef) {}
|
|
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: MyApp,
|
|
selectors: [['my-app']],
|
|
factory: () => new MyApp(ɵɵdirectiveInject(ChangeDetectorRef as any)),
|
|
consts: 1,
|
|
vars: 0,
|
|
/**
|
|
* % if (showing) {
|
|
* <div dir dirSame #dir="dir"> {{ dir.value }} </div>
|
|
* % }
|
|
*/
|
|
template: function(rf: RenderFlags, ctx: MyApp) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵcontainer(0);
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵcontainerRefreshStart(0);
|
|
{
|
|
if (ctx.showing) {
|
|
let rf1 = ɵɵembeddedViewStart(0, 3, 1);
|
|
if (rf1 & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['dir', '', 'dirSame', ''], ['dir', 'dir']);
|
|
{ ɵɵtext(2); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf1 & RenderFlags.Update) {
|
|
const tmp = ɵɵreference(1) as any;
|
|
ɵɵtextBinding(2, ɵɵbind(tmp.value));
|
|
}
|
|
}
|
|
ɵɵembeddedViewEnd();
|
|
}
|
|
ɵɵcontainerRefreshEnd();
|
|
}
|
|
},
|
|
directives: directives
|
|
});
|
|
}
|
|
|
|
const app = renderComponent(MyApp);
|
|
expect(toHtml(app)).toEqual('<div dir="" dirsame="">ViewRef</div>');
|
|
expect((app !.cdr as ViewRef<MyApp>).context).toBe(app);
|
|
|
|
// Each ChangeDetectorRef instance should be unique
|
|
expect(dir !.cdr).not.toBe(app.cdr);
|
|
expect(dir !.cdr).not.toBe(dirSameInstance !.cdr);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Renderer2', () => {
|
|
class MyComp {
|
|
constructor(public renderer: Renderer2) {}
|
|
|
|
static ngComponentDef = ɵɵdefineComponent({
|
|
type: MyComp,
|
|
selectors: [['my-comp']],
|
|
factory: () => new MyComp(ɵɵdirectiveInject(Renderer2 as any)),
|
|
consts: 1,
|
|
vars: 0,
|
|
template: function(rf: RenderFlags, ctx: MyComp) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵtext(0, 'Foo');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
it('should inject the Renderer2 used by the application', () => {
|
|
const rendererFactory = getRendererFactory2(document);
|
|
const fixture = new ComponentFixture(MyComp, {rendererFactory: rendererFactory});
|
|
expect(isProceduralRenderer(fixture.component.renderer)).toBeTruthy();
|
|
});
|
|
|
|
it('should throw when injecting Renderer2 but the application is using Renderer3',
|
|
() => { expect(() => new ComponentFixture(MyComp)).toThrow(); });
|
|
});
|
|
|
|
describe('ɵɵinject', () => {
|
|
describe('bloom filter', () => {
|
|
let mockTView: any;
|
|
beforeEach(() => {
|
|
mockTView = {data: [0, 0, 0, 0, 0, 0, 0, 0, null], firstTemplatePass: true};
|
|
});
|
|
|
|
function bloomState() { return mockTView.data.slice(0, TNODE).reverse(); }
|
|
|
|
class Dir0 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 0;
|
|
}
|
|
class Dir1 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 1;
|
|
}
|
|
class Dir33 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 33;
|
|
}
|
|
class Dir66 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 66;
|
|
}
|
|
class Dir99 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 99;
|
|
}
|
|
class Dir132 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 132;
|
|
}
|
|
class Dir165 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 165;
|
|
}
|
|
class Dir198 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 198;
|
|
}
|
|
class Dir231 {
|
|
/** @internal */ static __NG_ELEMENT_ID__ = 231;
|
|
}
|
|
|
|
it('should add values', () => {
|
|
bloomAdd(0, mockTView, Dir0);
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 0, 0, 0, 1]);
|
|
bloomAdd(0, mockTView, Dir33);
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 0, 0, 2, 1]);
|
|
bloomAdd(0, mockTView, Dir66);
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 0, 4, 2, 1]);
|
|
bloomAdd(0, mockTView, Dir99);
|
|
expect(bloomState()).toEqual([0, 0, 0, 0, 8, 4, 2, 1]);
|
|
bloomAdd(0, mockTView, Dir132);
|
|
expect(bloomState()).toEqual([0, 0, 0, 16, 8, 4, 2, 1]);
|
|
bloomAdd(0, mockTView, Dir165);
|
|
expect(bloomState()).toEqual([0, 0, 32, 16, 8, 4, 2, 1]);
|
|
bloomAdd(0, mockTView, Dir198);
|
|
expect(bloomState()).toEqual([0, 64, 32, 16, 8, 4, 2, 1]);
|
|
bloomAdd(0, mockTView, Dir231);
|
|
expect(bloomState()).toEqual([128, 64, 32, 16, 8, 4, 2, 1]);
|
|
});
|
|
|
|
it('should query values', () => {
|
|
bloomAdd(0, mockTView, Dir0);
|
|
bloomAdd(0, mockTView, Dir33);
|
|
bloomAdd(0, mockTView, Dir66);
|
|
bloomAdd(0, mockTView, Dir99);
|
|
bloomAdd(0, mockTView, Dir132);
|
|
bloomAdd(0, mockTView, Dir165);
|
|
bloomAdd(0, mockTView, Dir198);
|
|
bloomAdd(0, mockTView, Dir231);
|
|
|
|
expect(bloomHasToken(bloomHash(Dir0) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir1) as number, 0, mockTView.data)).toEqual(false);
|
|
expect(bloomHasToken(bloomHash(Dir33) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir66) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir99) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir132) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir165) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir198) as number, 0, mockTView.data)).toEqual(true);
|
|
expect(bloomHasToken(bloomHash(Dir231) as number, 0, mockTView.data)).toEqual(true);
|
|
});
|
|
});
|
|
|
|
it('should inject from parent view', () => {
|
|
const ParentDirective = createDirective('parentDir');
|
|
|
|
class ChildDirective {
|
|
value: string;
|
|
constructor(public parent: any) { this.value = (parent.constructor as any).name; }
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
type: ChildDirective,
|
|
selectors: [['', 'childDir', '']],
|
|
factory: () => new ChildDirective(ɵɵdirectiveInject(ParentDirective)),
|
|
exportAs: ['childDir']
|
|
});
|
|
}
|
|
|
|
class Child2Directive {
|
|
value: boolean;
|
|
constructor(parent: any, child: ChildDirective) { this.value = parent === child.parent; }
|
|
static ngDirectiveDef = ɵɵdefineDirective({
|
|
selectors: [['', 'child2Dir', '']],
|
|
type: Child2Directive,
|
|
factory: () => new Child2Directive(
|
|
ɵɵdirectiveInject(ParentDirective), ɵɵdirectiveInject(ChildDirective)),
|
|
exportAs: ['child2Dir']
|
|
});
|
|
}
|
|
|
|
/**
|
|
* <div parentDir>
|
|
* % if (...) {
|
|
* <span childDir child2Dir #child1="childDir" #child2="child2Dir">
|
|
* {{ child1.value }} - {{ child2.value }}
|
|
* </span>
|
|
* % }
|
|
* </div>
|
|
*/
|
|
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
|
if (rf & RenderFlags.Create) {
|
|
ɵɵelementStart(0, 'div', ['parentDir', '']);
|
|
{ ɵɵcontainer(1); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
ɵɵcontainerRefreshStart(1);
|
|
{
|
|
let rf1 = ɵɵembeddedViewStart(0, 4, 2);
|
|
if (rf1 & RenderFlags.Create) {
|
|
ɵɵelementStart(
|
|
0, 'span', ['childDir', '', 'child2Dir', ''],
|
|
['child1', 'childDir', 'child2', 'child2Dir']);
|
|
{ ɵɵtext(3); }
|
|
ɵɵelementEnd();
|
|
}
|
|
if (rf & RenderFlags.Update) {
|
|
const tmp1 = ɵɵreference(1) as any;
|
|
const tmp2 = ɵɵreference(2) as any;
|
|
ɵɵtextBinding(3, ɵɵinterpolation2('', tmp1.value, '-', tmp2.value, ''));
|
|
}
|
|
ɵɵembeddedViewEnd();
|
|
}
|
|
ɵɵcontainerRefreshEnd();
|
|
}
|
|
}, 2, 0, [ChildDirective, Child2Directive, ParentDirective]);
|
|
|
|
const fixture = new ComponentFixture(App);
|
|
expect(fixture.html)
|
|
.toEqual('<div parentdir=""><span child2dir="" childdir="">Directive-true</span></div>');
|
|
});
|
|
|
|
it('should inject from module Injector', () => {
|
|
|
|
});
|
|
});
|
|
|
|
describe('getOrCreateNodeInjector', () => {
|
|
it('should handle initial undefined state', () => {
|
|
const contentView = createLView(
|
|
null, createTView(-1, null, 1, 0, null, null, null, null), null, LViewFlags.CheckAlways,
|
|
null, null, {} as any, {} as any);
|
|
const oldView = enterView(contentView, null);
|
|
try {
|
|
const parentTNode = createNodeAtIndex(0, TNodeType.Element, null, null, null);
|
|
// 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.
|
|
(parentTNode as{parent: any}).parent = undefined;
|
|
|
|
const injector = getOrCreateNodeInjectorForNode(parentTNode, contentView);
|
|
expect(injector).not.toEqual(-1);
|
|
} finally {
|
|
leaveView(oldView);
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|