Loading dependencies outside of the Intern directory when running tests through Selenium - intern

I have a project where Intern unit tests are supposed to be in a different directory tree than the source code under test. Somewhat like this:
projectRoot
projectRoot/src
projectRoot/tests
projectRoot/tests/intern.js
projectRoot/tests/node_modules/intern
projectRoot/tests/MyTestSuite.js
In the Intern configuration file, I define an AMD package that uses relative paths with ../ to reach src from the unit test suites. Here's an example configuration:
define({
environments: [ { browserName: 'chrome', platform: 'WINDOWS' }],
webdriver: { host: 'localhost', port: 4444 },
useSauceConnect: false,
loader: {
packages: [
{ name: 'testSuites', location: '.' },
{ name: 'externalDep', location: '../src' }
]
},
suites: [ 'testSuites/MyTestSuite' ]
});
And a matching unit test suite
define([ "intern!tdd", "intern/chai!assert","externalDep/ExternalDep"],
function(tdd, assert, ExternalDep) {
tdd.suite("Suite that has external dependency", function() {
tdd.test("Test if external dependency is loaded correctly", function() {
assert(ExternalDep === "hello");
});
});
}
);
This works fine when tested directly in the browser (client.html) or node (client.js). When fired off through a Selenium Server (with runner.js), however, the client.html running in the browser started by Selenium can't find the external dependencies. In the above example, it tries to request ExternalDep at http://localhost:9000/__intern/src/ExternalDep.js, which is a 404 because the src directory is not within intern.
I suppose that if I put intern.js at the highest common super-directory of both the tests and the source code, it would work. But our project is currently set up in a way which makes that impractical. Is there a way for configuring sources that live beyond the location of the Intern config file, or did I just make a silly mistake?
Thanks!

There is no problem putting the tests in a different directory from the rest of the code, but projectRoot needs to be the working directory from which you start the runner, and you need to change your loader configuration to match.
So, instead of right now where you are starting Intern from projectRoot/tests like this:
…/projectRoot/tests$ ./.bin/intern-runner config=intern
you need to start it from projectRoot:
…/projectRoot$ ./tests/.bin/intern-runner config=tests/intern
…and change your loader configuration:
loader: {
packages: [
{ name: 'testSuites', location: 'tests' },
{ name: 'externalDep', location: 'src' }
]
},

Related

Node JS + Grunt-sonar-runner + Code Coverage not showing

I created a REST service in node js and wrote the test cases using mocha. I have been able to generate the code coverage using istanbul and is working absolutely fine. Now my requirement is to show the code coverage using Sonar. The code compliance violations are getting listed as expected. But the code coverage is not getting generated in sonar. I doubt there is something wrong with the gruntfile.js configuration. Currently, I generate the code compliance violation by copying the source inside the grunt-sonar-runner folder within node_modules and execute grunt-sonar-runner. My current folder structure is as shown below :
<ProjectRoot>
|--server.js
|--[test]
|--|--serverTest.js
|--[node_modules]
|--|--[grunt-sonar-runner]
|--|--|--[src]
|--|--|--|--server.js
In the gruntfile.js,
grunt.initConfig({
jshint: {
all: [
'Gruntfile.js',
'tasks/*.js',
'test/*.js'
],
options: {
jshintrc: '.jshintrc'
}
},
// Before generating any new files, remove any previously-created files.
clean: {
tests: ['tmp']
},
// Configuration to be run (and then tested).
sonarRunner: {
analysis: {
options: {
debug: true,
separator: '\n',
sonar: {
host: {
url: 'http://localhost:9000'
},
jdbc: {
url: 'jdbc:h2:tcp://localhost:9092/sonar',
username: 'sonar',
password: 'sonar'
},
projectKey: 'sonar:grunt-sonar-runner:0.1.0',
projectName: 'Grunt Sonar Runner',
projectVersion: '0.10',
sources: ['src'].join(','),
language: 'js',
sourceEncoding: 'UTF-8'
}
}
},
dryRun: {
options: {
dryRun: true,
debug: true,
separator: '\n',
sonar: {
host: {
url: 'http://localhost:9000'
},
jdbc: {
url: 'jdbc:mysql://localhost:3306/sonar',
username: 'sonar',
password: 'sonar'
},
projectKey: 'sonar:grunt-sonar-runner:0.1.0',
projectName: 'Grunt Sonar Runner',
projectVersion: '0.10',
sources: ['src'].join(','),
exclusions: '**/R.js'
}
}
}
},
// Unit tests.
mochaTest: {
test: {
options: {
reporter: 'spec'
},
src: ['test/**/*.js'],
}
}
});
we have two sections --> analysis and dryRun. What is this dryRun ?
Just outside that, we have a key called mochaTest.
While running mocha with istanbul, I am getting coverage reports generated in the project root inside a folder called coverage. Unfortunately it is not getting listed in sonar. Any help would be appreciated.
Thanks in Advance,
Noble
Just had to define a sonar-roject.properties in the project root folder. Inside that properties file, we can specify the relative path to the lcov.info generated by istanbul. After starting up the sonar qube server, just run sonar-runner (provided sonar runner is present in the system path). Sonar reports will be visible in sonar dashboard

