Angular测试中的SpyOn [英] SpyOn in Angular testing

问题描述

首先，对不起.我对Angular真的很陌生，并且不确定我是否会问一个好问题，更不用说提供一些小的工作示例了.

First, I apologize. I'm really new to Angular and am not sure I know enough to ask a good question, let alone provide some small working examples.

我正在尝试在单元测试中使用spyOn，但运气不佳.

I'm trying to use spyOn in a unit test, and not having much luck.

基本上，我的单​​元测试在组件上调用了一个方法，该方法调用了service1，又调用了另一个service2.

Basically, my unit test calls a method on component that calls a service1, that calls another service2.

当我尝试对service1进行spyOn时，它不使用我提供的模拟值.它会调用真实的" ServiceProvidersHTTPService.getAllUsers，并使用AppConfigService而不是MockAppConfigService.

When I try to spyOn on service1, it doesn't use the mock value that I provide. It calls the "real" ServiceProvidersHTTPService.getAllUsers and uses AppConfigService instead of MockAppConfigService.

我将从复制测试开始.

describe('ProjectAnalystComponent', () => {
  let component: ProjectAnalystComponent;
let fixture: ComponentFixture<ProjectAnalystComponent>;
let service: ServiceProvidersHTTPService ;

  beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [HttpClientModule, RouterTestingModule],
    declarations: [ ProjectAnalystComponent ],
  providers: 
  [
    ServiceProvidersHTTPService, 
    CurrentCreateProjectService, 
    NotificationService, 
    MessageService,
    ProjectLeadAnalystHTTPService,
      ExceptionService,
      {provide: AppConfigService, useClass: MockAppConfigService }

  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
  }));

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

it('should create', () => {
    console.log("######### Did this run");
    let service = fixture.debugElement.injector.get(ServiceProvidersHTTPService);
    spyOn(service, 'getAllUsers').and.returnValue('{}');

    expect(component).toBeTruthy();
  });
});

推荐答案

TL; DR 模拟您的服务.

在您的测试台上，您提供实际的服务:

In your testbed, you provide the actual service :

providers:[ServiceProvidersHTTPService, ...

这意味着您实际上调用了服务的真实方法.

如果您嘲笑您的服务，就像您在那所做的那样:

If you mock your service, like you did there :

{provide: AppConfigService, useClass: MockAppConfigService }

然后调用在模拟中声明的随机函数.

模拟的另一个优点是，您摆脱了依赖关系的依赖关系.

Another advantage of mocking, you get rid of the dependencies of your dependencies.

正如您所说，您的服务调用了另一个服务:如果您模拟第一个服务，您不必将该服务的依赖项添加到测试平台中.

As you said, your service calls another service : if you mock your first service, you don't have to add the dependencies of this service into your testbed.

所以，他们走了:

const mock = {
  provide: ServiceProvidersHTTPService,
  useValue: {
    getAllUsers: () => null
  }
};

现在在您的测试台中:

providers: [mock, ...

在 useValue 中，您必须放置实际服务的所有变量和所有功能，并对其进行模拟.

在这种情况下，您的函数 getAllUsers 不会进行HTTP调用，只会返回null.您可以使其返回所需的任何内容(优良作法是返回与应返回的值类型相同的值).

In this case, instead of making HTTP calls, your function getAllUsers will simply return null. You can make it return anything you want (the good practice is to return a value that is the same type of the value that should be returned).

最后一条建议:单元测试应该仅测试实际功能的功能和方法(此处为 ProjectAnalystComponent ).您不应该在这里测试服务是否调用了其他服务:您应该在服务的单元测试中测试 .

Last piece of advice : your unit tests should test only the functions and methods of your actual feature (here being ProjectAnalystComponent). You should not test if your service call the other service here : you should test that in the unit testing of your service.

如果您有任何疑问，请随时提问！

If you have any questions, feel free to ask !

这篇关于Angular测试中的SpyOn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！