Angular2でtransclusion（ng-content）をテストする方法は？

Question

私は次のようにテストするためのコンポーネントを持っている：

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は<ng-content>をテストするためのエレガントな方法を見つけることができないのです。文書をチェックしましたが、良い方法を見つけることができませんでした。

私はテストラッパーコンポーネントを持つことが助けになると考えました。テストは私がTestContainerComponentからColumnComponentコンポーネントを取得する方法が必要と思います

@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(); 
     }); 

    }); 

を失敗したので、しかしcompはTestContainerComponent使用されるものではありません。私は呼び出しを介してホスト要素を取得する方法があるので、あなたがラッパーを使用せずにそれを行うことができると思い

Answer 1

：

fixture.elementRef.nativeElement; 

をので、ここでは、可能なテストです：

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