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 :)
Related
I'm trying to setup karma tests for typescript.
karma.conf.js
module.exports = function (config) {
config.set({
frameworks: ['jasmine', 'karma-typescript'],
files: [
{pattern: 'src/main/**/*.ts'}, // Actual code
{pattern: 'src/test/**/*.ts'}, // Unit tests
],
preprocessors: {
'src/main/**/*.ts': ['karma-typescript', 'coverage'],
'src/test/**/*.ts': ['karma-typescript']
},
reporters: ['progress', 'junit', 'coverage'],
// the default configuration
junitReporter: {
...
},
coverageReporter: {
type: 'lcov',
subdir: '.',
dir: 'target/'
},
browsers: ['PhantomJS'],
singleRun: true,
autoWatch: true,
logLevel: config.LOG_INFO,
colors: true,
port: 9876
});
};
the code itself has nothing yet but:
import "expose-loader?jQuery!jquery";
import "expose-loader?Tether!tether";
import "../scss/main.scss";
import "bootstrap";
and the test :
it("should expose jquery to window", () => {
expect(window["jQuery"]).toBeDefined();
expect(window["$"]).toBeDefined();
});
The problem I have is an error that karma is not able to understand expose-loader from webpack giving an error:
ERROR [karma]: Error: Unable to resolve module [expose-loader?jQuery!jquery]
could someone please shed some light on this.
Without expose-loader if I do put jquery manually everything work perfectly fine, but I want just to do it properly.
Thanks!
the problem was in including actual code in "files" rather than importing the class I'm going to test. So I've made
{pattern: 'src/main/**/!(file with expose-loader).ts', include:'false'}
and excluding file that responsible for exposing global objects
I have a large-ish Angular app written in Typescript generating JS files 1:1 plus external modules such as moment and React loaded off the same server. Dependencies are handled by RequireJS.
We added some basic Angular Karma tests which worked fine. This uses a duplicate RequireJS config tweaked to load the tests into Karma.
Now I am trying to test some React components and in the process move to Webpack. So, I have modified the Karma config to use Webpack and installed the external dependencies using npm. I have spent all day trying to get this to work but I cannot find a solution which works for my setup.
karma.conf.js
var path = require('path');
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'requirejs'],
// list of files / patterns to load in the browser
files: [
'ng/*.js',
'ng/**/*.js',
'ng/**/tests/*.spec.js'
],
// list of files to exclude
exclude: [
'app.js', // Old requirejs config
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'*.js': ['webpack', 'sourcemap'],
'ng/**/*.js': ['webpack', 'sourcemap'],
'partials/**/*.html': ['ng-html2js']
},
webpack: { //kind of a copy of your webpack config
devtool: 'inline-source-map', //just do inline source maps instead of the default
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['airbnb']
}
},
{
test: /\.json$/,
loader: 'json',
},
{
test: /\.ts$/,
loader: 'typescript',
},
],
},
externals: {
'react': true,
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
},
webpackServer: {
noInfo: true //please don't spam the console when running in karma!
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS',
'Chrome'
],
plugins: [
'karma-webpack',
'karma-sourcemap-loader',
'karma-requirejs',
'karma-ng-html2js-preprocessor',
//'karma-firefox-launcher',
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-jasmine'
],
babelPreprocessor: {
options: {
presets: ['airbnb']
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity,
});
};
This is what I am getting:
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
ReferenceError: Can't find variable: react
at /vagrant/app/media/website/js/ng/chartApp.js:48060 <- webpack:/external "react/addons":1:0
How should I be setting this up?
This might be happening if you're using Enzyme, which uses some lazy require() calls to maintain compatibility with React 0.13 and 0.14, so Webpack isn't bundling them.
If that's the case, put this in your karma.config.js:
webpack: {
// ...whatever else you have...
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
}
If you're not using Enzyme, this might still be a solution (at least the react/addons part).
See this Karma page for details.
Here's your first problem:
"I have a large-ish Angular app written in Typescript generating JS files 1:1 plus external modules such as moment and React loaded off the same server. Dependencies are handled by RequireJS."
As described in the title, Karma starts PhantomJS browser but NO test result is displayed.
That's all what i get when i run karma start karma.config.js
Works fine when i use Chrome or any other browser.
EDIT:
my karma.config.js file :
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'../../../node_modules/angular/angular.min.js',
'../../../node_modules/angular-mocks/angular-mocks.js',
'../app/**/*.js',
'unitTest/*.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}
EDIT 2:
Problem solved. All i needed was to turn on karma watcher (autoWatch: true).
To help others: the answer is in the question:
All i needed was to turn on karma watcher (autoWatch: true).
I'm using Karma to test my ES6 code. When I add karma-coverage to the mix, I need to add all the source files for the coverage tool to make a useful report, but when I do that, Karma gives me this error in all browsers:
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at /var/folders/55/9_128mq95kz1q_2_vwy7qllw0000gn/T/41cf272955d73fbba8ad1df941172139.browserify:46444:0 <- ../../node_modules/react/lib/invariant.js:49:0
My Karma config file is:
basePath: '',
browserNoActivityTimeout: 100000,
frameworks: ['phantomjs-shim', 'mocha', 'chai', 'browserify'],
files: [
'./client/**/*.js',
'./client/**/*.spec.js'
],
exclude: [
'./client/dist/*.js',
],
preprocessors: {
'./client/**/*.js': ['browserify', 'sourcemap', 'coverage']
},
browserify: {
debug: true,
transform: [
['babelify', {
optional: ["runtime"],
plugins: ["rewire"]
}],
]
},
coverageReporter: {
instrumenters: { isparta : require('isparta') },
instrumenter: {
'**/*.js': 'isparta'
},
type : 'html',
dir : './coverage/'
},
reporters: ['mocha', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome', 'Firefox', 'Safari', 'PhantomJS'],
singleRun: true
If I remove './client/**/*.js', from the files array, the tests work, but then the coverage only show me the tests code. I use Karma from gulp with gulp-karma, but I suppose that this doesn't have anything to do with the problem.
I had that same problem, which in my case occurred because React couldn't find the element in which it needed to render the html.
I found a quick fix by adding the following if statement into my main js file:
if ($('#container').length <= 0) {
$('body').prepend('<div id="container"></div>');
}
ReactDom.render(
<App />,
document.getElementById('container')
);
I'm aware this must not be the best way of fixing it, but at least it works for now. If anyone knows of a better way, please let us know!
Code you are covering is trying to render component into DOM node. Your code relys that it already exists (somewhere in index.html or whatever). But PhantomJS cannot find that DOM node.
You should create it before calling ReactDOM.render or search how to change template of html page used by phantom to run tests (there are plugins doung this).
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.