Unit Testing with Ionic 2 RC0

[jgw96]

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: ionic-team/ionic-framework#8351

[jgw96]

From @ruedagato on September 30, 2016 15:45

+1

[danielgek]

+1

[masimplo]

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]

@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]

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]

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]

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: marcoturi/ionic-boilerplate#1

[marcoturi]

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

[adamdbradley]

@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]

@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 marcoturi/ionic-boilerplate#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]

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]

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]

@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]

@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]

@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]

@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]

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

[sf1234]

Thank you very much for your quick response.

[stefanhuber]

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:

• Remove every dependency which is not necessary
• Reduce the number of configuration files (somebody has to read/understand etc) to 0
• Only use tools which really solve a problem (I have)

With Clicker you get:

• Angular Cli Dependency
• angular-cli.json config file
• https://github.com/lathonez/clicker/blob/master/src/test.ts
• karma conf

With ionic2-boilerplate you get:

• Lot of code in package.json
• some dependencies I don't need: instanbul, yarn, better npm, and something
• several config files: https://github.com/marcoturi/ionic2-boilerplate/tree/master/config for webpack and/or rollup

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]

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

[rajeevriitm]

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

[mwager]

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