We are using Jasmine for our JavaScript unit tests. We have a SpecRunner.html file to run the tests. Does there exist a tool to which I can pass the path to SpecRunner.html and the path to the directory of JavaScript (not the specs) files and it would generate a LCOV report. For example, something like this:
phantomjs jasmine_lcov.js SpecRunner.html WebContent/js
I agree with #zaabalonso that Karma is the correct choice. Since you want LCOV reports, you'll also need the karma-coverage plugin and presuming you want to run headless in CI you'll probably want the karma-phantomjs-launcher. Running through Grunt is optional as you can always run karma directly from the command line with karma-cli (npm install -g karma-cli).
A basic setup (with requireJS) looks something like this:
package.json
{
"private": "true",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-jasmine-node": "^0.3.1",
"grunt-karma": "^0.10.1",
"jasmine-core": "^2.3.4",
"karma": "^0.12.32",
"karma-coverage": "^0.3.1",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4",
"karma-requirejs": "^0.2.2",
"requirejs": "^2.1.17"
}
}
karma.conf.js (Notice the preprocessors and coverageReporter sections
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'requirejs'],
files: [{
pattern: 'src/**/*.js',
included: false
}, {
pattern: 'spec/**/*.js',
included: false
},
"test-main.js"],
preprocessors: {
'src/**/*.js': ['coverage']
},
reporters: ['progress', 'coverage'],
coverageReporter: {
// specify a common output directory
dir: 'build/reports/coverage',
reporters: [
{ type: 'lcov', subdir: 'report-lcov' },
{ type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' }
]
},
browsers: ['PhantomJS']
});
};
test-main.js
var allTestFiles = [];
var TEST_REGEXP = /^\/base\/spec\/\S*(spec|test)\.js$/i;
var pathToModule = function (path) {
return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};
Object.keys(window.__karma__.files).forEach(function (file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(pathToModule(file));
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base/',
enforceDefine: true,
xhtml: false,
waitSeconds: 30,
// dynamically load all test files
deps: allTestFiles,
callback: window.__karma__.start
});
Gruntfile.js (Optional if you want to use Grunt)
module.exports = function(grunt) {
grunt.initConfig({
karma: {
unit: {
configFile: 'karma.conf.js',
options: {
singleRun: true
}
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', ['karma:unit']);
};
You can run the tests command line with karma start. That will launch the karma server and run the tests once. It will keep the server up and will re-run the tests anytime you modify your source or test sources. If you want to run the test only once (in CI perhaps) you simply run karma start --single-run.
Chutzpah will also do this. It is focused on Windows platform however, so that may or may not work for you. Here is the full command line options documentation, but your command might be something like this:
chutzpah.console.exe SpecRunner.html /coverage /lcov coverage.dat
If you need to fine tune things like coverage excludes or references, etc, you can use json config files places in the area where the tests are as described here. There is no need to specify location of your Javascript code under test on command line as that is automatically detected by references in SpecRunner.html.
I have found Chutzpah to be very slick and easy to use.
We are using Karma over grunt the config looks like that:
options = {
karma: {
unit: {
options: {
files: ['test/unit/specs/*.js'],
reporters: ['progress', 'coverage'],
preprocessors: {
'src/js/*.js': ['coverage']
},
coverageReporter: {
type : 'html',
dir : 'build/coverage/'
},
frameworks: ['jasmine'],
singleRun: true
}
}
}
}
you don't specify the
SpecRunner.js
but you can specify *.js for all your spec files.
you can run it with
grunt karma
that will generate your report similar to the one you showed.
Related
I use Jest to write and run units tests. I want to get test coverage reports from source code files, these files are in a node_modules directory, but these files are completely ignored.
Why would I do it? Because it is using AWS SAM, and I have different lambda layers under the project root directory, so I have multiple node_modules subdirectories, too.
I tried to override this setting with the Jest's forceCoverageMatch option and to exclude specific files withtransformIgnorePatterns. I read several issues on GitHub (https://github.com/facebook/jest/issues/2145, https://github.com/facebook/jest/issues/5046, https://github.com/facebook/jest/issues/5039).
In package.json:
"scripts": {
"test": "jest --ci --passWithNoTests --config ./jest.config.js"
}
...
"devDependencies": {
"jest": "^24.8.0",
"jest-junit": "6.4.0"
}
In jest.config.js:
module.exports = {
verbose: true,
clearMocks: true,
collectCoverage: true,
coverageReporters: ['html', 'cobertura'],
collectCoverageFrom: [
'**/*.{js,jsx}',
],
reporters: ['default', 'jest-junit'],
moduleFileExtensions: ['js', 'jsx']
moduleNameMapper: { '^/(.*)$': '<rootDir>/src/*/$1' }
}
I expect that every .js file should be included in the test coverage. And every test are included, except the ones under a node_modulse subdirectory.
We have built our application using UI5 library and written jasmine tests for these. We have difficulty in gettting the coverage for these javascript files.
Project Structure:
Currently, our project structure consists of the typical model, view, controller structure. We have around 1000 files kept in different hierarchies.
Problem at hand:
I am trying to get coverage for this project and trying out Karma for this.
With the default karma configuration, I ran the tests. The tests failed and based on the logs I could see that karma expects all the files in the project to be listed in the order of their dependencies. This would be extremely difficult for me as the number of files is huge.
Questions:
Is my understanding of Karma right? Is providing all the files in the order of their dependency the only way?
Does anyone know any alternate solution or alternate library where I can get coverage for my javascript files?
The complete karma.config.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'openui5'],
openui5: {
path: "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js",
useMockServer: false
},
client: {
openui5: {
config: {
theme: 'sap_bluecrystal',
libs: 'sap.m,sap.bpm',
resourceRoots: {
"sap.bpm": "base/target/appresources/com/sap/bpm",
}
}
}
},
files: [
'src/**/*.js' , 'test/**/*.js'
],
preprocessors: {
'test/**/*.js': ['coverage']
},
captureTimeout: 210000,
browserDisconnectTolerance: 3,
browserDisconnectTimeout: 210000,
browserNoActivityTimeout: 210000,
plugins: [
'karma-jasmine',
'karma-coverage',
'karma-chrome-launcher',
'karma-openui5',
'karma-requirejs'
],
reporters: ['progress', 'coverage'],
port: 9878,
colors: true,
logLevel: config.LOG_DEBUG,
autowatch: false,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity,
coverageReporter: {
includeAllSources: true,
dir: 'coverage/',
reporters: [
{ type: "html", subdir: "html" },
{ type: 'text-summary' }
]
}
});
};
Ok so : in the preprocessor entry, you have to specify which files you want to instrument for coverage.
In your conf file you set the test files for instrumentation, which is very unlikely to be what you want to achieve
switching to
preprocessors: {
'src/**/*.js': ['coverage']
},
is likely to give you better results :)
We have installed karma, which is using mocha and chai for tests. We are trying to integrate babel straight into karma using karma-babel-preprocessor, to do the converting of our ES6 files into ES5 to be run. Using mocha individually works with babel, i.e. a mocha test command, but we try to use karma instead it doesn't work.
karma.conf.js snippet:
frameworks: ['mocha', 'chai'],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'src/**/*.js': ['babel'],
'test/**/*_spec.js': ['babel']
},
"babelPreprocessor": {
options: {
presets: ['es2015'],
sourceMap: 'inline'
},
filename: function(file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function(file) {
return file.originalPath;
}
},
// list of files / patterns to load in the browser
files: [
'src/**/*.js',
'test/**/*_spec.js'
],
package.json snippets:
"scripts": {
"test": "./node_modules/karma/bin/karma start karma.conf.js"
},
"babel": {
"presets": ["es2015"]
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"chai": "^3.4.1",
"karma": "^0.13.15",
"karma-babel-preprocessor": "^6.0.1",
"karma-chai": "^0.1.0",
"karma-mocha": "^0.2.1",
"karma-phantomjs-launcher": "^0.2.1",
"phantomjs": "^1.9.18",
"redux": "^3.0.4"
}
We get the following error:
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: exports
at Users/alexgurr/BT/FutureVoice/trunk/Portal/server/src/login.es5.js:3
When we evaluate the JS files being loaded, they haven't been converted to ES5, hence the syntax 'export' is still present.
We don't want to use any other frameworks for conversion, ie. webpack, browserify etc.
Thanks!
I've been struggling for the past few hours with the same issue. I'm not sure if your use case is the same as mine, but I finally figured it out.
Code under test src/foo.js:
var foo = "foo value";
export default foo;
Test code tests/foo.spec.js:
import foo from "../src/foo.js";
describe('Foo', function() {
it('should be "foo value"', function() {
expect(foo).toBe('foo value');
});
});
karma.conf.js file before:
{
// other configs
files: [
'src/**/*.js',
'tests/**/*.spec.js',
],
preprocessors: {
'src/**/*.js': ['babel'],
'tests/**/*.spec.js': ['babel'],
},
babelPreprocessor: {
options: {
"presets": ["es2015"]
}
}
}
This yielded the ReferenceError: Can't find variable: exports error you saw.
The fix:
npm install --save-dev babel-plugin-transform-es2015-modules-umd
Add following to karma.conf.js
babelPreprocessor: {
options: {
"presets": ["es2015"],
"plugins": ["transform-es2015-modules-umd"]
}
}
Then the error went away.
Also, note that the following export declarations (which I believe should be correct) do not work.
// exports an object
export default var foo = "something";
// exports undefined
export var bar = "something else";
The problem is that you still didn't bundle/wrap your files to be able to execute CommonJS modules in the browser (because Babel transpile es2015 modules into CommonJS and CJS is default module system for node, not for browsers where Karma run its tests). So your options are:
Use karma-commonjs wrapper (if you want to add all your dependencies manualy)
Use browserify bundler with babelify plugin
Use webpack bundler
I think you still need babel, not just the preset.
npm i babel --save-dev
I have almost the same configuration on one of my project, meaning letting karma pre-process my file on the fly, and the only difference for me is that I have installed babeljs also.
Hope this helps.
Cheers
I set up grunt to run node.js jasmine tests. For some reason, with this config, the results always show double the tests.
Here is my config:
I'm using jasmine-node which plugs into grunt.
/spec/some-spec.js:
var myModule = require('../src/myModule.js');
describe('test', function(){
it('works', function(done){
setTimeout(function(){
expect(1).toBe(1);
done();
}, 100);
});
});
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
This results in two tests running rather than one.
> grunt
Running "jasmine_node:all" (jasmine_node) task
..
Finished in 0.216 seconds
2 tests, 2 assertions, 0 failures, 0 skipped
I was able to reproduce the behavior. This is what seems to be happening:
The task looks in the specified folder (spec in your case) for files with spec in the name.
Then it looks again in every folder in the whole project for files with spec in the name.
What it ends up with is 2 overlapping sets of test files to run.
My first attempt at trying to coerce it into more logical behavior was to set specNameMatcher: null (default is 'spec'), and leave the folder set to 'spec/'. This results in no tests being run, since apparently both conditions (name and folder) must be met for files in the specified folder. You get the same problem if specNameMatcher is left at the default value, but the files in the folder don't have 'spec' in the name.
What does work is to set the folder (or 'test set' or whatever you want to call it) to []:
jasmine_node: {
options: {
forceExit: true
},
all: []
}
The catch is that if you have any other files somewhere else in the project with 'spec' in the name, they'll be mistaken for tests by jasmine.
I would consider this behavior a bug, and it should probably be reported via the project's github issues page.
This grunt plugin ( https://github.com/jasmine-contrib/grunt-jasmine-node ) seems to be dead ( https://github.com/jasmine-contrib/grunt-jasmine-node/issues/60 ).
Maybe it is a better to switch to https://github.com/onury/grunt-jasmine-nodejs ?
The jasmine-node project is pretty old. The latest commit is from July of 2014. The grunt-jasmine-node plugin appears to be active, but running against something that is going stale seems a little pointless IMHO.
To test CommonJS modules using Jasmine I'd recommend using Karma along with the
karma-jasmine and karma-commonjs plugins. I got your example working with the following files:
package.json
{
"private": "true",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-jasmine-node": "^0.3.1",
"grunt-karma": "^0.10.1",
"jasmine-core": "^2.3.4",
"karma": "^0.12.31",
"karma-commonjs": "0.0.13",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4"
}
}
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'commonjs'],
files: [{
pattern: 'src/**/*.js'
}, {
pattern: 'spec/**/*.js'
}],
preprocessors: {
'src/**/*.js': ['commonjs'],
'spec/**/*.js': ['commonjs']
},
reporters: ['progress'],
browsers: ['PhantomJS']
});
};
Gruntfile.js (optional if you still want to use grunt)
module.exports = function(grunt) {
grunt.initConfig({
karma: {
unit: {
configFile: 'karma.conf.js',
options: {
singleRun: true
}
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', ['karma:unit']);
};
You should also install the karma command line runner globally, just like you probably did with grunt. npm install -g karma-cli
From your command line you can start karma by typing karma start. It will run the tests and then watch your files and re-run them on every save. (VERY NICE)
Alternatively you can run karma start --single-run to have it just run your tests once and exit. If you also updated your Gruntfile you can also just run grunt to run the tests once.
The current up voted answer isn't the solution. You simply modify the expression that's going to match your tests. The answer is as follows:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/*spec.js']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
Here you can see that 'all' is set to *'spec/spec.js'. This will search for all tests.
Secondly, just because a project hasn't had a recently commit, doesn't mean it's "old". jasmine-node is simply stable.
I have the same issue using grunt-jasmine-node, and as aeryaguzov points out, that project is no longer maintained. Switching to grunt-jasmine-node-new solves the issue for me.
grunt-jasmine-node-new is a fork of grunt-jasmine-node that is actively maintained, and can be found here: https://www.npmjs.com/package/grunt-jasmine-node-new
I have a fairly simple karma.config.js file
basePath = '../';
files = [
JASMINE,
JASMINE_ADAPTER,
'js/lib/angular*.js',
'test/lib/angular/angular-mocks.js',
'js/**/*.js',
'test/unit/**/*.js'
];
autoWatch = true;
browsers = ['PhantomJS'];
When I run karma start config/karma.conf.js --single-run I'm getting the following output
$ karma start config/karma.conf.js --single-run
[2013-06-24 23:47:08.750] [DEBUG] config - autoWatch set to false, because of singleRun
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9 (Mac)]: Connected on socket id LwMoWxzIbSUuBsvIqB_m
PhantomJS 1.9 (Mac): Executed 6 of 6 SUCCESS (0.073 secs / 0.02 secs)
I've been searching for something to tell me how to get the output of the tests that get logged (e.g. SUCCESS Unit: services myService should behave)
The only way I can see the output of the tests is to open Chrome and click 'Debug', then show the developer tools console. I want the messages to be logged out to the terminal, but I cannot figure out how to get this working.
Fixed by installing the karma-spec-reporter
npm install karma-spec-reporter --save-dev
and adding this my karma.config.js
reporters: ['spec'],
According to karma documentation
By default, Karma loads all NPM modules that are siblings to it and their name matches karma-*.
but some users have had to add the following to their config
plugins: ['karma-spec-reporter']
Just another detail - if you keep the default reporter 'progress' in the karma.config.js, like below:
reporters: ["progress", "spec"]
or another console reporter, the "spec" reporter output won't work.
You should keep only the "spec" one, or the "spec" with other browser reporters. For example:
reporters: ["spec", "coverage"]
I wrote a reporter to make the output more readable: karma-helpful-reporter
Has some nice customization options: https://github.com/whyboris/karma-helpful-reporter
Instal instructions inside, basically npm install --save-dev karma-helpful-reporter and then add to the Karma configuration plugins section:
plugins: [
require('karma-helpful-reporter')
],
reporters: [ 'helpful' ],
You can also use the Karma-mocha-reporter
as reporter and you should have a clean report in your console.
npm i karma-mocha-reporter --save-dev
// karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
// reporters configuration
reporters: ['mocha']
});
};
Sometimes, e.g in #angular/cli environment you should require this like:
plugins: [
...
require('karma-mocha-reporter'),
...
]
Here is my working (draft) configuration without the section 'plugins' (actually I don't fully understand why I should need to specify them ...):
package.json
"devDependencies": {
[...]
"grunt-karma": "~0.9.0",
"karma": "~0.12.24",
"karma-jasmine": "~0.2.3",
"karma-chrome-launcher": "~0.1.5",
"karma-phantomjs-launcher": "~0.1.4",
"karma-spec-reporter": "0.0.13"
}
karma.conf.js
module.exports = function (config) {
config.set({
frameworks: ['jasmine'],
reporters: ['spec'],
browsers: ['PhantomJS']
});
};
Gruntfile.js
karma: {
options: {
configFile: 'karma.conf.js',
files: [
'app/libs/angular.js',
'app/libs/angular-resource.js',
'app/libs/angular-route.js',
[...]
'app/modules/**/*-spec.js'
]
},
unit: {
singleRun: true
}
}
Now when I run grunt karma messages from the *-spec.js files (describe('message', function() ...)) are displayed nicely in the console.