Override mock api calls in protractor - angularjs

My angular app has mock module added for each api call to run it locally.
Now I am trying to write protractor test case where I want to override one of the api from those mocked api.
Based on that api my view will show different ui components.
Now if I create new mock module in my protractor test case with only that single api then page wont render properly.
How can I override only one api from the existing mocked apis?
Is there a way to pass other rest calls to the base mock module?

You might want to start JS mock backend using express, then using express-http-proxy setup dynamic proxy to decide for each request - does it go to real backend or to mock backend.
Leave mock-modules inside your app for js unit tests.

Related

What can I use for mock fetch-requests while e2e testing in protractor similar to addMockModule without Angular

I am writing e2e test with protractor for a typescript module. I want to use protractor for the additional features in comparison to selenium webdriver. I am using typescript standalone so I am building a non-angular application.
I searched a lot for mocking services or fetchmock etc. But I think I am searching at the wrong place. Maybe I just didn't understood what do I really need for my problem.
At the moment I have an application where I want to test the frontend. My problem is, that the application only works with a server which is setting up many data and make it available for rest. Without this server my javascript file wont work and I wont start the server for my tests, it must be server independent.
For example: my server provide the data on a specific address 192.168.1.230 and I can fetch the data with fetch api over: 192.168.1.230/users/1.
In unit tests I have mocked my fetches, but in e2e tests I need to mock the address (maybe with selenium webdriver) and want to get a dummy response if my api is fetching this data.
How can I realise that? I use protractor with npm (nodejs) and could need a npm plugin for this.
I saw another post here with the addMockModule, but this is only for angular modules and I don't use angular.

AngularJS unit testing: Constructor Test: Windows Azure Invoke Api

I am making an Hybrid App using Ionic(AngularJS).
I have a generic factory which uses an invoke Api method of WindowsAzureService JS SDK. And I am unit testing my application.
var mClient = new WindowsAzure.MobileServiceClient(applicationUrl,applicationKey);
mClient.invokeApi(api, data, header)).done(function (res) {
// do something
})
I am not using $http, so I can't mock test cases with a $httpBackend. I would like some help on how to test api calls using windowsAzureServices.
Also how to I spyOn this constructor?
Github link to SDK
There isn't a test harness for Mobile Services. You'll want to follow JB Nizet's advice and create one which can mockup the results you expect.
Alternatively, you can call the API directly and set the appropriate ZUMO headers for auth. Then you can use $http and $httpBackend. It's worth checking out Mobile Services GitHub and looking at how they run E2E tests against the client. You can probably use something similar.

Mocking an asynchronous web service in Angular unit tests

I'm building an Angular app, and I'm writing unit tests for it. Yay unit tests. I want to mock a particular web service that I'm using (Filepicker.io), which has both a REST API as well as a Javascript API. In my code I use the Javascript API in calls like
filepicker.store(file,
{
options: 'go',
right: 'here'
},
// filepicker's success callback
function(resultObject){
// do stuff with the returned object
}
I know that I could use the $httpBackend provider if I were interacting with Filepicker's REST API, but since my application's code isn't doing that, I'm wondering if/how I could mock an asynchronous API call like this in an Angular unit test.
Do I just override the store method (or the whole filepicker object) in context of my test suite and make it return dummy data of my choosing? That's what they're doing with AngularFire development, with a library that overrides the 'real' Firebase backend service.
Alternately, could I wrap the method in something that uses $httpBackend, so I can use all those handy $httpBackend methods like respond? What's the right strategy here? The first one seems like a simpler and cleaner idea.
Here are some other questions that were similar but ultimately not clear enough for me to fully understand.
AngularJS: unit testing application based on Google Maps API
Unit testing Web Service responses
Mocking Web Services for client layer unit testing
I would first set your SDK as an injectable Service so it can be used more easily by your angular app
myApp.factory('FilePicker',function(){
//likely coming from global namespace
return filepicker;
})
.controller('ctrl',['FilePicker',function(FilePicker){
//use File picker
}];
Now you should be able to inject a mock instead of the real implementation for your tests.
An example with a our controller
describe('ctrl test', function(){
var ctrl;
beforeEach(inject(function($controller){
var mockService={} // here set up a mock
ctrl=$controller('ctrl',{FilePicker:mockService});
}));
});

how to do an integration test with angular js to REST api backend?

In my angularjs front end application I am calling REST services on the backend. I am a bit of a newbie in integration testing for angular. I am looking for a good guideline on how to implement this? I dont want to use httpbackend because it looks like this is mocking the backend.
Integration testing generally has multiple meansings, but if your meaning is:
How do I test a user clicking something and then test that their action went all the way to the REST API and some returned result is as expected then I would take a look here:
Protractor
Protractor has/is becoming the standard for End to End testing with Angularjs. It provides a way to simulate user actions and get their result and make assertions. It's built with Selenium and has a nice JavaScript wrapper so that you can keep everything in JavaScript for the front-end. All the tests are defined then using this JavaScript wrapper and Jasmine.

How do I mock azure mobile services in AngularJs?

I'm writing an AngularJs front end to an Azure Mobile Services backend and scratching my head wondering the 'angular way' to mock the backend in my tests.
Initial thoughts are that I could create a lookalike service that simply returns expected values but I'm used to using a mocking framework like Moq in my C sharp work to ease the burden.
Any suggestions on how I could accomplish this?
Are you accesing this services using $http or resource?
Two options:
- You can use a mocking framework like Sinon (we have combined it with jasmine for an angularjs based app, mocking $http request).
http://sinonjs.org/docs/
http://www.youtube.com/watch?v=qK-Z0oEdE4Y
http://robdodson.me/blog/2012/05/28/mocking-requests-with-mocha-chai-and-sinon/
- You can use angularmocks and for some given url's return harcoded values.

Resources