在单元测试中模拟 Unleash 客户端 SDK 时出现问题

Question

我在 Angular web 应用程序中使用 Unleash SDK 客户端，以便在应用程序中具有功能切换功能。

我添加了一项服务并使用了“unleash-proxy-client”中的 UnleashClient； 在为我添加的服务编写单元测试时，我必须模拟 UnleashClient，并做到了这一点。但诸如“on”之类的事件并未得到解决。有谁知道如何处理这个问题？

错误：

this.unleash.on 不是函数

代码：

import {InMemoryStorageProvider, UnleashClient} from 'unleash-proxy-client';
   import {Injectable, OnInit} from '@angular/core';
   import fetchDefaults from 'fetch-defaults';

   @Injectable({
     providedIn: 'root'
   })
   export class UnleashService {
      public static readonly CLIENT_KEY = <client-auth-key>
      public fetchCustomHeaders: any;
      public unleash: UnleashClient;
      private unleashReady: boolean;

      constructor() {
      }

  public initiateUnleashClient() {
    this.fetchCustomHeaders = fetchDefaults(fetch, {
      headers: <added custom headers>
    });
    this.unleash = new UnleashClient({
      url: urlEnums.unleashProxy,
      clientKey: UnleashService.CLIENT_KEY,
      appName: 'my-webapp',
      fetch: this.fetchCustomHeaders,
      environment: 'development',
      storageProvider: new InMemoryStorageProvider()
    });
    this.unleash.on('ready', () => {
      this.unleashReady = true;
    });

  }

  public async isFeatureToggleEnabled(ftName: string): Promise<any> {
    this.initiateUnleashClient();
    await this.unleash.start();
    let isEnabled;
      if (this.unleashReady && this.unleash.isEnabled(ftName)) {
        isEnabled = this.unleash.isEnabled(ftName);
      } else {
        isEnabled = false;
      }
    return Promise.resolve(isEnabled);
  }
}
   

规格：

import * as UnleashClientModule from 'unleash-proxy-client';
 beforeEach(waitForAsync( () => {
    TestBed.configureTestingModule({
      imports: [
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: WebpackTranslateLoader
          }
        }),
        HttpClientTestingModule
      ],
      providers: [
        ApiHelperService,
        TranslateService,
        HttpTestingController,
      ]
    });
    apiService = TestBed.inject(ApiService);
    unleashService = TestBed.inject(UnleashService);
    UnleashClientSpy = spyOn(UnleashClientModule, 'UnleashClient')
  }));
  it('should generate the custom headers correctly and initialise the unleash client', () => {
    unleashService.initiateUnleashClient();
    // expect(events.includes('ready'));
    expect(UnleashClientSpy.on).toHaveBeenCalledWith();
  });

Answer 1

不幸的是，随着 Angular 和 TypeScript 的进步，我们不能再像这样 spyOn 导入：

import * as UnleashClientModule from 'unleash-proxy-client';

UnleashClientSpy = spyOn(UnleashClientModule, 'UnleashClient')

检查 这个答案了解更多详细信息。

我还发现您没有在 providers 数组中包含 UnleashService ，我认为您应该这样做。您还应该从 providers 中删除 HttpTestingController，因为 HttpClientTestingModule 将使您能够访问它。

为了解决这个问题，我将新的 UnleashClient 移动到一个单独的函数中。

像这样的事情：

public initiateUnleashClient() {
    this.fetchCustomHeaders = fetchDefaults(fetch, {
      headers: <added custom headers>
    });
    this.unleash = this.createUnleashClient();
    this.unleash.on('ready', () => {
      this.unleashReady = true;
    });

  }

 public createUnleashClient() {
   return new UnleashClient({
      url: urlEnums.unleashProxy,
      clientKey: UnleashService.CLIENT_KEY,
      appName: 'my-webapp',
      fetch: this.fetchCustomHeaders,
      environment: 'development',
      storageProvider: new InMemoryStorageProvider()
    });
 }

然后，在您的单元测试中对 createUnleashClient 进行监视。

it('should generate the custom headers correctly and initialise the unleash client', () => {
    const onSpy = jasmine.createSpy('onSpy');
    spyOn(service, 'createUnleashClient').and.returnValue({ on: onSpy });
    unleashService.initiateUnleashClient();
    // expect(events.includes('ready'));
    expect(onSpy).toHaveBeenCalled();
  });