Repository navigation
Unit testing ngUpgrade applications #5462
Description
How does one write unit tests for hybrid applications that have a mixture of Angular 1 and Angular 2 components?
I've been able to run a test suite that has some tests for ng1 and some for ng2, but I've achieved this by always mocking out cross-framework dependencies and using beforeEachProviders/injectAsync for Angular 2 components, and angular.mock.module/angular.mock.inject for Angular 1 components. But I don't see a way to test a hybrid with either of these two approaches.
For a minimal example app demonstrating the issue, see https://github.com/teropa/ng1-2-hybrid-unit-tests
Reacted by Anthony Ciccarello
Activity
teropa commentedon Nov 24, 2015
Ping @juliemr
yjaaidi commentedon Apr 28, 2016
+1
Same issue here!
I'm testing a ng2 component which is using an ng1 component.
We should find a way to inject scopes for ng1 sub components.
I get the following error:
Failed: No provider for $scope! (class0 -> $scope) Error: DI Exception at NoProviderError.BaseException [as constructor] (webpack:///./~/angular2/src/facade/exceptions.js?:17:23) at NoProviderError.AbstractProviderError [as constructor] (webpack:///./~/angular2/src/core/di/exceptions.js?:39:16) at new NoProviderError (webpack:///./~/angular2/src/core/di/exceptions.js?:75:16) at Injector._throwOrNull (webpack:///./~/angular2/src/core/di/injector.js?:877:19) at Injector._getByKeyDefault (webpack:///./~/angular2/src/core/di/injector.js?:928:21) at Injector._getByKey (webpack:///./~/angular2/src/core/di/injector.js?:868:25) at Injector._getByDependency (webpack:///./~/angular2/src/core/di/injector.js?:854:25) at Injector._instantiate (webpack:///./~/angular2/src/core/di/injector.js?:744:36) at Injector._instantiateProvider (webpack:///./~/angular2/src/core/di/injector.js?:716:25) at Injector._new (webpack:///./~/angular2/src/core/di/injector.js?:705:21) at InjectorInlineStrategy.instantiateProvider (webpack:///./~/angular2/src/core/di/injector.js?:205:30) at ElementDirectiveInlineStrategy.init (webpack:///./~/angular2/src/core/linker/element.js?:559:24) at new AppElement (webpack:///./~/angular2/src/core/linker/element.js?:236:28) at viewFactory_LzJobList0 (viewFactory_LzJobList:1392:23) at HostViewFactory.viewFactory_HostLzJobList0 [as viewFactory] (viewFactory_HostLzJobList:75:1) at AppViewManager_.createRootHostView (webpack:///./~/angular2/src/core/linker/view_manager.js?:94:36) at eval (webpack:///./~/angular2/src/core/linker/dynamic_component_loader.js?:103:50) at ZoneDelegate.invoke (webpack:///./~/angular2/bundles/angular2-polyfills.js?:390:29) at Zone.run (webpack:///./~/angular2/bundles/angular2-polyfills.js?:283:44) at eval (webpack:///./~/angular2/bundles/angular2-polyfills.js?:635:58) at ZoneDelegate.invokeTask (webpack:///./~/angular2/bundles/angular2-polyfills.js?:423:38) at Zone.runTask (webpack:///./~/angular2/bundles/angular2-polyfills.js?:320:48) at drainMicroTaskQueue (webpack:///./~/angular2/bundles/angular2-polyfills.js?:541:36) at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24) at zoneBoundFn (webpack:///./~/zone.js/dist/zone-microtask.js?:1193:26) at lib$es6$promise$$internal$$tryCatch (webpack:///./~/zone.js/dist/zone-microtask.js?:441:17) at lib$es6$promise$$internal$$invokeCallback (webpack:///./~/zone.js/dist/zone-microtask.js?:453:18) at eval (webpack:///./~/zone.js/dist/zone-microtask.js?:1001:14) at eval (webpack:///./~/zone.js/dist/zone-microtask.js?:96:10) at Zone.run (webpack:///./~/zone.js/dist/zone-microtask.js?:1216:24) at zoneBoundFn (webpack:///./~/zone.js/dist/zone-microtask.js?:1193:26) at lib$es6$promise$asap$$flush (webpack:///./~/zone.js/dist/zone-microtask.js?:235:10)SonofNun15 commentedon May 20, 2016
Any changes on this issue? We're trying to get our Angular 1 unit tests to work with the upgrade adapter in place, downgrading now Angular 2 services to Angular 1. We are getting
Error: [$injector:unpr] Unknown provider: ng2.InjectorProvider <- ng2.Injector <- rlObjectServiceyjaaidi commentedon May 21, 2016
Hi!
Interesting issue. Actually, you should not use angular mocks'
moduleandinjectbut the upgradeProvider.It's not documented yet but there are some clues in angular 2's source code.
1 - Your
UpgradeAdapterinstance should be a singleton.2 - You should add your providers to the
UpgradeAdaptersingleton usingUpgradeAdapter.addProvider.3 - You should start the app using
UpgradeAdapter.bootstrapthen grab theUpgradeAdapterRefinstance given toready's callback function.4 - Get the
ng1Injectorattribute from theUpgradeAdapterRefinstance.5 - Instantiate your service using the injector's synchronuous
getmethod.Here's a plunker with the solution:
https://embed.plnkr.co/EauYut/
We also published a blog post about angular 2 migration on Wishtack. We will soon be filling the blog with more posts about angular 2 testing.
http://www.blog.wishtack.com/#!AngularJS-vs-Angular-2-Should-I-Stay-or-Should-I-Go/cuhk/573b59710cf233ef713771b2
yjaaidi commentedon May 21, 2016
If it works for you then we might close this issue.
teropa commentedon May 25, 2016
That's pretty neat @yjaaidi. Ideally there'd be some sugar for this in ngUpgrade though, integrating it with angular-mock better.
I'm working on some updates to the upgrade guide and I'll see if I can add this in as a possible pattern to use.
yjaaidi commentedon May 25, 2016
Cool! Thanks @teropa
19 remaining items
attilacsanyi commentedon Nov 25, 2016
Thank you @petebacondarwin 👍
ryanlangton commentedon Dec 1, 2016
I'm not clear on how to get my NG1 unit tests to start working again. My NG1 unit tests are using angular.mock, everything works fine until a dependency is NG2 (for example a downgraded NG2 service using another standard NG2 service). Is there any way to get this working? Do I need to wait for a later release? The documentation on angular.io doesn't address my use case. For now, leaving all my NG1 tests disabled.
feat(upgrade): enable Angular 1 unit testing of upgrade module
angular-automatic-lock-bot commentedon Sep 10, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.