Angular 5 : Unit testing getters and setters

Question

我无法使用 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: expected undefined to equal 'test header'

Answer 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 中的宏交易和微交易的好文章。简短的版本是，可观察发射的 promise 和订阅是微交易。

“setTimeout”是一个宏事务的例子。

fakeAsync-UnitTest 中“tick()”的最佳之处在于，您不必提出代码需要等待多长时间的建议。 "tick()"只是清空微交易队列，以便在测试继续之前解决所有等待的微交易。

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

希望对您有所帮助。

亲切的问候