Question

我开始在Angular（v4.0.0）开展一个小项目。在这个项目中，我正在添加单元测试。我阅读了angular testing documentation，现在已经基本了解了如何以角度编写单元测试。

在此，我正在努力为从html触发selectChange事件的函数编写测试用例。

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函数，那么为什么不会打印该控制台语句。

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

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

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

Answer 1

之所以发生这种情况，是因为您要selectMetabs嘲笑组件的let spy = spyOn(comp, 'selectMetabs');方法。这就是你正在测试的东西。

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

删除此间谍let spy = spyOn(comp, 'selectMetabs');后，它应该调用您的组件的方法，它应该被覆盖。

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

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

希望有所帮助。

通过触发selectChange事件Angular测试来调用函数

1 个答案: