test(ivy): add tests for projection on inline-templates (#29041)

PR Close #29041

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: '<ng-content select="div"></ng-content>'})
+      class SelectedNgContentComp {
+      }
+
+      @Directive({selector: 'div'})
+      class DivDirective {
+        constructor() { divDirectives++; }
+      }
+
+      @Component({
+        selector: 'main-selector',
+        template: '<selector-proj><div x="true" *ngIf="true">Hello world!</div></selector-proj>'
+      })
+      class SelectorMainComp {
+      }
+
+      TestBed.configureTestingModule(
+          {declarations: [DivDirective, SelectedNgContentComp, SelectorMainComp]});
+      const fixture = TestBed.createComponent<SelectorMainComp>(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: '<ng-content select="[x]"></ng-content>'})
+      class SelectedNgContentComp {
+      }
+
+      @Directive({selector: '[x]'})
+      class XDirective {
+        constructor() { xDirectives++; }
+      }
+
+      @Component({
+        selector: 'main-selector',
+        template: '<selector-proj><div x="true" *ngIf="true">Hello world!</div></selector-proj>'
+      })
+      class SelectorMainComp {
+      }
+
+      TestBed.configureTestingModule(
+          {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]});
+      const fixture = TestBed.createComponent<SelectorMainComp>(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: '<ng-content select=".x"></ng-content>'})
+      class SelectedNgContentComp {
+      }
+
+      @Directive({selector: '.x'})
+      class XDirective {
+        constructor() { xDirectives++; }
+      }
+
+      @Component({
+        selector: 'main-selector',
+        template: '<selector-proj><div class="x" *ngIf="true">Hello world!</div></selector-proj>'
+      })
+      class SelectorMainComp {
+      }
+
+      TestBed.configureTestingModule(
+          {declarations: [XDirective, SelectedNgContentComp, SelectorMainComp]});
+      const fixture = TestBed.createComponent<SelectorMainComp>(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: '<ng-content select="[ngTrackBy]"></ng-content>'})
+      class SelectedNgContentComp {
+      }
+
+      @Component({
+        selector: 'main-selector',
+        template:
+            'inline(<selector-proj><div *ngFor="let item of items trackBy getItemId">{{item.name}}</div></selector-proj>)' +
+            'ng-template(<selector-proj><ng-template ngFor [ngForOf]="items" let-item ngTrackBy="getItemId"><div>{{item.name}}</div></ng-template></selector-proj>)'
+      })
+      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>(SelectorMainComp);
+
+      fixture.detectChanges();
+      expect(fixture.nativeElement).toHaveText('inline()ng-template(onetwothree)');
+    });
+  });
 });