/** * @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 {detectChanges} from '../../src/render3/index'; import {componentRefresh, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, memory, projection, projectionDef, text, viewEnd, viewStart} from '../../src/render3/instructions'; import {createComponent, renderComponent, toHtml} from './render_util'; describe('content projection', () => { it('should project content', () => { /** *
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { projection(2, 0); } elementEnd(); } }); /** * content */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); }); it('should project content when root.', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); projection(1, 0); } }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content'); }); it('should re-project content when root.', () => { const GrandChild = createComponent('grand-child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { projection(2, 0); } elementEnd(); } }); const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, GrandChild); { projection(3, 0); } elementEnd(); GrandChild.ngComponentDef.h(2, 1); componentRefresh(2, 1); } }); const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'b'); text(3, 'Hello'); elementEnd(); text(4, 'World!'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual('
HelloWorld!
'); }); it('should project components', () => { /**
*/ const Child = createComponent('child', (ctx: any, cm: boolean) => { if (cm) { projectionDef(0); elementStart(1, 'div'); { projection(2, 0); } elementEnd(); } }); const ProjectedComp = createComponent('projected-comp', (ctx: any, cm: boolean) => { if (cm) { text(0, 'content'); } }); /** * * * */ const Parent = createComponent('parent', (ctx: any, cm: boolean) => { if (cm) { elementStart(0, Child); { elementStart(2, ProjectedComp); elementEnd(); } elementEnd(); } Child.ngComponentDef.h(1, 0); ProjectedComp.ngComponentDef.h(3, 2); componentRefresh(3, 2); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual('
content
'); }); it('should project content with container.', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { projection(2, 0); } elementEnd(); } }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { elementStart(0, Child); { text(2, '('); container(3); text(4, ')'); } elementEnd(); } containerRefreshStart(3); { if (ctx.value) { if (viewStart(0)) { text(0, 'content'); } viewEnd(); } } containerRefreshEnd(); Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
()
'); parent.value = true; detectChanges(parent); expect(toHtml(parent)).toEqual('
(content)
'); parent.value = false; detectChanges(parent); expect(toHtml(parent)).toEqual('
()
'); }); it('should project content with container into root', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); projection(1, 0); } }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { elementStart(0, Child); { container(2); } elementEnd(); } containerRefreshStart(2); { if (ctx.value) { if (viewStart(0)) { text(0, 'content'); } viewEnd(); } } containerRefreshEnd(); Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual(''); parent.value = true; detectChanges(parent); expect(toHtml(parent)).toEqual('content'); parent.value = false; detectChanges(parent); expect(toHtml(parent)).toEqual(''); }); it('should project content with container and if-else.', () => { const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { projection(2, 0); } elementEnd(); } }); const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { elementStart(0, Child); { text(2, '('); container(3); text(4, ')'); } elementEnd(); } containerRefreshStart(3); { if (ctx.value) { if (viewStart(0)) { text(0, 'content'); } viewEnd(); } else { if (viewStart(1)) { text(0, 'else'); } viewEnd(); } } containerRefreshEnd(); Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
(else)
'); parent.value = true; detectChanges(parent); expect(toHtml(parent)).toEqual('
(content)
'); parent.value = false; detectChanges(parent); expect(toHtml(parent)).toEqual('
(else)
'); }); it('should support projection in embedded views', () => { let childCmptInstance: any; /** *
* % if (!skipContent) { * * * * % } *
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { container(2); } elementEnd(); } containerRefreshStart(2); { if (!ctx.skipContent) { if (viewStart(0)) { elementStart(0, 'span'); projection(1, 0); elementEnd(); } viewEnd(); } } containerRefreshEnd(); }); /** * content */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { childCmptInstance = memory(1); text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); childCmptInstance.skipContent = true; detectChanges(parent); expect(toHtml(parent)).toEqual('
'); }); it('should support projection in embedded views when ng-content is a root node of an embedded view', () => { let childCmptInstance: any; /** *
* % if (!skipContent) { * * % } *
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { container(2); } elementEnd(); } containerRefreshStart(2); { if (!ctx.skipContent) { if (viewStart(0)) { projection(0, 0); } viewEnd(); } } containerRefreshEnd(); }); /** * content */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { childCmptInstance = memory(1); text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); childCmptInstance.skipContent = true; detectChanges(parent); expect(toHtml(parent)).toEqual('
'); }); it('should support projection in embedded views when ng-content is a root node of an embedded view, with other nodes after', () => { let childCmptInstance: any; /** *
* % if (!skipContent) { * before--after * % } *
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { container(2); } elementEnd(); } containerRefreshStart(2); { if (!ctx.skipContent) { if (viewStart(0)) { text(0, 'before-'); projection(1, 0); text(2, '-after'); } viewEnd(); } } containerRefreshEnd(); }); /** * content */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { childCmptInstance = memory(1); text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
before-content-after
'); childCmptInstance.skipContent = true; detectChanges(parent); expect(toHtml(parent)).toEqual('
'); }); it('should project nodes into the last ng-content', () => { /** *
* */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, 'div'); { projection(2, 0); } elementEnd(); elementStart(3, 'span'); { projection(4, 0); } elementEnd(); } }); /** * content */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); }); /** * Warning: this test is _not_ in-line with what Angular does atm. * Moreover the current implementation logic will result in DOM nodes * being re-assigned from one parent to another. Proposal: have compiler * to remove all but the latest occurrence of so we generate * only one P(n, m, 0) instruction. It would make it consistent with the * current Angular behaviour: * http://plnkr.co/edit/OAYkNawTDPkYBFTqovTP?p=preview */ it('should project nodes into the last available ng-content', () => { let childCmptInstance: any; /** * *
* % if (show) { * * % } *
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); projection(1, 0); elementStart(2, 'div'); { container(3); } elementEnd(); } containerRefreshStart(3); { if (ctx.show) { if (viewStart(0)) { projection(0, 0); } viewEnd(); } } containerRefreshEnd(); }); /** * content */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { childCmptInstance = memory(1); text(2, 'content'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('content
'); childCmptInstance.show = true; detectChanges(parent); expect(toHtml(parent)).toEqual('
content
'); }); describe('with selectors', () => { it('should project nodes using attribute selectors', () => { /** *
*
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef( 0, [[[['span', 'title', 'toFirst'], null]], [[['span', 'title', 'toSecond'], null]]]); elementStart(1, 'div', ['id', 'first']); { projection(2, 0, 1); } elementEnd(); elementStart(3, 'div', ['id', 'second']); { projection(4, 0, 2); } elementEnd(); } }); /** * * 1 * 2 * */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span', ['title', 'toFirst']); { text(3, '1'); } elementEnd(); elementStart(4, 'span', ['title', 'toSecond']); { text(5, '2'); } elementEnd(); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( '
1
2
'); }); it('should project nodes using class selectors', () => { /** *
*
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef( 0, [[[['span', 'class', 'toFirst'], null]], [[['span', 'class', 'toSecond'], null]]]); elementStart(1, 'div', ['id', 'first']); { projection(2, 0, 1); } elementEnd(); elementStart(3, 'div', ['id', 'second']); { projection(4, 0, 2); } elementEnd(); } }); /** * * 1 * 2 * */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span', ['class', 'toFirst']); { text(3, '1'); } elementEnd(); elementStart(4, 'span', ['class', 'toSecond']); { text(5, '2'); } elementEnd(); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( '
1
2
'); }); it('should project nodes using class selectors when element has multiple classes', () => { /** *
*
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef( 0, [[[['span', 'class', 'toFirst'], null]], [[['span', 'class', 'toSecond'], null]]]); elementStart(1, 'div', ['id', 'first']); { projection(2, 0, 1); } elementEnd(); elementStart(3, 'div', ['id', 'second']); { projection(4, 0, 2); } elementEnd(); } }); /** * * 1 * 2 * */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span', ['class', 'other toFirst']); { text(3, '1'); } elementEnd(); elementStart(4, 'span', ['class', 'toSecond noise']); { text(5, '2'); } elementEnd(); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( '
1
2
'); }); it('should project nodes into the first matching selector', () => { /** *
*
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0, [[[['span'], null]], [[['span', 'class', 'toSecond'], null]]]); elementStart(1, 'div', ['id', 'first']); { projection(2, 0, 1); } elementEnd(); elementStart(3, 'div', ['id', 'second']); { projection(4, 0, 2); } elementEnd(); } }); /** * * 1 * 2 * */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span', ['class', 'toFirst']); { text(3, '1'); } elementEnd(); elementStart(4, 'span', ['class', 'toSecond']); { text(5, '2'); } elementEnd(); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( '
12
'); }); it('should allow mixing ng-content with and without selectors', () => { /** *
*
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0, [[[['span', 'class', 'toFirst'], null]]]); elementStart(1, 'div', ['id', 'first']); { projection(2, 0, 1); } elementEnd(); elementStart(3, 'div', ['id', 'second']); { projection(4, 0); } elementEnd(); } }); /** * * 1 * 2 * */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span', ['class', 'toFirst']); { text(3, '1'); } elementEnd(); elementStart(4, 'span'); { text(5, 'remaining'); } elementEnd(); text(6, 'more remaining'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( '
1
remainingmore remaining
'); }); it('should allow mixing ng-content with and without selectors - ng-content first', () => { /** *
*
*/ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0, [[[['span', 'class', 'toSecond'], null]]]); elementStart(1, 'div', ['id', 'first']); { projection(2, 0); } elementEnd(); elementStart(3, 'div', ['id', 'second']); { projection(4, 0, 1); } elementEnd(); } }); /** * * 1 * 2 * remaining * */ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span'); { text(3, '1'); } elementEnd(); elementStart(4, 'span', ['class', 'toSecond']); { text(5, '2'); } elementEnd(); text(6, 'remaining'); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( '
1remaining
2
'); }); /** * Descending into projected content for selector-matching purposes is not supported * today: http://plnkr.co/edit/MYQcNfHSTKp9KvbzJWVQ?p=preview */ it('should not descend into re-projected content', () => { /** * *
* */ const GrandChild = createComponent('grand-child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0, [[[['span'], null]]]); projection(1, 0, 1); elementStart(2, 'hr'); elementEnd(); projection(3, 0, 0); } }); /** * * * in child template * */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, GrandChild); { projection(3, 0); elementStart(4, 'span'); { text(5, 'in child template'); } elementEnd(); } elementEnd(); GrandChild.ngComponentDef.h(2, 1); componentRefresh(2, 1); } }); /** * *
* parent content *
*
*/ const Parent = createComponent('parent', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, Child); { elementStart(2, 'span'); { text(3, 'parent content'); } elementEnd(); } elementEnd(); } Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)) .toEqual( 'in child template
parent content
'); }); it('should match selectors on ng-content nodes with attributes', () => { /** * *
* */ const Card = createComponent('card', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0, [[[['', 'card-title', ''], null]], [[['', 'card-content', ''], null]]]); projection(1, 0, 1); elementStart(2, 'hr'); elementEnd(); projection(3, 0, 2); } }); /** * *

Title

* *
*/ const CardWithTitle = createComponent('card-with-title', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0); elementStart(1, Card); { elementStart(3, 'h1', ['card-title', '']); { text(4, 'Title'); } elementEnd(); projection(5, 0, 0, ['card-content', '']); } elementEnd(); Card.ngComponentDef.h(2, 1); componentRefresh(2, 1); } }); /** * * content * */ const App = createComponent('app', function(ctx: any, cm: boolean) { if (cm) { elementStart(0, CardWithTitle); { text(2, 'content'); } elementEnd(); } CardWithTitle.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const app = renderComponent(App); expect(toHtml(app)) .toEqual( '

Title


content
'); }); it('should match selectors against projected containers', () => { /** * * * */ const Child = createComponent('child', function(ctx: any, cm: boolean) { if (cm) { projectionDef(0, [[[['div'], null]]]); elementStart(1, 'span'); { projection(2, 0, 1); } elementEnd(); } }); /** * *
content
*
*/ const Parent = createComponent('parent', function(ctx: {value: any}, cm: boolean) { if (cm) { elementStart(0, Child); { container(2, undefined, undefined, 'div'); } elementEnd(); } containerRefreshStart(2); { if (true) { if (viewStart(0)) { elementStart(0, 'div'); { text(1, 'content'); } elementEnd(); } viewEnd(); } } containerRefreshEnd(); Child.ngComponentDef.h(1, 0); componentRefresh(1, 0); }); const parent = renderComponent(Parent); expect(toHtml(parent)).toEqual('
content
'); }); }); });