I am new to TDD. Currently, I had run more than 2000 test cases parallel with chrome headless browser using concurrently-npm package. All the test cases are working fine. If any of the test cases get failed means, I have found the test result for each folder with karma-html-detailed-reporter.
I have been generated the coverage report as JSON reports and then converted them to HTML report with istanbul-combine package. I have configured the gulp tool to perform multiple tasks for all test cases folders. I am hereby to share sample gulp tasks for one of my folder,
gulp.js file:
/**
* Generates json code coverage report in folder reporters/new
*/
gulp.task('new', function (done) {
return new Server({
configFile: __dirname + '/karma.conf.new.js',
action: 'run',
singleRun: true,
preprocessors: {
'js/**/**/**/*.js': ['coverage'] //' js/**/**/*.js'
},
reporters: ['progress', 'htmlDetailed', 'coverage'],
coverageReporter: {
dir: './cireports',
subdir: "reporters/json_reports",
reporters: [
{ type: 'json', file: "new.json" }
]
},
customLaunchers: {
MyHeadlessChrome_Mobile: {
base: 'ChromeHeadless',
flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223', "--headless", "--disable-gpu", "--window-size=500,500"],
}
},
browsers: ['MyHeadlessChrome_new']
}, done).on('error', function (err) {
throw err;
}).start();
});
I have multiple karma-configuration files for each test case folders. I am hereby sharing one of my karma configuration file.
karma.config.js :
module.exports = function(config) {
config.set({
browsers: ['Chrome', 'IE', 'Firefox', 'ChromeHeadless'],
frameworks: ['jquery-1.10.2', 'jasmine-jquery', 'jasmine'],
files: [
'js/**/**/**/**.min.css',
'js/**/**/**/**/*.min.css',
'js/*/*/new/*.js',
{
pattern: 'js/**/**/Index.html',
watched:true,
served:true,
included:false
}
],
port:9888,
browserNoActivityTimeout: 100000,
captureTimeout: 100000,
reporters: ['progress', 'htmlDetailed'],
htmlDetailed: {
splitResults: false,
dir: 'cireports/nunit/new',
fileName:'TestResult.html',
autoReload: false,
useHostedBootstrap: true
},
coverageReporter: {
type: "html",
check: {
each: {
statements: 0,
branches: 0,
functions: 0,
lines: 0
}
}
}
});
};
package.JSON :
{
"name": "gulp-karma",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "gulp test",
"ci": "gulp ci",
"coverage": "concurrently \"gulp zero\" \"gulp one\" \"gulp two\"",
"coverage_report": "concurrently \"gulp generate_newcoverage\" \"gulp generate_combined_coverage\"",
"lint": "gulp runeslint"
},
"devDependencies": {
"concurrently": "^3.5.0",
"eslint-html-reporter": "^0.5.2",
"ghooks": "^1.2.4",
"gulp": "^3.9.1",
"gulp-csslint": "^0.3.1",
"gulp-eslint": "^2.0.0",
"gulp-jasmine": "^2.4.1",
"gulp-lesshint": "^2.0.0",
"gulp-shell": "^0.6.3",
"istanbul-combine": "^0.3.0",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"jasmine-jquery": "^2.1.1",
"jquery-1x": "^1.10.2",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.0",
"karma-html-detailed-reporter": "^1.1.20",
"karma-ie-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-jasmine-jquery-2": "^0.1.1",
"karma-jquery": "^0.1.0",
"karma-safari-launcher": "^1.0.0"
},
}
After the test case execution, the test result for the folder will generate in "cireports/nunit/..."
But in my source, only TestResult.html only generated, the bootstrap and JQuery was not created in that Nunit folders with karma-html-detailed-reporter. Even though, if I set the "useHostedBootstrap: true" value to true, the bootstrap and JQuery files were not created in my unit folder.
The following code shows the reporter.js file default code :
karma-html-detailed-reporter/lib/reporter.js:-
if (useHosted) {
template = template.replace(/\{\{jquery_Path\}\}/g, 'https://code.jquery.com');
template = template.replace(/\{\{bootstrap_Path\}\}/g, 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7');
} else {
var basePaths = getRelativePaths();
template = template.replace(/\{\{jquery_Path\}\}/g, basePaths.jquery);
template = template.replace(/\{\{bootstrap_Path\}\}/g, basePaths.bootstrap);
}
.....
.....
function getRelativePaths() {
var paths = {};
// Get bootstrap's path
var bootstrap = require.resolve('bootstrap');
if (!bootstrap) log.error('Bootstrap is not found!');
else {
bootstrap = require('path').dirname(bootstrap);
bootstrap = splitResults ? path.relative(outputDir + '/tempFolder/', bootstrap) : path.relative(outputDir, bootstrap);
paths.bootstrap = bootstrap.substring(0, bootstrap.indexOf("\\js")).replace(/\\/g, '/'); // <- This gives the path of the '/js' subfolder of bootstrap, so we need to go one level up
}
// Get jquery's path
var jquery = require.resolve('jquery');
if (!jquery) log.error('jQuery is not found!');
else {
jquery = require('path').dirname(jquery);
paths.jquery = (splitResults ? path.relative(outputDir + '/tempFolder/', jquery) : path.relative(outputDir, jquery)).replace(/\\/g, '/');
}
log.debug('Paths: ', paths);
return paths;
}
In the above code, I want to refer to custom JQuery and bootstrap location with my source. because useHostedBootstrap was not working in karma-html-detailed-reporter. That's why I've switched into a custom location for JQuery and bootstratp. My bootstrap and JQuery paths are,
Bootstrap.min.js :
"My_Folder\cireports\bootstrap\dist\js\bootstrap.min.js"
Bootstrap.min.css :
"My_Folder\cireports\bootstrap\dist\css\bootstrap.min.css"
jquery.min.js :
"My_Folder\node_modules\jquery\dist\jquery.min.js"
And also, I had posted an issue regarding this, custom jquery and bootstrap path in karma-html-detailed-reporter-issues.
Could anyone tell me, how to refer my locations in karma-html-detailed-reporter/lib/reporter.js file?
