如何使用Angular / Karma / Jasmine正确测试put(或post)请求?

时间:2015-07-02 09:20:37

标签: angularjs unit-testing prestashop karma-jasmine

我正在为使用Angular的应用程序使用webservices。我做了“GET”请求并用Karma / Jasmine进行了测试,如下所示:

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');
    });
});

完美无缺。 所以现在,我想测试一个PUT方法(并在POST方法之后)。但是,我没有找到正确的方法来做到这一点。

我的最后一次尝试是:

    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');
        });
    });

但它返回旧数据。我花了很多时间找到正确的测试方法,但我一无所获。

穆工厂:

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);
        }
    };
}]);

1 个答案:

答案 0 :(得分:2)

当你进行测试时,$httpBackend只是一个简单的模拟。所有真正的功能都关闭了。这个模拟$httpBackend唯一能做的就是验证你的请求。

当你这样做时:

$httpBackend.when('PUT', url).respond(....);

对任何收藏品都没有真正的“PUT”。你只是说:嘿,当PUT申请发生时,请用X回复。它不会对任何资源进行PUT,它只是一种知道PUT已被制作而不是其他的方式。

作为一个例子, NOT 你应该在测试中做些什么,这里是一个模拟的PUT:

$httpBackend.whenPUT(/^\/api\/todos\/\d+$/).respond(function(method, url, data, headers) {
  var item = JSON.parse(data);
  for (var i = 0, l = things.length; i < l; i++) {
    if (things[i].id === item.id) {
      things[i] = item;
      break;
    }
  }

  return [200, item];
});

了解我如何使用 PUT

更新“thing”集合

因此,对于刚刚进行的测试,您不需要PUT使用 Pierre 返回修改后的数据源,您只需要确保已经进行了调用而没有其他任何内容。

我建议您从.when切换到.expect,这样如果您期望调用Customer.put会执行“PUT”请求,那么如果从未进行测试,测试将会失败

所以这里的问题是,不要忘记在测试中你需要做什么,你真的不需要更新你的资源,只是不同的端点被击中。