使用 SpyOn 文档执行角度单元测试时出错

Question

我正在尝试对组件进行单元测试，我模拟了数据并期望得到一些结果，但出现错误，下面是我的单元测试。

it('should call getData method ', () => {
const usageService = TestBed.get(UsageService);
component.slug = 'slugName';
spyOn(document, 'getElementById').and.returnValue("slugName");
component.ngOnInit();
expect(usageService.getData).toHaveBeenCalled();
});

在上面，我在第spyOn(document, 'getElementById').and.returnValue("slugName");行收到错误

错误是：

类型为"slugName"的参数不可分配给类型的参数 "HTMLElement"。

将茉莉花版本从2.8 升级到 3.5.10后会出现此问题

我不知道这段代码出了什么问题，为什么以前它工作正常，现在升级后它不起作用。

请帮助我解决问题。

Answer 1

您收到一个有效的自描述性错误，getElementById 的返回类型HTMLElement，并且您返回string。

如果您可以粘贴您正在尝试测试的ngOnInit代码，我们将能够更好地为您提供帮助。

不过，您可以从下面的代码中获取帮助。

it('should call getData method ', () => {
const usageService = TestBed.get(UsageService);
spyOn(usageService, 'getData'); // toHaveBeenCalled works on mocked method
component.slug = 'slugName';
const htmlEl = document.createElement('div'); // you can create the element which is there in your component.
spyOn(document, 'getElementById').and.returnValue(htmlEl); // return created element on the previous line.
component.ngOnInit();
expect(usageService.getData).toHaveBeenCalled();
});

Answer 2

你想在上面的代码中测试什么？slugName，或者已调用服务？

无论哪种方式，都有更好的方法可以做到这一点。

测试是否将 slugName 设置为 id

尝试使用你的夹具来获取 html 对象：

即componentFixture.debugElement.query('#slugName').nativeElement.id

监视您的服务以查看是否已订阅"getData"组件。

TestBed.inject(UsageService)

我相信 get 已被弃用。