Angular Accept.js 破坏单元测试“参考错误：未定义接受”

Question

我有一个使用 Authorize.nets Accept.js SDK 完成付款的角度组件。除非用户在付款屏幕上，否则我不想加载 Accept.js 脚本，因此我通过在组件中调用 onInit 的方法将脚本添加到页面。

some.component.ts

ngOnInit {
  this.addAcceptJsScript();
}

private addAcceptJsScript(): void {
  const element = document.createElement('script');
  element.src = environment.acceptJsUrl;
  element.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(element);
}

some.service.ts

declare var Accept: any;

@Injectable()
export class SomeService {
  private sendPaymentToAuthNet(paymentPayload): void {
    Accept.dispatchData(paymentPayload, this.handleAuthNetResponse);
  }
}

这对用户来说很好用，因为脚本在 DOM 中加载并且在组件调用使用 Accept API 的服务时可用

但是我在使用 API 的服务中的单元测试没有任何参考 Accept 是什么所以当它尝试测试我调用 Accept.dispatchData(...) 的代码行时，测试错误说 '参考错误：未定义接受".

我尝试了各种模拟 Accept 的方法，但没有一种方法可用于测试。如何将我的模拟 Accept 注入到服务中，以便在代码尝试使用它时声明它？

Answer 1

测试问题通常表明应用程序设计存在缺陷。

document 最好是提供者，因为它应该在某些时候被模拟以避免将脚本元素添加到真实的 DOM。已经有DOCUMENT 提供程序可以注入到组件中，而不是document 全局。并在测试台上被嘲笑：

{
  provide: DOCUMENT,
  useValue: jasmine.createSpyObj('document', ['createElement', 'getElementsByTagName'])
}

createElement 和 getElementsByTagName Jasmine 间谍应配置为返回正确的模拟对象。

出于可测试性的原因，Accept 也应该成为提供者。该值可以分配给window['Accept']，如this answer所示，并在测试台中进行模拟。

Answer 2

我只需要在我的 karma.config 文件对象中包含 Accept.js CDN 的路径

files: [
  { pattern: './src/test.ts', watched: false },
  { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true },
  { pattern: 'https://jstest.authorize.net/v1/Accept.js', nonull: true }
]