Angular - Карманные юнит-тесты

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 / скажем, привет-к-жасмин-карма-в- angular -intro-d728d669a1c7