Batmanjs testing on Rails with Karma - javascript

I'd like to use batmanjs karma and rails on a current project. At the moment I'm attempting to use the batmanjs testing framework, but I'm having a heck of time getting everything to play together. Any help would be appreciateed.
http://batmanjs.org/docs/testing.html
class SimpleTest extends Batman.TestCase
#test 'A simple test', ->
#assert true
This file is sitting in spec/javascripts/simple_spec.js.coffee
Here's my Karma config, I'm assuming it's not accurate.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['requirejs'],
files: [QUNIT, QUNIT_ADAPTER,
{pattern: 'spec/javascripts/*.js.coffee', included: false}
],
exclude: [
],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome', 'PhantomJS'],
captureTimeout: 60000,
singleRun: false
});
};
Again, any help would be appreciated.

Somehow you need to get Batman.TestCase (and your application code) loaded by Karma. What I've done before is (gulp) point Karma at my development server, where it can get compiled assets. Maybe it ain't perfect, but it works.
Here's an example snippet for your Karma config:
files: [
'spec/javascripts/**/*.coffee',
'http://localhost:3000/assets/your_app.js', // loads application code
'http://localhost:3000/assets/extras/batman.test_case.js' // point to wherever TestCase code is!
]
Also,I wrote up a bit about how I've done it before (with Jasmine), in case that comes in handy: http://rmosolgo.github.io/blog/2014/01/18/batman-dot-js-testing-with-karma-and-jasmine/
As mentioned there, Batman.TestCase is an "extra", so you'll have to include it "by hand". It's not in the distributed version of Batman.js
Does that help at all? Good luck!

Related

Error after including plugins in karma.config.js

This is my code inside karma.config.js:
I'm using Webpack 3+ for my project.
module.exports = config => {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: ['./src/components/**/*.spec.ts'],
plugins: ['karma-jasmine', 'karma-phantomjs-launcher'],
preprocessors: {
'./src/components/**/*.spec.ts': ['webpack']
},
mime: {
'text/x-typescript': ['ts', 'tsx']
},
webpack: webpackConfig,
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
webpackMiddleware: {
noInfo: true
},
concurrency: Infinity
});
};
After I've included this line of code:
plugins: ['karma-jasmine', 'karma-phantomjs-launcher'],
I got the following error:
Can not load "webpack", it is not registered!
If I don't have this line, everything runs smoothly. The problem is I have to implement PhantomJS. How can I resolve the issue?
By default, Karma loads all sibling NPM modules which have a name starting with karma-*.
Looks like you are overriding plugins with a new array, which will stop any karma webpack plugins from being loaded.
Therefore, when specifying a new plugins array you should add karma-* to it:
plugins: ['karma-*', 'karma-jasmine', 'karma-phantomjs-launcher'],
However, as your plugins are karma- prefixed anyway, they should be loaded automatically with the default plugins config so you shouldn’t need to specify a plugins array in this case.
I hope this helps.

Karma/systemjs not looking in node_modules directory when trying to run tests

