diff --git a/packages/core/test/acceptance/content_spec.ts b/packages/core/test/acceptance/content_spec.ts index da7853c9d1..12898d4a71 100644 --- a/packages/core/test/acceptance/content_spec.ts +++ b/packages/core/test/acceptance/content_spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Component} from '@angular/core'; +import {Component, Directive} from '@angular/core'; import {TestBed} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/src/matchers'; @@ -56,4 +56,115 @@ describe('projection', () => { fixture.detectChanges(); expect(fixture.nativeElement).toHaveText('6|7|8|'); }); + + describe('on inline templates (e.g. *ngIf)', () => { + it('should work when matching the element name', () => { + let divDirectives = 0; + @Component({selector: 'selector-proj', template: ''}) + class SelectedNgContentComp { + } + + @Directive({selector: 'div'}) + class DivDirective { + constructor() { divDirectives++; } + } + + @Component({ + selector: 'main-selector', + template: '
Hello world!
' + }) + class SelectorMainComp { + } + + TestBed.configureTestingModule( + {declarations: [DivDirective, SelectedNgContentComp, SelectorMainComp]}); + const fixture = TestBed.createComponent(SelectorMainComp); + + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText('Hello world!'); + expect(divDirectives).toEqual(1); + }); + + it('should work when matching attributes', () => { + let xDirectives = 0; + @Component({selector: 'selector-proj', template: ''}) + class SelectedNgContentComp { + } + + @Directive({selector: '[x]'}) + class XDirective { + constructor() { xDirectives++; } + } + + @Component({ + selector: 'main-selector', + template: '
Hello world!
' + }) + class SelectorMainComp { + } + + TestBed.configureTestingModule( + {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]}); + const fixture = TestBed.createComponent(SelectorMainComp); + + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText('Hello world!'); + expect(xDirectives).toEqual(1); + }); + + it('should work when matching classes', () => { + let xDirectives = 0; + @Component({selector: 'selector-proj', template: ''}) + class SelectedNgContentComp { + } + + @Directive({selector: '.x'}) + class XDirective { + constructor() { xDirectives++; } + } + + @Component({ + selector: 'main-selector', + template: '
Hello world!
' + }) + class SelectorMainComp { + } + + TestBed.configureTestingModule( + {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]}); + const fixture = TestBed.createComponent(SelectorMainComp); + + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText('Hello world!'); + expect(xDirectives).toEqual(1); + }); + + it('should ignore synthesized attributes (e.g. ngTrackBy)', () => { + @Component( + {selector: 'selector-proj', template: ''}) + class SelectedNgContentComp { + } + + @Component({ + selector: 'main-selector', + template: + 'inline(
{{item.name}}
)' + + 'ng-template(
{{item.name}}
)' + }) + class SelectorMainComp { + items = [ + {id: 1, name: 'one'}, + {id: 2, name: 'two'}, + {id: 3, name: 'three'}, + ]; + getItemId(item: {id: number}) { return item.id; } + } + + TestBed.configureTestingModule({declarations: [SelectedNgContentComp, SelectorMainComp]}); + const fixture = TestBed.createComponent(SelectorMainComp); + + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveText('inline()ng-template(onetwothree)'); + }); + }); }); \ No newline at end of file