angular 组件方法的单元测试时出现错误？

Question

我正在运行进行单元测试，但失败了。请看我的代码：

这是我的打字稿文件：

  allData: any;
  constructor(@Inject(MAT_DIALOG_DATA) private data,
    private dialogRef: MatDialogRef<MyComponent>,
    private _service: SampleService,
    private _router: Router) {
  }
  ngOnInit() {
    this.loadValue();
  }
  loadValue() {
    this._service.returnData().subscribe(res => {
      this.allData = res;
    })
  }

这是我的服务文件实现：

  //SampleService
  returnData(){
    const users=[{ id: "01", name:"Andrew" }, { id: "02", name:"Shaun" }];
    return of(users);
  }

这是我的 spec 文件：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let el: DebugElement;
  let sampleservice: SampleService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
      imports: [MatDialogModule],
      providers: [
        {
          provide: MAT_DIALOG_DATA, useValue: { action: "add" },
        },
        {
          provide: MatDialogRef, useValue: { MyComponent}
        },
        {
          provide: Router
        },
        {
          provide: SampleService
        }
      ]
    }).compileComponents()
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    el = fixture.debugElement;
    component = fixture.componentInstance;
    sampleservice = new SampleService();
  })

我的测试用例：

  it("should call the loadvalue and fill the allData", () => {
    let users = [{ id: "01", name: "John" }, { id: "02", name: "Wick" }];
    component.loadValue();
    spyOn(sampleservice, 'returnData').and.returnValue(of(users));
    expect(component.allData).toBe(users);
  })

我想调用 loadvalue() 方法并期望 allData 变量使用 spyOn 填充虚拟响应。但是当我运行这个测试用例时，我得到错误：

TypeError: Cannot read property 'returnData' of undefined

我在这里做错了什么？任何帮助将非常感激。谢谢！

Answer 1

试试这个：

sampleservice = TestBed.get(SampleService);

并替换

{
  provide: SampleService
},

刚刚：

SampleService,

在你的测试中：

it("should call the loadvalue and fill the allData", () => {
  spyOn(sampleservice, 'returnData').and.returnValue(of(users));
  fixture.detectChanges();

  let users = [{ id: "01", name: "John" }, { id: "02", name: "Wick" }];
  component.loadValue();
  expect(component.allData).toBe(users);
})

angular 组件方法的单元测试时出现错误？

Getting error while unit testing of angular component method?

unit-testing

jasmine

karma-jasmine

angular

angular-unit-test