对具有NgZone依赖关系的组件运行jasmine测试

Question

我如何继续为以下组件运行茉莉花测试：

@Component({
  moduleId: module.id,
  selector: "testComp",
  template: "<div>{{value}}</div>",
})
export class TestComp {
  public value: string = "This is me";
  constructor(public zone: NgZone) {
    this.zone.run(() => console.log("zone is here"));
  }
}

以下因无法解析NgZone的所有参数而失败：

describe("test", () => {
    let fixture;
    let component;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [TestComp],
        schemas: [NO_ERRORS_SCHEMA],
        providers: [NgZone]
    }).compileComponents;
}));
beforeEach(() => {
    fixture = TestBed.createComponent(TestComp);
    component = fixture.debugElement.componentInstance;
});
it("should check that the component is created", () => {
    expect(component).toBeTruthy();
});

}）

使用Angular 4.1.3。我找到了MockNgZone类@ https://no-shadow-angular-io.firebaseapp.com/docs/ts/latest/api/core/testing/MockNgZone-class.html。但是对于这个特定版本，@ angular / core / testing似乎不可用：

有人知道我应该怎么做才能测试这个组件吗？

此致

Answer 1

这有点神秘，MockNgZone仍然在源代码中，但已从公共API中移除。

鉴于mock run（）的简单实现

export class MockNgZone extends NgZone {
  ...
  run(fn: Function): any { return fn(); }

我会用这个让你超越驼峰

const mockNgZone = jasmine.createSpyObj('mockNgZone', ['run', 'runOutsideAngular']);
mockNgZone.run.and.callFake(fn => fn());

TestBed.configureTestingModule({
  ...
  providers: [
    { provide: NgZone, useValue: mockNgZone },
  ]

Answer 2

在Angular 5.2.4（通过Angular CLI 1.6.8安装）中，模拟已从代码库中删除，因此无需在Jasmine中使用它。只需跳过提供者列表中的NgZone声明。

Answer 3

如果您的问题与runOutsideAngular有关，因为您无法使用async或fakeAsync，那么您唯一需要模拟的是该功能以及以下功能：

const ngZone = TestBed.get(NgZone);

spyOn(ngZone, 'runOutsideAngular').and.callFake((fn: Function) => fn());

Answer 4

我们确实遇到了同样的问题。 最后我们按原样保留ngZone，并确保测试它使用的回调。

beforeEach(async(() => {
TestBed.configureTestingModule({
    ...
    providers: [NgZone]
  })
}));

对于使用ngZone的代码，例如

zone.run(someFunction)

我们确保通过单元测试获得良好的测试覆盖率someFunction。

Answer 5

我也有类似的要求，这就是我的要求，

TestBed配置

plotly

请注意，我没有在providers数组中指定input$plotType == "Distribution Plot" && input$group == "age"。

这就是我的测试的样子，

Save figure

我不得不从beforeEach(() => { TestBed.configureTestingModule({ imports: [ // Specify imports ], providers: [ { provide: DependentService, useValue: dependentServiceSpy } // Do not provide NgZone here ] }); guard = TestBed.inject(ARouteGuard); }); 数组中删除NgZone或其对应的模拟对象，因为它引入了其他错误，例如“无法解析NgZone的所有参数” 和”无法读取未定义的属性订阅。”