Testing ionic 2 apps


#1

Hi, i’m digging into tesing ionic 2 apps, i have a simple issue, idk nothing about testing js code, i have used rspec for ruby but in js i have read that karma + jasmine + phantomjs.

How is or will be the testing environment for ionic 2? do we have to set the testing environment ourselves?

Where should i place the spec dir or how should i test ionic 2 code?

Most of testing in the angular2 web site uses es6, but it could be needed to transpile it before runing tests, i think i will need to use the babel loader to transpile it, but idk how should i change it nor how to start it as ionic uses the serve cli command, and setting another build system for just the test is not worth it.


#2

I haven’t seen a great testing guide on the subject. Angular 2’s looks like it is getting there, but is incomplete currently. I would suggest taking a look at this. It is the most complete example I’ve seen which includes a testing framework.


#3

Have you got jasmine/karma working with Ionic v2?


#4

Yes. See the example posted.


#5

I looked at it, but I am a new to web development and testing. I think I need something easier to work with Ionic 2. Maybe, a simple working sample?
My concerns about how to configure the ionic project to run the tests?


#6

The thing is that it has a lot of dependencies but lacks explanation about why you need each one or how do they glue together, i don’t like using something just because it works, i like to know how it does work just in case an error arise be able to debug.


#7

The build kit for ionic 2 is already very complicated. The sample provided is using a very similar kit, and is fairly well documented in terms of commenting.

More to the point though, the angular docs are almost entirely missing for testing, and this provides at least a fair ammount of samples you could use. If it isn’t to your liking you can try this excellent video by Julie Ralph from NgConf - https://www.youtube.com/watch?v=C0F2E-PRm44


#8

Hi there,

Did not try them yet (I am new also on testing), but they seems to be a good base

Here and there


#9

The syntax success website does a fair job of covering injection, but neither article covers how to handle unit testing directives. While it is fair to argue that they do not normally need to be tested, there are definitely occasions where you should.

They tend to look something like this.

We had a lot of trouble getting a testing framework up, largely due to the lack of documentation. I suppose that’s one of the troubles with alpha/beta release products. Hope this stuff at least helps in pointing you in the right direction.


#10

Why don’t you look for the Ng2 book? it was updated this or the last week with a chapter about testing, though i haven’t reached that part yet.


#11

Guys, I know you want to help, but I am too damn n00b to understand that bunch of configs in the webpack repo or in the julie repo and migrate to ionic.
If someone could make available an ionic v2 repo with working configs, a sample and the command to run the tests, it would be great.


#12

@swarner answer referencing the angular2-webpack-starter is good, you could just copy and paste the configs into Ionic and start writing the tests with the examples in that repo, i would just like to understand how that webpack.test.config.js was made.


#13

Someone give this guy a cookie


#14

be sure to change the package.json and set the dependencies to the exact version (remove the ^ from the version), otherwise npm install will complain about unmet dependancies :slightly_smiling:


#15

I’ve written a tutorial http://lathonez.com/2016/ionic-2-unit-testing/ based on the clicker repo.


#16

Thanks for your tutorial, @lathonez. I’m going through it, trying to add testing to a new ionic (beta3) app.

I get to the “Install Dependencies and Typings” section and run the command “node_modules/gulp/bin/gulp.js --gulpfile test/gulpfile.ts --cwd ./ test.build”.

But the following errors happen (note: this is a clean install of the “blank” template). Any suggestions?

$ node_modules/gulp/bin/gulp.js --gulpfile test/gulpfile.ts --cwd ./ test.build
[09:59:36] Requiring external module ts-node/register
TSError: ⨯ Unable to compile TypeScript
node_modules/angular2/src/facade/promise.d.ts (1,10): Cannot re-export name that is not defined in the module. (2661)
typings/browser/ambient/es6-shim/es6-shim.d.ts (8,14): Duplicate identifier 'PropertyKey'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (11,5): Duplicate identifier 'done'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (12,5): Duplicate identifier 'value'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (250,5): Duplicate identifier 'EPSILON'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (285,5): Duplicate identifier 'MAX_SAFE_INTEGER'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (292,5): Duplicate identifier 'MIN_SAFE_INTEGER'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (348,5): Duplicate identifier 'flags'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (500,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (563,5): Duplicate identifier 'size'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (572,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (583,5): Duplicate identifier 'size'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (592,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (607,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/es6-shim.d.ts (621,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (8,14): Duplicate identifier 'PropertyKey'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (11,5): Duplicate identifier 'done'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (12,5): Duplicate identifier 'value'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (250,5): Duplicate identifier 'EPSILON'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (285,5): Duplicate identifier 'MAX_SAFE_INTEGER'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (292,5): Duplicate identifier 'MIN_SAFE_INTEGER'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (348,5): Duplicate identifier 'flags'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (500,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (563,5): Duplicate identifier 'size'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (572,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (583,5): Duplicate identifier 'size'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (592,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (607,5): Duplicate identifier 'prototype'. (2300)
typings/browser/ambient/es6-shim/index.d.ts (621,5): Duplicate identifier 'prototype'. (2300)
    at getOutput (/Users/lehresman/Projects/gazelle-mobile/node_modules/ts-node/src/ts-node.ts:209:13)
    at Object.loader (/Users/lehresman/Projects/gazelle-mobile/node_modules/ts-node/src/ts-node.ts:235:23)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
    at Liftoff.handleArguments (/Users/lehresman/Projects/gazelle-mobile/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/Users/lehresman/Projects/gazelle-mobile/node_modules/liftoff/index.js:192:16)
    at module.exports (/Users/lehresman/Projects/gazelle-mobile/node_modules/flagged-respawn/index.js:17:3)
    at Liftoff.<anonymous> (/Users/lehresman/Projects/gazelle-mobile/node_modules/liftoff/index.js:185:9)

#17

Nevermind. Upgrading to angular2@2.0.0-beta.7 fixed it.


#18

Good news. If there’s anything else, raise an issue on my repo rather than here. I just don’t want to clog up Ionic forums with problems particular to our setup.

Thanks!


#19

Hi, I’m getting the same output. How did you upgrade your angular?


#20

You can upgrade your angular by editing the version in packages.json then running “npm install”.