title: How to test transcluded content in Angular?
body: <p>While testing an Angular component that has transclusion slots with <code>&lt;ng-content&gt;</code>, we have no
  explicit means to check if the transcluded content is placed as intended inside the component.
  For example:</p>
  
  <pre><code>// base-button.component.ts
  @Component({
    selector: 'base-button',
    template: `&lt;button [type]="type"&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/button&gt;`,
  })
  export class BaseButtonComponent {
    @Input() type = 'button';
  }
  </code></pre>
  
  <p>Basically, when creating a component instance in the spec file, we do this:</p>
  
  <pre><code>// base-button.component.spec.ts
  it('should reflect the `type` property into the "type" attribute of the button', () =&gt; {
    const fixture = TestBed.createComponent(BaseButtonComponent);
    fixture.detectChanges();
  
    const { componentInstance, nativeElement } = fixture;
    componentInstance.type = 'reset';
  
    const button = nativeElement.querySelector('button');
    expect(button.type === 'reset');
  });
  </code></pre>
  
  <p>We can do this for every property and method of the component, but what about the
  transcluded content? A workaround would be creating a host component for test purposes:</p>
  
  <pre><code>// base-button.component.spec.ts
  ...
  @Component({
    template: `&lt;base-button&gt;Foo bar&lt;/base-button&gt;`
  })
  export class BaseButtonHostComponent {}
  ...
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ BaseButtonComponent, BaseButtonHostComponent ]
      })
      .compileComponents();
    }));
  
    it('should transclude the content correctly', () =&gt; {
      const hostFixture = TestBed.createComponent(BaseButtonHostComponent);
      hostFixture.detectChanges();
      const button = hostFixture.nativeElement.querySelector('button');
      expect(button.textContent === 'Foo bar');
    });
  ...
  </code></pre>
  
  <p>But, as you could imagine, this is rather inconvenient, also because this has to be done
  for every component with transcluded content, and possibly for every <code>&lt;ng-content&gt;</code> element
  in its template. Is there another way to do this?</p>