javascript - 使用 .toHaveBeenCalledWith 的 Jasmine 测试注册表失败

标签 javascript jasmine single-page-application jquery-callback jasmine-jquery

我正在处理的单页应用程序有一个包含两种表单的登录 View :登录表单和注册表单。以下规范描述了这些表单的测试。我正在使用 Jasmine-jQuery 1.4.2.

// user_spec.js

describe("User", function() {

  var userController;

  beforeEach(function () {
    loadFixtures('menu.html');
    userController = new MyApp.User.Controller();
  });

  describe("LoginView", function() {

    beforeEach(function() {
      // Mock the $.ajax function to prevent XHR:
      spyOn($, "ajax").andCallFake(function(params) {});
    });

    it("should pass email and password with the 'signInForm:submit' event.", function() {
      var email = "firstname.name@email.com";
      var password = "Passw0rd";
      var callback = jasmine.createSpy("FormSubmitSpy");

      userController.loginView.$el.find("#signInEmail").val(email);
      userController.loginView.$el.find("#signInPassword").val(password);
      userController.loginView.bind("signInForm:submit", callback, this);
      userController.loginView.ui.signInForm.trigger("submit");

      expect(callback).toHaveBeenCalledWith({
        email: email,
        password: password
      });
    });

    it("should pass name, email and password with the 'signUpForm:submit' event.", function() {
      var name = "John Doe";
      var email = "firstname.name@email.com";
      var password = "Passw0rd";
      var callback = jasmine.createSpy("FormSubmitSpy");

      userController.loginView.$el.find("#signUpName").val(name);
      userController.loginView.$el.find("#signUpMail").val(email);
      userController.loginView.$el.find("#signUpPassword").val(password);
      userController.loginView.$el.find("#signUpPasswordConfirmation").val(password);
      userController.loginView.bind("signUpForm:submit", callback, this);

      userController.loginView.ui.signUpForm.trigger("submit");

      expect(callback).toHaveBeenCalledWith({
        name: name,
        email: email,
        password: password,
        password_confirmation: password
      });
    });

  });

});

登录表单测试运行成功,但注册表单测试失败。

Error: Expected spy FormSubmitSpy to have been called with \
    [ { name : 'John Doe', email : 'firstname.name@email.com', \
    password : 'Passw0rd', password_confirmation : 'Passw0rd' } ] \
    but it was never called.

    at new jasmine.ExpectationResult (http://localhost:3000/assets/jasmine.js?body=1:114:32)
    at null.toHaveBeenCalledWith (http://localhost:3000/assets/jasmine.js?body=1:1235:29)
    at null.<anonymous> (http://localhost:3000/assets/user_spec.js?body=1:233:24)
    at jasmine.Block.execute (http://localhost:3000/assets/jasmine.js?body=1:1064:17)
    at jasmine.Queue.next_ (http://localhost:3000/assets/jasmine.js?body=1:2096:31)
    at jasmine.Queue.start (http://localhost:3000/assets/jasmine.js?body=1:2049:8)
    at jasmine.Spec.execute (http://localhost:3000/assets/jasmine.js?body=1:2376:14)
    at jasmine.Queue.next_ (http://localhost:3000/assets/jasmine.js?body=1:2096:31)
    at jasmine.Queue.start (http://localhost:3000/assets/jasmine.js?body=1:2049:8)
    at jasmine.Suite.execute (http://localhost:3000/assets/jasmine.js?body=1:2521:14)

使用应用程序中的表单没有问题。传输数据。一切正常。只是测试没有。

解决方法

然而,当我延迟执行时,测试成功

_.defer(function() {
  expect(callback).toHaveBeenCalledWith({
    name: name,
    email: email,
    password: password,
    password_confirmation: password
  });
});

为什么这行得通而“正常”实现失败了?


这里是给定案例的简化:

it("should evaluate true", function() {
  var foo = false;
  _.defer(function() {
    foo = true;
  });
  expect(foo).toBeTruthy();
});

最佳答案

在不使用下划线函数进行延迟的情况下,Jasmine 的方法如下:

var flag = false;
...

runs(function() {
  userController.loginView.ui.signInForm.trigger("submit");
  setTimeout(function() { flag = true; }, 1);
}

waitsFor(function() {
  return flag;
}, "Blah this should never happen", 10);

runs(function() {
  expect(callback).toHaveBeenCalledWith({
    name: name,
    email: email,
    password: password,
    password_confirmation: password
  });
}

@Marc 是正确的,问题在于使用 bind 以及 Javascript 将事件“有时/通常/总是”发送到下一个事件循环的方式(它的异步性质是如何工作的),所以既然你在监视回调你想要确保您的测试是为考虑到异步行为而编写的。

在编写测试时,您冒着第一个测试偶尔不会通过的风险(我很惊讶它按原样运行)。您正在以非异步方式测试异步事件回调...有意义吗?

关于javascript - 使用 .toHaveBeenCalledWith 的 Jasmine 测试注册表失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16133559/

相关文章:

javascript - 使用 Chrome 扩展的 Javascript 检查另一个网站上的所有框时出现问题

javascript - javascript中html文件之间交换变量

ajax - Typescript 语法 - 如何监视 Ajax 请求?

javascript - React 组件构造函数和 componentWillReceiveProps 中的常用代码

javascript - 在 JavaScript 中监控单页加载时间

javascript - Knockout-Validation validatedObservable 在需要使用时始终有效 :{onlyIf:. ..}

javascript - 使用js从字符串创建一个html元素

javascript - 如何在具有跨浏览器支持的自定义 Dojo 构建中包含 dojox.gfx.SVG 和 dojox.gfx.VML?

javascript - 使用 Protractor 按类名定位按钮

Angular 4 ngModel 在测试输入更改后未更新