網站搜尋

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' 變量已設置,或者其他方法。