如何在 Angular 6 中用间谍对象替换组件范围的服务？

Question

目前我（上下文：我是 Angular 初学者）在一个更大的项目中开发一个简单的登录屏幕 Angular 6 也使用茉莉花测试。对于与后端的通信，我们使用连接到不同端点的 websockets。出于这个原因，我必须为两个服务定义组件范围的提供程序：

// user-password-form.component.ts
@Component({
  selector: 'app-user-password-form',
  templateUrl: './user-password-form.component.html',
  styleUrls: ['./user-password-form.component.scss'],
  providers: [WebSocketService, AuthenticationService]
})

现在我想通过模拟使用 WebSocketService 的 AuthenticationService 来测试 user-password-form.component.ts 的一些功能。 WebSocketService 也被其他不同的服务使用。 user-password-form.component 仅使用 AuthenticationService，但由于分层 DI，我还必须在组件范围内提供 WebSocketService 才能接收自己的实例。

现在，对于 jasmine，我想通过定义以下规范来测试组件的功能

const authServiceSpy
    = jasmine.createSpyObj('AuthenticationService', ['authenticate']);


  beforeEach(() => {

    TestBed.configureTestingModule({
      declarations: [UserPasswordFormComponent],
      providers: [LoggerService, FormBuilder,
        {provide: AuthenticationService, useValue: authServiceSpy}
      ],
      imports: [RouterModule],
      schemas: [NO_ERRORS_SCHEMA]
    })

但是，在这种情况下，不会注入间谍而不是真正的 authenticationService。因此，我无法运行以下行：

expect(authService.authenticate.calls.mostRecent().args[0]).toEqual(authObj);

如何强制注入机制使用 spyObject 而不是真正的 AuthenticationService 来进行单元测试？

Answer 1

你的方法行不通，因为你在TestBed级别替换了AuthService，服务是在组件级别提供的。

您可以完全用 TestBed.overrideProvider 替换提供商。

试试这个：

TestBed.overrideProvider(AuthenticationService, { useValue: authServiceSpy });

此外，确保在覆盖提供程序后调用 TestBed.compileComponents()。

如何在 Angular 6 中用间谍对象替换组件范围的服务？

How to replace component-scoped service with spy object in Angular 6?

scope

dependency-injection

jasmine

angular-services

angular