如何在 Angular 中模拟 AWS Amplify 库？答案

【问题标题】：How to mock AWS Amplify library in Angular?如何在 Angular 中模拟 AWS Amplify 库？
【发布时间】：2020-03-31 13:42:32
【问题描述】：

当我使用 Karma 运行测试套件时，我收到了一个似乎来自 AWS Amplify 的错误。

AuthEffects
    login
      √ should not dispatch any action
      √ should call setItem on LocalStorageService
Chrome 78.0.3904 (Windows 10.0.0) ERROR
  An error was thrown in afterAll
  Uncaught TypeError: Cannot read property 'clientMetadata' of undefined thrown

我认为这个错误是从上次启动的测试中抛出的：AuthEffects

在我的 AuthEffects 中，我必须这样做才能使 AWS 放大工作

import { Auth } from 'aws-amplify';
//...

const promise = Auth.signIn(username, password);

我不明白如何模拟此 API 对 Cognito 的访问。通常，我通过依赖注入向构造函数提供 Mock 服务，以避免与 API 的真正连接。这里直接导入到组件中。

规格文件：

describe('login', () => {
    it('should not dispatch any action', () => {
      const actions = new Actions(EMPTY);
      const effect = new AuthEffects(
      //...
      );
      const metadata = getEffectsMetadata(effect);

      expect(metadata.login).toEqual({ dispatch: false });
    });

    it('should call setItem on LocalStorageService', () => {
      const loginAction = new ActionAuthLogin('test', 'Test1234!');
      const source = cold('a', { a: loginAction });
      const actions = new Actions(source);
      const effect = new AuthEffects(
      //...
      );

      effect.login.subscribe(() => {
        expect(localStorageService.setItem).toHaveBeenCalledWith(AUTH_KEY, {
          isAuthenticated: true
        });
      });
    });

    afterAll(() => {
      TestBed.resetTestingModule();
    });
  });

有没有办法从规范文件中覆盖这个导入？

【问题讨论】：

标签： angular typescript unit-testing mocking aws-amplify

【解决方案1】：

我设法摆脱了错误。

您需要在测试文件中导入 Auth 以及以下解决方案中将需要的类型。

import { Auth } from 'aws-amplify';
import { ClientMetaData, SignInOpts } from '@aws-amplify/auth/src/types/Auth';

现在，重新定义 Auth 的 signIn 方法即可解决问题：

describe('AuthEffects', () => {
//...
Auth.signIn = (
    usernameOrSignInOpts: string | SignInOpts,
    pw?: string,
    clientMetadata: ClientMetaData = this._config.clientMetadata
  ) => of({}).toPromise();
//...

您需要按照方法的签名来覆盖它。

public signIn(
        usernameOrSignInOpts: string | SignInOpts,
        pw?: string,
        clientMetadata: ClientMetaData = this._config.clientMetadata
    ): Promise<CognitoUser | any>

我不知道这是否是执行它的最佳（更清洁）解决方案，但我设法摆脱了错误并控制了 Auth 实例的行为。

【讨论】：

【解决方案2】：

与其直接将其导入您的服务或效果类，不如将其导入您的模块并注入。假设您有一个 AuthService 服务类来处理 AWS Amplify 的身份验证。

在你对应的模块中：

import Auth, { AuthClass } from '@aws-amplify/auth';
...
providers: [
    AuthService,
    { provide: AuthClass, useValue: Auth }
  ]

在您的组件或服务中，只需像任何其他依赖项一样注入它：

constructor(
    private auth: AuthClass
    ) {
       auth.signIn('abc', 'def')
    }

最后，在你的 spec 文件中模拟它并使用 Spy：

describe('AuthService', () => {
  let service: AuthService;
  let authSpy: jasmine.SpyObj<AuthClass>
  let authSpyObj = {
    signIn: () => new Promise<any>(() => true),
    signOut: () => new Promise<any>(() => true),
    signUp: () => new Promise<any>(() => true),
    confirmSignUp: () => new Promise<any>(() => true),
    resendSignUp: () => new Promise<any>(() => true),
  }

  beforeEach(() => {
    const spyAuth = jasmine.createSpyObj('auth', authSpyObj);

    TestBed.configureTestingModule({
      providers: [
        AuthService,
        { provide: AuthClass, useValue: spyAuth },
      ]
    })

    service = TestBed.inject(AuthService)
    authSpy = TestBed.inject(AuthClass) as jasmine.SpyObj<AuthClass>    
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should have called signIn', () => {
    service.signIn('a@b.c', '12345678')
    expect(authSpy.signIn).toHaveBeenCalled()
  })
});

除了确认您的服务/组件正在调用期望的 Auth 函数外，该测试文件现在并没有做太多的事情，但这应该能让您起步。享受吧。

【讨论】：

【解决方案3】：

你可以这样：

// service with Auth
import { Injectable } from '@angular/core';
import Auth, { CognitoUser } from '@aws-amplify/auth';
...

private getProfile(): void {
   return from(Auth.currentUserInfo());
}


// service.spec.ts
it('should set user and user profile', async () => {
   const userProfile = { profile: 'userProfile' } as any;
    
   Auth.currentUserInfo = jasmine.createSpy().and.callFake(() => Promise.resolve(userProfile));
       
   const resp = await service.getProfile.toPromise();
   expect(resp).toEqual(userProfile)
      
 });

【讨论】：