test(ivy): move content projection tests to acceptance (#30357)
Moves all manual `render3` content projection tests that use the `ɵɵelementProperty` to acceptance tests. Additionally a few other content projection tests were moved over to acceptance. Eventually we'll be able to move all remaining content projection tests to acceptance. PR Close #30357
This commit is contained in:
Paul Gschwendtner
Alex Rickabaugh
parent
24e172d779
commit
1f2b39ad7d
|
|
@ -6,11 +6,393 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ChangeDetectorRef, Component, Directive} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {ChangeDetectorRef, Component, Directive, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
|
||||
import {Input} from '@angular/core/src/metadata';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {By} from '@angular/platform-browser';
|
||||
import {expect} from '@angular/platform-browser/testing/src/matchers';
|
||||
|
||||
describe('projection', () => {
|
||||
|
||||
function getElementHtml(element: HTMLElement) {
|
||||
return element.innerHTML.replace(/<!--(\W|\w)*?-->/g, '')
|
||||
.replace(/\sng-reflect-\S*="[^"]*"/g, '');
|
||||
}
|
||||
|
||||
it('should project content', () => {
|
||||
@Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({selector: 'parent', template: '<child>content</child>'})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML).toBe(`<child><div>content</div></child>`);
|
||||
});
|
||||
|
||||
it('should project content when <ng-content> is at a template root', () => {
|
||||
@Component({
|
||||
selector: 'child',
|
||||
template: '<ng-content></ng-content>',
|
||||
})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'parent',
|
||||
template: '<child>content</child>',
|
||||
})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML).toBe(`<child>content</child>`);
|
||||
});
|
||||
|
||||
it('should project content with siblings', () => {
|
||||
@Component({selector: 'child', template: '<ng-content></ng-content>'})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({selector: 'parent', template: `<child>before<div>content</div>after</child>`})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML).toBe(`<child>before<div>content</div>after</child>`);
|
||||
});
|
||||
|
||||
it('should be able to re-project content', () => {
|
||||
@Component({selector: 'grand-child', template: `<div><ng-content></ng-content></div>`})
|
||||
class GrandChild {
|
||||
}
|
||||
|
||||
@Component(
|
||||
{selector: 'child', template: `<grand-child><ng-content></ng-content></grand-child>`})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'parent',
|
||||
template: `<child><b>Hello</b>World!</child>`,
|
||||
})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child, GrandChild]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML)
|
||||
.toBe('<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>');
|
||||
});
|
||||
|
||||
it('should project components', () => {
|
||||
@Component({
|
||||
selector: 'child',
|
||||
template: `<div><ng-content></ng-content></div>`,
|
||||
})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'projected-comp',
|
||||
template: 'content',
|
||||
})
|
||||
class ProjectedComp {
|
||||
}
|
||||
|
||||
@Component({selector: 'parent', template: `<child><projected-comp></projected-comp></child>`})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML)
|
||||
.toBe('<child><div><projected-comp>content</projected-comp></div></child>');
|
||||
});
|
||||
|
||||
it('should project components that have their own projection', () => {
|
||||
@Component({selector: 'child', template: `<div><ng-content></ng-content></div>`})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({selector: 'projected-comp', template: `<p><ng-content></ng-content></p>`})
|
||||
class ProjectedComp {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'parent',
|
||||
template: `
|
||||
<child>
|
||||
<projected-comp><div>Some content</div>Other content</projected-comp>
|
||||
</child>`,
|
||||
})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child, ProjectedComp]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.innerHTML)
|
||||
.toBe(
|
||||
`<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>`);
|
||||
});
|
||||
|
||||
it('should project into dynamic views (with createEmbeddedView)', () => {
|
||||
@Component({
|
||||
selector: 'child',
|
||||
template: `Before-<ng-template [ngIf]="showing"><ng-content></ng-content></ng-template>-After`
|
||||
})
|
||||
class Child {
|
||||
showing = false;
|
||||
}
|
||||
|
||||
@Component({selector: 'parent', template: `<child><div>A</div>Some text</child>`})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
|
||||
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
const childDebugEl = fixture.debugElement.query(By.directive(Child));
|
||||
const childInstance = childDebugEl.injector.get(Child);
|
||||
const childElement = childDebugEl.nativeElement as HTMLElement;
|
||||
|
||||
childInstance.showing = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(childElement)).toBe(`Before-<div>A</div>Some text-After`);
|
||||
|
||||
childInstance.showing = false;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(childElement)).toBe(`Before--After`);
|
||||
|
||||
childInstance.showing = true;
|
||||
fixture.detectChanges();
|
||||
expect(getElementHtml(childElement)).toBe(`Before-<div>A</div>Some text-After`);
|
||||
});
|
||||
|
||||
it('should project into dynamic views with specific selectors', () => {
|
||||
@Component({
|
||||
selector: 'child',
|
||||
template: `
|
||||
<ng-content></ng-content>
|
||||
Before-
|
||||
<ng-template [ngIf]="showing">
|
||||
<ng-content select="div"></ng-content>
|
||||
</ng-template>
|
||||
-After`
|
||||
})
|
||||
class Child {
|
||||
showing = false;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'parent',
|
||||
template: `
|
||||
<child>
|
||||
<div>A</div>
|
||||
<span>B</span>
|
||||
</child>
|
||||
`
|
||||
})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
|
||||
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
const childDebugEl = fixture.debugElement.query(By.directive(Child));
|
||||
const childInstance = childDebugEl.injector.get(Child);
|
||||
|
||||
childInstance.showing = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toBe('<child><span>B</span> Before- <div>A</div> -After</child>');
|
||||
|
||||
childInstance.showing = false;
|
||||
fixture.detectChanges();
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toBe('<child><span>B</span> Before- -After</child>');
|
||||
|
||||
childInstance.showing = true;
|
||||
fixture.detectChanges();
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toBe('<child><span>B</span> Before- <div>A</div> -After</child>');
|
||||
});
|
||||
|
||||
it('should project if <ng-content> is in a template that has different declaration/insertion points',
|
||||
() => {
|
||||
@Component(
|
||||
{selector: 'comp', template: `<ng-template><ng-content></ng-content></ng-template>`})
|
||||
class Comp {
|
||||
@ViewChild(TemplateRef) template !: TemplateRef<any>;
|
||||
}
|
||||
|
||||
@Directive({selector: '[trigger]'})
|
||||
class Trigger {
|
||||
@Input() trigger !: Comp;
|
||||
|
||||
constructor(public vcr: ViewContainerRef) {}
|
||||
|
||||
open() { this.vcr.createEmbeddedView(this.trigger.template); }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'parent',
|
||||
template: `
|
||||
<button [trigger]="comp"></button>
|
||||
<comp #comp>Some content</comp>
|
||||
`
|
||||
})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Trigger, Comp]});
|
||||
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
const trigger = fixture.debugElement.query(By.directive(Trigger)).injector.get(Trigger);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(fixture.nativeElement)).toBe(`<button></button><comp></comp>`);
|
||||
|
||||
trigger.open();
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toBe(`<button></button>Some content<comp></comp>`);
|
||||
});
|
||||
|
||||
// https://stackblitz.com/edit/angular-ceqmnw?file=src%2Fapp%2Fapp.component.ts
|
||||
it('should project nodes into the last ng-content unrolled by ngFor', () => {
|
||||
@Component({
|
||||
selector: 'child',
|
||||
template:
|
||||
`<div *ngFor="let item of [1, 2]; let i = index">({{i}}):<ng-content></ng-content></div>`
|
||||
})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({selector: 'parent', template: `<child>content</child>`})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Parent, Child], imports: [CommonModule]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toBe('<child><div>(0):</div><div>(1):content</div></child>');
|
||||
});
|
||||
|
||||
it('should handle projected containers inside other containers', () => {
|
||||
@Component({selector: 'nested-comp', template: `<div>Child content</div>`})
|
||||
class NestedComp {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'root-comp',
|
||||
template: `<ng-content></ng-content>`,
|
||||
})
|
||||
class RootComp {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: `
|
||||
<root-comp>
|
||||
<ng-container *ngFor="let item of items; last as last">
|
||||
<nested-comp *ngIf="!last"></nested-comp>
|
||||
</ng-container>
|
||||
</root-comp>
|
||||
`
|
||||
})
|
||||
class MyApp {
|
||||
items = [1, 2];
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule(
|
||||
{declarations: [MyApp, RootComp, NestedComp], imports: [CommonModule]});
|
||||
const fixture = TestBed.createComponent(MyApp);
|
||||
fixture.detectChanges();
|
||||
|
||||
// expecting # of divs to be (items.length - 1), since last element is filtered out by *ngIf,
|
||||
// this applies to all other assertions below
|
||||
expect(fixture.nativeElement.querySelectorAll('div').length).toBe(1);
|
||||
|
||||
fixture.componentInstance.items = [3, 4, 5];
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.querySelectorAll('div').length).toBe(2);
|
||||
|
||||
fixture.componentInstance.items = [6, 7, 8, 9];
|
||||
fixture.detectChanges();
|
||||
expect(fixture.nativeElement.querySelectorAll('div').length).toBe(3);
|
||||
});
|
||||
|
||||
describe('with selectors', () => {
|
||||
// https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
|
||||
it('should project nodes where attribute selector matches a binding', () => {
|
||||
@Component({
|
||||
selector: 'child',
|
||||
template: `<ng-content select="[title]"></ng-content>`,
|
||||
})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'parent',
|
||||
template: `<child><span [title]="'Some title'">Has title</span></child>`
|
||||
})
|
||||
class Parent {
|
||||
}
|
||||
|
||||
TestBed.configureTestingModule({declarations: [Child, Parent]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toEqual('<child><span title="Some title">Has title</span></child>');
|
||||
|
||||
});
|
||||
|
||||
it('should match selectors against projected containers', () => {
|
||||
@Component(
|
||||
{selector: 'child', template: `<span><ng-content select="div"></ng-content></span>`})
|
||||
class Child {
|
||||
}
|
||||
|
||||
@Component({template: `<child><div *ngIf="value">content</div></child>`})
|
||||
class Parent {
|
||||
value = false;
|
||||
}
|
||||
TestBed.configureTestingModule({declarations: [Child, Parent]});
|
||||
const fixture = TestBed.createComponent(Parent);
|
||||
|
||||
fixture.componentInstance.value = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getElementHtml(fixture.nativeElement))
|
||||
.toEqual('<child><span><div>content</div></span></child>');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle projected containers inside other containers', () => {
|
||||
@Component({
|
||||
selector: 'child-comp', //
|
||||
|
|
|
|||
|
|
@ -6,231 +6,14 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {QueryList, TemplateRef, ViewContainerRef} from '@angular/core';
|
||||
import {SelectorFlags} from '@angular/core/src/render3/interfaces/projection';
|
||||
|
||||
import {AttributeMarker, detectChanges, ɵɵdefineComponent, ɵɵdefineDirective, ɵɵdirectiveInject, ɵɵloadViewQuery, ɵɵqueryRefresh, ɵɵreference, ɵɵtemplateRefExtractor, ɵɵviewQuery} from '../../src/render3/index';
|
||||
import {ɵɵbind, ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementProperty, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵinterpolation1, ɵɵprojection, ɵɵprojectionDef, ɵɵtemplate, ɵɵtext, ɵɵtextBinding} from '../../src/render3/instructions/all';
|
||||
import {AttributeMarker, detectChanges} from '../../src/render3/index';
|
||||
import {ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelement, ɵɵelementContainerEnd, ɵɵelementContainerStart, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵprojection, ɵɵprojectionDef, ɵɵtext} from '../../src/render3/instructions/all';
|
||||
import {RenderFlags} from '../../src/render3/interfaces/definition';
|
||||
|
||||
import {NgForOf, NgIf} from './common_with_def';
|
||||
import {ComponentFixture, createComponent, getDirectiveOnNode, renderComponent, toHtml} from './render_util';
|
||||
|
||||
describe('content projection', () => {
|
||||
it('should project content', () => {
|
||||
|
||||
/**
|
||||
* <div><ng-content></ng-content></div>
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵelementStart(0, 'div');
|
||||
{ ɵɵprojection(1); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2);
|
||||
|
||||
/**
|
||||
* <child>content</child>
|
||||
*/
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{ ɵɵtext(1, 'content'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2, 0, [Child]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
|
||||
});
|
||||
|
||||
it('should project content when <ng-content> is at a template root', () => {
|
||||
/** <ng-content></ng-content> */
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵprojection(0);
|
||||
}
|
||||
}, 1);
|
||||
|
||||
/** <child>content</child> */
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{ ɵɵtext(1, 'content'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2, 0, [Child]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent)).toEqual('<child>content</child>');
|
||||
});
|
||||
|
||||
it('should project content with siblings', () => {
|
||||
/** <ng-content></ng-content> */
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵprojection(0);
|
||||
}
|
||||
}, 1);
|
||||
|
||||
/**
|
||||
* <child>
|
||||
* before
|
||||
* <div>content</div>
|
||||
* after
|
||||
* </child>
|
||||
*/
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵtext(1, 'before');
|
||||
ɵɵelementStart(2, 'div');
|
||||
{ ɵɵtext(3, 'content'); }
|
||||
ɵɵelementEnd();
|
||||
ɵɵtext(4, 'after');
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 5, 0, [Child]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent)).toEqual('<child>before<div>content</div>after</child>');
|
||||
});
|
||||
|
||||
it('should re-project content when root.', () => {
|
||||
/** <div><ng-content></ng-content></div> */
|
||||
const GrandChild = createComponent('grand-child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵelementStart(0, 'div');
|
||||
{ ɵɵprojection(1); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2);
|
||||
|
||||
/** <grand-child><ng-content></ng-content></grand-child> */
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵelementStart(0, 'grand-child');
|
||||
{ ɵɵprojection(1); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2, 0, [GrandChild]);
|
||||
|
||||
/** <child><b>Hello</b>World!</child> */
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵelementStart(1, 'b');
|
||||
ɵɵtext(2, 'Hello');
|
||||
ɵɵelementEnd();
|
||||
ɵɵtext(3, 'World!');
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 4, 0, [Child]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent))
|
||||
.toEqual('<child><grand-child><div><b>Hello</b>World!</div></grand-child></child>');
|
||||
});
|
||||
|
||||
it('should project components', () => {
|
||||
|
||||
/** <div><ng-content></ng-content></div> */
|
||||
const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵelementStart(0, 'div');
|
||||
{ ɵɵprojection(1); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2);
|
||||
|
||||
const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵtext(0, 'content');
|
||||
}
|
||||
}, 1);
|
||||
|
||||
/**
|
||||
* <child>
|
||||
* <projected-comp></projected-comp>
|
||||
* </child>
|
||||
*/
|
||||
const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{ ɵɵelement(1, 'projected-comp'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2, 0, [Child, ProjectedComp]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent))
|
||||
.toEqual('<child><div><projected-comp>content</projected-comp></div></child>');
|
||||
});
|
||||
|
||||
it('should project components that have their own projection', () => {
|
||||
/** <div><ng-content></ng-content></div> */
|
||||
const Child = createComponent('child', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵelementStart(0, 'div');
|
||||
{ ɵɵprojection(1); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2);
|
||||
|
||||
/** <p><ng-content></ng-content></p> */
|
||||
const ProjectedComp = createComponent('projected-comp', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵelementStart(0, 'p');
|
||||
ɵɵprojection(1);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2);
|
||||
|
||||
/**
|
||||
* <child>
|
||||
* <projected-comp>
|
||||
* <div> Some content </div>
|
||||
* Other content
|
||||
* </projected-comp>
|
||||
* </child>
|
||||
*/
|
||||
const Parent = createComponent('parent', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵelementStart(1, 'projected-comp');
|
||||
{
|
||||
ɵɵelementStart(2, 'div');
|
||||
ɵɵtext(3, 'Some content');
|
||||
ɵɵelementEnd();
|
||||
ɵɵtext(4, 'Other content');
|
||||
}
|
||||
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 5, 0, [Child, ProjectedComp]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent))
|
||||
.toEqual(
|
||||
'<child><div><projected-comp><p><div>Some content</div>Other content</p></projected-comp></div></child>');
|
||||
});
|
||||
|
||||
it('should project containers', () => {
|
||||
/** <div><ng-content></ng-content></div> */
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
|
|
@ -802,280 +585,6 @@ describe('content projection', () => {
|
|||
expect(toHtml(parent)).toEqual('<child><div></div></child>');
|
||||
});
|
||||
|
||||
it('should project into dynamic views (with createEmbeddedView)', () => {
|
||||
/**
|
||||
* Before-
|
||||
* <ng-template [ngIf]="showing">
|
||||
* <ng-content></ng-content>
|
||||
* </ng-template>
|
||||
* -After
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵtext(0, 'Before-');
|
||||
ɵɵtemplate(1, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
|
||||
ɵɵtext(2, '-After');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.showing));
|
||||
}
|
||||
|
||||
}, 3, 1, [NgIf]);
|
||||
|
||||
function IfTemplate(rf1: RenderFlags, ctx: any) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
ɵɵprojection(0);
|
||||
}
|
||||
}
|
||||
|
||||
let child: {showing: boolean};
|
||||
/**
|
||||
* <child>
|
||||
* <div>A</div>
|
||||
* Some text
|
||||
* </child>
|
||||
*/
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵelementStart(1, 'div');
|
||||
{ ɵɵtext(2, 'A'); }
|
||||
ɵɵelementEnd();
|
||||
ɵɵtext(3, 'Some text');
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
|
||||
// testing
|
||||
child = getDirectiveOnNode(0);
|
||||
}
|
||||
}, 4, 0, [Child]);
|
||||
|
||||
const fixture = new ComponentFixture(App);
|
||||
child !.showing = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
|
||||
|
||||
child !.showing = false;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child>Before--After</child>');
|
||||
|
||||
child !.showing = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
|
||||
});
|
||||
|
||||
it('should project into dynamic views (with insertion)', () => {
|
||||
/**
|
||||
* Before-
|
||||
* <ng-template [ngIf]="showing">
|
||||
* <ng-content></ng-content>
|
||||
* </ng-template>
|
||||
* -After
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵtext(0, 'Before-');
|
||||
ɵɵtemplate(1, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
|
||||
ɵɵtext(2, '-After');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.showing));
|
||||
}
|
||||
|
||||
}, 3, 1, [NgIf]);
|
||||
|
||||
function IfTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojection(0);
|
||||
}
|
||||
}
|
||||
|
||||
let child: {showing: boolean};
|
||||
/**
|
||||
* <child>
|
||||
* <div>A</div>
|
||||
* Some text
|
||||
* </child>
|
||||
*/
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵelementStart(1, 'div');
|
||||
{ ɵɵtext(2, 'A'); }
|
||||
ɵɵelementEnd();
|
||||
ɵɵtext(3, 'Some text');
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
|
||||
// testing
|
||||
child = getDirectiveOnNode(0);
|
||||
}
|
||||
}, 4, 0, [Child]);
|
||||
|
||||
const fixture = new ComponentFixture(App);
|
||||
child !.showing = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
|
||||
|
||||
child !.showing = false;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child>Before--After</child>');
|
||||
|
||||
child !.showing = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child>Before-<div>A</div>Some text-After</child>');
|
||||
});
|
||||
|
||||
it('should project into dynamic views with specific selectors', () => {
|
||||
/**
|
||||
* <ng-content></ng-content>
|
||||
* Before-
|
||||
* <ng-template [ngIf]="showing">
|
||||
* <ng-content select="div"></ng-content>
|
||||
* </ng-template>
|
||||
* -After
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef([[['div']]]);
|
||||
ɵɵprojection(0);
|
||||
ɵɵtext(1, 'Before-');
|
||||
ɵɵtemplate(2, IfTemplate, 1, 0, 'ng-template', [AttributeMarker.Bindings, 'ngIf']);
|
||||
ɵɵtext(3, '-After');
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(2, 'ngIf', ɵɵbind(ctx.showing));
|
||||
}
|
||||
|
||||
}, 4, 1, [NgIf]);
|
||||
|
||||
function IfTemplate(rf1: RenderFlags) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
ɵɵprojection(0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
let child: {showing: boolean};
|
||||
/**
|
||||
* <child>
|
||||
* <div>A</div>
|
||||
* <span>B</span>
|
||||
* </child>
|
||||
*/
|
||||
const App = createComponent('app', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵelementStart(1, 'div');
|
||||
{ ɵɵtext(2, 'A'); }
|
||||
ɵɵelementEnd();
|
||||
ɵɵelementStart(3, 'span');
|
||||
{ ɵɵtext(4, 'B'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
|
||||
// testing
|
||||
child = getDirectiveOnNode(0);
|
||||
}
|
||||
}, 5, 0, [Child]);
|
||||
|
||||
const fixture = new ComponentFixture(App);
|
||||
child !.showing = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child><span>B</span>Before-<div>A</div>-After</child>');
|
||||
|
||||
child !.showing = false;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child><span>B</span>Before--After</child>');
|
||||
|
||||
child !.showing = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child><span>B</span>Before-<div>A</div>-After</child>');
|
||||
});
|
||||
|
||||
it('should project if <ng-content> is in a template that has different declaration/insertion points',
|
||||
() => {
|
||||
let triggerDir !: Trigger;
|
||||
|
||||
function NgTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojection(0);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* <ng-template>
|
||||
* <ng-content></ng-content>
|
||||
* </ng-template>
|
||||
*/
|
||||
const Comp = createComponent(
|
||||
'comp',
|
||||
(rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵtemplate(1, NgTemplate, 1, 0, 'ng-template', null, null, ɵɵtemplateRefExtractor);
|
||||
}
|
||||
},
|
||||
2, 0, [], [],
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
/** @ViewChild(TemplateRef) template: TemplateRef<any> */
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵviewQuery(TemplateRef as any, true, null);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
let tmp: any;
|
||||
ɵɵqueryRefresh(tmp = ɵɵloadViewQuery<QueryList<any>>()) &&
|
||||
(ctx.template = tmp.first);
|
||||
}
|
||||
});
|
||||
|
||||
class Trigger {
|
||||
// @Input()
|
||||
trigger: any;
|
||||
|
||||
constructor(public vcr: ViewContainerRef) {}
|
||||
|
||||
open() { this.vcr.createEmbeddedView(this.trigger.template); }
|
||||
|
||||
static ngComponentDef = ɵɵdefineDirective({
|
||||
type: Trigger,
|
||||
selectors: [['', 'trigger', '']],
|
||||
factory: () => triggerDir = new Trigger(ɵɵdirectiveInject(ViewContainerRef as any)),
|
||||
inputs: {trigger: 'trigger'}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* <button [trigger]="comp"></button>
|
||||
* <comp #comp>
|
||||
* Some content
|
||||
* </comp>
|
||||
*/
|
||||
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelement(0, 'button', [AttributeMarker.Bindings, 'trigger']);
|
||||
ɵɵelementStart(1, 'comp', null, ['comp', '']);
|
||||
{ ɵɵtext(3, 'Some content'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
const comp = ɵɵreference(2);
|
||||
ɵɵelementProperty(0, 'trigger', ɵɵbind(comp));
|
||||
}
|
||||
}, 4, 1, [Comp, Trigger]);
|
||||
|
||||
const fixture = new ComponentFixture(App);
|
||||
expect(fixture.html).toEqual(`<button></button><comp></comp>`);
|
||||
|
||||
triggerDir.open();
|
||||
expect(fixture.html).toEqual(`<button></button>Some content<comp></comp>`);
|
||||
});
|
||||
|
||||
it('should project nodes into the last ng-content', () => {
|
||||
/**
|
||||
* <div><ng-content></ng-content></div>
|
||||
|
|
@ -1172,52 +681,6 @@ describe('content projection', () => {
|
|||
expect(toHtml(parent)).toEqual('<child><div>content</div></child>');
|
||||
});
|
||||
|
||||
// https://stackblitz.com/edit/angular-ceqmnw?file=src%2Fapp%2Fapp.component.ts
|
||||
it('should project nodes into the last ng-content unrolled by ngFor', () => {
|
||||
const items = [1, 2];
|
||||
|
||||
/**
|
||||
<div *ngFor="let item of [1, 2]; let index = index">
|
||||
({{index}}): <ng-content></ng-content>
|
||||
</div>
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
{ ɵɵtemplate(0, ForTemplate, 3, 1, 'div', [AttributeMarker.Template, 'ngFor', 'ngForOf']); }
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(0, 'ngForOf', ɵɵbind(items));
|
||||
}
|
||||
}, 1, 1, [NgForOf]);
|
||||
|
||||
function ForTemplate(rf1: RenderFlags, ctx: {index: number}) {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵtext(1);
|
||||
ɵɵprojection(2);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf1 & RenderFlags.Update) {
|
||||
ɵɵtextBinding(1, ɵɵinterpolation1('(', ctx.index, '):'));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* <child>content</child>
|
||||
*/
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{ ɵɵtext(1, 'content'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2, 0, [Child]);
|
||||
|
||||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent)).toEqual('<child><div>(0):</div><div>(1):content</div></child>');
|
||||
});
|
||||
|
||||
it('should project with multiple instances of a component with projection', () => {
|
||||
const ProjectionComp = createComponent('projection-comp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
|
|
@ -1441,88 +904,6 @@ describe('content projection', () => {
|
|||
expect(toHtml(parent)).toEqual('<child><grand-child>content</grand-child></child>');
|
||||
});
|
||||
|
||||
it('should handle projected containers inside other containers', () => {
|
||||
// <div>Child content</div>
|
||||
const NestedComp = createComponent('nested-comp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
ɵɵtext(1, 'Child content');
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2, 0, []);
|
||||
|
||||
// <ng-content></ng-content>
|
||||
const RootComp = createComponent('root-comp', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef();
|
||||
ɵɵprojection(0);
|
||||
}
|
||||
}, 1, 0, []);
|
||||
|
||||
// <root-comp>
|
||||
// <ng-container *ngFor="let item of items; last as last">
|
||||
// <nested-comp *ngIf="!last"></nested-comp>
|
||||
// </ng-container>
|
||||
// </root-comp>
|
||||
function MyApp_ng_container_1_child_comp_1_Template(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelement(0, 'nested-comp');
|
||||
}
|
||||
}
|
||||
function MyApp_ng_container_1_Template(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementContainerStart(0);
|
||||
ɵɵtemplate(
|
||||
1, MyApp_ng_container_1_child_comp_1_Template, 1, 0, 'nested-comp',
|
||||
[AttributeMarker.Template, 'ngIf']);
|
||||
ɵɵelementContainerEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
const last_r2 = ctx.last;
|
||||
ɵɵelementProperty(1, 'ngIf', ɵɵbind(!last_r2));
|
||||
}
|
||||
}
|
||||
let myAppInstance: MyApp;
|
||||
class MyApp {
|
||||
items = [1, 2];
|
||||
|
||||
static ngComponentDef = ɵɵdefineComponent({
|
||||
type: MyApp,
|
||||
selectors: [['', 'my-app', '']],
|
||||
factory: () => myAppInstance = new MyApp(),
|
||||
consts: 2,
|
||||
vars: 1,
|
||||
template: function MyApp_Template(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'root-comp');
|
||||
ɵɵtemplate(
|
||||
1, MyApp_ng_container_1_Template, 2, 1, 'ng-container',
|
||||
[AttributeMarker.Template, 'ngFor', 'ngForOf']);
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(1, 'ngForOf', ɵɵbind(ctx.items));
|
||||
}
|
||||
},
|
||||
directives: [NgForOf, NgIf, NestedComp, RootComp]
|
||||
});
|
||||
}
|
||||
const fixture = new ComponentFixture(MyApp);
|
||||
fixture.update();
|
||||
|
||||
// expecting # of divs to be (items.length - 1), since last element is filtered out by *ngIf,
|
||||
// this applies to all other assertions below
|
||||
expect(fixture.hostElement.querySelectorAll('div').length).toBe(1);
|
||||
|
||||
myAppInstance !.items = [3, 4, 5];
|
||||
fixture.update();
|
||||
expect(fixture.hostElement.querySelectorAll('div').length).toBe(2);
|
||||
|
||||
myAppInstance !.items = [6, 7, 8, 9];
|
||||
fixture.update();
|
||||
expect(fixture.hostElement.querySelectorAll('div').length).toBe(3);
|
||||
});
|
||||
|
||||
describe('with selectors', () => {
|
||||
|
||||
it('should project nodes using attribute selectors', () => {
|
||||
|
|
@ -1569,43 +950,6 @@ describe('content projection', () => {
|
|||
'<child><div id="first"><span title="toFirst">1</span></div><div id="second"><span title="toSecond">2</span></div></child>');
|
||||
});
|
||||
|
||||
// https://stackblitz.com/edit/angular-psokum?file=src%2Fapp%2Fapp.module.ts
|
||||
it('should project nodes where attribute selector matches a binding', () => {
|
||||
/**
|
||||
* <ng-content select="[title]"></ng-content>
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef([[['', 'title', '']]]);
|
||||
{ ɵɵprojection(0, 1); }
|
||||
}
|
||||
}, 1);
|
||||
|
||||
/**
|
||||
* <child>
|
||||
* <span [title]="'Some title'">Has title</span>
|
||||
* </child>
|
||||
*/
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{
|
||||
ɵɵelementStart(1, 'span', [AttributeMarker.Bindings, 'title']);
|
||||
{ ɵɵtext(2, 'Has title'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(1, 'title', ɵɵbind('Some title'));
|
||||
}
|
||||
}, 3, 1, [Child]);
|
||||
|
||||
const fixture = new ComponentFixture(Parent);
|
||||
expect(fixture.html).toEqual('<child><span title="Some title">Has title</span></child>');
|
||||
|
||||
});
|
||||
|
||||
it('should project nodes using class selectors', () => {
|
||||
/**
|
||||
* <div id="first"><ng-content select="span.toFirst"></ng-content></div>
|
||||
|
|
@ -1991,54 +1335,6 @@ describe('content projection', () => {
|
|||
const parent = renderComponent(Parent);
|
||||
expect(toHtml(parent)).toEqual('<child><div>should project</div></child>');
|
||||
});
|
||||
|
||||
it('should match selectors against projected containers', () => {
|
||||
|
||||
/**
|
||||
* <span>
|
||||
* <ng-content select="div"></ng-content>
|
||||
* </span>
|
||||
*/
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵprojectionDef([[['div']]]);
|
||||
ɵɵelementStart(0, 'span');
|
||||
{ ɵɵprojection(1, 1); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}, 2);
|
||||
|
||||
function IfTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'div');
|
||||
{ ɵɵtext(1, 'content'); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* <child>
|
||||
* <div *ngIf="value">content</div>
|
||||
* </child>
|
||||
*/
|
||||
const Parent = createComponent('parent', function(rf: RenderFlags, ctx: {value: any}) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
ɵɵelementStart(0, 'child');
|
||||
{ ɵɵtemplate(1, IfTemplate, 2, 0, 'div', [AttributeMarker.Template, 'ngIf']); }
|
||||
ɵɵelementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
ɵɵelementProperty(1, 'ngIf', ɵɵbind(ctx.value));
|
||||
}
|
||||
}, 2, 1, [Child, NgIf]);
|
||||
|
||||
|
||||
const fixture = new ComponentFixture(Parent);
|
||||
fixture.component.value = true;
|
||||
fixture.update();
|
||||
expect(fixture.html).toEqual('<child><span><div>content</div></span></child>');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue