Wie teste ich die Transclusion (ng-Gehalt) in Angular2?

Question

Ich habe eine Komponente wie folgt zu testen:

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; 
     } 
    } 

} 

ich bin nicht in der Lage eine elegante Art und Weise zu finden, die <ng-content> zu testen. überprüfte die Dokumentationen, konnte aber keinen guten Weg finden.

Ich dachte, eine Test-Wrapper-Komponente wird helfen. Aber die comp ist nicht derjenige verwendet TestContainerComponent so der Test nicht bestanden

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

    }); 

Ich denke, ich brauche einen Weg, um die ColumnComponent Komponente aus den TestContainerComponent zu bekommen.

Answer 1

Ich glaube, Sie können es tun, ohne Wrapper zu verwenden, da dort Weg Host-Element zu erhalten über Aufruf ist:

fixture.elementRef.nativeElement; 

so ist hier möglich 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