component-suite-usage.component.spec.ts

import { ComponentSuite, ComponentSuiteElements } from '@my-test-kit';
import { PortalModule, TemplatePortal } from '@angular/cdk/portal';
import {
  AfterContentInit,
  Component,
  TemplateRef,
  ViewChild,
  ViewContainerRef
} from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NestedComponent } from './nested.component';

@Component({
  template: `
    <ng-template>External Content</ng-template>
    <nested [content]="content"></nested>
  `
})
class HostComponent implements AfterContentInit {
  @ViewChild(TemplateRef)
  templateRef: TemplateRef<any>;

  content: TemplatePortal;

  constructor(private viewContainerRef: ViewContainerRef) {}

  ngAfterContentInit() {
    this.content = new TemplatePortal(this.templateRef, this.viewContainerRef);
  }
}

describe('NestedComponent', () => {
  let fixture: ComponentFixture<HostComponent>;
  let els: ComponentSuiteElements<HostComponent, NestedComponent>;
  
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [PortalModule],
      declarations: [HostComponent, NestedComponent]
    }).compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(HostComponent);
        els = new ComponentSuite<HostComponent, NestedComponent>(
          fixture,
          'nested'
        ).elements;
      });
  }));

  describe('basic case', () => {
    it('should match snapshot', () => {
      fixture.detectChanges();

      expect(fixture).toMatchSnapshot();
    });

    it('should render content from external template', () => {
      fixture.detectChanges();

      const externalContent: TemplatePortal = els.host.component.content;
      const internalContent: TemplatePortal = els.nested.component.content;

      expect(externalContent).toBe(internalContent);
    });
  });
});