Why Karma launch an empty browser window? - karma-runner

Should Karma launch a browser that with my front-end app loaded?
I should see a landing page of my app if Karma is correctly loaded, is this correct?
If not loading my app landing page, why Karma launch a visible browser?
This is my karma.config.js
I am learning Karma, not sure if I did everything alright.
var webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};
/*
The entry point from the referenced Webpack configuration
has to be removed or tests will fail in weird and inscrutable
ways. Easy enough, just define an empty entry object.
*/
module.exports = function(config) {
config.set({
bathPath: './dist/',
webpack: webpackConfig,
/* reference the Webpack configuration in the Karma configuration */
preprocessors: {
// './dist/bundle.js': ['webpack'],
'./test/*.js': ['webpack']
/* application’s entry point, karama-webpack plugin requires this */
/* you have to tell Karma that you want the karma-webpack plugin
to process these files. That’s what ['webpack'] does.
*/
},
/*
The plugins section is missing from my karma.config.js file.
When missing, Karma will load any plugins it can find in the
node-modules folder. Much simpler in my opinion.
*/
frameworks: ['jasmine'],
files: [ {pattern: 'index.html', }, './test/*.js'],
/* The files array determines which files are included in the
browser and which files are watched and served by Karma
*/
browsers: ['Chrome'],
reporters: ['progress'],
port: 9876
});
};

This is correct. Karma loads a page which includes all your javascript and all your specs. It then runs any specs that might be in there. This is not full integration testing. This is javascript unit testing.
If you wanted to debug in browser, you can click the debug button and you'll see the page that it runs. Hit that page and check out the console and you'll see your spec output.
You'll need something more for full integration tests like protractor or capybara or ...
Probably depends on what you're using to build your site.

Related

Is it possible to exclude tests on firefox , safari and Edge in protractor?

I am looking to test a scenario where the application blocks the user to proceed edge browser and displays a message that the application is unsupported on edge.
I am unsure if we can exclude test suite on various browsers and make it run only on chrome ?
You can tell protractor which tests should run on each browser by adding a specs property to each browser in the multiCapabilities section. If multiCapabilities is specified then the capabilities property will be ignored.
multiCapabilities: [{
browserName: 'chrome',
specs: ['spec/chromeOnlySpec.js', 'spec/chromeOnlySpec2.js']
}, {
browserName: 'MicrosoftEdge',
specs: ['spec/runsOnEdgeSpec.js', 'spec/runsOnEdge2Spec.js']
}]

How to debug typescript jasmine tests in visual studio?

I have typescript code and typescript jasmine tests running within Karma. I can run the tests from the command-line (using Karma), and also run the tests from the ReSharper test runner. Presumably I could also run the tests using Karma Test Adapter VS extension or VS Adapter for Karma. So, lots of options for running the tests.
My question is: How do I debug the tests, in the VS debugger?
I was able to get Visual Studio debugging of typescript jasmine tests, running in Karma, working. Wow, that's a mouthful.
Here's how I did it:
In IE, Options, Advanced: Clear the "Disable script debugging (Internet Explorer)" checkbox.
Install the node modules (globally) required to run karma - if you haven't already:
npm install -g karma karma-chrome-launcher karma-ie-launcher jasmine-core karma-jasmine karma-jasmine-html-reporter
npm install -g phantomjs karma-phantomjs-launcher
In the karma.conf.js, add support for serving the required sourcemap and typescript files. Here's mine:
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'dist/**/*.js',
'test/out/**/*.js',
// Key addition to support debugging typescript tests
// Enable serving (but don't include as scripts) sourcemap and typescript files
{pattern: '**/*.js.map', included: false},
{pattern: '**/*.ts', included: false}
],
reporters: ['html', 'progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS']
});
}
After compiling your typescript, run karma, launching IE:
karma start --browsers=IE --reporters=html
In Visual Studio, Debug menu | Attach to Process... , then choose the iexplore.exe instance(s) that look right - eg the title may match the Karma web page title ("Karma DEBUG RUNNER" currently), and the process Type must be "Script". If typescript debugging doesn't work, try adding multiple iexplore.exe instances, including all the probably Script instances.
After that, you should see a "Script Documents" folder in Solution Explorer, and you should be able to put breakpoints in your typescript, run the tests in your browser, and step through your typescript code.
It turns out that all these steps also work for debugging Typescript tests and code in Chrome - just change step 4 to:
karma start --browsers=Chrome --reporters=html
(skip step 5) then open Chrome developer tools to debug the typescript in chrome.

