0

我有一个 Angular 应用程序，其唯一目的是构建 @angular/elements（没有 index.html、没有 app.component 等）。

这些元素在 .NET Mvc 应用程序中使用，它提供了两种我试图在单元测试中模拟的东西：

1 - 外部库

例如，JQuery、lodash 等。

2 - 客户端框架“foo”

在包含我的 Web 元素的 .NET MVC 视图中，MVC 应用程序创建了一个名为 foo 的对象。该对象不是 ES6 模块。它是用漂亮的 foo = new Foo({ someOptionsGeneratedFromServerSide}); 手动创建的。

这两种情况都在我的网络元素中使用。例如，一个组件将使用函数 foo.displayAlert('With a message')。我发现使我的角度应用程序遵守的唯一解决方案是添加以下内容：

// tslint:disable-next-line: max-line-length no-reference
/// <reference path='path/to/the/definition.d.ts' />

我知道这是非常不正统的。

Angular 应用程序运行良好，直到我尝试进行一些单元测试。注意：它不能单独工作（ng serve 如预期的那样无用）。

一个例子

it('should render title', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('.content span').textContent).toContain('ng-jest app is running!');
});

对于这个组件/钩子：

ngOnInit() {
  foo.displayAlert('With a message');
}

将崩溃并显示以下（非常预期的）消息：

AppComponent › should render title
ReferenceError: foo is not defined

我试图在测试之前明确地模拟对象：

  let foo: any;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
    foo = {
      displayAlert: Function
    };
  }));

到目前为止没有运气。我在 x.spect.ts 中做了很多关于这个对象的嘲笑尝试，但没有结果。

我尝试使用 index.html 创建另一个 Angular 应用程序，其中包含所有资源，例如 MVC 视图，但它失败了。

最后的笔记

对于像 JQuery / lodash 这样的第 3 方，我不希望将它们添加到我的 Angular 项目中，例如： npm i -D lodash 因为我不希望它们包含在我的 vendor.js 文件中。这些库由 .Net Mvc 应用程序提供，这很好。这也适用于 foo 对象。最后，我尝试使用 (Jest) 和不使用 (Karma) 无头浏览器进行测试。

任何帮助将非常感激！

编辑 27/03/2020

请救救我！

编辑 28/03/2020

试过 jasmine.createSpyObject & spyOn，也没有运气:(

4

1 回答 1

2

复杂的设置，你不会让自己变得容易。

但是，您似乎只需要伪装foo为全局变量，因为全局范围是您的组件期望变量所在的位置。当您let foo在 ECMAScript 模块中声明时，您正在创建一个范围为该文件的变量，您的组件无法访问该变量。

beforeEach(() => {
  window.foo = {
    displayAlert: () => {},
  };
});

这可能会导致您与 TypeScript 搏斗。快速修复是这个

beforeEach(() => {
  (window as any).foo = {
    displayAlert: () => {},
  };
});
于 2020-03-28T21:50:46.900 回答