使用 javascript 全局窗口变量和集成测试答案

【问题标题】：Using javascript global window variables and integration testing使用 javascript 全局窗口变量和集成测试
【发布时间】：2014-01-02 19:13:00
【问题描述】：

nifty stackoverflow post 用于将变量传递给 Javascript。它与railscast episode 相呼应。该技术就像配置 jquery datepicker 的魅力一样，但会导致我所有的 javascript 集成测试失败。

这是application.html.erb中的代码

<script type="text/javascript">
<%-# commented line -%>
  window.sDateFormatLocal = "<%= t 'date.formats.js_date' %>"
</script>

这是一个使用它的日期选择器初始化

  $("input.datepicker").datepicker({
    dateFormat: sDateFormatLocal,
    onClose: function(value, ui) {
     console.log("regular old datepicker");
    }
  }

它似乎工作得很好。唯一的问题是，我所有使用 'js: true' 的集成测试现在都失败了。这是我得到的错误。

Capybara::Poltergeist::JavascriptError: 页面上的 Javascript 代码中出现一个或多个错误：
   ReferenceError: Can't find variable: sDateFormatLocal

当我在浏览器（Chrome、Firefox）中运行时，控制台中没有错误或警告。

为了完整起见，典型的规范如下所示：

  describe "The root" do
    it "should load the page and have js working.", :js => true do
      visit root_path
      page.should have_content "Hello world"
    end
  end

我是否缺少允许在 poltergeist 中使用此类变量的设置？

【问题讨论】：

您的$("input.datepicker").datepicker(...) 函数是否在文档就绪块中？
好问题。不，在这种情况下不是。它在函数内部。

标签： ruby-on-rails capybara phantomjs poltergeist

【解决方案1】：

如果您的 datepicker 函数不在 jQuery 文档就绪函数或类似方法（例如 window.onload）中，您将遇到麻烦。

默认情况下 application.js 将被加载到 head 中，JS 代码稍后会加载到你的 html.erb 中。 html 和 assets 是由浏览器并行加载的，而且很可能 assets 会首先完成加载。如果您立即执行该函数而不是等待文档准备好，则该变量未定义。

如果您错过了，请将此类代码放入就绪块中。

导出服务器变量的更好做法是，不要将其放在 html 正文中，而是将其放在 application.js 之前，这样您就不会对未定义的变量有任何问题。

【讨论】：

谢谢。你的回答是合乎逻辑的。但是，我确实在 application.js 文件之前的头部有变量声明，但我仍然遇到了失败。你是说我应该只在准备好的块中声明变量或日期选择器？
我想我唯一的后续行动是，为什么这在浏览器中有效，而不是在 phantomjs/poltergeist 中？
我知道你会问这个问题。我不知道确切的情况，但打赌浏览器可以并行下载多个资产/html，所以当它很简单时，你的 html 可能会更快。但 Poltergeist 是单线程的。

【解决方案2】：

只是为了跟进这一点，以防有人在调试类似的问题。事实证明，在这种情况下，并非每个视图都使用相同的模板。例如，登录屏幕具有不同的头部。这导致它在某些情况下无法加载，但在其他情况下不会加载，例如我的测试失败的情况。最重要的是，确保在复制测试时，您所做的与测试完全一样，就像我的情况一样，通过登录屏幕。

【讨论】：