jeudi 2 juillet 2015

How to test properly a put (or post) request with Angular / Karma / Jasmine?

I am using webservices for an app with Angular. I did "GET" requests and tested it with Karma / Jasmine like this :

beforeEach(module('webservices'));
beforeEach(inject(function(_$httpBackend_) {

    $httpBackend = _$httpBackend_;
    jasmine.getJSONFixtures().fixturesPath='base/tests/json/api';

    // Customers
    $httpBackend.when('GET', 'http://prestashop/api/customers/1?ws_key=key&output_format=JSON')
    .respond(getJSONFixture('customers/1.json'));
    $httpBackend.when('GET', 'http://prestashop/api/customers/2?ws_key=key&output_format=JSON')
    .respond(getJSONFixture('customers/2.json'));
    $httpBackend.when('PUT', 'http://prestashop/api/customers/1?ws_key=key&output_format=JSON')
    .respond(getJSONFixture('customers/1.json'));
}));

it("\n\ngets firstname about customer 1", function(){

    angular.mock.inject(function (Customer) {

        var client;

        Customer.get(1).success(function(data, status, headers, config){
            client = data;
        }). error(function(data, status, headers, config) { });

        $httpBackend.flush();
        expect(client.customer.firstname).toBe('John');
    });
});

It works perfectly. So now, I want to test a PUT method (and after a POST method). But, I didn't find the right way to do this.

My last try was this :

    it("\n\nputs a different firstname, lastname, email, passwd about customer 1", function(){

        angular.mock.inject(function (Customer) {

            var idCustomer = 3;
            var firstname = 'Pierre', 
            lastname = 'Stan', 
            passwd = 'mdp', 
            email = 'pierrre.stan@test.fr';

            var client =    {customer: {id: idCustomer, 
                                        firstname: firstname, 
                                        passwd: passwd, 
                                        lastname: lastname, 
                                        email: email
                                        }
                            };

            var clientReturn;

            Customer.put(idCustomer, client).success(function(data, status, headers, config){
                clientReturn = data;
            }). error(function(data, status, headers, config) { });

            $httpBackend.flush();
            expect(clientReturn .customer.fistname).toBe('Pierre');
        });
    });

But it is returned the old data. I spent a lot of time to find a right way to test, but I found nothing.

Mu factory :

var webservices = angular
.module('webservices', []);

webservices.factory('Customer', ['$http', function($http){

    var baseDir = "http://prestashop/api";    
    var customerDir = "/customers";
    var keyDir = "?ws_key=key";
    var formatDir = "&output_format=JSON";

    return {
        get: function(id) {
            var urlDir = baseDir + customerDir + "/" + id + keyDir + formatDir;
            return $http.get(urlDir);
        },
        put: function(id, data) {
            var urlDir = baseDir + customerDir + "/" + id + keyDir + formatDir;
            return $http.put(urlDir, data);
        },
        post: function(data) {
            var urlDir =  baseDir + customerDir + keyDir + formatDir;
            return $http.post(urlDir, data);
        }
    };
}]);

Aucun commentaire:

Enregistrer un commentaire