1
votes

I'm trying to integrate my current AngularJS project with Protractor Coverage. Please find below the package.json and my protractor-config.

Package.json

"devDependencies": {
    "chromedriver": "~2.8.1",
    "grunt": "~0.4.0",
    "grunt-contrib-clean": "~0.4.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-jshint": "~0.2.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-uglify": "~0.1.1",
    "grunt-contrib-watch": "~0.3.1",
    "grunt-html2js": "~0.1.0",
    "grunt-karma": "~0.4.4",
    "grunt-protractor-runner": "~1.1.4",
    "grunt-contrib-less": "~0.11.3",
    "grunt-shell": "~0.6.0",
    "selenium": "~2.20.0",
    "grunt-protractor-coverage": "^0.2.1",
    "grunt-istanbul": "^0.2.5",
    "grunt-express-server": "~0.4.5",
    "protractor": "~1.4.0",
    "grunt-contrib-connect": "~0.7.1"
  }

Protractor Config

exports.config = {

    seleniumServerJar: '../../node_modules/selenium/lib/runner/selenium-server-standalone-2.20.0.jar',
    chromeDriver: '../../node_modules/chromedriver/lib/chromedriver/chromedriver',
    baseUrl: 'http://localhost:3000/',

    capabilities: {
        'browserName': 'chrome',
        'chromeOptions': {
            'args': ['incognito', 'disable-extensions', 'start-maximized']
        }
    },

    onPrepare: function() {
        exports.server = require('../../server.js');
    },

    specs: ['../e2e/**/*.spec.js'],  

    jasmineNodeOpts: {
        onComplete: function () {},
        isVerbose: true,
        showColors: true,
        includeStackTrace: true,
        defaultTimeoutInterval: 90000
    }
};

My Grunt Tasks

grunt.registerTask('test', ['clean:coverage', 'copy:instrument', 'instrument',  'protractor_coverage:chrome', 'makeReport']);

    copy: {
        instrument: {
            files: [{
                src: ['src/app/**/*', '!src/app/**/*.js'],
                dest: 'coverage/e2e/instrumented/'
            }]
        },
    },

    clean: {
        coverage: ['coverage', 'instrumented', 'reports']
    }


    instrument: {
        files: 'src/app/**/*.js',
        options: {
            lazy: true,
            basePath: 'coverage/e2e/instrumented'
        }
    },

    makeReport: {
        src: 'coverage/e2e/instrumented/*.json',
        options: {
            type: 'lcov',
            dir: 'coverage/e2e/reports',
            print: 'detail'             
        }
    },


    protractor_coverage: {
        options: {
            configFile: 'test/config/protractor-config.js', // Default config file
            keepAlive: true, // If false, the grunt process stops when the test fails.
            noColor: false, // If true, protractor will not use colors in its output.
            coverageDir: 'coverage/e2e/instrumented',
            args: {}
        },
        chrome: {
            options: {
                args: {
                    baseUrl: 'http://localhost:3000/',
                    // Arguments passed to the command
                    'browser': 'chrome'
                }
            }
        },
    },

When I try to run grunt task all the tests run successfully but the protractor-coverage report is completely empty. I've tried a couple of options but I cannot make the reports to appear.

enter image description here

Question: Am I doing something wrong here? How to make protractor coverage to load my src js files?

3
Can you have a look in your coverage/e2e/instrumented folder to see if your *.js files are getting intstrumented? If they are you will see a lot of ugly code in them. You have to set up your application to load these files instead of the 'normal' ones. Once that is working, inspect them in your browser debugger that your tests are actually using the instrumented files. Depending on you server / backend this can be done in many different ways. If you are using node, I would recommend checking out and running the sample application that is packaged with the Protractor Coverage code. - Carl
Yes, *.js files are getting instrumented and the code is looking minified. We are using "grunt-protractor-coverage" dependency. But we are getting "No coverage object in the browser" warning in console while running the "grunt test". - Dinesh ML
Maybe your coverage server is not starting up. try adding the run:{} option to the end of your task : Code in the answer block coming after this post - Carl

3 Answers

4
votes

Some fantastic person here has a hack that worked for me (http://javahow.net/questions/22350680/code-coverage-for-protractor-tests-in-angularjs)

Basically you add an e2e test that writes out the collected coverage from the browser, something like this:

'use strict';

var fs = require('fs');

describe('Output the code coverage objects', function() {
  it('should output the coverage object.', function() {
    browser.driver.executeScript("return __coverage__;").then(function(val) {
      fs.writeFileSync("coverage/e2e/coverageE2E.json", JSON.stringify(val));
    });
  });
});

I've posted this solution for this question as well in case it helps them too: Protractor coverage not generating report

1
votes

You could try to add the run{} as below:

protractor_coverage: {
    options: {
        ......
    },
    chrome: {
       ......
    },
    run: {}
},
1
votes

just want to add to simonvandyk answer. The coverage variable is not coverage. Instead it seems to have date/time appended by default. What you have to do is set the coverage variable in your gruntfile, under instrument task, add coverageVariable like below.

instrument: {
        files: ['js/*.js'],
        options: {
            lazy: true,
            basePath: "./instrumented",
            coverageVariable: '__coverage__' //<<--- sets it to specific value
        }
    },