茉莉花测试运行甚至在 .click() 被触发之前

Question

我只是在玩一个基本的 ruby 应用程序，它会在单击按钮时更改 html 方向属性。它在 JQuery 端工作正常，但在我的测试用例运行s 中，即使 .click() 被触发。这是我的文件。

display.html.erb

<p>
<%= button_tag 'Convert', id: 'test', remote: 'true' %>
</p>

Jquery: conversion.js

$(document).ready(function(){
  $('#test').on('click', setHtmlStyle);
});
var setHtmlStyle = function(){
var $style = $('html');
$style.attr('dir', $style.attr('dir') === 'rtl' ? 'ltr' : 'rtl');
};

规格：conversion_spec.js

describe('#test', function (){
  beforeEach(function(){
    loadFixtures('conversion.html');
  });
  describe('Clicking test button', function(){
    it('should have an attribute', function(){
      $('#test').click();
      expect($('html').attr('dir')).toBe('rtl');
    });
  });

夹具：conversion.html

<html>
<input type='button' name='Convert' id='test'>
</html>

这是我运行我的测试时的错误消息：

Failure/Error: Expected 'ltr' to be 'rtl'.

如有任何帮助或建议，我们将不胜感激。谢谢。

Answer 1

问题是 attr('dir') 没有定义，它的值是 'undefined'，如果你明确设置标签属性为 'rlt' 或 'ltr'它将具有您设置的字符串值。

$style.attr('dir', $style.attr('dir') === 'rtl' && typeof $style.attr('dir') !== "undefined" ? 'ltr' : 'rtl');

未定义

Answer 2

我刚刚尝试了您的代码并通过以下简单修改使其工作（除了为 jasmine-jquery-rails gem 实现快速解决方法以加载固定装置）：

$('#test').click();

改为

setHtmlStyle();

这使测试工作正常。

Jasmine 是用于低级 JavaScript 代码的单元测试工具，在执行期间隐藏了 DOM 元素。所以，用 jQuery 做 click() 没有效果。

这意味着与 Selenium 或 Capybara 不同，Jasmine 的目标是帮助开发人员处理 testing/test-driving 低级 JavaScript 逻辑单元，例如计算和一些轻量级 DOM 操纵。

从中可以快速得出的结论是，您针对低级 JavaScript 方法编写测试，这些方法可以完成用户交互的工作，但不适用于涉及 click() 等的方法。这有助于您在测试小功能时有一个快速的反馈循环。换句话说，它与由外而内 BDD 测试的 "in" 阶段有关。

"out" 阶段必须使用 Selenium、Capybara 和 Cucumber 等工具通过集成测试来解决（完整的前端到后端端到端测试）。

希望对您有所帮助。如果您还有更多问题，请在评论中告诉我。

这是关于该主题的后续演示，它分解了端到端集成和以视图 JavaScript 为中心的测试之间的区别：BDD with JS

不过，我还是强烈建议与一位经验丰富的开发人员讨论由外向内 BDD 以及它如何将流程分解为端到端集成测试 (Cucumber)、浏览器 JavaScript 单元测试 (Jasmine)和低级后端单元测试（例如 RSpec）。

Answer 3

我更改了我的代码以确保 .click() 函数正常工作。

$(document).ready(function(){
  $(document).on('click', '#test', setHtmlStyle);
});

var setHtmlStyle = function(){
  var $style = $('html');
  $style.attr('dir', $style.attr('dir') === 'rtl' ? 'ltr' : 'rtl');
};

茉莉花测试运行甚至在 .click() 被触发之前

jasmine test run even before .click() is triggered

javascript

jquery

jasmine

jasmine-jquery

茉莉花测试 运行 甚至在 .click() 被触发之前

jasmine test run even before .click() is triggered

javascript

jquery

jasmine

jasmine-jquery

茉莉花测试运行甚至在 .click() 被触发之前