Angular - 业力单元测试用例答案

【问题标题】：Angular - karma Unit test casesAngular - 业力单元测试用例
【发布时间】：2020-02-17 06:48:20
【问题描述】：

我正在为 Angular 应用程序编写单元测试用例。我收到了一个我无法弄清楚的类型错误。


<footer class="footer row no-gutters" *ngIf="showFilterResult()">
    Showing
    {{filteredData.length}} of {{data.length}} results
</footer>

组件文件：


import {Component, OnInit} from '@angular/core';
import {AService} from '@core/services/search-helper.service';
import {BService} from '@core/http/firmware.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  private data = [];

  private filteredData = [];

  constructor(
    public a: AService,
    public b: BService,
    public router: Router) {}

  ngOnInit() {}

  showFilterResult() {
    if (
      this.router.url === '/currenturl' &&
      !this.b.hideFilter &&
      this.a.data &&
      this.a.data.length > 0
    ) {
      this.data = this.a.data;
      this.filteredData = this.b.searchResults;
      return true;
    }
    return false;
  }
}

我的默认测试用例：

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {HttpClientTestingModule} from '@angular/common/http/testing';

import {RouterTestingModule} from '@angular/router/testing';
import {AService} from '@core/services/b.service';
import {BService} from '@core/http/b.service';
import {FooterComponent} from './footer.component';

describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      declarations: [FooterComponent],
      providers: [AService, BService],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我收到以下错误，我无法关联它发生的原因。还有哪个变量在创建组件时是未定义的


  FooterComponent
    ✖ should create
      HeadlessChrome 77.0.3865 (Linux 0.0.0)
    TypeError: Cannot read property 'length' of undefined
    error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 3, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 2, directChildFlags: 2, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'footer', attrs: [ Array ], template: null, componentProvider: null, componentView: null, componentRendererType: null, publicProviders: null({  }), allProviders: null({  }), handleEvent: Function }), provider: null, text: null, query: null, ngContent: null }), Object({ nodeIndex: 1, parent: Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 2, directChildFlags: 2, childMatchedQueries: 0,  ...
        at <Jasmine>
        at Object.eval [as updateRenderer] (ng:///DynamicTestModule/FooterComponent.ngfactory.js:12:38)
        at Object.debugUpdateRenderer [as updateRenderer] (node_modules/@angular/core/fesm2015/core.js:36090:1)
        at checkAndUpdateView (node_modules/@angular/core/fesm2015/core.js:35073:1)
        at callViewAction (node_modules/@angular/core/fesm2015/core.js:35433:1)
        at execEmbeddedViewsAction (node_modules/@angular/core/fesm2015/core.js:35390:1)
        at checkAndUpdateView (node_modules/@angular/core/fesm2015/core.js:35068:1)
        at callViewAction (node_modules/@angular/core/fesm2015/core.js:35433:1)
        at execComponentViewsAction (node_modules/@angular/core/fesm2015/core.js:35361:1)
        at checkAndUpdateView (node_modules/@angular/core/fesm2015/core.js:35074:1)
        at callWithDebugContext (node_modules/@angular/core/fesm2015/core.js:36407:1)

请帮我解决这个问题

【问题讨论】：

您必须模拟 AService，因为您在组件中使用此服务 'this.a.data.length > 0' 并且数据为空，因为您不会从实际服务调用中获取数据
分享 AService 代码 sn-p 以便我向您展示如何模拟该服务。
我在服务中将数据初始化为 [] 空对象
@user2900572：你试过我的答案了吗？
谢谢你的 cmets :) 不需要模拟服务.. 上面的代码按原样工作.. 它是因为角度 cli 问题，它没有正确观看.. 当我再次运行 ng test 命令时从终端开始工作

标签： javascript angular typescript unit-testing karma-jasmine

【解决方案1】：

试试

class MockAService{
   data = []
}

class MockBService{
   searchResults = []
}

然后useClass如下：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      declarations: [FooterComponent],
      providers: [{provide: AService , useClass: MockAService}, {provide: BService, useClass: MockBService}],
    }).compileComponents();
  }));

您可以参考this article of mine for reference。可以在以下位置找到此类文章的集合：https://medium.com/@shashankvivek.7/say-hi-to-jasmine-karma-in-angular-intro-d728d669a1c7

【讨论】：