test(ivy): move discovery_utils tests to acceptance (#30416)
Rewrites the discovery util tests to use `TestBed`. PR Close #30416
This commit is contained in:
parent
96baff3a85
commit
cc2f175617
@ -5,16 +5,15 @@
|
|||||||
* Use of this source code is governed by an MIT-style license that can be
|
* 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
|
* found in the LICENSE file at https://angular.io/license
|
||||||
*/
|
*/
|
||||||
import {StaticInjector} from '../../src/di/injector';
|
import {CommonModule} from '@angular/common';
|
||||||
import {createInjector} from '../../src/di/r3_injector';
|
import {Component, Directive, InjectionToken, ViewChild} from '@angular/core';
|
||||||
import {AttributeMarker, RenderFlags, getHostElement, ɵɵProvidersFeature, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵi18n, ɵɵi18nApply, ɵɵi18nExp, ɵɵselect} from '../../src/render3/index';
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
||||||
import {markDirty, ɵɵbind, ɵɵelement, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵlistener, ɵɵstyling, ɵɵstylingApply, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
import {onlyInIvy} from '@angular/private/testing';
|
||||||
|
|
||||||
|
import {getHostElement, markDirty} from '../../src/render3/index';
|
||||||
import {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
|
import {getComponent, getContext, getDirectives, getInjectionTokens, getInjector, getListeners, getLocalRefs, getRootComponents, getViewComponent, loadLContext} from '../../src/render3/util/discovery_utils';
|
||||||
|
|
||||||
import {NgIf} from './common_with_def';
|
onlyInIvy('Ivy-specific utilities').describe('discovery utils', () => {
|
||||||
import {ComponentFixture} from './render_util';
|
|
||||||
|
|
||||||
describe('discovery utils', () => {
|
|
||||||
let fixture: ComponentFixture<MyApp>;
|
let fixture: ComponentFixture<MyApp>;
|
||||||
let myApp: MyApp;
|
let myApp: MyApp;
|
||||||
let dirA: DirectiveA[];
|
let dirA: DirectiveA[];
|
||||||
@ -29,115 +28,46 @@ describe('discovery utils', () => {
|
|||||||
log = [];
|
log = [];
|
||||||
dirA = [];
|
dirA = [];
|
||||||
childComponent = [];
|
childComponent = [];
|
||||||
fixture = new ComponentFixture(
|
TestBed.configureTestingModule({
|
||||||
MyApp, {injector: createInjector(null, null, [{provide: String, useValue: 'Module'}])});
|
imports: [CommonModule],
|
||||||
child = fixture.hostElement.querySelectorAll('child');
|
declarations: [MyApp, DirectiveA, Child],
|
||||||
span = fixture.hostElement.querySelectorAll('span');
|
providers: [{provide: String, useValue: 'Module'}]
|
||||||
div = fixture.hostElement.querySelectorAll('div');
|
});
|
||||||
p = fixture.hostElement.querySelectorAll('p');
|
fixture = TestBed.createComponent(MyApp);
|
||||||
|
fixture.detectChanges();
|
||||||
|
child = fixture.nativeElement.querySelectorAll('child');
|
||||||
|
span = fixture.nativeElement.querySelectorAll('span');
|
||||||
|
div = fixture.nativeElement.querySelectorAll('div');
|
||||||
|
p = fixture.nativeElement.querySelectorAll('p');
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
@Component(
|
||||||
* For all tests assume this set up
|
{selector: 'child', template: '<p></p>', providers: [{provide: String, useValue: 'Child'}]})
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* <my-app>
|
|
||||||
* <#VIEW>
|
|
||||||
* <span (click)=" log.push($event) ">{{text}}</span>
|
|
||||||
* <div dirA #div #foo="dirA"></div>
|
|
||||||
* <child>
|
|
||||||
* <#VIEW>
|
|
||||||
* <p></p>
|
|
||||||
* <VIEW>
|
|
||||||
* </child>
|
|
||||||
* <child dirA #child>
|
|
||||||
* <#VIEW>
|
|
||||||
* <p></p>
|
|
||||||
* <VIEW>
|
|
||||||
* </child>
|
|
||||||
* <child dirA *ngIf="true">
|
|
||||||
* <#VIEW>
|
|
||||||
* <p></p>
|
|
||||||
* <VIEW>
|
|
||||||
* </child>
|
|
||||||
* <i18n>ICU expression</i18n>
|
|
||||||
* </#VIEW>
|
|
||||||
* </my-app>
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
class Child {
|
class Child {
|
||||||
constructor() { childComponent.push(this); }
|
constructor() { childComponent.push(this); }
|
||||||
|
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: Child,
|
|
||||||
selectors: [['child']],
|
|
||||||
factory: () => new Child(),
|
|
||||||
consts: 1,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Child) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelement(0, 'p');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
features: [ɵɵProvidersFeature([{provide: String, useValue: 'Child'}])]
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Directive({selector: '[dirA]', exportAs: 'dirA'})
|
||||||
class DirectiveA {
|
class DirectiveA {
|
||||||
constructor() { dirA.push(this); }
|
constructor() { dirA.push(this); }
|
||||||
|
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: DirectiveA,
|
|
||||||
selectors: [['', 'dirA', '']],
|
|
||||||
exportAs: ['dirA'],
|
|
||||||
factory: () => new DirectiveA(),
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const MSG_DIV = `{<7B>0<EFBFBD>, select,
|
@Component({
|
||||||
other {ICU expression}
|
selector: 'my-app',
|
||||||
}`;
|
template: `
|
||||||
|
<span (click)="log($event)">{{text}}</span>
|
||||||
|
<div dirA #div #foo="dirA"></div>
|
||||||
|
<child></child>
|
||||||
|
<child dirA #child></child>
|
||||||
|
<child dirA *ngIf="true"></child>
|
||||||
|
<ng-container><p></p></ng-container>
|
||||||
|
`
|
||||||
|
})
|
||||||
class MyApp {
|
class MyApp {
|
||||||
text: string = 'INIT';
|
text: string = 'INIT';
|
||||||
constructor() { myApp = this; }
|
constructor() { myApp = this; }
|
||||||
|
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
log(event: any) { log.push(event); }
|
||||||
type: MyApp,
|
|
||||||
selectors: [['my-app']],
|
|
||||||
factory: () => new MyApp(),
|
|
||||||
consts: 13,
|
|
||||||
vars: 1,
|
|
||||||
directives: [Child, DirectiveA, NgIf],
|
|
||||||
template: (rf: RenderFlags, ctx: MyApp) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelementStart(0, 'span');
|
|
||||||
ɵɵlistener('click', $event => log.push($event));
|
|
||||||
ɵɵtext(1);
|
|
||||||
ɵɵelementEnd();
|
|
||||||
ɵɵelement(2, 'div', ['dirA', ''], ['div', '', 'foo', 'dirA']);
|
|
||||||
ɵɵelement(5, 'child');
|
|
||||||
ɵɵelement(6, 'child', ['dirA', ''], ['child', '']);
|
|
||||||
ɵɵtemplate(8, function(rf: RenderFlags, ctx: never) {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelement(0, 'child');
|
|
||||||
}
|
|
||||||
}, 1, 0, 'child', ['dirA', AttributeMarker.Template, 'ngIf']);
|
|
||||||
ɵɵelementStart(9, 'i18n');
|
|
||||||
ɵɵi18n(10, MSG_DIV);
|
|
||||||
ɵɵelementEnd();
|
|
||||||
ɵɵelementContainerStart(11);
|
|
||||||
{ ɵɵtext(12, 'content'); }
|
|
||||||
ɵɵelementContainerEnd();
|
|
||||||
}
|
|
||||||
if (rf & RenderFlags.Update) {
|
|
||||||
ɵɵtextBinding(1, ɵɵbind(ctx.text));
|
|
||||||
ɵɵelementProperty(8, 'ngIf', ɵɵbind(true));
|
|
||||||
ɵɵi18nExp(ɵɵbind(ctx.text));
|
|
||||||
ɵɵi18nApply(10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
describe('getComponent', () => {
|
describe('getComponent', () => {
|
||||||
@ -151,7 +81,7 @@ describe('discovery utils', () => {
|
|||||||
expect(() => getComponent(dirA[1] as any)).toThrowError(/Expecting instance of DOM Node/);
|
expect(() => getComponent(dirA[1] as any)).toThrowError(/Expecting instance of DOM Node/);
|
||||||
});
|
});
|
||||||
it('should return component from element', () => {
|
it('should return component from element', () => {
|
||||||
expect(getComponent<MyApp>(fixture.hostElement)).toEqual(myApp);
|
expect(getComponent<MyApp>(fixture.nativeElement)).toEqual(myApp);
|
||||||
expect(getComponent<Child>(child[0])).toEqual(childComponent[0]);
|
expect(getComponent<Child>(child[0])).toEqual(childComponent[0]);
|
||||||
expect(getComponent<Child>(child[1])).toEqual(childComponent[1]);
|
expect(getComponent<Child>(child[1])).toEqual(childComponent[1]);
|
||||||
});
|
});
|
||||||
@ -171,7 +101,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getHostElement', () => {
|
describe('getHostElement', () => {
|
||||||
it('should return element on component', () => {
|
it('should return element on component', () => {
|
||||||
expect(getHostElement(myApp)).toEqual(fixture.hostElement);
|
expect(getHostElement(myApp)).toEqual(fixture.nativeElement);
|
||||||
expect(getHostElement(childComponent[0])).toEqual(child[0]);
|
expect(getHostElement(childComponent[0])).toEqual(child[0]);
|
||||||
expect(getHostElement(childComponent[1])).toEqual(child[1]);
|
expect(getHostElement(childComponent[1])).toEqual(child[1]);
|
||||||
});
|
});
|
||||||
@ -186,7 +116,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getInjector', () => {
|
describe('getInjector', () => {
|
||||||
it('should return node-injector from element', () => {
|
it('should return node-injector from element', () => {
|
||||||
expect(getInjector(fixture.hostElement).get(String)).toEqual('Module');
|
expect(getInjector(fixture.nativeElement).get(String)).toEqual('Module');
|
||||||
expect(getInjector(child[0]).get(String)).toEqual('Child');
|
expect(getInjector(child[0]).get(String)).toEqual('Child');
|
||||||
expect(getInjector(p[0]).get(String)).toEqual('Child');
|
expect(getInjector(p[0]).get(String)).toEqual('Child');
|
||||||
});
|
});
|
||||||
@ -203,7 +133,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getDirectives', () => {
|
describe('getDirectives', () => {
|
||||||
it('should return empty array if no directives', () => {
|
it('should return empty array if no directives', () => {
|
||||||
expect(getDirectives(fixture.hostElement)).toEqual([]);
|
expect(getDirectives(fixture.nativeElement)).toEqual([]);
|
||||||
expect(getDirectives(span[0])).toEqual([]);
|
expect(getDirectives(span[0])).toEqual([]);
|
||||||
expect(getDirectives(child[0])).toEqual([]);
|
expect(getDirectives(child[0])).toEqual([]);
|
||||||
});
|
});
|
||||||
@ -215,7 +145,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getViewComponent', () => {
|
describe('getViewComponent', () => {
|
||||||
it('should return null when called on root component', () => {
|
it('should return null when called on root component', () => {
|
||||||
expect(getViewComponent(fixture.hostElement)).toEqual(null);
|
expect(getViewComponent(fixture.nativeElement)).toEqual(null);
|
||||||
expect(getViewComponent(myApp)).toEqual(null);
|
expect(getViewComponent(myApp)).toEqual(null);
|
||||||
});
|
});
|
||||||
it('should return containing component of child component', () => {
|
it('should return containing component of child component', () => {
|
||||||
@ -242,7 +172,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getLocalRefs', () => {
|
describe('getLocalRefs', () => {
|
||||||
it('should retrieve empty map', () => {
|
it('should retrieve empty map', () => {
|
||||||
expect(getLocalRefs(fixture.hostElement)).toEqual({});
|
expect(getLocalRefs(fixture.nativeElement)).toEqual({});
|
||||||
expect(getLocalRefs(myApp)).toEqual({});
|
expect(getLocalRefs(myApp)).toEqual({});
|
||||||
expect(getLocalRefs(span[0])).toEqual({});
|
expect(getLocalRefs(span[0])).toEqual({});
|
||||||
expect(getLocalRefs(child[0])).toEqual({});
|
expect(getLocalRefs(child[0])).toEqual({});
|
||||||
@ -274,7 +204,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getListeners', () => {
|
describe('getListeners', () => {
|
||||||
it('should return no listeners', () => {
|
it('should return no listeners', () => {
|
||||||
expect(getListeners(fixture.hostElement)).toEqual([]);
|
expect(getListeners(fixture.nativeElement)).toEqual([]);
|
||||||
expect(getListeners(child[0])).toEqual([]);
|
expect(getListeners(child[0])).toEqual([]);
|
||||||
});
|
});
|
||||||
it('should return the listeners', () => {
|
it('should return the listeners', () => {
|
||||||
@ -290,7 +220,7 @@ describe('discovery utils', () => {
|
|||||||
|
|
||||||
describe('getInjectionTokens', () => {
|
describe('getInjectionTokens', () => {
|
||||||
it('should retrieve tokens', () => {
|
it('should retrieve tokens', () => {
|
||||||
expect(getInjectionTokens(fixture.hostElement)).toEqual([MyApp]);
|
expect(getInjectionTokens(fixture.nativeElement)).toEqual([MyApp]);
|
||||||
expect(getInjectionTokens(child[0])).toEqual([String, Child]);
|
expect(getInjectionTokens(child[0])).toEqual([String, Child]);
|
||||||
expect(getInjectionTokens(child[1])).toEqual([String, Child, DirectiveA]);
|
expect(getInjectionTokens(child[1])).toEqual([String, Child, DirectiveA]);
|
||||||
});
|
});
|
||||||
@ -301,7 +231,7 @@ describe('discovery utils', () => {
|
|||||||
expect(span[0].textContent).toEqual('INIT');
|
expect(span[0].textContent).toEqual('INIT');
|
||||||
myApp.text = 'WORKS';
|
myApp.text = 'WORKS';
|
||||||
markDirty(myApp);
|
markDirty(myApp);
|
||||||
fixture.requestAnimationFrame.flush();
|
fixture.detectChanges();
|
||||||
expect(span[0].textContent).toEqual('WORKS');
|
expect(span[0].textContent).toEqual('WORKS');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -314,23 +244,15 @@ describe('discovery utils', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should work on templates', () => {
|
it('should work on templates', () => {
|
||||||
const templateComment = Array.from(fixture.hostElement.childNodes)
|
const templateComment = Array.from(fixture.nativeElement.childNodes)
|
||||||
.find((node: ChildNode) => node.nodeType === Node.COMMENT_NODE) !;
|
.find((node: ChildNode) => node.nodeType === Node.COMMENT_NODE) !;
|
||||||
const lContext = loadLContext(templateComment);
|
const lContext = loadLContext(templateComment);
|
||||||
expect(lContext).toBeDefined();
|
expect(lContext).toBeDefined();
|
||||||
expect(lContext.native as any).toBe(templateComment);
|
expect(lContext.native as any).toBe(templateComment);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should work on ICU expressions', () => {
|
|
||||||
const icuComment = Array.from(fixture.hostElement.querySelector('i18n') !.childNodes)
|
|
||||||
.find((node: ChildNode) => node.nodeType === Node.COMMENT_NODE) !;
|
|
||||||
const lContext = loadLContext(icuComment);
|
|
||||||
expect(lContext).toBeDefined();
|
|
||||||
expect(lContext.native as any).toBe(icuComment);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should work on ng-container', () => {
|
it('should work on ng-container', () => {
|
||||||
const ngContainerComment = Array.from(fixture.hostElement.childNodes)
|
const ngContainerComment = Array.from(fixture.nativeElement.childNodes)
|
||||||
.find(
|
.find(
|
||||||
(node: ChildNode) => node.nodeType === Node.COMMENT_NODE &&
|
(node: ChildNode) => node.nodeType === Node.COMMENT_NODE &&
|
||||||
node.textContent === `ng-container`) !;
|
node.textContent === `ng-container`) !;
|
||||||
@ -341,50 +263,26 @@ describe('discovery utils', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('discovery utils deprecated', () => {
|
onlyInIvy('Ivy-specific utilities').describe('discovery utils deprecated', () => {
|
||||||
|
|
||||||
describe('getRootComponents()', () => {
|
describe('getRootComponents()', () => {
|
||||||
it('should return a list of the root components of the application from an element', () => {
|
it('should return a list of the root components of the application from an element', () => {
|
||||||
let innerComp: InnerComp;
|
|
||||||
|
|
||||||
|
@Component({selector: 'inner-comp', template: '<div></div>'})
|
||||||
class InnerComp {
|
class InnerComp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: InnerComp,
|
|
||||||
selectors: [['inner-comp']],
|
|
||||||
factory: () => innerComp = new InnerComp(),
|
|
||||||
consts: 1,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: InnerComp) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelement(0, 'div');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Component({selector: 'comp', template: '<inner-comp></inner-comp>'})
|
||||||
class Comp {
|
class Comp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: Comp,
|
|
||||||
selectors: [['comp']],
|
|
||||||
factory: () => new Comp(),
|
|
||||||
consts: 1,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelement(0, 'inner-comp');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
directives: [InnerComp]
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Comp);
|
TestBed.configureTestingModule({declarations: [Comp, InnerComp]});
|
||||||
fixture.update();
|
const fixture = TestBed.createComponent(Comp);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
const hostElm = fixture.hostElement;
|
const hostElm = fixture.nativeElement;
|
||||||
const innerElm = hostElm.querySelector('inner-comp') !;
|
const innerElm = hostElm.querySelector('inner-comp') !;
|
||||||
const divElm = hostElm.querySelector('div') !;
|
const divElm = hostElm.querySelector('div') !;
|
||||||
const component = fixture.component;
|
const component = fixture.componentInstance;
|
||||||
|
|
||||||
expect(getRootComponents(hostElm) !).toEqual([component]);
|
expect(getRootComponents(hostElm) !).toEqual([component]);
|
||||||
expect(getRootComponents(innerElm) !).toEqual([component]);
|
expect(getRootComponents(innerElm) !).toEqual([component]);
|
||||||
@ -394,65 +292,46 @@ describe('discovery utils deprecated', () => {
|
|||||||
|
|
||||||
describe('getDirectives()', () => {
|
describe('getDirectives()', () => {
|
||||||
it('should return a list of the directives that are on the given element', () => {
|
it('should return a list of the directives that are on the given element', () => {
|
||||||
let myDir1Instance: MyDir1|null = null;
|
@Directive({selector: '[my-dir-1]'})
|
||||||
let myDir2Instance: MyDir2|null = null;
|
|
||||||
let myDir3Instance: MyDir2|null = null;
|
|
||||||
|
|
||||||
class MyDir1 {
|
class MyDir1 {
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: MyDir1,
|
|
||||||
selectors: [['', 'my-dir-1', '']],
|
|
||||||
factory: () => myDir1Instance = new MyDir1()
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Directive({selector: '[my-dir-2]'})
|
||||||
class MyDir2 {
|
class MyDir2 {
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: MyDir2,
|
|
||||||
selectors: [['', 'my-dir-2', '']],
|
|
||||||
factory: () => myDir2Instance = new MyDir2()
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Directive({selector: '[my-dir-3]'})
|
||||||
class MyDir3 {
|
class MyDir3 {
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: MyDir3,
|
|
||||||
selectors: [['', 'my-dir-3', '']],
|
|
||||||
factory: () => myDir3Instance = new MyDir2()
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'comp',
|
||||||
|
template: `
|
||||||
|
<div my-dir-1 my-dir-2></div>
|
||||||
|
<div my-dir-3></div>
|
||||||
|
`
|
||||||
|
})
|
||||||
class Comp {
|
class Comp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
@ViewChild(MyDir1) myDir1Instance !: MyDir1;
|
||||||
type: Comp,
|
@ViewChild(MyDir2) myDir2Instance !: MyDir2;
|
||||||
selectors: [['comp']],
|
@ViewChild(MyDir3) myDir3Instance !: MyDir3;
|
||||||
factory: () => new Comp(),
|
|
||||||
consts: 2,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
ɵɵelement(0, 'div', ['my-dir-1', '', 'my-dir-2', '']);
|
|
||||||
ɵɵelement(1, 'div', ['my-dir-3']);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
directives: [MyDir1, MyDir2, MyDir3]
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Comp);
|
TestBed.configureTestingModule({declarations: [Comp, MyDir1, MyDir2, MyDir3]});
|
||||||
fixture.update();
|
const fixture = TestBed.createComponent(Comp);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
const hostElm = fixture.hostElement;
|
const hostElm = fixture.nativeElement;
|
||||||
const elements = hostElm.querySelectorAll('div');
|
const elements = hostElm.querySelectorAll('div');
|
||||||
|
|
||||||
const elm1 = elements[0];
|
const elm1 = elements[0];
|
||||||
const elm1Dirs = getDirectives(elm1);
|
const elm1Dirs = getDirectives(elm1);
|
||||||
expect(elm1Dirs).toContain(myDir1Instance !);
|
expect(elm1Dirs).toContain(fixture.componentInstance.myDir1Instance !);
|
||||||
expect(elm1Dirs).toContain(myDir2Instance !);
|
expect(elm1Dirs).toContain(fixture.componentInstance.myDir2Instance !);
|
||||||
|
|
||||||
const elm2 = elements[1];
|
const elm2 = elements[1];
|
||||||
const elm2Dirs = getDirectives(elm2);
|
const elm2Dirs = getDirectives(elm2);
|
||||||
expect(elm2Dirs).toContain(myDir3Instance !);
|
expect(elm2Dirs).toContain(fixture.componentInstance.myDir3Instance !);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -460,81 +339,48 @@ describe('discovery utils deprecated', () => {
|
|||||||
|
|
||||||
it('should return an injector that can return directive instances', () => {
|
it('should return an injector that can return directive instances', () => {
|
||||||
|
|
||||||
|
@Component({template: ''})
|
||||||
class Comp {
|
class Comp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: Comp,
|
|
||||||
selectors: [['comp']],
|
|
||||||
factory: () => new Comp(),
|
|
||||||
consts: 0,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Comp);
|
TestBed.configureTestingModule({declarations: [Comp]});
|
||||||
fixture.update();
|
const fixture = TestBed.createComponent(Comp);
|
||||||
|
const nodeInjector = getInjector(fixture.nativeElement);
|
||||||
const nodeInjector = getInjector(fixture.hostElement);
|
|
||||||
expect(nodeInjector.get(Comp)).toEqual(jasmine.any(Comp));
|
expect(nodeInjector.get(Comp)).toEqual(jasmine.any(Comp));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return an injector that falls-back to a module injector', () => {
|
it('should return an injector that falls-back to a module injector', () => {
|
||||||
|
@Component({template: ''})
|
||||||
class Comp {
|
class Comp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: Comp,
|
|
||||||
selectors: [['comp']],
|
|
||||||
factory: () => new Comp(),
|
|
||||||
consts: 0,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class TestToken {}
|
class TestToken {}
|
||||||
|
const token = new InjectionToken<TestToken>('test token');
|
||||||
|
|
||||||
const staticInjector = new StaticInjector([{provide: TestToken, useValue: new TestToken()}]);
|
TestBed.configureTestingModule(
|
||||||
const fixture = new ComponentFixture(Comp, {injector: staticInjector});
|
{declarations: [Comp], providers: [{provide: token, useValue: new TestToken()}]});
|
||||||
fixture.update();
|
const fixture = TestBed.createComponent(Comp);
|
||||||
|
const nodeInjector = getInjector(fixture.nativeElement);
|
||||||
const nodeInjector = getInjector(fixture.hostElement);
|
expect(nodeInjector.get(token)).toEqual(jasmine.any(TestToken));
|
||||||
expect(nodeInjector.get(TestToken)).toEqual(jasmine.any(TestToken));
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('getLocalRefs', () => {
|
describe('getLocalRefs', () => {
|
||||||
it('should return a map of local refs for an element', () => {
|
it('should return a map of local refs for an element', () => {
|
||||||
|
|
||||||
|
@Directive({selector: '[myDir]', exportAs: 'myDir'})
|
||||||
class MyDir {
|
class MyDir {
|
||||||
static ngDirectiveDef = ɵɵdefineDirective({
|
|
||||||
type: MyDir,
|
|
||||||
selectors: [['', 'myDir', '']],
|
|
||||||
exportAs: ['myDir'],
|
|
||||||
factory: () => new MyDir()
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Component({template: '<div myDir #elRef #dirRef="myDir"></div>'})
|
||||||
class Comp {
|
class Comp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
|
||||||
type: Comp,
|
|
||||||
selectors: [['comp']],
|
|
||||||
factory: () => new Comp(),
|
|
||||||
consts: 3,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
// <div myDir #elRef #dirRef="myDir">
|
|
||||||
ɵɵelement(0, 'div', ['myDir'], ['elRef', '', 'dirRef', 'myDir']);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
directives: [MyDir]
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Comp);
|
TestBed.configureTestingModule({declarations: [Comp, MyDir]});
|
||||||
fixture.update();
|
const fixture = TestBed.createComponent(Comp);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
const divEl = fixture.hostElement.querySelector('div') !;
|
const divEl = fixture.nativeElement.querySelector('div') !;
|
||||||
const localRefs = getLocalRefs(divEl);
|
const localRefs = getLocalRefs(divEl);
|
||||||
|
|
||||||
expect(localRefs.elRef.tagName.toLowerCase()).toBe('div');
|
expect(localRefs.elRef.tagName.toLowerCase()).toBe('div');
|
||||||
@ -542,31 +388,16 @@ describe('discovery utils deprecated', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should return a map of local refs for an element with styling context', () => {
|
it('should return a map of local refs for an element with styling context', () => {
|
||||||
|
@Component({template: '<div #elRef class="fooClass" [style.color]="color"></div>'})
|
||||||
class Comp {
|
class Comp {
|
||||||
static ngComponentDef = ɵɵdefineComponent({
|
color = 'red';
|
||||||
type: Comp,
|
|
||||||
selectors: [['comp']],
|
|
||||||
factory: () => new Comp(),
|
|
||||||
consts: 2,
|
|
||||||
vars: 0,
|
|
||||||
template: (rf: RenderFlags, ctx: Comp) => {
|
|
||||||
if (rf & RenderFlags.Create) {
|
|
||||||
// <div #elRef class="fooClass">
|
|
||||||
ɵɵelementStart(0, 'div', null, ['elRef', '']);
|
|
||||||
ɵɵelementEnd();
|
|
||||||
}
|
|
||||||
if (rf & RenderFlags.Update) {
|
|
||||||
ɵɵselect(0);
|
|
||||||
ɵɵstylingApply();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const fixture = new ComponentFixture(Comp);
|
TestBed.configureTestingModule({declarations: [Comp]});
|
||||||
fixture.update();
|
const fixture = TestBed.createComponent(Comp);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
const divEl = fixture.hostElement.querySelector('div') !;
|
const divEl = fixture.nativeElement.querySelector('div') !;
|
||||||
const localRefs = getLocalRefs(divEl);
|
const localRefs = getLocalRefs(divEl);
|
||||||
|
|
||||||
expect(localRefs.elRef.tagName.toLowerCase()).toBe('div');
|
expect(localRefs.elRef.tagName.toLowerCase()).toBe('div');
|
Loading…
x
Reference in New Issue
Block a user