angular - 为具有 NgZone 依赖项的组件运行 jasmine 测试

Question

我将如何继续为以下组件运行 jasmine 测试：

@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 中似乎不可用：

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

问候

score 13 · Accepted Answer

如果您的问题是runOutsideAngular因为您不能使用asyncor fakeAsync，那么您唯一需要模拟的是该函数，并且以下内容运行良好：

const ngZone = TestBed.get(NgZone);

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

score 8 · Accepted Answer

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

score 6 · Accepted Answer

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

鉴于模拟 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 },
  ]

score 4 · Accepted Answer

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

测试床配置，

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            // Specify imports
        ],
        providers: [
            { provide: DependentService, useValue: dependentServiceSpy }
            // Do not provide NgZone here
        ]
    });
    guard = TestBed.inject(ARouteGuard);
});

请注意，我没有NgZone在提供程序数组中指定。

这就是我的测试的样子，

it('should be created', () => {
    let zone = TestBed.get(NgZone);
    spyOn(zone, 'run').and.callFake((fn: Function) => fn());
    
    // Implement your test and expectations

    expect(guard).toBeTruthy();
});

我不得不从providers: [ ]数组中删除 NgZone 或其对应的模拟对象，因为它引入了其他错误，例如“无法解析 NgZone 的所有参数”和“无法读取未定义的属性订阅”。

score 0 · Accepted Answer

我们有同样的问题，完全一样。最后，我们保留了 ngZone，并确保我们测试了它使用的回调。

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

对于使用 ngZone 的代码，例如

zone.run(someFunction)

我们确保someFunction单元测试具有良好的测试覆盖率。

angular - 为具有 NgZone 依赖项的组件运行 jasmine 测试

5 回答 5

Related

Reference