Angular Jasmine 间谍没有被调用

Question

我正在按照Angular官方教程测试一个调用异步服务函数的组件：https://angular.io/guide/testing#component-with-async-service

创建间谍：

const gardenSpy = jasmine.createSpyObj('GardenService', ['getGardens', 'createGarden']);
gardenSpy.getGardens.and.returnValue(of(testGardens));
...
gardenServiceSpy = TestBed.get(GardenService);

将 TestBed 配置为使用我的间谍而不是实际服务：

TestBed.configureTestingModule({
  declarations: [ MyGardensComponent ],
  providers: [
    { provide: GardenService, useValue: gardenSpy }
  ],
  imports: [FormsModule, HttpClientTestingModule]
})
.compileComponents();

那么，失败的单元测试：

it('should load the gardens', () => {
  fixture.detectChanges();
  component.getGardens();

  expect(gardenServiceSpy.getGardens.calls.any()).toBe(true, 'getGardens called');
});

从这里的覆盖率报告可以看出，subscribe 方法永远不会执行，并且 spy 断言失败。

coverage report

根据 Angular 教程，这个方法应该可以工作并且允许我同步返回 observable。手动调用 spy 方法可以正常工作并正确返回，因此我认为注入 spy 服务存在问题，而不是创建 spy 本身。任何帮助将不胜感激！

如果你需要查看整个文件，我做了一个 plunkerhere（实际上并没有运行，只是为了查看文件）

Answer 1

感谢您在 Plunker 中提供所有代码。实际上，我将它移到了Stackblitz，这样我就可以准确地看到您所看到的内容并观看它运行。我不得不对服务进行存根，但这无关紧要，因为无论如何你都要用间谍代替它。

我通过在@Component 部分的my-gardens.component.ts 文件中注释掉providers 行来实现它：

@Component({
  selector: 'app-my-gardens',
  templateUrl: './my-gardens.component.html',
  styleUrls: ['./my-gardens.component.css'],
  // providers: [GardenService, NgbModal]
})

这实际上是用原始服务覆盖了间谍。您是否有理由将提供者行放在此处而不是 module.ts 中？

正如您在 Stackblitz 中看到的，测试现在通过并且正在调用订阅代码（检查控制台日志）。