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

正如您在此处的覆盖率报告所看到的那样，从不执行订阅方法，并且间谍声明失败。

coverage report

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

如果您需要查看整个文件，我做了个here塞子（实际上并没有运行，只是为了查看文件）

Answer 1

感谢您在Plunker中提供所有代码。我实际上将其移至Stackblitz，因此我可以准确看到您所看到的内容并观看它的运行。我不得不取消该服务，但这是无关紧要的，因为无论如何您都将其替换为间谍。

通过在@Component部分的my-gardens.component.ts文件中注释掉提供程序行来使它起作用：

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

这实际上是用原始服务取代了间谍。您将提供程序行放在那里而不是在module.ts中是有原因的吗？

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

角茉莉间谍没有被称为

1 个答案: