javascript - 在使用固定装置的 Jasmine 测试中绑定(bind)事件处理程序的最佳实践?

标签 javascript jquery tdd jasmine jasmine-jquery

尽管 StackOverflow 上有这些 two 相关的 questions,但我还没有为此找到令人满意的答案,所以我发帖以了解是否有 Jasmine-jQuery 用户接受的最佳实践。

基本问题很简单,两个相关问题中包含两个示例:

  • 在我的 Javascript 中,有一个 setup() 函数将事件处理程序绑定(bind)到页面上的各种选择器,如 $('#someDiv').click(一些处理程序);此函数传递给 $(document).ready

  • 在我的 Jasmine 测试中,我使用代表页面不同提取部分的 HTML 固定装置来测试这些元素上的 AJAX 交互(我正在运行 jasmine-rails“服务器”版本,您可以在其中查看 Jasmine 测试报告在浏览器中)

当然,问题在于 setup() 尝试绑定(bind)处理程序的选择器在夹具加载后才会存在。因此,在 Jasmine 测试中显式触发的事件不会被夹具中的 DOM 元素拾取,因为绑定(bind)该处理程序的函数已经在 $(document).ready 运行时间。

如果 Jasmine 能以某种方式延迟对 $(document).ready 的调用,直到加载固定装置之后,我会很高兴。但显然不能。

从上面的两个 StackOverflow 问题中,我收集了各种方法来解决这个问题,但都不能令人满意:

  1. setup 中的绑定(bind)代码复制到 HTML fixture(s) 本身。这是非 DRY 的,几乎肯定会导致 fixture 与现实不同步,而且 fixture 应该代表不显眼的 JS,因此不会混合代码和标记。

  2. 在需要它的测试用例中显式调用 setup 函数。这适用于简单的情况,但如果 setup 执行非幂等操作,则会失败。

  3. setup 中,使用类似 $(document).on('click', '#someDiv', someHandler) 的代码代替我展示的代码多于。 (我使用的是 jQuery 1.10.1。)我实际上尝试过这个,但它不起作用:即使加载的固定装置包含匹配 #someDiv 的元素,触发该元素上的“点击”也不会不会导致 someHandler 被调用。即使它确实有效,它也很困惑,因为(如果我理解正确的话)调用处理程序时 this 的值将反射(reflect)实际处理事件的元素,不一定是第一个接收它的元素。

  4. setup 中,使用类似 $('#someDiv').live(someHandler) 的东西,但 live 已被弃用从 jQuery 1.7 开始,在 1.9 中删除。

是否有其他一些我遗漏的方法不需要仅仅为了适应测试环境而更改工作代码并且不需要违反 DRY?

最佳答案

我有一个使用 jasmine-jquery 对 Jasmine 进行 DOM 操作的示例 here .您还将在其中的描述中看到一个指向 github 存储库的链接,您可以克隆该存储库以更深入地了解 SpecRunner.html 如何排序依赖项。基本上,我的 html 装置及其 onclick 事件后跟一个 jquery click(),所有这些都在我的 jasmine beforeEach() 中。然后我让我的测试期望也检查 DOM 以进行验证。这可能与上面的 #2 解决方法一致。

关于javascript - 在使用固定装置的 Jasmine 测试中绑定(bind)事件处理程序的最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17800388/

相关文章:

c# - JavaScript : how do I prevent a user from selecting anything in a select option list without using disable/pointer-events?

javascript - 循环遍历数组中的特定索引

javascript - 如何拦截变量值

javascript - chrome.runtime.setUninstallUrl 似乎不起作用

javascript - 在 iPad 和 iPhone 上滚动 iframe

java - 静态工厂方法和模拟

c# - TDD——你测试了多少?

java - Kent Beck 的《TDD by example》一书中的 Java 如何用 PHP 表示?

javascript - 我的 Firefox 插件和跨域 https 的问题

javascript - 我的 "changeColor"javascript 函数在 Google Chrome 上不起作用