测试 Angular 组件时未定义 NgZone

Question

我正在 Angular 中开发一个日期范围选择器组件，并且在测试输入值是否错误时遇到了困难。

我的 ngOnInit() 执行 check for min/max date values。

当我尝试写test for this case

茉莉花归来：

预期函数会抛出 RangeError，但它会抛出 TypeError: Cannot 读取未定义的属性“ngZone”。

研究 S.O.帖子，导致我创建了一个mock NgZone class 并在TestBed 中提供它，这只会导致更多问题，例如“订阅未定义”。

我认为这可能是由 EventEmitter 引起的，但我尝试将其删除，但我收到了相同的错误。

首先，如何解决 NgZone 错误？有几个 S.O.关于这个主题的帖子，但我似乎做得不够。

其次，如果传入错误的值，我如何正确测试我的ngOnInit() 的行为是否符合预期？

更新

即使我已经隔离了我的输入验证函数，我仍然无法检查该函数是否引发了错误。相反，我必须检查detectChanges()，这是调用其他所有内容的函数：

expect(() => fixture.detectChanges()).toThrow();

Answer 1

NgZone 服务用于访问 Api 以支持在 ZoneJS 空间内外运行代码。但是，如果您发现在测试中使用它很有用，您可以使用以下方法创建服务实例：

let ngService = Testbed.get(NgZone)

如果您的目的是测试组件的生命周期 ngOnInit()，Angular 已在 Testbed API 中为此提供了工具，您可以使用 ComponentFixture 在其中控制生成更改检测以触发 ngOnInit，如下所示：

describe('tests', () => {

  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [ ],
        declarations: [ MyComponent ],
    }).compileComponents();
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

  }));


  it('simple test', async(() => {
    fixture.detectChanges(); // triggers cd and passes through component lifecycle ngOnInit

  }));

});