How do I get the debugger to recognize the sourcemaps in webstorm 10 using the react starter kit

I created a sample react starter kit project in webstorm using webstorm's pre-defined project template and am trying to set breakpoints in debug mode.
I first built the project using npm run build then set the debug configuration to run build/server.js.
However it won't recognize any of the breakpoints in the original source files and seems to be ignoring the sourcemaps. How can I get it to recognize the sourcemaps and allow me to both set breakpoints in the source files as well as step into the source files.
There is this issue in the react starter kit repo: https://github.com/kriasoft/react-starter-kit/issues/121 but I couldn't see what the resolution was, and unlike the commenter, I couldn't even get it to step into the source files... it just stayed on the generated js files instead.
Well...
WebStorm 10 has no support for sourcemaps generated by Webpack. They are partially supported in WebStorm 11 for client-side applications (see http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/), but not supported for Node.js.
so, you can't debug server.js in WebStorm 11, but you can debug client side. To do this, try the following:
change appConfig in src/config.js as follows:
const appConfig = merge({}, config, {
entry: [
...(WATCH ? ['webpack-hot-middleware/client'] : []),
'./src/app.js',
],
output: {
path: path.join(__dirname, '../build/public'),
filename: 'app.js',
},
devtool: 'source-map',
module: {
loaders: [
WATCH ? {
...JS_LOADER,
query: {
// Wraps all React components into arbitrary transforms
// https://github.com/gaearon/babel-plugin-react-transform
plugins: ['react-transform'],
extra: {
'react-transform': {
transforms: [
{
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module'],
}, {
transform: 'react-transform-catch-errors',
imports: ['react', 'redbox-react'],
},
],
},
},
},
} : JS_LOADER,
...config.module.loaders,
{
test: /\.css$/,
loader: 'style-loader/useable!css-loader!postcss-loader',
},
],
},
});
set up the javascript debug run configuration:
URL: http://localhost:5000
Remote URLs: map project root folder to 'webpack:///path/to/react-starter-kit', like 'webpack:///C:/WebstormProjects/react-starter-kit'
map build/public to http://localhost:5000
This doesn't work perfectly, but works in general - breakpoints in src/routes.js, src/app.js are hit

Karma - Istanbul - code coverage report path

I am using karma as a jasmine test runner, with instanbul as a code coverage tool.
All works perfectly, one question though - is there any way I could change the path to the report that is created?
i.e. for Chrome I get /coverage/Chrome%2035.0.1916%20(Windows%207)/index.html ; I would much more happy with /coverage/Chrome/index.html
Any suggestions much appreciated.
Add this to your karma.conf.js:
coverageReporter: {
dir: 'coverage/',
subdir: 'Chrome',
file: 'index.html'
}
EDIT: To have a subdir name based on the name of the browser used for the test:
coverageReporter: {
dir: 'coverage',
subdir: function(browser) {
return browser.toLowerCase().split(/[ /-]/)[0];
},
file: 'index.html'
}

Generating istanbul code coverage reports for jasmine tests run (via grunt) on a browserify bundle in phantomjs