Karma runner: how to load plugin from file (inlined plugins)

I want to add a plugin from a local file to Karma. I found this example in the documentation (version 0.1):
Documentation to karma runner
// inlined plugins
{'framework:xyz', ['factory', factoryFn]},
require('./plugin-required-from-config')
This is not even valid javascript. When I try the require version of registering I get
Plugin is not registered.
The require version the same.
How is this supposed to be?
It's not so hard.
First of all you should add your plugin to 'plugins' property in karma.config.js after that you could us it.
module.exports = (config) => {
config.set({
frameworks: ['xyz'],
plugins: [
'karma-*',
{
'framework:xyz': ['factory', ()=> console.log('Your code')]
}
]
})
}

How can I see which error is from which browser with Protractor with selenium grid

We're running Protractor with Selenium Grid, with (for now) 2 browsers. When tests fail I see that they fail, and I see how many tests fail on each browser but somehow I cannot see on which browser the tests fail.
Is this a Selenium or a Protractor shortcoming or am I doing something wrong?
Do you use jasmine reporters? I find the console indicates clear enough in which browser the error originates. And of course the html report is very clear.
Add these in the protractor.conf.js in the onprepare block like this.
onPrepare: function () {
// The require statement must be down here, since jasmine-reporters
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
require('jasmine-reporters');
jasmine.getEnv().addReporter(new jasmine.ConsoleReporter());
jasmine.getEnv().addReporter(new HtmlReporter({
baseDirectory: 'reports/screenshots' ,
takeScreenShotsOnlyForFailedSpecs: true
}));
},
Be sure to use jasmine-reporters ~0.4.0 ,the 1.0.0 does not work yet with protractor because it work with a newer jasmine version then protractor until now uses.

Test coverage with Karma, browserify and Coffeescript

I'm having troubles to add test code coverage, I'm using Karma and files added to Karma are already bundled with browserify, so in karma.conf.coffee it looks like that:
files: [
{ pattern:'bin/public/client/app.js', served:yes: included:yes }
{ pattern:'src/lib/vendor/angular-mocks/angular-mocks.js', served:yes: included:yes }
{ pattern:'bin/tests.js', served:yes: included:no }
]
And that works for running the test, but not coverage
I'm using karma-coverage npm package, and this:
preprocessors: 'bin/public/client/app.js':['coverage']
reporters: ['progress','coverage']
Actually does create coverage stat files, but those are completely wrong, because it reddens parts that browserify brought from node_modules (because I don't have tests to cover those)
Ideally I have to gather source maps that browserify generates, and run coverage against those, but browserify embeds source maps into .js files. Using karma-sourcemap-loader lets me see original coffeescript files of tests, when debugging (for some reason it works only in ChromeCanary, nevertheless it works)
I tried to do preprocessors: 'src/client/**/*.coffee':['coverage'], but that yields no stats at all saying 'No data to display'
Do you have any ideas?
upd:
I've figured by running browserify-istanbul transform right after coffeeify and that gave me nice diagram like this:
Now, I need somehow to remove app.js from it, because really it doesn't matter and really confuses
upd:
Oh, instead of javascript I have to supply coffee files:
preprocessors : {
'bin/tests.js': ['sourcemap']
'src/client/**/*.coffee': ['coverage']
}
Seems I answered my own question. Also it seems there's a bug in current version of karma-coverage - it throws an error when coverageReporter.type is html (which is by default html). I'm glad I've figured it out. It's always nice to see how much code covered by tests