Angular - karma 单元测试用例

Question

我正在为 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)

请帮我解决这个问题

Answer 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();
  }));

你可以参考我的这篇文章作为参考。 可以在以下位置找到此类文章的集合： https : //medium.com/@shashankvivek.7/say-hi-to-jasmine-karma-in-angular-intro-d728d669a1c7