diff --git a/packages/core/test/acceptance/template_ref_spec.ts b/packages/core/test/acceptance/template_ref_spec.ts index 9c037e8614..9fe0d00668 100644 --- a/packages/core/test/acceptance/template_ref_spec.ts +++ b/packages/core/test/acceptance/template_ref_spec.ts @@ -13,29 +13,33 @@ import {ivyEnabled, onlyInIvy} from '@angular/private/testing'; describe('TemplateRef', () => { describe('rootNodes', () => { - it('should return root render nodes for an embedded view instance', () => { - @Component({ - template: ` - -
- some text - -
- ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - } + @Component({template: ``}) + class App { + @ViewChild('templateRef', {static: true}) + templateRef !: TemplateRef; + minutes = 0; + } + + function getRootNodes(template: string): any[] { TestBed.configureTestingModule({ declarations: [App], }); + TestBed.overrideTemplate(App, template); const fixture = TestBed.createComponent(App); fixture.detectChanges(); const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - expect(embeddedView.rootNodes.length).toBe(3); + embeddedView.detectChanges(); + + return embeddedView.rootNodes; + } + + + it('should return root render nodes for an embedded view instance', () => { + const rootNodes = + getRootNodes(`
some text
`); + expect(rootNodes.length).toBe(3); }); /** @@ -47,24 +51,8 @@ describe('TemplateRef', () => { */ 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: ` - - ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - } - - TestBed.configureTestingModule({ - declarations: [App], - }); - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - - const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - expect(embeddedView.rootNodes.length).toBe(0); + const rootNodes = getRootNodes(''); + expect(rootNodes.length).toBe(0); }); it('should include projected nodes', () => { @@ -114,29 +102,15 @@ describe('TemplateRef', () => { * additional `` comment, thus being slightly different than Ivy. * (resulting in 1 root node in Ivy and 2 in VE). */ - @Component({ - template: ` - text|SUFFIX - ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - } + const rootNodes = getRootNodes(` + + text|SUFFIX + `); - TestBed.configureTestingModule({ - declarations: [App], - }); - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - - const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - embeddedView.detectChanges(); - - expect(embeddedView.rootNodes.length).toBe(3); - expect(embeddedView.rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); - expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE); - expect(embeddedView.rootNodes[2].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes.length).toBe(3); + expect(rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); + expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes[2].nodeType).toBe(Node.TEXT_NODE); }); it('should descend into view containers on an element', () => { @@ -145,30 +119,17 @@ describe('TemplateRef', () => { * additional `` comment, thus being slightly different than Ivy. * (resulting in 1 root node in Ivy and 2 in VE). */ - @Component({ - template: ` - text -
SUFFIX
- ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - } + const rootNodes = getRootNodes(` + text + +
SUFFIX +
+ `); - TestBed.configureTestingModule({ - declarations: [App], - }); - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - - const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - embeddedView.detectChanges(); - - expect(embeddedView.rootNodes.length).toBe(3); - expect(embeddedView.rootNodes[0].nodeType).toBe(Node.ELEMENT_NODE); - expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE); - expect(embeddedView.rootNodes[2].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes.length).toBe(3); + expect(rootNodes[0].nodeType).toBe(Node.ELEMENT_NODE); + expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes[2].nodeType).toBe(Node.TEXT_NODE); }); it('should descend into view containers on ng-container', () => { @@ -177,92 +138,46 @@ describe('TemplateRef', () => { * additional `` comment, thus being slightly different than Ivy. * (resulting in 1 root node in Ivy and 2 in VE). */ - @Component({ - template: ` + const rootNodes = getRootNodes(` text SUFFIX - ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - } + `); - TestBed.configureTestingModule({ - declarations: [App], - }); - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - - const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - embeddedView.detectChanges(); - - expect(embeddedView.rootNodes.length).toBe(3); - expect(embeddedView.rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); - expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE); - expect(embeddedView.rootNodes[2].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes.length).toBe(3); + expect(rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); + expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes[2].nodeType).toBe(Node.TEXT_NODE); }); it('should descend into element containers', () => { - @Component({ - template: ` + const rootNodes = getRootNodes(` text - ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - } + `); - TestBed.configureTestingModule({ - declarations: [App], - }); - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - - const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - embeddedView.detectChanges(); - - expect(embeddedView.rootNodes.length).toBe(2); - expect(embeddedView.rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); - expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE); + expect(rootNodes.length).toBe(2); + expect(rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); + expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE); }); it('should descend into ICU containers', () => { - @Component({ - template: ` + const rootNodes = getRootNodes(` - Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {several minutes ago}} + Updated {minutes, select, =0 {just now} other {some time ago}} - ` - }) - class App { - @ViewChild('templateRef', {static: true}) - templateRef !: TemplateRef; - minutes = 0; - } - - TestBed.configureTestingModule({ - declarations: [App], - }); - const fixture = TestBed.createComponent(App); - fixture.detectChanges(); - - const embeddedView = fixture.componentInstance.templateRef.createEmbeddedView({}); - embeddedView.detectChanges(); + `); if (ivyEnabled) { - expect(embeddedView.rootNodes.length).toBe(4); - expect(embeddedView.rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); // ng-container - expect(embeddedView.rootNodes[1].nodeType).toBe(Node.TEXT_NODE); // "Updated " text - expect(embeddedView.rootNodes[2].nodeType).toBe(Node.COMMENT_NODE); // ICU container - expect(embeddedView.rootNodes[3].nodeType).toBe(Node.TEXT_NODE); // "one minute ago" text + expect(rootNodes.length).toBe(4); + expect(rootNodes[0].nodeType).toBe(Node.COMMENT_NODE); // ng-container + expect(rootNodes[1].nodeType).toBe(Node.TEXT_NODE); // "Updated " text + expect(rootNodes[2].nodeType).toBe(Node.COMMENT_NODE); // ICU container + expect(rootNodes[3].nodeType).toBe(Node.TEXT_NODE); // "one minute ago" text } else { // ViewEngine seems to produce very different DOM structure as compared to ivy // when it comes to ICU containers - this needs more investigation / fix. - expect(embeddedView.rootNodes.length).toBe(8); + expect(rootNodes.length).toBe(7); } }); });