The title says it all really. Despite trawling the internet I haven't found a single example of a solution to this problem.
Here are some near misses
https://github.com/amitayd/grunt-browserify-jasmine-node-example - grunt, browserify and jasmine
https://github.com/gotwarlost/istanbul/issues/59#issuecomment-18799734 - browserify and istanbul
Here is my in-progress code https://github.com/wheresrhys/on-guard/tree/browserify (note it's the 'browserify' branch - Gruntfile.js is a bit of a mess but will tidy it up shortly). My initial investigations using console.log indicate that somehow bundle.src.js is being loaded in the page but when the tests are run (and passed!) the code in bundle.src.js isn't being run, so I have a feeling it might be an aliasing problem... though one that's limited to phantomjs as when I open the specrunner in chrome the code is getting run.
I'm using grunt-browserify + browserify-istanbul + grunt-contrib-jasmine + grunt-template-jasmine-istanbul as solution. This solution has also excluded third party libraries when building source files using browserify.
Show the code first, I'll explain later,
grunt.initConfig({
browserify: {
// build specs using browserify
specs: {
src: ["spec/**/*Spec.js"],
dest: "spec/build/specs.js",
options: {
debug: true
}
},
// build source files using browserify and browserify-istanbul
dev: {
options: {
debug: true,
browserifyOptions: {
standalone: 'abc'
},
transform: [['browserify-istanbul', {
ignore: ['**/node_modules/**'], // ignore third party libs
defaultIgnore: true
}]]
},
src: ['abc.js'],
dest: 'dist/abc.js'
}
},
connect: {
server: {
options: {
port: 7000
}
}
},
// test using jasmine, generate coverage report using istanbul
jasmine: {
coverage: {
src: ['dist/abc.js'],
options: {
junit: {
path: 'bin/junit'
},
host: 'http://localhost:7000/',
specs: 'spec/build/specs.js',
keepRunner: true,
summary: true,
template: require('grunt-template-jasmine-istanbul'),
templateOptions: {
replace: false, // *** this option is very important
coverage: 'bin/coverage/coverage.json',
report: [
{
type: 'html',
options: {
dir: 'spec/coverage/html'
}
}]
}
}
}
}
grunt.registerTask('specs', ['browserify:specs', 'browserify:dev', 'connect', 'jasmine']);
The steps of generating istanbul coverage report can be concluded into three:
Instrument code
Run test
Generate coverage report
In our solution, we use browerify-istanbul in step 1, grunt-contrib-jasmine and runt-template-jasmine-istanbul in step 2 and 3.
browserify-istanbul will let you instrument code in browserify building step, in this way, we can easily ignore third party libs. But the grunt-template-jasmine-istanbul will instrument code again. To avoid this, you can set replace to false in the options.
Refs:
Istanbul steps
broswerify-istanbul
grunt-contrib-jasmine
grunt-template-jasmine-istanbul -- replace option

Configure grunt watch to run Jasmine tests against an app using requirejs

In an attempt to level up my general coding skills... and to learn something new.
I've started attempting to wire up a front end only solution consisting of
Durandal
Jasmine - [added via npm]
Grunt Watch to monitor & run my tests as my code files change - [added via npm]
Feel free to correct me, as this is all based on my experimentation in the last 2 days. Most of this is new to me. My goal is to have something similar as to what angular has with karma.
Now I am aware that that the Durandal project (comes with a custom spec runner, as found in the github solution)
My setup:
gruntfile.js
module.exports = function(grunt) {
var appPath = 'App/viewmodels/*.js';
var testPath = 'Tests/**/*.js';
grunt.initConfig({
jasmine: {
pivotal: {
src: appPath,
options: {
specs: testPath,
template: require('grunt-template-jasmine-requirejs'),
templateOptions: {
requireConfigFile: 'SpecRunner.js'
}
}
}
},
jshint: {
all: [testPath, appPath],
options: {
curly: true
}
},
watch: {
files: [testPath, appPath],
tasks: ['jshint','jasmine']
}
});
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint','jasmine']);
};
SpecRunner.js
require.config({
paths: {
jquery: 'Scripts/jquery-1.9.1',
knockout: 'Scripts/knockout-2.3.0'
},
shim: {
knockout: {
exports: "ko"
}
}
});
When I run grunt, I get a Illegal path or script error: ['plugins/http']
(I've sorted out the ko issue in the screenshot)
Question:
How would i go about setting up my gruntfile to require any dependencies. I'm quite new to require, and I'm not sure how to configure it to make my tests aware of where to find things like 3rd party libraries and other custom js files for that matter
SpecRunner require.config is missing Durandal specific path information. If you set the baseUrl to 'App' then the paths below matches the HTML samples or StarterKit layout. If your layout is different you'd have to adjust this accordingly.
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-2.3.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
}
});

Resources