测试Angular组件时未定义NgZone

时间:2018-11-14 02:03:05

标签: angular unit-testing

我正在用Angular开发日期范围选择器组件,并且很难测试输入值是否错误。

我的ngOnInit()做一个check for min/max date values

当我尝试写test for this case

茉莉花回来了

  

期望的函数引发RangeError,但引发TypeError:无法   读取未定义的属性“ ngZone”。

研究S.O.帖子,导致我创建了mock NgZone class并在TestBed中提供了该内容,这只会导致出现更多问题,例如“订阅未定义”。

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

首先,如何解决NgZone错误?有一些S.O.有关该主题的文章,但我似乎不多。

第二,如果传入错误值,如何正确测试ngOnInit()的行为是否符合预期?

更新

即使通过隔离输入验证功能,我仍然无法检查该功能是否引发错误。相反,我不得不检查detectChanges(),这是调用其他所有功能的函数:

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

1 个答案:

答案 0 :(得分:2)

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

let ngService = Testbed.get(NgZone)

如果您打算测试组件的生命周期ngOnInit(),则Angular通过使用ComponentFixture在Testbed API中为此提供了工具,您可以控制生成变更检测以触发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

  }));

});