How to test transclusion (ng-content) in Angular2?

Question

i have a component to test as follow :

import {Component, OnInit, Input} from "@angular/core";

@Component({
    selector: 'column',
    template: '<ng-content></ng-content>',
    host: {
        '[class]': '"col col-" + width'
    }
})
export class ColumnComponent implements OnInit {

    @Input() public width: number;

    ngOnInit() {
        if (!this.width || this.width > 12 || this.width < 1) {
            this.width = 12;
        }
    }

}

i am not able to find an elegant way to test the <ng-content>. checked the documentations but not able to find a good way.

I thought having a test wrapper component will help. But the comp is not the one used TestContainerComponent so the test fails

  @Component({
        selector: 'test-container',
        template: `<column width="12">Hello</column>`
    })
    export class TestContainerComponent {
    }

    fdescribe(`Column`, () => {
        let comp: ColumnComponent;
        let fixture: ComponentFixture<ColumnComponent>;

        let testContainerComp: TestContainerComponent;
        let testContainerFixture: ComponentFixture<TestContainerComponent>;
        let testContainerDe: DebugElement;
        let testContainerEl: HTMLElement;

        beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations: [ColumnComponent, TestContainerComponent]
            }).compileComponents();
        }));

        beforeEach(() => {
            fixture = TestBed.createComponent(ColumnComponent);
            testContainerFixture = TestBed.createComponent(TestContainerComponent);
            comp = fixture.componentInstance;

            testContainerComp = testContainerFixture.componentInstance;
            testContainerDe = testContainerFixture.debugElement.query(By.css('column'));
            testContainerEl = testContainerDe.nativeElement.;

        });


        it(`Should have a width class as 'col-...' if width attribute set`, () => {
            comp.width = 6;
            testContainerFixture.detectChanges();
         expect(testContainerEl.classList.contains(`col-${comp.width}`)).toBeTruthy();
        });

    });

I guess i need a way to get the ColumnComponent component from the TestContainerComponent.

Answer 1

I think you can do it without using wrapper because there is way to get host element via calling:

fixture.elementRef.nativeElement;

so here is possible test:

fdescribe(`Column`, () => {
  let comp: ColumnComponent;
  let fixture: ComponentFixture<ColumnComponent>;

  let testContainerDe: DebugElement;
  let testContainerEl: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ColumnComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ColumnComponent);
    comp = fixture.componentInstance;
    testContainerEl = fixture.elementRef.nativeElement;
  });

  it(`Should have a width class as 'col-...' if width attribute set`, () => {
    comp.width = 6;
    fixture.detectChanges();
    expect(testContainerEl.classList.contains(`col-${comp.width}`)).toBeTruthy();
  });
});

Plunker Example