尝试从 Angular 应用程序中的服务模拟后端结果的 Karma 测试错误答案

【问题标题】：Karma test error attempting to emulate backend results from service in Angular application尝试从 Angular 应用程序中的服务模拟后端结果的 Karma 测试错误
【发布时间】：2019-09-20 23:57:06
【问题描述】：

我有一个小型测试服务，我试图在我的集成测试中模拟结果。服务被注入到页面的构造函数中，并像这样在 ngOnInit 方法中调用。

import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service'

@Component({
  selector: 'app-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
  todos;
  message; 

  constructor(private service: TodoService) {}

  ngOnInit() { 
    this.service.getTodos().subscribe(t => this.todos = t);
  }

我正在尝试创建一个集成测试来确认组件中的代码是否正确编写。该服务返回一个 observable 类型的对象数组，所以我创建了这样的测试。

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientModule],
      declarations: [ TodosComponent ],
      providers: [TodoService]
    })
    .compileComponents();
  }));

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

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

  it('should load todos from the server', () => {
    let svc = TestBed.get(TodoService);

    let todoData = [
      {id: 1, title: 'todo 1'},
      {id: 2, title: 'todo 2'},
      {id: 3, title: 'todo 3'}
  ];

    spyOn(svc, 'getTodos').and.returnValues(todoData);

    // This statement causes the ngOnInit method to get called
    fixture.detectChanges();

    expect(component.todos.length).toBe(3);
    expect(component.todos).toBe(todoData);
  });
});

当我运行此测试时，我收到以下错误：第一个错误发生两次 - 不知道为什么..

zone.js:3272 Access to XMLHttpRequest at 'ng:///DynamicTestModule/TodosComponent_Host.ngfactory.js' from origin 'http://localhost:9876' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.


TypeError: this.service.getTodos(...).subscribe is not a function
    at TodosComponent../src/app/2-todos/todos.component.ts.TodosComponent.ngOnInit (_karma_webpack_/webpack:/src/app/2-todos/todos.component.ts:16)
    at checkAndUpdateDirectiveInline (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22099)
    at checkAndUpdateNodeInline (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23363)
    at checkAndUpdateNode (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23325)
    at debugCheckAndUpdateNode (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23959)
    at debugCheckDirectivesFn (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23919)
    at Object.eval [as updateDirectives] (VM723 TodosComponent_Host.ngfactory.js:9)
    at Object.debugUpdateDirectives [as updateDirectives] (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23911)
    at checkAndUpdateView (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23307)
    at callWithDebugContext (_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:24177)

服务方法长这样……

 getTodos() {
    let todoData = [
      {id: 1, title: 'todo 1'},
      {id: 2, title: 'todo 2'},
      {id: 3, title: 'todo 3'}
    ];
    return Observable.create(todoData);

  }

我正在学习教程，他们的测试运行正常。他们使用的是旧版本的 Angular - 我相信是 4。 My Karma、Angular 是最新的稳定版本。如果有人可以帮助解释如何解决这个问题，我将永远感激不尽。

【问题讨论】：

发布getTodos方法
已添加到问题中...

标签： angular testing karma-jasmine integration

【解决方案1】：

哇，有时候看东西太久会忘记自己在做什么。问题出在 spyOn 调用上——它没有返回一个 observable，我认为它是。将代码更改为此解决了我的问题。

    spyOn(svc, 'getTodos').and.returnValue(
      of(todoData)
    );

【讨论】：