Angular2 and tests failing on detectChanges

I was working on an angular2 app at work today and stumbled on an error while testing. When I called

fixture.detectChanges();

it was failing with:

detectChangesInRecords
runDetectChanges
_detectChangesInViewChildren
runDetectChanges
detectChanges
detectChanges
invoke@G:/Presentation/ShopWebsite/ShopWebsite/node_modules/angular2/bundles/angular2-polyfills.js:390:34
run@G:/Presentation/ShopWebsite/ShopWebsite/node_modules/angular2/bundles/angular2-polyfills.js:283:50

After two hours of debugging and googling it turned out that I had used component variable in normal style attribute:

<td id="sliderContainer" style="padding: 0 %;">

It was working completely fine in the browser, but failing in tests. The correct method is using [ngStyle] attribute:

<td id="sliderContainer" [ngStyle]="{'padding': '0 ' + padding + '%'}">

Now all the tests are passing fine :)

Michal Dymel - DevBlog

Angular2 and tests failing on detectChanges

Comments

About Michał Dymel