This article delves into creative ways to utilize Protractor. One interesting topic it covers is the lesser-known addMockModule() function of the Protractor browser object. This function enables users to generate angular modules in Protractor (such as mocks or stubs of your API module) and deploy them to the browser to substitute the actual implementation within a specific test scenario or series of scenarios.

When working with Protractor tests, it's important to note that you won't have direct access to $httpBackend, controllers, or services. One workaround is to create a separate angular module and include it in the browser during the test.

  beforeEach(function(){
    var httpBackendMock = function() {
      angular.module('httpBackendMock', ['ngMockE2E', 'myApp'])
        .run(function($httpBackend) {
          $httpBackend.whenPOST('/api/packages').respond(200, {} );
        })
    }
    browser.addMockModule('httpBackendMock', httpBackendMock)
  })

Using ngMockE2E, you can simulate a backend for your application. For more detailed information on this topic, check out this informative post:

Even though I have not personally tested it yet, Angular offers a mock $httpBackend for end-to-end tests:

http://docs.angularjs.org/api/ngMockE2E/service/$httpBackend

Based on the information from the provided documentation, it seems possible to utilize the following setup before running your tests:

beforeEach(function() {
  $httpBackend.whenGET('/remote-url').respond(edgeCaseData);
});

If you're looking for mocking frameworks, I can recommend two that might be helpful to you. One is the ng-apimock and the other is json-server.

Personally, I've recently started using the ng-apimock API for mocking backend REST calls. It offers some interesting functionality through this npm library. With ng-apimock, you can define and select Scenarios and Presets, allowing you to configure which mock to use for each e2e test case. This level of control over e2e tests by providing necessary response data is quite valuable. However, the set-up process, as many online blogs suggest, is not as straightforward as it may seem. Regardless, it seems to be a suitable solution for my specific use case.

For working with this API, I had to set up a proxy.conf.json file along with defining mocks and presets, and also manage some Protractor configurations.

This API allows you to precisely configure the values to be returned from each API endpoint during e2e test runs. You can even adjust the values returned for individual e2e test cases. Additionally, there is an option called passThrough, which enables you to temporarily disable the mocks and direct calls to your real HTTP backend.

If you need more detailed information, feel free to reach out, and I can provide you with guidance on how to set it up.

UPDATE(LONG POST ALERT!!) :

Mock Server Setup (ng-apimock & protractor with express, concurrently)

mock-server.js

const express...
... 
app.listen(app.get('port'), function() {
    console.log('mock app-server running on port', app.get('port'));
});

package.json(scripts section)

...

package.json(devDependencies section)

...

mock-proxy.conf.json

...

Protractor Configuration

...

angular.json Changes

...

E2E Usage

...

The examples provided showcase the potential of mocking REST calls for E2E tests using Protractor and ng-apimock.

ng-apimock Docs

Looking for an efficient way to manage success and error scenarios when mocking? Check out my customizable mock module that could streamline your mocking process.

https://github.com/unDemian/protractor-mock

When it comes to mocking services in protractor, I have been experimenting with various approaches and finally found a solution that suits my needs. Instead of intense mocking, I focus on generating error responses since I already have a method to populate the backend through fixtures on my API server.

The key to this solution lies in using the $provide.decorator() method to tweak certain functions. Let me show you how it's implemented in the tests:

it('should mock a service', function () {
    app.mock.decorateService({
        // This snippet will cause the "login()" method of the "user" service to return a rejected promise
        // and the provided object will be used as the rejection reason.
        // The rejectPromise() is a utility function.
        user: app.mock.rejectPromise('login', { type: 'MockError' }),

        // You can modify the service behavior here
        // Warning! This code is serialized and sent to the browser
        // thus, it does not have access to Node environment
        api: function ($delegate, $q) {
            $delegate.get = function () {
                var deferred = $q.defer();
                deferred.resolve({ id: 'whatever', name: 'tess' });
                return deferred.promise;
            };
            return $delegate;
        },

        // In the background, decorateService converts the function into a string
        // You can also provide a string directly if you prefer
        // Useful for defining custom helper methods like "rejectPromise()".
        dialog: [
            "function ($delegate, $window) {",
                "$delegate.alert = $window.alert;",
                "return $delegate;",
            "}"
        ].join('\n')
    });

    // ...

    // Important!
    app.mock.clearDecorators();
});

Below is the snippet of the code:

App.prototype.mock = {
    // Make sure this is invoked before ".get()"
    decorateService: function (services) {
        var code = [
            'var decorator = angular.module("serviceDecorator", ["visitaste"]);',
            'decorator.config(function ($provide) {'
        ];

        for (var service in services) {
            var fn = services[service];

            if (_.isFunction(fn)) {
                code.push('$provide.decorator("'+ service +'", '+ String(fn) +');');
            } else if (_.isString(fn)) {
                code.push('$provide.decorator("'+ service +'", '+ fn +');');
            }
        }

        code.push('});');

        browser.addMockModule('serviceDecorator', code.join('\n'));
    },
    clearDecorators: function () {
        browser.clearMockModules();
    },
    rejectPromise: function (method, error, delay) {
        return [
            'function ($delegate, $q) {',
                '$delegate.'+ method +' = function () {',
                    'var deferred = $q.defer();',
                    '',
                    'setTimeout(function () {',
                        'deferred.reject('+ JSON.stringify(error) +');',
                    '}, '+ (delay || 200) +');',
                    '',
                    'return deferred.promise;',
                '};',
                '',
                'return $delegate;',
            '}'
        ].join('\n');
    }
};

Utilizing protractor to conduct end-to-end tests serves the purpose of verifying the smooth integration of the application. When it comes to testing individual UI components separately, it is more efficient to incorporate small elements into regular tests, much like AngularJS tests its directives.

However, for those who are intent on mocking, one approach is to generate a distinct version of the application with placeholders replacing real services.

Check out these additional options for simulating an HTTP server:

• MockServer is a versatile mock server that supports various platforms like Java, .Net, and Node. It requires installation and self-hosting.
• JSONPlaceholder is a cloud-based service for creating fake APIs. It also offers API documentation generation features.