Javascript 如何使用jasmine测试done和fail延迟对象_Javascript_Jquery_Post_Jasmine

Javascript 如何使用jasmine测试done和fail延迟对象

javascript jquery post jasmine

Javascript 如何使用jasmine测试done和fail延迟对象,javascript,jquery,post,jasmine,Javascript,Jquery,Post,Jasmine,下面是关于javascript提交请求1的代码。下面是关于使用jasmine 2模拟ajax请求的测试我想模拟服务器的行为。有什么想法吗？有关更多详细信息，请参见1和2中的注释附言：实际上，在这两种情况下，都会调用fakeFunction的done和fail-Deferred对象一, 二, 如果您有一个带有ajax请求承诺对象的var，那么测试就会容易得多。在这种情况下，您可以： it('should do an async thing', function() {

下面是关于javascript提交请求1的代码。下面是关于使用jasmine 2模拟ajax请求的测试

我想模拟服务器的行为。有什么想法吗？有关更多详细信息，请参见1和2中的注释

附言：实际上，在这两种情况下，都会调用fakeFunction的done和fail-Deferred对象

一,

二,

如果您有一个带有ajax请求承诺对象的var，那么测试就会容易得多。在这种情况下，您可以：

 it('should do an async thing', function() {     
   var mutex = 1;
   var promF = jasmine.createSpy('prF');

   runs( function() {
     var promise1 = $.ajax();
     promise1.always(function(){
       mutex--;
     });
     promise1.fail(function(){
       promF();
     });
   });

   waitsFor(function(){
     return !mutex;
   }, 'Fetch should end', 10000);

   runs( function() {
      expect(promF).toHaveBeenCalled();
   });
 });

下面我发布了可能适合您的未经测试的代码。我想ajax调用是从.submit类初始化的？也许您应该从runs块初始化ajax请求，而不是从beforeach初始化，但是您应该尝试哪一个可以工作

describe('When Submit button handler fired and city is defined', function () {
    var ajaxRequestSpy,
        failSpy, successSpy, alwaysSpy,
        mutex;
    beforeEach(function () {
        ajaxRequestSpy = spyOn(backendController, 'ajaxRequest').andCallThrough();
        failSpy = spyOn(ajaxRequestSpy(), 'fail').andCallThrough()
        successSpy = spyOn(ajaxRequestSpy(), 'success').andCallThrough();
        mutex = 1; // num of expected ajax queries
        alwaysSpy =  spyOn(ajaxRequestSpy(), 'always').andCallFake(function() {
             mutex--;
        });
        this.view = new MyView({
            el: $('<div><form>' +
                '<input type="submit" value="Submit" />' +
                '<input type="text" name="city">' +
                '</form></div>')
        });
        this.view.$el.find('form').submit();
    });
    it('backendController.ajaxRequest should be called', function () {
        runs( function() {
            // maybe init ajax here ?   
        });

        waitsFor( function() {
            return !mutex;
        }, 'ajax request should happen', 5000);

        runs( function() {
            expect(ajaxRequestSpy).toHaveBeenCalled(); // true
            expect(failSpy).toHaveBeenCalled(); // Error: Expected spy fail 
                                            // to have been called.
        });

    });
});

做你想做的事。有可能监视另一个间谍吗？如果是，你为什么打电话给间谍？也许你应该试试

failSpy = spyOn(ajaxRequestSpy, 'fail').andCallThrough();

如果您有一个带有ajax请求承诺对象的var，那么测试就会容易得多。在这种情况下，您可以：

 it('should do an async thing', function() {     
   var mutex = 1;
   var promF = jasmine.createSpy('prF');

   runs( function() {
     var promise1 = $.ajax();
     promise1.always(function(){
       mutex--;
     });
     promise1.fail(function(){
       promF();
     });
   });

   waitsFor(function(){
     return !mutex;
   }, 'Fetch should end', 10000);

   runs( function() {
      expect(promF).toHaveBeenCalled();
   });
 });

describe('When Submit button handler fired and city is defined', function () {
    var ajaxRequestSpy,
        failSpy, successSpy, alwaysSpy,
        mutex;
    beforeEach(function () {
        ajaxRequestSpy = spyOn(backendController, 'ajaxRequest').andCallThrough();
        failSpy = spyOn(ajaxRequestSpy(), 'fail').andCallThrough()
        successSpy = spyOn(ajaxRequestSpy(), 'success').andCallThrough();
        mutex = 1; // num of expected ajax queries
        alwaysSpy =  spyOn(ajaxRequestSpy(), 'always').andCallFake(function() {
             mutex--;
        });
        this.view = new MyView({
            el: $('<div><form>' +
                '<input type="submit" value="Submit" />' +
                '<input type="text" name="city">' +
                '</form></div>')
        });
        this.view.$el.find('form').submit();
    });
    it('backendController.ajaxRequest should be called', function () {
        runs( function() {
            // maybe init ajax here ?   
        });

        waitsFor( function() {
            return !mutex;
        }, 'ajax request should happen', 5000);

        runs( function() {
            expect(ajaxRequestSpy).toHaveBeenCalled(); // true
            expect(failSpy).toHaveBeenCalled(); // Error: Expected spy fail 
                                            // to have been called.
        });

    });
});

做你想做的事。有可能监视另一个间谍吗？如果是，你为什么打电话给间谍？也许你应该试试

failSpy = spyOn(ajaxRequestSpy, 'fail').andCallThrough();

实际上，我们遇到了同样的问题，试图测试代表AJAXed模板脚本的延迟对象，以进行动态模板化。我们的测试解决方案包括将库与Jasmine本身结合使用

所以可能是这样的：

describe('When Submit button handler fired', function () {
  jasmine.Ajax.useMock();

  describe('if the message is empty', function () {

    beforeEach(function() {
      spyOn(backendController, 'submitForm').andCallThrough();
      // replace with wherever your callbacks are defined
      spyOn(this, 'onSuccess');
      spyOn(this, 'onFailure');
      this.view.$el.find('#message').text('');
      this.view.$el.find('form').submit();
    });

    it('backendController.submitForm and fail Deferred Object should be called', function () {
      expect(backendController.submitForm).toHaveBeenCalledWith('');
      mostRecentAjaxRequest().response({
        status: 500, // or whatever response code you want
        responseText: ''
      });

      expect( this.onSuccess ).not.toHaveBeenCalled();
      expect( this.onFailure ).toHaveBeenCalled();
    });
});

另一件事，如果可以的话，尝试分解功能，这样就不会在一次测试中测试整个DOM到响应回调路径。如果您足够细粒度，您可以通过在测试中使用延迟对象本身来测试异步延迟解析

关键是在测试本身中实际使用延迟对象，以便expect调用的范围仍然在it功能块中

describe('loadTemplate', function() {
  it('passes back the response text', function() {
    jasmine.Ajax.mock();
    loadTemplate('template-request').done(function(response) {
      expect(response).toBe('foobar');
    });
    mostRecentAjaxRequest().response({ status:200, responseText:'foobar' });
  });
});

实际上，我们遇到了同样的问题，试图测试代表AJAXed模板脚本的延迟对象，以进行动态模板化。我们的测试解决方案包括将库与Jasmine本身结合使用

所以可能是这样的：

describe('When Submit button handler fired', function () {
  jasmine.Ajax.useMock();

  describe('if the message is empty', function () {

    beforeEach(function() {
      spyOn(backendController, 'submitForm').andCallThrough();
      // replace with wherever your callbacks are defined
      spyOn(this, 'onSuccess');
      spyOn(this, 'onFailure');
      this.view.$el.find('#message').text('');
      this.view.$el.find('form').submit();
    });

    it('backendController.submitForm and fail Deferred Object should be called', function () {
      expect(backendController.submitForm).toHaveBeenCalledWith('');
      mostRecentAjaxRequest().response({
        status: 500, // or whatever response code you want
        responseText: ''
      });

      expect( this.onSuccess ).not.toHaveBeenCalled();
      expect( this.onFailure ).toHaveBeenCalled();
    });
});

关键是在测试本身中实际使用延迟对象，以便expect调用的范围仍然在it功能块中

describe('loadTemplate', function() {
  it('passes back the response text', function() {
    jasmine.Ajax.mock();
    loadTemplate('template-request').done(function(response) {
      expect(response).toBe('foobar');
    });
    mostRecentAjaxRequest().response({ status:200, responseText:'foobar' });
  });
});

下面是我如何做到这一点的

实际上，$.ajax对象返回一个延迟对象，因此您可以监视$.ajax并返回一个延迟对象，然后手动触发它以在JavaScript中运行.done代码

代码

试验

下面是我如何做到这一点的

实际上，$.ajax对象返回一个延迟对象，因此您可以监视$.ajax并返回一个延迟对象，然后手动触发它以在JavaScript中运行.done代码

代码

试验

在Ajax调用周围使用包装器将使测试变得更加容易。见@Paul谢谢你的建议。实际上，我不明白为什么我应该使用/webadvanced/takeCommand，因为$.ajax已经有了我需要的东西。你能回答我写一些示例代码吗；调用分类方法的操作；期望已被填充；在Ajax调用中使用包装器将使测试更加容易。见@Paul谢谢你的建议。实际上，我不明白为什么我应该使用/webadvanced/takeCommand，因为$.ajax已经有了我需要的东西。你能回答我写一些示例代码吗；调用分类方法的操作；期望已被填充；从你的例子中帮了我一个忙。这绝对是应该采取的方法-很高兴知道jasmine内置了这个，但是如果你使用的是qunit或其他单元测试框架-也有所有这些存根/fakeXHR等。请注意，根据jasmine ajax 3.0，respondWith替换为respondWith，请看，这绝对是要采取的方法-很高兴知道jasmine内置了此功能，但如果您使用的是qunit或其他单元测试框架-也有所有这些存根/fakeXHR等。请注意，根据jasmine ajax 3.0，respondWith将替换为respondWith，请参阅PS监视失败，不需要调用deferred.resolve call deferred.reject来调用resolve，您无需等待发送数据。您可以在调用ajax之前调用resolve。示例：var deferred=new jQuery.deferred.resolve'test'.PS监视失败，而不是调用deferred.resolve call deferred.rejectTo ca 我们将解决您无需等待即可发送数据的问题。您可以在调用ajax之前调用resolve。示例：var deferred=newjquery.deferred.resolve'test'。