-
Notifications
You must be signed in to change notification settings - Fork 26.2k
Document how to test hybrid apps that include angular.js components #24369
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Unfortunately, testing with interdependencies is generally a complex thing in 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 We are also working on some test helpers for 👍 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 😁). |
@gkalpak Thanks for the explanation. |
@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. 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. |
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. |
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? |
@aryaroudi, hard to tell with so little info. Make sure you have checked out #24369 (comment) (and the links provided there) 😉 |
isn't that comment referred to an angular2 unit test that loads the angular 1 component? In other words, is it possible to do the same in a well let me add some info: we are building the whole app by Webpack using the @ngtools and the final bundle contains both applications then in Karma we added the Karma Webpack and it builds a bundle then it loads the tests |
@aryaroudi @gkalpak This is something that desperately needs to be documented. Thankfully it is a problem that we have solved. If the angular component is not being rendered, you probably are not bootstrapping the angular portion of your app correctly, or you aren't downgrading the component/service you are testing. Given components are simply declared with custom HTML tags, you probably will not get an error. My team is successfully testing and slowly migrating an AngularJS application into Angular, and the hybrid is stable in production. I plan to write some posts on my personal blog soon detailing how to migrate from AngularJS to Angular. Also, I figure I should ask if you are using ui-router or the stock AngularJS router for your app, as that is an important distinction. |
@aryaroudi It's also worth pointing out that when I bootstrapped our tests in karma, I found we would hit a race-condition while angular was bootstrapping. Here is a snippet from our // test/test.ts
import * as jquery from 'jquery';
declare const window: any;
window.$ = jquery;
window.jQuery = jquery;
import 'zone.js'
import 'zone.js/dist/zone-testing';
import 'zone.js/dist/long-stack-trace-zone'
// import 'zone.js/dist/proxy.js'
import 'zone.js/dist/sync-test'
// import 'zone.js/dist/jasmine-patch'
// import 'zone.js/dist/async-test'
// import 'zone.js/dist/fake-async-test'
declare const __karma__: any;
declare const require: any;
__karma__.loaded = function () {};
import '../src/app/main';
// give the app a second to start...
// This timeout is needed because the process of bootstrapping Angular and AngularJS together
// is asynchronous, so the simplest way to solve the problem is with a short delay.
setTimeout(() => {
// Then we find all the tests in the test/js directory.
const context = require.context('./js', true, /_?\.?(s|S)pec$/);
// and all the tests in the app directory
const appContext = require.context('./../src', true, /_?\.?(s|S)pec$/)
// load the modules.
context.keys().map(context);
appContext.keys().map(appContext);
// and run the tests.
__karma__.start();
}, 1000); Since the bootstrap is asynchronous, we threw in a 1-second timeout before the tests start to be sure it is finished. Ever since then we did not encounter that race condition. |
Awesome @AlexSwensen, Thanks for the info. My question is the bootstrapping of the application is happening in the As I am seeing also in your |
@aryaroudi You shouldn't need to bootstrap the application twice. Once is enough. We had an issue where we didn't want to re-create all of our tests. Turns out we didn't have to due to how you test AngularJS and Angular are different enough and (for the most part) do not interfere with each other.
Any tests that touch Angular components/services will need to be in TypeScript, but that is fairly easy to do.
I'm a little confused by what you mean here... Karma is a test runner and Jasmine is the default testing framework used by AngularJS and Angular. We are using Karma webpack to bundle our app for running tests, but eventually, we will be running all our tests through the Angular CLI (once we prioritize that part of the process) |
Thank you so much @AlexSwensen! I got it more or less to work just fixing some errors. I have two questions what is this for?
are you importing your currently, I am stuck with this:
|
@aryaroudi If you are using the stock router I'm really not sure what is involved there beyond what the official docs recommend. Sorry! My unit tests import the real component code. Sadly I am not in a position where I can share an example for my main application. If I find some time I can try and create a stand-alone example. That might take some time as I have a lot going on at work and in my personal life for the next few weeks. |
I'm not here to contribute to the conversation, but I just wanted to thank @AlexSwensen for this. I've been working on upgrading a angular 1.6 app to a hybrid w/ angular 8, and I've had a hell of a time bootstrapping the angularjs tests back in. After a day or two of searching around and playing with things, Alex's suggestion here finally got me somewhere. Thanks so much for sharing!! Also ++ to suggesting this gets documented in the Upgrade documentation. That documentation is done well, but this is a gap that would certainly be helpful. |
Well, What @AlexSwensen mentioned was very helpful for me and I could test it with success BUT remember that there is one issue. You have to modify all your tests after the migration again and if you have like 400-500 tests it's a hell of the work! |
@aryaroudi In our current use case, we are in the middle of a large rebrand & rebuild of many features in our application, so for us it makes sense to leave legacy code as-is and rebuild as much as we can in Angular, this includes new tests as well. At that point, it becomes more of a product and process issue than a technical one. The best way to get the work done is to make it a priority for the product/management team. :-) EDIT: I also should point out that we finally upgraded to Angular 8 and implemented the CLI in our hybrid application. I would suggest teams take the time needed to do this, as in the end, it reduces complexity a lot. |
Very valuable point. I realized that we should do the same and move to CLI. Any important point to highlight while migrating from webpack to CLI? If you could share a demo of your config it would be very helpful. Thanks |
@aryaroudi I'll put together a demo hopefully soon. Those two things required me to modify every single AngularJS component we had, along with several state definitions, but once i had that fixed things went very well. |
@AlexSwensen _ Thanks for your input, I was able to bootstrap the Hybrid App. To Add on I have changed my .js spec files into .ts in order to utilize ES6 |
@AlexSwensen Any news about this? I am very interested in a runnable demo as I'm stuck with it |
@Camo30 Very sorry I haven't checked back in. My project ran into some difficulty and (to put a long story short) my team and I are all looking for new work. 😅 In addition, if anyone wants some assistance I also take offers for consulting. 😉 |
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends. Find more details about Angular's feature request process in our documentation. |
@AlexSwensen Sorry to hear your project got into difficulties Alex.. hope you and your team were able to bounce back after getting over the shock 👍 |
@ryanki1 yes, we are fine. We have moved on to other projects. As for this, I do not anticipate ever getting back to this. Also, Angular has moved on quite a bit since my last experience with it. Given that, this issue is probably best to be closed. |
Good to hear.. being able to bounce back improves your bounciness 😃
Holen Sie sich Outlook für iOS<https://aka.ms/o0ukef>
…________________________________
Von: Alexander Swensen ***@***.***>
Gesendet: Thursday, August 26, 2021 10:49:35 PM
An: angular/angular ***@***.***>
Cc: Kieran Ryan ***@***.***>; Mention ***@***.***>
Betreff: Re: [angular/angular] Document how to test hybrid apps that include angular.js components (#24369)
@ryanki1<https://github.com/ryanki1> yes, we are fine. We have moved on to other projects. As for this, I do not anticipate ever getting back to this. Also, Angular has moved on quite a bit since my last experience with it. Given that, this issue is probably best to be closed.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#24369 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAP4EQWSFMPCE7UKK5P6RMDT62SF7ANCNFSM4FD63F7Q>.
Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
We'll let the community provide info around this topic since angular.dev doesn't cover angularjs anymore. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
I'm submitting a...
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: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):
What is the motivation / use case for changing the behavior?
Environment
The text was updated successfully, but these errors were encountered: