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
.
Aucun commentaire:
Enregistrer un commentaire