0

我在 Angular webapp 中使用 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();
  });
4

1 回答 1

0

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

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

UnleashClientSpy = spyOn(UnleashClientModule, 'UnleashClient')

检查此答案以获取更多详细信息。

我也看到你没有包含UnleashService在你的providers数组中，我认为你应该。您还应该从中删除HttpTestingController，providers因为HttpClientTestingModule您可以访问它。

为了解决这个问题，我会将 移动new 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();
  });
于 2022-03-04T14:05:07.873 回答