Question

我正在玩一个基本的ruby应用程序，它会在单击按钮时更改html direction属性。它在JQuery方面运行良好，但在我的测试用例中，即使.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');
    });
  });

Fixture：conversion.html

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

以下是运行测试时的错误消息：

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

任何帮助或建议都将得到真正的赞赏。感谢。

Answer 1

我已经更改了我的代码，以确保.click（）函数正常工作。

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

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

Answer 2

问题是attr（＆＃39; dir＆＃39;）未定义，其值未定义＆＃39;，如果您明确设置tag属性为＆＃39; rlt＆＃39; ;或者＆＃39; ltr＆＃39;它将具有您设置的字符串值。

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

未定义

Answer 3

我刚刚尝试了你的代码并使用了以下简单的修改（除了为jasmine-jquery-rails gem实现加载fixture的快速解决方法）：

$（＆＃39;＃测试＆＃39）。单击（）;

更改为

setHtmlStyle（）;

这使测试工作正常。

Jasmine是用于低级JavaScript代码的单元测试工具，在执行期间隐藏了DOM元素。因此，使用jQuery执行yValues无效。

这意味着与Selenium或Capybara不同，Jasmine的目标是帮助开发人员测试/测试驱动低级JavaScript逻辑单元，例如计算和一些轻量级DOM操作。

快速消失的是，您可以针对用户交互完成工作的低级JavaScript方法编写测试，但不会针对涉及click（）等的方法编写测试。这有助于您在测试小功能时获得快速反馈循环。换句话说，它关注＆＃34; in＆＃34;外部BDD测试阶段。

＆＃34; out＆＃34;必须使用集成测试来解决阶段（使用Selenium，Capybara和Cucumber等工具进行完整的前端到端端到端测试）。

我希望你觉得这很有帮助。如果您有更多问题，请在评论中告诉我。

以下是关于该主题的一个很好的后续演示文稿，它打破了端到端集成和以javascript为重点的测试之间的差异：BDD with JS

尽管如此，我强烈建议您与Outside-In BDD中经验丰富的开发人员讨论如何将流程分解为端到端集成测试（Cucumber），浏览器javascript单元测试（Jasmine）和低级后端单元测试（例如RSpec）。欢迎您在CodeMentor上打我：https://www.codementor.io/andymaleh

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

3 个答案: