Ionic 2.x Official Unit Testing Example

Ionic Framework ionic-v3
1

Hey Ionites,

We put together this example app showing how to use Angular’s unit testing in your Ionic 2.x or greater apps:

I know Unit Testing is a major concern for Ionic developers, so we hope you give this a look and share your feedback. We are using the standard unit testing approach in Angular with the Angular CLI.

To try it out, clone the repo, run npm install, then npm test. To add this to your project, copy the package.json dependencies, .angular-cli.json, karma.conf.js, src/test.ts, src/polyfills.ts, src/mocks.ts, and the various *.spec.ts files.

5 Likes
2

Thanks, I’ve tried out Josh Morony’s sample testing days ago, it’s a tedious process but it’s working anyway. In fact we wish we have a simple UT testing framework integrated with cli and would not bother to much configuration

1 Like
3

Isn’t relying on the Angular CLI extraneous. Like the CLI isn’t necessary to run karma tests. Plus it transpiles and writes out all your ts to an additional folder right? Angular also has an official guide on setting up unit testing with webpack, and since Ionic uses webpack…isn’t it much simpler to follow their guide?

That’s what I did: http://www.roblouie.com/article/376/ionic-2-set-up-unit-testing-the-best-way/

Is there an issue with my approach I’m not getting? Otherwise I’m not sure why you’d want all the extraneous dependencies and redundant files. Would love to know your feedback.

Thanks,
Rob

4 Likes
4

Cool will take a look. This was a quick demo but yea we don’t want deps we don’t need.

As far as I could tell ng CLI has a number of plugin points with Karma and I was not successful getting the tests to run without then ng CLI

5

Sure, please do take a look. My solution adds just three files to the project, that’s it, with that and a new task in package.json you can run tests. The transpiling happens in memory so no files are written anywhere, and since webpack bundles the components you don’t have to call compileComponents in the tests.

IMO it would be even cooler if Ionic packaged the three config files I use in app-scripts and included the npm script to run tests right out of the box. That way there would be zero config for us end users. That seems like the Ionic way (which I like, build processes are way too complicated these days), and it would be super easy to do with this setup. Plus zero impact on users who don’t write any tests.

Thanks for your time, and for Ionic in general, you all rock.

6

Already on it :smiley:

Thanks again for this, it’s going to be awesome

1 Like
7

Noticing a few issues with the setup in your blog on a fresh ionic v2 app. We added ionic native 3.x to the starters yesterday, so it’s possibly related to new stuff since yesterday.

The first is with the new starters that include the injectable ionic-native services. Here’s the error output for that:

image
Screen Shot 2017-03-22 at 1.33.09 PM.png2746×1842 940 KB

If I remove any references to those services, I get an issue with the test itself:

image
Screen Shot 2017-03-22 at 1.34.47 PM.png2404×1890 786 KB

Here’s my demo app: https://github.com/mlynch/ionic-test-roblouie

Any thoughts? I like this setup so far, would love to make this a default in app scripts

8

Working on exactly this in a new project. Give me a few and I’ll let you know.

1 Like
9

Ya, so seems like now in the starters you have to provide the services, where before that wasn’t the case (at least not when I look back at all my other projects). I have a new repository here showing it working with a project I generated this morning: https://github.com/roblouie/unit-testing-demo

The fix is in the tests we simply have to provide the services now:

describe('MyApp Component', () => {
  let fixture;
  let component;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyApp],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      providers: [
        StatusBar,
        SplashScreen
      ]
    })
  }));

Notice the new providers section when we configure the testing module. In this case I’m actually just injecting the real services, but you could of course use mocks or spies instead. Either way it works for me now, no errors, check out that github repository and let me know if you run into anything else.

3 Likes
10

Oh sweet. Makes sense because these are not distributed into a single module so they’re not automagically available :thumbsup:

11

Awesome, updated and we’re good to go. Appreciate the help, now to promote this a bit…will give you a shout out in the blog and README!

4 Likes
12

Thanks so much! It’s an honor. :slight_smile:

If you could give my blog or twitter a shout out anywhere in there it would be much appreciated.

2 Likes
13

EDITED:

Thanks man! Saw you updated it

14

@rlouie I love that you got rid of the angular cli dependency!
@max the github description still mentions angular cli (at the top) :slight_smile:

1 Like
15

Agree about getting rid of Angular CLI dependency, make it pure Ionic… OR… get rid of Ionic scripts, make it pure Angular CLI with custom tasks in the package.json. Test must run on the same code that has been built and will be deployed.

16

I thought the entire point of unit testing was that you’re testing individual bits of code in isolation, so it’s perfectly fine for the test harness to be different than the complete app: in fact, it sort of has to be.

1 Like
17

Works perfectly, thanks!
Are there any plans to include test coverage into the test setup?

2 Likes
18

Hey guys,

How would I upgrade this for Ionic 3?

I had an existing Ionic 2.4.8 project, and followed the tutorial by @rloui to add unit tests.
Which worked great up until I tried to upgrade to Ionic 3.

I’m in the process of upgrading to Ionic 3, using the ChangeLog Steps.

I’ve followed it, step by step but unit tests are now broken, the app Loads fine.

I see you have a pull request by @MTechDE.

Is this master branch going to work with ionic 3.x? I can’t find the branch for ionic 3 package.json version and file changes.