如何在角度2中编写测试以检查是否在子组件中设置了输入变量?

时间:2017-01-31 20:07:12

标签: angular typescript karma-jasmine

我的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

这是我将它传递给子组件的方式

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

工作流display.component

    //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编写单元测试以确保它的环境变量已设置,但我不知道如何测试它,因为它仅在父组件中的回调之后设置且未定义首先 。 这是我到目前为止在规范中写的

工作流display.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'.

现在我看到子组件环境变量尚未定义,我不知道如何解决这个问题。应该测试应用程序组件,以确保其“我的环境”#39;设置变量或其他。

0 个答案:

没有答案