Document how to test hybrid apps that include angular.js components

[jpzwarte]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

After upgrading an angular.js component and then making it available using downgradeComponent from @angular/upgrade/static, my angular.js karma test fails with:

Error: [$injector:unpr] Unknown provider: $$angularLazyModuleRefProvider <- $$angularLazyModuleRef

I'm not using a custom karma config. I'm just using the one generated by the angular-cli.

The upgrade guide at https://angular.io/guide/upgrade does not go into what you need to do to get tests running again when you have a hybrid application. It only covers upgrading the tests to angular. SO and Google are no help in this case.

Expected behavior

It should not fail and the docs should cover this scenario.

Minimal reproduction of the problem with instructions

This is my compatibility module for angular.js which is a dependency for the module i'm loading in my jasmine test (ng.mock.module):

export const compatModule = ng
  .module('compat', [])
  .directive('voPageFooter', downgradeComponent({ component: PageFooterComponent }) as ng.IDirectiveFactory)
  .directive('voPageHeader', downgradeComponent({ component: PageHeaderComponent }) as ng.IDirectiveFactory)
  .factory('ngZone', downgradeInjectable(NgZone));

What is the motivation / use case for changing the behavior?

Environment

Angular version: 6.0.2
Angular.js version: 1.6.9

[gkalpak]

Unfortunately, testing with interdependencies is generally a complex thing in ngUpgrade. You should either completely mock out the parts that come from the other framework (e.g. upgraded/downgraded components) or create "mini-apps" that contain all dependencies from both frameworks.

By "mini apps" I mean creating two modules (one for AngularJS and one for Angular) that contain all the necessary components for the test and then bootstrap that module (as you would bootstrap an actual app).

Most of our own ngUpgrade tests use this approach. See for example this test (but really most ngUpgrade tests use the same approach - feel free to look around).

We are also working on some test helpers for ngUpgrade (e.g. #16848), which should make such things easier in the future.

👍 on documenting this better. I think the main reason we haven't done so already is that we are not happy with the current state either (but some docs are better than no docs 😁).

[jpzwarte]

@gkalpak Thanks for the explanation.

[AlexSwensen]

@gkalpak This explanation is exactly what I have been searching for for a while. Thanks for taking the time to write this out.

I would agree with your statement that this should be documented in some form, even though testing in a hybrid app is not in an ideal state, there are many teams (including my own) that are having to follow the migration path instead of just rewriting from the ground up.
My own experience has been a process of discovery/the-blind-leading-the-blind. I would have loved some documentation for testing. :-)

As-is, i'll be using the text examples you referenced going forward.

---

This is the issue that i ended up on most of the time with my errors. Would be great to have a reference to this issue.
angular/angular-cli#5432

[edarioq]

We have a Hybrid app but without AngularCLI. What do you recommend for implementing testing? I can't find anything in the docs for this.

[aryaroudi]

Hey @gkalpak The problem I have is, it just doesn't render the angular 2 components while running the AngularJS unit test. There is no error. Do we have any resolution on this? is it bad news or good news that there is no error?

[gkalpak]

@aryaroudi, hard to tell with so little info. Make sure you have checked out #24369 (comment) (and the links provided there) 😉