Karma tests fail when testing implementation with @Page annotation #58

bengro · 2016-03-21T15:30:45Z

As mentioned here karma craps out when testing implementation that contains @page annotation.

I am not using the clicker setup but my own setup which is heavily inspired by clicker. I would be interested in what I'm missing in my setup. I apologise in advance for abusing an issue - it is not an issue of your code.

The error I get on the client is:

karma.js:87 Error: TypeError: ionic_angular_1.Page is not a function
at eval (http://localhost:9976/base/tmp/final-js/pages/auth/auth.js:52:37)
at execute (http://localhost:9976/base/tmp/final-js/pages/auth/auth.js:59:15)
at Zone.run (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:1243:24)
at zoneBoundFn (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:1220:26)
at lib$es6$promise$$internal$$tryCatch (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:468:17)
at lib$es6$promise$$internal$$invokeCallback (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:480:18)
at lib$es6$promise$$internal$$publish (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:451:12)
at http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:123:10
at Zone.run (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:1243:24)
at zoneBoundFn (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:1220:26)
at lib$es6$promise$asap$$flush (http://localhost:9976/base/node_modules/angular2/bundles/angular2-polyfills.js?f0a6e97830784efea38367c499b6b9edc53d5600:262:10)
Error loading http://localhost:9976/base/tmp/final-js/pages/auth/AuthExample.spec.jslocalConsole.(anonymous function) @ karma.js:87

Karma server craps out with:

Missing error handler on socket.
TypeError: (msg || "").replace is not a function
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/lib/reporter.js:45:23
at onBrowserError (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/lib/reporters/base.js:58:60)
at null. (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/lib/events.js:13:22)
at emitTwo (events.js:87:13)
at emit (events.js:172:7)
at onKarmaError (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/lib/browser.js:95:13)
at Socket. (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/lib/events.js:13:22)
at emitOne (events.js:82:20)
at Socket.emit (events.js:169:7)
at Socket.onevent (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/socket.io/lib/socket.js:335:8)
at Socket.onpacket (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/socket.io/lib/socket.js:295:12)
at Client.ondecoded (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/socket.io/lib/client.js:193:14)
at Decoder.Emitter.emit (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/socket.io/node_modules/socket.io-parser/node_modules/component-emitter/index.js:134:20)
at Decoder.add (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/socket.io/node_modules/socket.io-parser/index.js:247:12)
at Client.ondata (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/socket.io/lib/client.js:175:18)
at emitOne (events.js:77:13)

package.json

{
  "scripts": {
    "preinstall": "npm install -g typings",
    "postinstall": "typings install && ./node_modules/protractor/bin/webdriver-manager update",
    "build": "gulp build",
    "dist": "GNOME_ENV=prod gulp build",
    "run": "gulp build && gulp webserver",
    "test": "gulp test && gulp e2e"
  },
  "author": "I Am Possible Ltd.",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "https://github.com/iampossible/gnome-app.git"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "es6-promise": "3.0.2",
    "es6-shim": "0.33.13",
    "ionic-angular": "2.0.0-beta.3",
    "ionicons": "3.0.0-alpha.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "awesome-typescript-loader": "0.15.10",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-inject-file": "0.0.16",
    "gulp-inline-ng2-template": "^1.1.2",
    "gulp-preprocess": "^2.0.0",
    "gulp-rimraf": "^0.2.0",
    "gulp-run": "^1.6.12",
    "gulp-sane-watch": "^1.1.1",
    "gulp-sass": "2.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^4.3.3",
    "gulp-typescript": "^2.12.1",
    "gulp-watch": "^4.3.5",
    "gulp-webserver": "^0.9.1",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.2",
    "karma-coverage": "^0.5.5",
    "karma-jasmine": "^0.3.7",
    "protractor": "^3.1.1",
    "run-sequence": "^1.1.5",
    "strip-sourcemap-loader": "0.0.1",
    "systemjs": "^0.19.24",
    "ts-node": "^0.5.5",
    "tslint": "^3.5.0",
    "typescript": "1.7.5",
    "webpack": "1.12.14"
  },
  "name": "ionic-app",
  "description": "an ionic-app for project gnome",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

karma.config.js

module.exports = function (config) {
  'use strict';

  config.set({
    basePath: '',

    frameworks: ['jasmine'],

    files: [{
      pattern: 'node_modules/angular2/bundles/angular2-polyfills.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/systemjs/dist/system.src.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/rxjs/bundles/Rx.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/angular2/bundles/angular2.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/angular2/bundles/http.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/angular2/bundles/router.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/angular2/bundles/testing.dev.js',
      included: true,
      watched: false,
    }, {
      pattern: 'node_modules/ionic-angular/bundles/ionic.system.js',
      included: true,
      watched: true,
    }, {
      pattern: 'tmp/final-js/**/*.js',
      included: false,
      watched: true,
    }, {
      pattern: 'karma-ionic.js',
      included: true,
      watched: true,
    }, {
      pattern: 'tmp/build/test/**/*.html',
      included: false,
      watched: true,
    }, {
      pattern: 'tmp/build/test/**/*.css',
      included: false,
      watched: true,
    }, {
      pattern: 'app/**/*.ts',
      included: false,
      watched: true,
    }, {
      pattern: 'tmp/build/**/*.js.map',
      included: false,
      watched: false,
    },],

    proxies: {
      '/ionic-angular': '/base/node_modules/ionic-angular/bundles/ionic.system.js',
    },

    reporters: ['progress'],
    port: 9976,
    colors: true,
    logLevel: config.LOG_WARN,
    autoWatch: true,
    browsers: ['Chrome'],
  });
};

karma-ionic.js (loaded by karma.config.js)

'use strict';

// Tun on full stack traces in errors to help debugging
Error.stackTraceLimit = Infinity;

// Jasmine test timeout tolerance in ms
jasmine.DEFAULT_TIMEOUT_INTERVAL = 2000;

// Cancel Karma's synchronous start,
__karma__.loaded = function() {};

System.config({
  packages: {
    base: {
      defaultExtension: 'js',
      format: 'register',
      map: Object.keys(window.__karma__.files).
      filter(onlyAppFiles).
      reduce(function createPathRecords(pathsMapping, appPath) {
        var moduleName = appPath;
        pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
        return pathsMapping;
      }, {}),
    },
  },
});

System.import('angular2/src/platform/browser/browser_adapter')
  .then(function(browser_adapter) {
    browser_adapter.BrowserDomAdapter.makeCurrent();
  })
  .then(function() {
    return Promise.all(
      Object.keys(window.__karma__.files) // All files served by Karma.
      .filter(onlySpecFiles)
      .map(filePath2moduleName) // Normalize paths to module names.
      .map(function(moduleName) {
        return System.import(moduleName);
      }));
  })
  .then(function(success) {
    __karma__.start();
  }, function(error) {
    console.error(error);
    __karma__.error(error.stack || error);
  });

function filePath2moduleName(filePath) {
  return filePath
    .replace(/^\//, '') // remove / prefix
    .replace(/\.\.js$/, '.js');
}

function onlyAppFiles(filePath) {
  return !(/.*\.(spec)\.js$/.test(filePath));
}

function onlySpecFiles(path) {
  return /.*\.spec\.js$/.test(path);
}

The text was updated successfully, but these errors were encountered:

lathonez · 2016-03-21T15:43:54Z

I apologise in advance for abusing an issue - it is not an issue of your code.

Not at all, I appreciate you raising over here for a couple of reasons:

I don't want Ionic's forum getting clogged up with people trying to use my set up - they don't officially support it or have a line on testing yet.
It's easier for me to manage and respond issues if they are all in one place.

What you've pasted looks legit.

I take it you've seen / tried to implement the example test of @page here?

If not, give it a go / see also #41

If you've already tried this, I'm gonna need to see source code for the page and the spec if I'm going to be of any use.

bengro · 2016-03-21T15:57:30Z

Yes, I've tried implementing your example.

Let me see how I can share the code with you - it is currently on a private github project. I will get back to you soon.

Thanks for your help!

lathonez · 2016-03-21T15:58:26Z

Presumably if you just clone down the repo, install and test it works?

bengro · 2016-03-21T16:33:27Z

Yes, I can run the clicker app and its tests. There is a dependency (gulp-util) missing when trying to run the tests straight after npm install. I will submit another issue for that.

bengro · 2016-03-28T23:53:05Z

Just as an update, I'm working on a public seed that I can share with you this week! Sorry for the delay and thanks for your willingness to help!

lathonez · 2016-03-31T08:11:41Z

Nice, let me know when you've got something I can look at!

bengro · 2016-04-03T10:54:52Z

Fortunately, I cannot reproduce the issue with my stripped-down seed (with more up to date dependencies). Horray! Like the clicker repository I can test components annotated with "@page".

In case you are interested, here is my seed with the testing example:
https://github.com/bengro/ionic-seed-example

There is still some work needed to make the test compilation fast. On a plus side, I'm not wrapping my tests with a main class, I can get away with fewer dependencies, and I do not depend on module loader workaround. Also, I prefer to not transpile configuration (gulpfile, etc).

clicker was definitely an inspiration! Keep it up!

lathonez · 2016-04-04T19:38:42Z

I am interested, you seem to have been able to remove quite a lot of the boilerplate. I am really keen to remove the dependency on system.

I'll definitely be using this to see if I can apply the same stuff here.

Thanks.

lathonez · 2016-04-14T08:28:09Z

@bengro do you know if there is any way to get a usable coverage report when bundling the specs?

bengro · 2016-04-14T18:21:27Z

No, I have not experimented with coverage support. But please let me know if you have something working nicely :)

On 14.04.2016, at 09:28, Stephen Hazleton [email protected] wrote:

@bengro https://github.com/bengro do you know if there is any way to get a usable coverage report when bundling the specs?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub #58 (comment)

lathonez · 2016-04-14T20:18:27Z

Will do, thanks for the prompt reply
On 15 Apr 2016 06:21, "Benjamin Gröhbiel" [email protected] wrote:

No, I have not experimented with coverage support. But please let me know
if you have something working nicely :)

On 14.04.2016, at 09:28, Stephen Hazleton [email protected]
wrote:

@bengro https://github.com/bengro do you know if there is any way to
get a usable coverage report when bundling the specs?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub <
https://github.com/lathonez/clicker/issues/58#issuecomment-209826298>

—
You are receiving this because you modified the open/close state.
Reply to this email directly or view it on GitHub
#58 (comment)

lathonez · 2016-04-17T21:46:02Z

I've used remap-istanbul which works really well.

https://github.com/lathonez/clicker/blob/lightweightify/test/gulpfile.ts#L138-L184

Couple things:

the remapping takes about 2 seconds for me
you need to remove a lot from the remapped coverage (node_modules & spec). There's a way to do this via the remap-istanbul CLI --exclude but I couldn't figure it out in gulp so I just read the JSON and prune it, which is qucik

https://codecov.io/github/lathonez/clicker?branch=lightweightify

I'm pretty happy with the setup on this branch, which is heavily based on your work here, so many thanks. In the coming days I'll be cleaning up, merging back and re-doing the blog. Will be sure to give you props.

bengro · 2016-04-18T20:53:23Z

No worries at all, I'm glad you like it - I'm going to look into making the karma tests smoother. At the moment, transpiling and bundling up all files is taking ages and ruins the nice feedback one should get from unit tests. Can let you know if I find a nice setup.

Thanks for the pointers to istanbul.

lathonez · 2016-04-18T21:02:36Z

For me it's producing the sourcemap that's taking most of the time. I was going to look into partially caching it (I think that's a thing), but yeah not until I've got this stuff merged back.

Happy with the set up now, it's just the build time which is frustrating. Please do give me a shout if you find something.

lathonez · 2016-04-28T10:34:43Z

@bengro much happier with the setup now. Using Browserify from Karma and managed to delete a whole load of crap from gulpfile. Coverage working well without those horrible workarounds thanks to isparta.

5f096f7

lathonez added the question label Mar 22, 2016

lathonez closed this as completed Apr 4, 2016

lathonez mentioned this issue Apr 4, 2016

Lightweightify #68

Closed

masimplo mentioned this issue Apr 14, 2016

Typescript maps for debug/coverage #39

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Karma tests fail when testing implementation with @Page annotation #58

Karma tests fail when testing implementation with @Page annotation #58

bengro commented Mar 21, 2016

lathonez commented Mar 21, 2016

bengro commented Mar 21, 2016

lathonez commented Mar 21, 2016

bengro commented Mar 21, 2016

bengro commented Mar 28, 2016

lathonez commented Mar 31, 2016

bengro commented Apr 3, 2016

lathonez commented Apr 4, 2016

lathonez commented Apr 14, 2016

bengro commented Apr 14, 2016

lathonez commented Apr 14, 2016

lathonez commented Apr 17, 2016

bengro commented Apr 18, 2016

lathonez commented Apr 18, 2016

lathonez commented Apr 28, 2016

Karma tests fail when testing implementation with @Page annotation #58

Karma tests fail when testing implementation with @Page annotation #58

Comments

bengro commented Mar 21, 2016

lathonez commented Mar 21, 2016

bengro commented Mar 21, 2016

lathonez commented Mar 21, 2016

bengro commented Mar 21, 2016

bengro commented Mar 28, 2016

lathonez commented Mar 31, 2016

bengro commented Apr 3, 2016

lathonez commented Apr 4, 2016

lathonez commented Apr 14, 2016

bengro commented Apr 14, 2016

lathonez commented Apr 14, 2016

lathonez commented Apr 17, 2016

bengro commented Apr 18, 2016

lathonez commented Apr 18, 2016

lathonez commented Apr 28, 2016