Javascript 角度-业力单元测试用例

我正在为角度应用编写单元测试用例。我有个打字错误，我弄不清楚

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

我的默认测试用例：

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

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从'@angular/common/http/testing'导入{HttpClientTestingModule}；
从“@angular/router/testing”导入{RouterTestingModule}；
从'@core/services/b.service'导入{AService}；
从'@core/http/b.service'导入{BService}；
从“./footer.component”导入{FooterComponent}；
描述（'FooterComponent'，（）=>{
let组件：footer组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[RouterTestingModule，HttpClientTestingModule]，
声明：[页脚组件]，
提供者：[AService，BService]，
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（FooterComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
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)

页脚组件
✖ 应该创造
无头Chrome 77.0.3865（Linux 0.0.0）
TypeError:无法读取未定义的属性“length”
错误属性：对象（{ngDebugContext:DebugContext}{view:Object（{def:Object（{factory:Function，nodeFlags:3，rootNodeFlags:1，nodeMatchedQueries:0，标志：0，节点：[Object({nodeIndex:0，parent:null，renderParent:null，bindingIndex:0，outputinIndex:0，checkIndex:0，flags:1，childFlags:2，directChildFlags:2，childMatchedQueries:0，matchedQueries:Object（{}），MatchedQueryId:0，引用：Object（{}），ngContentIndex:null，childCount:1，绑定：[]，bindingFlags:0，输出：[]，元素：Object:Object({ns:''，名称：'footer'，attrs:[Array]，模板：null，componentProvider:null，componentView:null，ComponentRenderType:null，publicProviders:null（{}），allProviders:null（{}），handleEvent:Function}），provider:null，text:null，query:null，ngContent:null}），Object（{nodeIndex:1，父：Object({nodeIndex:0，parent:null，renderParent:null，bindingIndex:0，outputIndex:0，checkIndex:0，标志：1，childFlags:2，directChildFlags:2，childMatchedQueries:0。。。
在
在Object.eval[as updateRenderer]（ng:///DynamicTestModule/FooterComponent.ngfactory.js:12:38）
在Object.debugUpdateRenderer[作为updateRenderer]（node_modules/@angular/core/fesm2015/core.js:36090:1）
在checkAndUpdateView（node_modules/@angular/core/fesm2015/core.js:35073:1）
在callViewAction（node_modules/@angular/core/fesm2015/core.js:35433:1）
在执行EmbeddedViewsAction时（node_modules/@angular/core/fesm2015/core.js:35390:1）
在checkAndUpdateView（node_modules/@angular/core/fesm2015/core.js:35068:1）
在callViewAction（node_modules/@angular/core/fesm2015/core.js:35433:1）
在ExecuteComponentViewsAction（node_modules/@angular/core/fesm2015/core.js:35361:1）
在checkAndUpdateView（node_modules/@angular/core/fesm2015/core.js:35074:1）
在callWithDebugContext（node_modules/@angular/core/fesm2015/core.js:36407: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.A.data.length>0'时模拟服务，并且数据为空，因为您无法从实际的服务调用共享服务代码片段中获取数据，以便我可以向您展示如何模拟服务。我正在初始化数据，如下所示：[]中的空对象service@user2900572：你试过我的答案了吗？谢谢你的评论：）模拟服务不是必需的..上面的代码按原样工作..由于角度cli问题，它没有正确观察..当我再次从终端运行ng test命令时，它开始工作

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