search

ionic-team / ionic-app-scripts

App Build Scripts for Ionic Projects
http://ionicframework.com/
MIT License
608 stars 303 forks source link

Unit Testing with Ionic 2 RC0 #51

Open jgw96 opened 8 years ago

jgw96 commented 8 years ago

From @NelsonBrandao on September 30, 2016 11:45

Short description of the problem:

I'm starting an Ionic 2 project using RC0 and I'm having trouble getting unit tests to work. Almost all the documentation found on the web is for the beta releases that still used gulp. Is there any documentation on how to set it up with the new building system?

I can see that ionic-app-scripts already checks for linter errors, is there any planning to support unit testing?

Copied from original issue: driftyco/ionic#8351

jgw96 commented 8 years ago

From @ruedagato on September 30, 2016 15:45

+1

danielgek commented 8 years ago

+1

masimplo commented 8 years ago

This is a much needed feature. We have around 700 tests that we used to run with gulp, have debugging, source maps etc and cannot think of not having them for too long. Having a way to run tests would also make the upgrade to RC0 much easier and safer.

mavogel commented 8 years ago

@jgw96: Do you already know if you'll integrate the angular-cli mechanism (ng test) as a task into the ionic-app-scripts to run the tests?

So we could integrate it this way now in the our project and later just switch the task in the package.json.

adamdbradley commented 8 years ago

Yes the plan is to make it as easy as ionic test, which could also be ran as npm run test. To do this we'll have to add a default karma config like how all the other tasks are added. This is on our roadmap to complete soon. Thanks.

mavogel commented 8 years ago

Thanks @adamdbradley for your answer. This sounds great to have it the easy way like ionic test.

If you are going to use protractor for the e2e tests, I'd kindly ask to add some upvotes or a comment to the issue on adding mock modules to Angular 2 applications, so that this feature request gets more attention and will hopefully be completed soon. Mocking modules like the http backend will be essential for e2e tests. Thanks in advance.

mfdeveloper commented 8 years ago

Hey guys, I've created a structure to use unit tests on RC.0 release. By now, only works with sidemenu scaffold. Tabs scaffold for example, have others dependencies that I couldn't find easily. So, still problems with some providers mocks :\

Please, see this gist: https://gist.github.com/mfdeveloper/d9349dea78ba34a36adc7ada56ffd0c0 And a discussion here: https://github.com/marcoturi/ionic2-boilerplate/issues/1

marcoturi commented 8 years ago

last release of https://github.com/marcoturi/ionic2-boilerplate has e2e and unit tests working with rc0

adamdbradley commented 8 years ago

@marcoturi That's great! One thing we're trying to do is really reduce any required dependencies. What can we do to add karma, but keep any new dependencies to a minimum? https://github.com/marcoturi/ionic2-boilerplate/blob/master/package.json#L129

marcoturi commented 8 years ago

@adamdbradley Thank you Adam, the are several problems using rollup with karma, so the fast answer is to use webpack instead. I love the hook system for editing config scripts and i think is a good way to avoid new dependecies. Right now i see this problems with rollup and tests (without using 3rd party boundler other than the ones provided in ionic): 1 - lack of require imports, this means you can't dorequire.context('../app', true, /\.spec\.ts/); the consequence is that i have to run a watch task on npm run test see https://github.com/marcoturi/ionic2-boilerplate/blob/master/config/karma-watch.js

2 - Actually istanbul is not working with rollup + typescript see https://github.com/marcoturi/ionic2-boilerplate/issues/5

3 - We can't use hot module reloading https://github.com/angularclass/angular2-hmr that IMHO is a must feature that should be as easy as possible to implement in the future in a ionic project.

1,2,3 can be easily fixed with webpack. If you need further info or help let me know!

lathonez commented 8 years ago

Finally got the reference Ionic 2 unit testing repo Clicker back up and running on rc1.

We've gone with ng-cli (and thus webpack) for testing as opposed to doing anything with rollup.

This comment indicates that Ionic will eventually end up using ng-cli, so as I see it, the closer we are to that the better.

stefanhuber commented 7 years ago

Wow, this is all so complicated!

I looked at all the projects for testing. These projects have more configuration code than actual app logic! This cannot be it! Currently it seems to be almost impossible to get a test environment (+ also understand whats going on) within a "normal" time period. Currently, I assume for the average developer setting up testing needs 1-2 days, which is just crazy!

Does the world really need another module bundler e.g. rollup? Even with webpack not much is gained... Browserify has worked very well with ionic beta, integration of proper testing was sleek. Now it is absolute horror!

masimplo commented 7 years ago

@stefanhuber if you followed best practices for structure and naming, setting up testing using @lathonez project as a blueprint should not take you more than 10 mins. I agree that ionic needs to do that out of the box without the developer having to add any files, but it's not currently as bad as you describe.

marcoturi commented 7 years ago

@stefanhuber Did you tried ionic2-boilerplate ? If you have any trouble setting up your testing environment with it let me know. The boilerplate is aligned with the current ionic build system (webpack) and the past issues with rollup and istanbul are resolved.

stefanhuber commented 7 years ago

@masimakopoulos and @marcoturi thanks for your response! 10 minutes seems to be a real exaggeration. I looked through the two solutions, both seem to be highly sophisticated. (Looking through them and counting config files, took me longer than 10 minutes) I will try @marcoturi ionic2-boilerplate, as I don't want to get inclined with ng-cli and whatnot. Still I am counting 22 config files. In the end I only want plain old unit testing with jasmine. Thx for your work!

sf1234 commented 7 years ago

@stefanhuber any reviews about ionic2-boilerplate project. I am working on an ionic2 project. and i am trying to decide which version should i go with. at the moment i have 2 options: 1- ionic2-boilerplate 2- Clicker

Please advice. i would greatly appreciate that. Thanks in advance.

ddellamico commented 7 years ago

My two cents .. I think "ionic2-boilerplate" it's the way to go to have a good ionic2 project base.

sf1234 commented 7 years ago

Thank you very much for your quick response.

stefanhuber commented 7 years ago

I only use Unit testing (no functional testing with protractor). This is just my personal opinion. I think very pragmatic about software projects. Mostly projects have a long life and need to maintained. Therefore I think like this:

With Clicker you get:

With ionic2-boilerplate you get:

As I use angular-cli in other projects. I transfered the mentioned dependencies from Clicker into my project and this works good for me.

I hope there will be a best practice approach from ionic core developers integrated with ionic cli or similar. At least for me setting up testing, within existing projects was not nice!

sf1234 commented 7 years ago

I greatly appreciate you invaluable perspective on that, And i completely agree with that too.

rajeevriitm commented 7 years ago

Is there any update on this? I find some problems with angular TestBed like ionic life cycle not firing.

mwager commented 7 years ago

We also use the Clicker app as base for testing our ionic app. Would really love to see support baked directly into the ionic cli or ionic-app-scripts