Using javascript global window variables and integration testing

Question

There's this nifty stackoverflow post on passing variables to Javascript. It echos this railscast episode. The technique works like a charm for configuring a jquery datepicker, but cause all my javascript integration tests to fail.

Here is the code in application.html.erb

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

This is a datepicker initialization that uses it

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

It appears to work very well. The only problem, all my integration tests with 'js: true' now fail. Here are the errors I get.

Capybara::Poltergeist::JavascriptError: One or more errors were raised in the Javascript code on the page:
   ReferenceError: Can't find variable: sDateFormatLocal

When I run in browser (Chrome, Firefox) there are no errors or warnings in the console.

For completeness, a typical spec looks like this:

  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

Is there a setting I am missing to allow variables like this in poltergeist?

Is your `$("input.datepicker").datepicker(...)` function inside document ready block? — Billy Chan, Jan 02 '14 at 19:20
Good question. No, not in this case. It's inside of a function. — JHo, Jan 02 '14 at 19:28

score 1 · Answer 1 · answered Jan 02 '14 at 19:39

1

If your datepicker function is not in jQuery document ready function or similar methods such as window.onload you'll have trouble.

By default the application.js will be loaded in head, and the JS code in your html.erb later. The html and assets are loaded by browser in parallel, and very likely assets will finish loading at first. If you execute the function right away instead of waiting for document ready, the variable is undefined.

If you missed that, put such code in ready block.

A better practice for exporting server variable is, instead of put it in html body, put it on head before application.js so you won't have any problem on undefined variable.

answered Jan 02 '14 at 19:39

Billy Chan

24,625
4
52
68

Thanks. Your answer is logical. However, I do have the variable declaration in the head, before the application.js file and I still get the failures. Are you saying I should but the variable declaration or the datepicker inside a ready block? – JHo Jan 02 '14 at 23:12
I guess my only other follow-up would be, why does this work in the browser and not in phantomjs/poltergeist? – JHo Jan 03 '14 at 02:06
I know you will ask this question. I don't know exactly the situation but the bet is browser can download multiple assets/html in parallel so your html may be faster when it's simple. But Poltergeist is single threaded. – Billy Chan Jan 03 '14 at 03:55

score 0 · Accepted Answer · answered Feb 13 '14 at 19:38

Just to follow-up on this, in case someone in is debugging a similar problem. It turned out in this case, not every view was using the same template. For instance, the signin screen has a different head. That was causing this not to load in certain circumstances, yet not others, like the ones where my tests were failing. Bottom line, make sure when you replicate your tests, you are doing it exactly as the tests do, like in my case, passing through a signin screen.

Using javascript global window variables and integration testing

2 Answers2