0

我开始在 Angular(v4.0.0) 中做一个小项目。在这个项目中，我正在添加单元测试。我阅读了角度测试文档，现在对如何用角度编写单元测试有了基本的了解。

在这方面，我正在努力为一个触发selectChange来自 html 的事件的函数编写测试用例。

html的代码片段

html content
        <div class="metabs">
            <md-tab-group (selectChange)="selectMetabs($event)" [selectedIndex]="selectedIndex" *ngIf="!showAllMetabs">
                    <md-tab [label]="metab.name" *ngFor="let metab of dashboards"></md-tab>                        
            </md-tab-group>                    
        </div>

ts的代码片段

// Corresponding ts containing selectMetabs function

selectMetabs(event) {
  console.log("--in select metabos--");  // this console is not getting printed
  // rest of the code 
}

现在我为此编写了测试用例：

describe('DashboardComponent', () => {
    let fixture: ComponentFixture<DashboardComponent>;
    let comp: DashboardComponent;
    let de: DebugElement;
    let el: HTMLElement;
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                DashboardComponent,
            ],
            providers: [
            ],
            imports: [
                BrowserAnimationsModule,
                AppMaterialModule,
            ],
            schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ],
        }).compileComponents()
        fixture = TestBed.createComponent(DashboardComponent)
        comp = fixture.componentInstance
    }))

it("should check selectMetabs function call", async(() => {
    comp.showAllMetabs = false;
    fixture.detectChanges();
    let de = fixture.debugElement.query(By.css('.metabs > md-tab-group'));
    let spy = spyOn(comp, 'selectMetabs');
    de.triggerEventHandler('selectChange', {index: 0});
    expect(spy).toHaveBeenCalled(); // pass test case
    expect(spy).toHaveBeenCalledTimes(1); // pass test case
    expect(comp.selectMetabolite).toHaveBeenCalledWith({index:0}); // pass test case
}))

我的这些测试用例正在通过，这向我保证 triggerEvent 正在工作。

我的困惑是，如果selectMetabs函数被调用，他们为什么没有打印控制台语句。

此外，此功能也未涵盖在测试范围内。

我无法理解为什么会这样。我是角度测试的新手，这个问题让我很困惑。如果我遗漏了什么或者我需要提供更多信息，请告诉我。

有用的建议将不胜感激。谢谢！！

4

1 回答 1

0

发生这种情况的原因是因为您正在模拟组件的selectMetabs方法let spy = spyOn(comp, 'selectMetabs');。这也是你正在测试的。

就单元/集成测试而言，这是非常错误的。那是因为，在单元/集成测试中，您不应该模拟被测事物的方法（您的组件在这里）。您应该只模拟您的组件所依赖的其他事物的方法（例如服务的方法）。

一旦你删除了这个 spy let spy = spyOn(comp, 'selectMetabs');，它应该调用你的组件的方法并且它应该被覆盖。

现在出现的问题是：在这种情况下你应该期待什么？

好吧，您正在使用console.log("--in select metabos--");组件的selectMetabs方法。所以你可以模拟 console.log 然后期望它被调用。

希望有帮助。

于 2017-10-09T05:43:27.543 回答