How to refer custom jquery and bootstrap path in reporter.js file?

[thirusabari]

I am new to TDD. Currently I had running more than 2000 test cases parallel with chrome headless browser using https://www.npmjs.com/package/concurrently .The test case are all working fine. If any of the test cases get failed means, i have found the test result for each folder with https://github.com/a11smiles/karma-html-detailed-reporter

I have been generated the coverage report as JSON reports and then converted them to HTML report with https://www.npmjs.com/package/istanbul-combine I have configured the gulp tool to preform multiple tasks for all test cases folders. I am here by to share an 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 share 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 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 was 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 above code, I want to refer 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 custom location for JQuery and bootstratp. My bootstrap and JQuery paths are,

1. Bootstrap.min.js :

   "My_Folder\cireports\bootstrap\dist\js\bootstrap.min.js"

2. Bootstrap.min.css :

   "My_Folder\cireports\bootstrap\dist\css\bootstrap.min.css"

3. jquery.min.js :

   "My_Folder\node_modules\jquery\dist\jquery.min.js"

Could any one tell me, how to refer my locations in karma-html-detailed-reporter/lib/reporter.js file?

Regards,

Creator

`