typescript - 如何在 Angular 2 中撰寫測試,以檢查 Child 元件中的 Input 變數是否已設定?
我的 app.component 有一個名為 'environment' 的屬性,它是透過使用 HTTP 服務設定的,以下是這些元件
app.component.ts
//import ..
@Component({
selector: 'my-app',
template: require('./app.component.html')
})
export class AppComponent {
myEnvironment: String;
workbenchBaseUrl : String = 'workbenchBaseUrl';
constructor(private _propertyService : PropertyService){
}
ngOnInit(): void {
this._propertyService.getValue(this.workbenchBaseUrl)
.subscribe(environment => this.myEnvironment = environment,
error => this.errorMessage = <any>error);
}
}
屬性服務是一個非同步的 Http 服務,它給我 myEnviroment 變數的值。我將這個變數傳遞給子元件,即 workflow-display.component,使用單向綁定和 input 裝飾器。
這就是我如何傳遞給子組件
app.component .html
<!--container HTML hidden-->
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3 mh-100">
<workflow-display [environment] = "myEnvironment" #taskDisplay></workflow-display>
</main>
<!--container HTML hidden-->
工作流程顯示元件
//import ..
@Component({
selector: 'workflow-display',
template: require('./workflow-display.component.html')
})
export class WorkflowDisplayComponent implements OnInit {
//some other variables hidden...
workbenchTaskPage: string = 'wsIndex';
@Input()
environment: String;
constructor(private _workflowService: WorkflowService) {
}
openTask(event: any, task: any) {
window.open(this.environment + this.workbenchTaskPage + "?taskId=" + task.taskId + "&activitiWorkflow=true");
}
}
現在我正在嘗試為 workdisplay.component 編寫單元測試,以確保它的環境變數已設定,但我不確定如何測試它,因為它只有在父組件的回調之後才會設定,最初是未定義的。到目前為止,我在規格中寫了這些內容
工作流程顯示.spec
//import..
describe('WorkflowDisplayComponent (inline template)', () => {
let comp: WorkflowDisplayComponent;
let fixture: ComponentFixture<WorkflowDisplayComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WorkflowDisplayComponent ], // declare the test component
providers: [WorkflowService,
MockBackend,
BaseRequestOptions,
{
provide: Http,
deps: [MockBackend, BaseRequestOptions],
useFactory:
(backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
return new Http(backend, defaultOptions);
}
}
]
}).compileComponents();
fixture = TestBed.createComponent(WorkflowDisplayComponent);
comp = fixture.componentInstance; // BannerComponent test instance
}));
it('should have right URL', () => {
fixture.detectChanges();
expect((comp.environment + comp.workbenchTaskPage)).toEqual('http://dev.grc.coreworkbench.int.westgroup.com/grcworkbench/app/grcnewsalerts/wsIndex');
});
});
當我執行測試時得到的是這個
should have right URL FAILED
Expected 'undefinedwsIndex' to equal 'http://dev.grc.coreworkbench.int.westgroup.com/grcworkbench/app/grcnewsalerts/wsIndex'.
現在我看到子組件的環境變量還沒有定義,我不確定我該如何解決這個問題。是否應該測試應用組件以確保它的 'myEnvironment' 變量已設置,或者其他方法。