Loading ngMock only in testing context when using Protractor

Question

I'm switching all of our protractor E2E tests of an angular app to ngMock, so that we can mock our resources/http calls. However, I can't find a recommended method for loading ngMock in that scenario.

I don't want to include the script itself in my live app of course, but I'm not seeing a clear method through protractor for injecting an extra script element, or dynamically loading it.

Answer 1

You can do is to use grunt-targethtml or gupl-targethtml so in your index.html you can add conditions of when to add an script or not:

    <!--(if target  mock || e2e)><!-->
    <script src="dev-mocks/mock-utils.js"></script>
    <script src="dev-mocks/modules/authentication-service-mock.js"></script>
    <!--<!(endif)-->

First configure your grunt task to execute the targethtml task with the target e2e/mock

 grunt.registerTask(
    'e2e',
    'Automated tests',
    function(target) {
      var tasks = [
          'clean:server',
          'targethtml:e2e',
          'concurrent:server',
          'autoprefixer',
          'connect:e2e'
        ];
        return grunt.task.run(tasks);
    });

Here is a working template with all the tasks, packages and logic necessary to implement Protractor + CucumberJS + sugar-step (for easy sync-async steps executions), and also inject mock modules dinamically using the @Around method of CucumberJS