I'm trying to run tests using karma/jasmine/systemjs with Angular 2 and typescript. I previously had it working without systemjs/typescript using babel.
I also got it working transpiling typescript to es6 and using the same karma setup without using systemjs.
I want to use systemjs, and I don't want to have to do transpile twice, so now I'm trying to use systemjs with karma. (using karma-system.js).
The error I'm getting is:
Error: XHR error (404 Not Found) loading /path/to/project/angular2/core.js
For whatever reason, karma/systemjs is not looking in the node_modules directory for angular, and I don't want to hard code that into my project files.
karma.conf.js:
module.exports = function(config) {
config.set({
basePath: '',
plugins: ['karma-systemjs', 'karma-jasmine', 'karma-chrome-launcher'],
frameworks: ['systemjs', 'jasmine'],
files: [
'client/**/*.spec.js',
'client/**/**/*.spec.js',
'server/**/*.spec.js',
'server/**/**/*.spec.js'
],
exclude: [
'node_modules/',
'client/node_modules/*',
'client/node_modules/**/*.spec.js',
'server/node_modules/*'
],
preprocessors: {},
systemjs: {
configFile: 'system.conf.js',
serveFiles: [
'client/**/*.js',
'server/**/*.js',
],
config: {
defaultJSExtensions: true
}
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: false,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
system.conf.js
System.config({
paths: {
'systemjs': 'node_modules/systemjs/dist/system.js',
'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js',
'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js'
}
});
In my typescript file, I'm loading angular core like this.
import { Component, View } from 'angular2/core';
and it gets transpiled to:
System.register(['angular2/core'], function(exports_1) {
I have tried adding a baseUrl to my systemjs config, it does not seem to do anything.
I have been "googling" and searching stack for a few hours now. I've looked at How to configure karma and systemjs to run tests for angular ES6 transpiled by traceur into amd format ES5 modules and Angular and ES6: Karma Testing with SystemJS and still have not fixed the issue.
in your system.conf.js file you should define a path for all angular modules like this:
System.config({
paths: {
'angular2/*': 'node_modules/angular2/bundles/*.js',
}
});

Karma: Is it possible to load JavaScript files statically before the requirejs framework?

I'm wondering if it's possible to configure Karma (0.10.9) to load certain JavaScript files before its requirejs framework? The reason I'm asking is that Knockout registers as a module with RequireJS if the latter has been included before Knockout, and this breaks another module (which doesn't support RequireJS).
Basically, our karma.conf.js looks as below:
module.exports = function (config) {
config.set({
basePath: "Scripts",
frameworks: ['mocha', 'requirejs'],
files: [
"knockout-2.2.1.debug.js",
"knockout.viewmodel.2.0.3.js",
{pattern: "test/**/*.js", included: false},
{pattern: "shared/**/*.js", included: false},
{pattern: "app/**/*.js", included: false},
],
reporters: ['progress', 'growl'],
// web server port
// CLI --port 9876
port: 9876,
// cli runner port
// CLI --runner-port 9100
runnerPort: 9100,
autoWatch: true,
browsers: ["PhantomJS"],
// If browser does not capture in given timeout [ms], kill it
// CLI --capture-timeout 5000
captureTimeout: 5000,
// Auto run tests on start (when browsers are captured) and exit
// CLI --single-run --no-single-run
singleRun: false,
// report which specs are slower than 500ms
// CLI --report-slower-than 500
reportSlowerThan: 500,
plugins: [
'karma-mocha',
'karma-phantomjs-launcher',
'karma-growl-reporter',
'karma-requirejs'
]
});
}
Apparently it can be done by manually including karma-requirejs files and not including it among the frameworks:
frameworks: ['mocha'],
files: [
"knockout-2.2.1.debug.js",
"knockout.viewmodel.2.0.3.js",
'node_modules/requirejs/require.js',
'node_modules/karma-requirejs/lib/adapter.js',
{pattern: "test/**/*.js", included: false},
{pattern: "shared/**/*.js", included: false},
{pattern: "app/**/*.js", included: false}
]
See this Karma issue for reference.

Tried to add requirejs to my karma tests, and now getting "script error for: jasmine-jquery"

I had a working implementation of karma-based tests without requirejs, and I decided I should add requirejs to it before it got too large.
I'm not sure what I did, but I'm now getting an error message that I don't understand.
The one complaint I have about some of these frameworks is that when something goes wrong, the diagnostics are somewhat mysterious.
This is what I see at INFO level:
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "<projectroot>/src/test/webapp/js/libs/jasmine-query.js" does not match any file.
INFO [Chrome 32.0.1700 (Windows 7)]: Connected on socket ORPzWZDQ7lM8ExSoa6RC
ERROR: 'There is no timestamp for /base/src/test/webapp/js/libs/jasmine-jquery.js!'
WARN [web-server]: 404: /base/src/test/webapp/js/libs/jasmine-jquery.js
Chrome 32.0.1700 (Windows 7) ERROR
Uncaught Error: Script error for: jasmine-jquery
http://requirejs.org/docs/errors.html#scripterror
at <homedir>/AppData/Roaming/npm/node_modules/requirejs/require.js:141
The "does not match any file" warning is the first sign that something's wrong, but I don't see why it's saying that.
Here is my "karma.conf.js":
module.exports = function(config) {
'use strict';
config.set({
basePath: '../../../..',
frameworks: ['jasmine', 'requirejs'],
files: [
{pattern: "src/main/webapp/js/**/*.js", included: false},
{pattern: "src/test/webapp/js/**/*.test.js", included: false},
{pattern: "src/test/webapp/js/libs/jasmine-query.js", included: false},
"src/test/webapp/js/test-main.js"
],
exclude: [
],
plugins:[
'karma-jasmine',
'karma-requirejs',
'karma-coverage',
'karma-junit-reporter',
'karma-phantomjs-launcher',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-ie-launcher'
],
preprocessors: {
"src/main/webapp/js/mylibs/*.js": 'coverage'
},
coverageReporter: {
type: "lcov",
dir: "target/karma-coverage"
},
junitReporter: {
outputFile: 'target/surefire-reports/TEST-karma.xml'
},
reporters: ['dots', 'junit'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};
Here is my "test-main.js":
var tests = [];
for (var file in window.__karma__.files) {
if (window.__karma__.files.hasOwnProperty(file)) {
if (/\.test\.js$/.test(file)) {
tests.push(file);
}
}
}
requirejs.config({
baseUrl: '/base',
paths: {
'jquery': 'src/main/webapp/js/libs/jquery-1.4.2',
'jasmine-jquery': 'src/test/webapp/js/libs/jasmine-jquery'
},
shim: {
'jasmine-jquery': {
deps: ['jquery']
}
},
deps: tests,
callback: window.__karma__.start
});
If it helps, here's a listing of files in src/test/webapp, including some that I'm not using yet (I think):
src/test/webapp/css/jasmine.css
src/test/webapp/js/data.daily.test.js
src/test/webapp/js/init.js
src/test/webapp/js/karma.conf.js
src/test/webapp/js/libs/boot.js
src/test/webapp/js/libs/console.js
src/test/webapp/js/libs/jasmine-html.js
src/test/webapp/js/libs/jasmine-jquery.js
src/test/webapp/js/libs/jasmine.js
src/test/webapp/js/libs/require-2.1.11.min.js
src/test/webapp/js/test-main.js
Which version of jquery-jasmine are you using? Try to update jquery to the latest version (2.1.0 or 1.9.0 if you want to support old browser). I had some issue running jasmine-query with jquery 1.7.0, and updating jquery fix it for me.
Also, jQuery 1.4.2 is quite old (1.4.0 was released on January 14, 2010) so an update wouldn't be a bad idea!
I believe I found a solution to this particular problem. Curiously, the "pattern" sub-property in the files list seems to require it to be an actual pattern, not a path that can only match a single file.
Once I changed the following in my "karma.conf.js":
{pattern: "src/test/webapp/js/libs/jasmine-query.js", included: false},
to:
{pattern: "src/test/webapp/js/libs/*.js", included: false},
it stopped complaining about that.

Karma doesn't find files specified in config file

I'm writing Jasmine tests to my Angularjs app.
I generated karma.conf.js using karma init but when I run karma start i get warnings like this:
WARN [web-server]: 404: /bower_components/angular/angular.js
WARN [web-server]: 404: /js/app.js
karma.conf.js is in my app folder, which is the place for the bower_components folder as well.
I think maybe that could be because of my local test server where I'm using this approach: https://github.com/mhevery/angular-node-socketio
(I've been able to set up the tests like this in other project without a test server)
Can anybody please point me in the right direction here?
Update:
My karma.conf.js looks like this:
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'requirejs'],
files: [
'tests/*.js',
'js/*.js',
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/d3/d3.js'
],
exclude: [],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};
Here's my directory structure:
Now that you've fixed the basepath (from '.' to '', see question comments above), you should change the order of files loading in your karma.conf.js :
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'requirejs'],
files: [
//load angular.js first
//(unless if you use jQuery which must be first if I remember well)
'bower_components/angular/angular.js',
//Then angular-modules
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-mocks/angular-mocks.js',
//Other libs
'bower_components/d3/d3.js',
//Your app scripts
'js/*.js',
//And your specs
'tests/*.js'
],
exclude: [],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};
You can find more info here: http://karma-runner.github.io/0.10/config/files.html
Ordering
The order of patterns determines the order of files in which they are included in the browser.
Multiple files matching a single pattern are sorted alphabetically.
Each file is included exactly once. If multiple patterns match the same file, it's included as if it only matched the first pattern.
Your problem is probably the order you're loading your files in.
You may need to change the order to something like:
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/d3/d3.js',
'js/*.js',
'tests/*.js'
],

Categories