Angular 5：单元测试 getter 和 setter答案

【问题标题】：Angular 5: Unit testing getters and settersAngular 5：单元测试 getter 和 setter
【发布时间】：2017-12-07 15:13:23
【问题描述】：

我无法使用 Karma 在 Angular 5 中测试 getter 和 setter 函数。关于我哪里出错的任何想法？

值被设置，然后测试在调用 getter 函数之前等待 setter 函数解析的一小段时间。代码如下：

service.ts

set header(h: string) {
    this.zone.run(() => {
        this._header = h;
    });
}

get header(): string {
    return this._header;
}

test.ts

before(() => {
    service = new Service()
});

it('updates header', (done) => {
    const header = 'test header';
    service.header = header;

    // Give header time to update
    return Promise.delay(200)
    .then(() => {
         expect(service.header).to.equal(header);
    })
});

我希望断言能够成功解决，但是我得到一个错误

AssertionError: 预期未定义等于“测试标头”

【问题讨论】：

您是否找到了有关如何正确地对 Angular 中的 setter/getter 进行单元测试的解决方案？
也许是这样？ const spy = spyOnProperty(service, 'header', 'get').andReturn('test header'); expect(service.header).toBe('test header'); expect(spy).toHaveBeenCalled();
尝试在分配service.header = header 后添加this.cd.detectChanges()。其中cd 是ChangeDetectionRef 的一个实例

标签： angular unit-testing karma-runner

【解决方案1】：

您是否有理由将您的设置内容包装到一个区域中？

对于 99% 的异步活动，我喜欢 Angular 的“fakeAsync”和“tick”方法。

it('should update header', fakeAsync( ()=>{
  const header = 'test header';
  service.header = header;
  tick() // <= Will wait for for all microtransactions to finish
  expect(service.header).to.equal(header);
}))

有很多关于 JavaScript 中的宏和微事务的好文章。简短的版本是，可观察发射的承诺和订阅是微交易。

“setTimeout”是宏事务的示例。

fakeAsync-UnitTest 中“tick()”的最佳之处在于，您不必建议代码需要等待多长时间。 “tick()” 只是排空微事务队列，因此所有等待的微事务都将在测试继续之前得到解决。

您也可以在等待 Angular 组件的 changeDetection 时使用它们。 :-)

希望对你有所帮助。

热烈的问候

【讨论】：