test(ivy): port TemplateRef tests over to acceptance tests (#30443)
- Moves template ref tests from render3 unit tests to acceptance tests. - Marks tests testing ivy specific changes as `onlyInIvy`. - Deletes old render3 unit tests that are no longer necessary PR Close #30443
This commit is contained in:
Ben Lesh
Jason Aden
parent
53f356427f
commit
35c1750fcc
|
|
@ -9,6 +9,7 @@
|
|||
import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {expect} from '@angular/platform-browser/testing/src/matchers';
|
||||
import {onlyInIvy} from '@angular/private/testing';
|
||||
|
||||
describe('TemplateRef', () => {
|
||||
describe('rootNodes', () => {
|
||||
|
|
@ -52,6 +53,117 @@ describe('TemplateRef', () => {
|
|||
|
||||
expect(rootNodeTextContent).toEqual(['Header', 'Item one', 'Item two']);
|
||||
});
|
||||
});
|
||||
|
||||
it('should return root render nodes for an embedded view instance', () => {
|
||||
@Component({
|
||||
template: `
|
||||
<ng-template #templateRef>
|
||||
<div></div>
|
||||
some text
|
||||
<span></span>
|
||||
</ng-template>
|
||||
`
|
||||
})
|
||||
class App {
|
||||
@ViewChild('templateRef')
|
||||
templateRef !: TemplateRef<any>;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [App],
|
||||
});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({});
|
||||
expect(embeddedView.rootNodes.length).toBe(3);
|
||||
});
|
||||
|
||||
/**
|
||||
* This is different as compared to the view engine implementation which returns a comment node
|
||||
* in this case:
|
||||
* https://stackblitz.com/edit/angular-uiqry6?file=src/app/app.component.ts
|
||||
*
|
||||
* Returning a comment node for a template ref with no nodes is wrong is fixed in Ivy.
|
||||
*/
|
||||
onlyInIvy('Fixed: Ivy no longer adds a comment node in this case.')
|
||||
.it('should return an empty array for embedded view with no nodes', () => {
|
||||
@Component({
|
||||
template: `
|
||||
<ng-template #templateRef></ng-template>
|
||||
`
|
||||
})
|
||||
class App {
|
||||
@ViewChild('templateRef')
|
||||
templateRef !: TemplateRef<any>;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [App],
|
||||
});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({});
|
||||
expect(embeddedView.rootNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should not descend into containers when retrieving root nodes', () => {
|
||||
/**
|
||||
* NOTE: In VE, if `SUFFIX` text node below is _not_ present, VE will add an
|
||||
* additional `<!---->` comment, thus being slightly different than Ivy.
|
||||
* (resulting in 1 root node in Ivy and 2 in VE).
|
||||
*/
|
||||
@Component({
|
||||
template: `
|
||||
<ng-template #templateRef><ng-template [ngIf]="true">text</ng-template>SUFFIX</ng-template>
|
||||
`
|
||||
})
|
||||
class App {
|
||||
@ViewChild('templateRef')
|
||||
templateRef !: TemplateRef<any>;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [App],
|
||||
});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({});
|
||||
expect(embeddedView.rootNodes.length).toBe(2);
|
||||
expect(embeddedView.rootNodes[0].nodeType).toBe(Node.COMMENT_NODE);
|
||||
expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE);
|
||||
});
|
||||
|
||||
/**
|
||||
* Contrary to containers (<ng-template>) we _do_ descend into element containers
|
||||
* (<ng-container>)
|
||||
*/
|
||||
it('should descend into element containers when retrieving root nodes', () => {
|
||||
@Component({
|
||||
template: `
|
||||
<ng-template #templateRef>
|
||||
<ng-container>text</ng-container>
|
||||
</ng-template>
|
||||
`
|
||||
})
|
||||
class App {
|
||||
@ViewChild('templateRef')
|
||||
templateRef !: TemplateRef<any>;
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [App],
|
||||
});
|
||||
const fixture = TestBed.createComponent(App);
|
||||
fixture.detectChanges();
|
||||
|
||||
const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({});
|
||||
|
||||
expect(embeddedView.rootNodes.length).toBe(2);
|
||||
expect(embeddedView.rootNodes[0].nodeType).toBe(Node.COMMENT_NODE);
|
||||
expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,178 +0,0 @@
|
|||
/**
|
||||
* @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 {TemplateRef} from '@angular/core';
|
||||
|
||||
import {AttributeMarker, RenderFlags, ΔdefineDirective} from '../../src/render3/index';
|
||||
import {Δbind, ΔdirectiveInject, Δelement, ΔelementContainerEnd, ΔelementContainerStart, ΔelementProperty, Δtemplate, Δtext} from '../../src/render3/instructions/all';
|
||||
|
||||
import {NgIf} from './common_with_def';
|
||||
import {ComponentFixture, createComponent, getDirectiveOnNode} from './render_util';
|
||||
|
||||
describe('TemplateRef', () => {
|
||||
|
||||
describe('rootNodes', () => {
|
||||
|
||||
class DirectiveWithTplRef {
|
||||
static ngDirectiveDef = ΔdefineDirective({
|
||||
type: DirectiveWithTplRef,
|
||||
selectors: [['', 'tplRef', '']],
|
||||
factory: () => new DirectiveWithTplRef(ΔdirectiveInject(TemplateRef as any))
|
||||
});
|
||||
|
||||
// injecting a ViewContainerRef to create a dynamic container in which embedded views will be
|
||||
// created
|
||||
constructor(public tplRef: TemplateRef<{}>) {}
|
||||
}
|
||||
|
||||
it('should return root render nodes for an embedded view instance', () => {
|
||||
let directiveWithTplRef: DirectiveWithTplRef;
|
||||
|
||||
function embeddedTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δelement(0, 'div');
|
||||
Δtext(1, 'some text');
|
||||
Δelement(2, 'span');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
<ng-template tplRef>
|
||||
<div></div>
|
||||
some text
|
||||
<span></span>
|
||||
</ng-template>
|
||||
*/
|
||||
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δtemplate(0, embeddedTemplate, 3, 0, 'ng-template', ['tplRef', '']);
|
||||
directiveWithTplRef = getDirectiveOnNode(0, 0);
|
||||
}
|
||||
}, 1, 0, [DirectiveWithTplRef]);
|
||||
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(directiveWithTplRef !).toBeDefined();
|
||||
|
||||
const viewRef = directiveWithTplRef !.tplRef.createEmbeddedView({});
|
||||
expect(viewRef.rootNodes.length).toBe(3);
|
||||
});
|
||||
|
||||
/**
|
||||
* This is different as compared to the view engine implementation which returns a comment node
|
||||
* in this case:
|
||||
* https://stackblitz.com/edit/angular-uiqry6?file=src/app/app.component.ts
|
||||
*
|
||||
* Returning a comment node for a template ref with no nodes is wrong and should be fixed in
|
||||
* ivy.
|
||||
*/
|
||||
it('should return an empty array for embedded view with no nodes', () => {
|
||||
let directiveWithTplRef: DirectiveWithTplRef;
|
||||
|
||||
/*
|
||||
<ng-template tplRef></ng-template>
|
||||
*/
|
||||
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δtemplate(0, () => {}, 0, 0, 'ng-template', ['tplRef', '']);
|
||||
directiveWithTplRef = getDirectiveOnNode(0, 0);
|
||||
}
|
||||
}, 1, 0, [DirectiveWithTplRef]);
|
||||
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(directiveWithTplRef !).toBeDefined();
|
||||
|
||||
const viewRef = directiveWithTplRef !.tplRef.createEmbeddedView({});
|
||||
expect(viewRef.rootNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
/**
|
||||
* This is somehow surprising but the current view engine don't descend into containers when
|
||||
* getting root nodes of an embedded view:
|
||||
* https://stackblitz.com/edit/angular-z8zev7?file=src/app/app.component.ts
|
||||
*/
|
||||
it('should not descend into containers when retrieving root nodes', () => {
|
||||
let directiveWithTplRef: DirectiveWithTplRef;
|
||||
|
||||
function ngIfTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δtext(0, 'text');
|
||||
}
|
||||
}
|
||||
|
||||
function embeddedTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δtemplate(0, ngIfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ΔelementProperty(0, 'ngIf', Δbind(ctx.showing));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
<ng-template tplRef><ng-template [ngIf]="true">text</ng-template></ng-template>
|
||||
*/
|
||||
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δtemplate(0, embeddedTemplate, 1, 1, 'ng-template', ['tplRef', '']);
|
||||
directiveWithTplRef = getDirectiveOnNode(0, 0);
|
||||
}
|
||||
}, 1, 0, [DirectiveWithTplRef, NgIf]);
|
||||
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(directiveWithTplRef !).toBeDefined();
|
||||
|
||||
const viewRef = directiveWithTplRef !.tplRef.createEmbeddedView({});
|
||||
|
||||
// assert that we've got a comment node (only!) corresponding to <ng-template [ngIf]="true">
|
||||
expect(viewRef.rootNodes.length).toBe(1);
|
||||
expect(viewRef.rootNodes[0].nodeType).toBe(8);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Contrary to containers (<ng-template>) we _do_ descend into element containers
|
||||
* (<ng-container):
|
||||
* https://stackblitz.com/edit/angular-yovmmp?file=src/app/app.component.ts
|
||||
*/
|
||||
it('should descend into element containers when retrieving root nodes', () => {
|
||||
let directiveWithTplRef: DirectiveWithTplRef;
|
||||
|
||||
function embeddedTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ΔelementContainerStart(0);
|
||||
{ Δtext(1, 'text'); }
|
||||
ΔelementContainerEnd();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
<ng-template tplRef><ng-container>text</ng-container></ng-template>
|
||||
*/
|
||||
const AppComponent = createComponent('app-cmp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
Δtemplate(0, embeddedTemplate, 2, 0, 'ng-template', ['tplRef', '']);
|
||||
directiveWithTplRef = getDirectiveOnNode(0, 0);
|
||||
}
|
||||
}, 1, 0, [DirectiveWithTplRef]);
|
||||
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(directiveWithTplRef !).toBeDefined();
|
||||
|
||||
const viewRef = directiveWithTplRef !.tplRef.createEmbeddedView({});
|
||||
|
||||
expect(viewRef.rootNodes.length).toBe(2);
|
||||
expect(viewRef.rootNodes[0].nodeType)
|
||||
.toBe(8); // a comment node (only!) corresponding to <ng-container>
|
||||
expect(viewRef.rootNodes[1].nodeType).toBe(3); // a text node
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue