Karma JS -- How to Include all All Sources? - javascript

I have a +10K lines Backbone Marionette app and we are running tests and coverage through Karma.
I would like to include all the sources so that we can have a better idea of what it is not covered by our tests.
I have been passing the includeAllSources option in the karma configuration but I still don't see karma showing the results for all files (the report only show +3K lines cover, more or less the amount of lines that we know we have test for).
Am I doing something wrong? Is there another way to include all sources?
There use to be a Karma plugin that was able to handle this but the plugin is not longer working (modified to make it run, but the results are still the same).
Is there are way to pass the --include-all-sources option to Istanbul while running it from Karma?

Try this plugin: https://github.com/kopach/karma-sabarivka-reporter. It includes files specified by pattern to coverage statistic. So, you can be sure, that you have all your source files under coverage statistic control.
Install npm install --save-dev karma-sabarivka-reporter
And update karma.conf.js similar to this:
reporters: [
// ...
'sabarivka'
// 'coverage-istanbul' or 'coverage' (reporters order is important for 'coverage' reporter)
// ...
],
coverageReporter: {
include: [
// Specify include pattern(s) first
'src/**/*.(ts|js)',
// Then specify "do not touch" patterns (note `!` sign on the beginning of each statement)
'!src/main.(ts|js)',
'!src/**/*.spec.(ts|js)',
'!src/**/*.module.(ts|js)',
'!src/**/environment*.(ts|js)'
]
},

This github issue seems to be addressing your issue and this pull request seems to fix it in version 0.5.2 of the karma-coverage plugin.
I hope you're using an earlier version and just upgrading solves your problem!

You just need to add includeAllSources: true to your coverageReporter, the Reporter Options.
Like this:
coverageReporter: {
includeAllSources: true
...
}

Related

Measure Babel compilation performance (per file or module)

