0

I am migrating an AngularJS app to Angular (1.6 to 4.0), and I'm struggling with dynamically created components in my tests. For example I have an integration test that creates an AngularJS component with a button that pops up an Angular modal (using ngx-bootstrap) that is created via ComponentFactory.create. The issue is that change detection does not trigger inside the modal within my tests. It works in the app itself. And other Angular 2 components work inside tests, but not those created dynamically.

Do I have something wrong in my setup to cause the dynamically created components to be hooked into the wrong zone, maybe? I've tried every combination of changes I can think of to no avail.

I worked up a plunkr with some simple embedded angular 2 components here.

To test it I find myself having to always trigger change detection manually here. Open app/ng1/parent.spec.ts where you can find the doChangeDetection function that should not be necessary.

Note that I'm using UpgradeAdapter instead of downgradeComponent because this github issue indicates that non-dynamically created components would have broken change detection.

Eric Simonton
  • 5,702
  • 2
  • 37
  • 54
  • Can you provide plunker to reproduce it? – yurzui May 17 '17 at 10:25
  • @yurzui It took a fair amount of work to create a little plunkr, but I finally succeeded. See the 2 links in my edits above. Thanks! – Eric Simonton May 19 '17 at 17:55
  • As far i know we always run `detectChanges()` in your angular tests. – yurzui May 19 '17 at 19:14
  • I'm not using `componentRef.detectChanges()`, if that's what you mean. Before introducing Angular 4 no manual triggering of change detection was needed at all for a test like this. And the fact that it requires different commands to trigger change detection depending on whether the same component was created statically vs dynamically seems very fishy. – Eric Simonton May 20 '17 at 14:00

0 Answers0