Support adding mock modules to Angular 2 applications

[alecxe]

Currently it is not possible to add mock modules for Angular 2 applications.

This issue reflects the TODO posted here.

And, to cross-reference the relevant SO post: http://stackoverflow.com/questions/36354233/protractor-mocking-backend-with-angular2-on-api-request.

Thank you.

[jlin412]

@juliemr are we planning to support mock for angular 2? If yes, when? If we uses hybrid mode, will mock continue to work at the meantime?

[juliemr]

@jlin412 yes, eventually, but it will require investigation and careful thinking about how it works in both aot and non-aot. If you use hybrid it will continue to work for the ng1 bits.

Everyone else - please use github's emoji response to +1 issues. Adding comments makes it difficult to parse real progress. I'll be removing these comments so that this is readable. Thanks!

[jlin412]

@juliemr Do we have an ETA on mock implementation for angular 2?
Also, is there alternative that we can use in the meantime?

[kaishuu0123]

FROM: http://stackoverflow.com/questions/36354233/protractor-mocking-backend-with-angular2-on-api-request.

Same is true for the http-backend-proxy and httpbackend packages.

Therefore, I created an E2E test environment using docker-compose, but i feel it's exaggerated implementation.

Do you currently have best practices?

[mdasberg]

I ran into the same issue for mocking my backend calls. As we use connect middleware to run our app, I created a plugin that allows you to mock your angular 1 and 2 http request.

https://mdasberg.github.io/ng-apimock/

maybe you can use it.

[mrmeku]

I'm not sure the machinism by which to do this but I think the naive approach to install mock modules would be the following:

Protractor would somehow override both of these methods:

• platformBrowserDynamic().bootstrapModule
• platformBrowser().bootstrapModuleFactory

In their place would be a simple wrapper which constructs a new ngModule and provides the modules we want to mock out (below is pseudo code of what it would look like):

function bootstrapModuleOverride (moduleToBootstrap) {
  @NgModule({
    imports: [moduleToBootstrap],
    provide: ArrayOfMockModules,
    bootstrap: moduleToBootstrap.bootstrap
  })
  class moduleToBoostrapWrapper {}

  platformBrowserDynamic().bootstrapModule(moduleToBoostrapWrapper);
}

[YoannBureau]

Any idea if there is a planned release for this feature?

[tauil]

+1 for this feature. We need mocks in the e2e tests in Angular 2+ applications!

[PCasafont]

Angular 2+ is growing, so this feature is becoming pretty urgent :)

[alexboisselle-rd]

Yeah is absolutely crucial to our workflow at the moment.

[lfv89]

We already are at angular5 and still unable to mock http in e2e specs 😕

(@tauil small world, huh?)

[leblancmeneses]

Here are common uses I need addMockModule for .

1. injecting custom interceptors.
   https://angular.io/guide/http#writing-an-interceptor
   example capture http activity and writing to disk using protractor if test fails.

2. override functionality in services normally to mock thirdparty data services .

      .decorator(
          'xyzService',
          [
            '$q', '$delegate',
            ($q, $delegate) => {
              $delegate.isEnabled = () => true;
              return $delegate;
            }
            $delegate.getProfileDetail = () =>
                  $q.when({name: 'Tester 001', title: 'E2E Tester'});
          ])

For custom services: we could follow the httpclient template approach. Implementing (1) would potentially solve this also.

3. for access to individual page objects internals (although not kosher)
   ng.probe($0)._debugInfo
   protractor executeScript

[mkopylec]

When will it be implemented?

[thedanhodson]

Could really do with this!

[jamescookie]

This a must-have feature, how can it be two years old?!

As a work-around, you can use jswiremock to stub out the back end calls. I have written up some instructions here: https://gist.github.com/jamescookie/f7b854226ca1e133d1b7b2798095b7f4

[mkopylec]

Another alternative is nock.
It is an universal library for mocking HTTP requests, not dependent on any framework.

[mdasberg]

You can use ng-apimock which is already present on the protractor site. There is a great blog post about it here

You can use it for AngularJs and Angular apps

[00benallen]

This feature is crucial enough that I think it should be part of core protractor, even if ng-apimock was just included into protractor's core libraries.

[Bmahecha123]

Trying to thumbs up as much as I can, what is the progress on this feature? It's a heavy blocker at the moment.

[TetonRaven]

Seriously, has protractor just been abandoned for Angular?

[westonpace]

So this is partly doable without any changes to protractor or angular today. You can create a "mock" configuration to ng serve which will serve up a different set of modules. This should allow you to do backend testing without needing dependent servers up and running and avoid the need of having to implement the mocking at the HTTP layer. I have created an example repository demonstrating this here: https://github.com/westonpace/angular-example-mock-services

I also outline the steps required in my answer to an SO question here: https://stackoverflow.com/questions/39942118/how-to-inject-different-service-based-on-certain-build-environment-in-angular2/51772549#51772549

It isn't as easy/customizable as it was in Angular 1 (e.g. you can't add different mock services for different tests) but once the scaffolding is up and running adding and removing mock services should be pretty straightforward.

[gabrieldoty]

Summary of a quick - clean - library-less way to handle this here:

https://stackoverflow.com/questions/36354233/protractor-mocking-backend-with-angular2-on-api-request/51834607#51834607

[katiesandford]

Is there any update on this? @jlin412 you said that it will require investigation and careful thinking - have you started on this?

[gabrieldoty]

Is there any update on this? @jlin412 you said that it will require investigation and careful thinking - have you started on this?

@katiesandford, I believe the approach detailed at here will accommodate most testing situations in this setup. If it does not, I would love to know what those outliers are so I can think about those for future situations

[gaeljw]

@gabrieldoty With this approach, you can mock at service level but not at http level if I understand well.
Moreover, in a behavior driven development approach, you want your mocks to be dynamic. Different test steps would setup differents mocks. This seems hard to achieve with this setup.

[gabrieldoty]

@gaeljw great points! I can see some rather clunky ways to handle the dynamic mocks, but no question a dynamic solution would be preferable!

My application only uses a single dataservice class to handle all HTTP requests, so it is fairly easy to swap out that one service. But that is not nearly as universal as a true http mock..

Thanks for those thoughts!

[FrancescoBorzi]

any news about this? It looks like Protractor development is no longer that active...

[dubzzz]

any updates?

[flensrocker]

Mocking modules would help to get around #4300

[DenysVuika]

Wow, this ticket is almost 4 years old now! Are there any updates?

[sviat9440]

Any news?

[sujithasekar23]

Using ng-apimock currently, but is there an update to this?