I'm trying to figure out how to extract some information from babel compilation process.
More specifically, when I run babel (no matter if using Webpack's babel-loader, test frameworks' transformers, Babel's CLI, etc) I'd need to extract some information for each compiled file. Like:
file path
time taken to compile
any other meta data?
What I've tried so far
Speed Measure Plugin for Webpack (link)
Works fine but it provides only Webpack's loaders running time. No info about single compiled files.
Hook into Webpack's compiler/compilation instance
I considered writing a Webpack plugin to hook into the compilation process as described here, but I couldn't find the proper hooks to recognize a file being processed by babel.
Updates
I guess #kidroca pointed out the right direction. More specifically I understand that Babel’s wrapPluginVisitorMethod option is the key for hooking into Babel compilation process.
See babel-minify’s timing plugin.
Related threads:

https://github.com/babel/babel/issues/5340
https://github.com/babel/babel/issues/2206
https://github.com/babel/babel/pull/3659
https://github.com/babel/minify/pull/93
https://github.com/babel/babel/pull/3659
Updates 28/04/18
I eventually tried to wrap a solution into a tool I called babel-timing.
You can use #babel/core and babel.transformSync(code) which will return
Abstract Syntax Tree (AST) information along with some other data. And you can also add some logic to measure the performance of this method
I've setup a minimal repo and played with it myself a little bit: https://github.com/kidroca/babel-meta
Basically you can run npm run analyze-file ./es6-src/es6-module.js or npm run analyze-dir ./es6-src/es6-module.js and checkout the results
This will return:
{
"filename": "/full/path/to/src/file.js",
"cwd": "current/dir",
"ast": "ast information json - lines, comments, and other info",
"executionTime": "execution time in ms",
/* a lot of other info */
}
You can modify the analyze.js file to filter out the info you need
You can modify the .babelrc file to control the transformation and add/remove plugins

Disable Coverage on Untested Files - Jest

When using #vue/cli-plugin-unit-jest, I am receiving coverage reports each time I run my unit tests, regardless of whether I have the --coverage flag in the execution line or not. I do not want to receive coverage reports on all of my untested files. When searching for an answer online, there are numerous questions about how to turn that feature on, not turn it off. I can't find it in the documentation either.
How do you disable the Coverage on Untested Files feature in Jest?
Disabling coverage similar to enabling it, just prefix the pattern with an ! like so:
{
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/folder-with-untested-files/**"
]
}
Or disable coverage all together with "collectCoverage": false.
If that does not work, then you have this params overridden somewhere in your code.
"collectCoverage": false
in jest.config.js
You can also suppress coverage from the command line. The package I'm working with provides a test script, and I was able to pass the collectCoverage option in as a flag. The relative path here works because my test runner is called by npm and that should set the working directory to the root of my project:
npm run test -- path/to/your.spec.js --collectCoverage=false
And the other way around, you can specific a single file to collect coverage from. It'll override any broad-ranging glob you may have already defined in your project's test config files. One reminder, you collect coverage from your source file, not your spec file. And one other reminder, you can list pretty much any file you want in that coverage option, so make sure you get it right:
npm run test -- path/to/your.spec.js --collectCoverageFrom=path/to/your/source/file.js
Package.json
testw": "jest --watch --collectCoverage=false"
watches the test files for change
npm command
npm run testw Yourfilename.js
"collectCoverage": false
in package.json, will disable coverage, collection, As mentioned by #Herman you can also put ! before file pattern in value of property collectCoverageFrom in package.json
In my case, in package.json I have this statement collectCoverage:false and still I was getting errors. Then I realized I also have collectCoverageFrom line and I removed it since I did not need it. After removing the below line it worked as a charm.
"collectCoverageFrom": [
...,
...
]

Sails.js: How to actually run tests

I'm completely new to sails, node and js in general so I might be missing something obvious.
I'm using sails 0.10.5 and node 0.10.33.
In the sails.js documentation there's a page about tests http://sailsjs.org/#/documentation/concepts/Testing, but it doesn't tell me how to actually run them.
I've set up the directories according to that documentation, added a test called test/unit/controllers/RoomController.test.js and now I'd like it to run.
There's no 'sails test' command or anything similar. I also didn't find any signs on how to add a task so tests are always run before a 'sails lift'.
UPDATE-2: After struggling a lil bit with how much it takes to run unit test this way, i decided to create a module to load the models and turn them into globals just as sails does, but without taking so much. Even when you strip out every hook, but the orm-loader depending on the machine, it can easily take a couple seconds WITHOUT ANY TESTS!, and as you add models it gets slower, so i created this module called waterline-loader so you can load just the basics (Its about 10x faster), the module is not stable and needs test, but you are welcome to use it or modify it to suit your needs, or help me out to improve it here -> https://github.com/Zaggen/waterline-loader
UPDATE-1:
I've added the info related to running your tests with mocha to the docs under Running tests section.
Just to expand on what others have said (specially what Alberto Souza said).
You need two steps in order to make mocha work with sails as you want. First, as stated in the sails.js Docs you need to lift the server before running your test, and to do that, you create a file called bootstrap.test.js (It can be called anything you like) in the root path (optional) of your tests (test/bootstrap.test.js) that will be called first by mocha, and then it'll call your test files.
var Sails = require('sails'),
sails;
before(function(done) {
Sails.lift({
// configuration for testing purposes
}, function(err, server) {
sails = server;
if (err) return done(err);
// here you can load fixtures, etc.
done(err, sails);
});
});
after(function(done) {
// here you can clear fixtures, etc.
sails.lower(done);
});
Now in your package.json, on the scripts key, add this line(Ignore the comments)
// package.json ....
scripts": {
// Some config
"test": "mocha test/bootstrap.test.js test/**/*.test.js"
},
// More config
This will load the bootstrap.test.js file, lift your sails server, and then runs all your test that use the format 'testname.test.js', you can change it to '.spec.js' if you prefer.
Now you can use npm test to run your test.
Note that you could do the same thing without modifying your package.json, and typying mocha test/bootstrap.test.js test/**/*.test.js in your command line
PST: For a more detailed configuration of the bootstrap.test.js check Alberto Souza answer or directly check this file in hist github repo
See my test structure in we.js: https://github.com/wejs/we-example/tree/master/test
You can copy and paste in you sails.js app and remove we.js plugin feature in bootstrap.js
And change you package.json to use set correct mocha command in npm test: https://github.com/wejs/we-example/blob/master/package.json#L10
-- edit --
I created a simple sails.js 0.10.x test example, see in: https://github.com/albertosouza/sails-test-example
Given that they don't give special instructions and that they use Mocha, I'd expect that running mocha from the command line while you are in the parent directory of test would work.
Sails uses mocha as a default testing framework.
But Sails do not handle test execution by itself.
So you have to run it manually using mocha command.
But there is an article how to make all Sails stuff included into tests.
http://sailsjs.org/#/documentation/concepts/Testing

How to add a new plugin in karma's configuration file

I wanted to generate an HTML test report from karma, so I used the plugin karma-htmlfile-reporter. I followed the instruction of that plugin. However, the setting below tripped me over:
plugins : [
'karma-htmlfile-reporter'
],
It turns out that this will overwrite the default plugins setting and, unsurprisingly, break some of the things. I ended up using something like below to make it work, which basically manually lists all items I needed:
plugins : [
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-htmlfile-reporter'
],
Albeit not too much extra work and code, it seems dumb. So, is there a better way to add a new plugin in karma's configuration file?
Thank you very much.
You can try just to add it to the reporters once installed, which is cleaner and in theory Karma should load all the karma-* plugins it finds scanning the modules.
// karma.conf.js
module.exports = function(config) {
config.set({
...
// Just add it here
reporters: ['progress', 'html'],
// Specific plugin configuration
htmlReporter: {
outputFile: 'tests/units.html'
}
});
};
Sometimes it the finder doesn't work properly so you have to explicitly say Karma what to load, so you have to do what you've written.

How can I get a list of passing tests from karma runner suite?

When I run karma on my webapp, I only get generic messages like tests passed - is there a way to get a list of passing tests? How do I get more verbose output?
I cannot find this anywhere in the documentation.
I know how this can be done!
Karma's terminal output comes from objects called Reporters. Karma ships with some built-in Reporters (they can be found in karma/lib/reporters). Karma is also able to use custom Reporters.
You can specify which reporters are used in your project's karma.config.js file.
For example, the 'dots' reporter just prints a dot when each test passes:
reporters: ['dots'],
The 'progress' reporter prints more than dots:
reporters: ['progress'],
The custom reporter karma-spec-reporter prints the name of each test when the test succeeds or fails (but not much else):
reporters: ['spec'],
You may want to roll your own reporter, since karma-junit-reporter, karma-spec-reporter, and the included reporters may not meet your needs.
I am guessing that customizing karma-spec-reporter is the best option in this case, since it already prints a line when a test succeeds.
If you are looking for something even more simple to work from, here is a custom reporter that I built. It reports passing and failing tests with no terminal colors.
I recommend the Karma Spec Reporter. This will give you a pretty unit test report like this.
How to use it:
Install the Karma Spec Reporter
On the command line in your project,
npm install karma-spec-reporter --save-dev
Add Karma Spec Reporter to the configuration
In karma.conf.js,
...
config.set({
...
reporters: ["spec"],
specReporter: {
maxLogLines: 5, // limit number of lines logged per test
suppressErrorSummary: true, // do not print error summary
suppressFailed: false, // do not print information about failed tests
suppressPassed: false, // do not print information about passed tests
suppressSkipped: true, // do not print information about skipped tests
showSpecTiming: false // print the time elapsed for each spec
},
plugins: ["karma-spec-reporter"],
...
That is all. Enjoy.
Use this plugin with karma 0.9.0 or later
https://github.com/mlex/karma-spec-reporter
You could add logs to your test spec. Check out log4js-node:
https://github.com/nomiddlename/log4js-node

Categories