問題 mocking 在單元測試中釋放客戶端 SDK

Question

我在 Angular webapp 中使用 Unleash SDK 客戶端在應用程序中具有功能切換功能。

我添加了一項服務並使用了“unleash-proxy-client”中的 UnleashClient； 在為我添加的服務編寫單元測試時，我必須模擬 UnleashClient 並做到這一點。 但是諸如“on”之類的事件沒有得到解決。 有誰知道如何處理這個？

錯誤：

this.unleash.on 不是 function

代碼：

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會讓您訪問它。

要解決此問題，我會將new UnleashClient移至單獨的 function。

像這樣：

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