Logic inside of Handlebars templates for Ember.js is possible, just not pretty

We had a few occasions where we needed something like count > 0 or other simple logic, that should live inside the template, but its impossible… until now 🙂

Code

{{#ifEval "this.getPath('content.click_count') >= 0"}}
   The content has been clicked {{content.click_count}} times!
{{/ifEval}}

Usage

Handlebars.registerHelper('ifEval', function(code, options) {
  if(eval(code)){
    return options.fn(this);
  }
});

Testing geolocation with capybara + selenium + firefox

Just built this little snippet in a hacknight, it simulates a geolcation via capybara, so you can test if you geo-magic actually works 🙂

View

<p>Finding your location... <span id="status">checking...</span></p>
<script>
  jQuery(function () {
    var timeout = (document.location.href.indexOf('test_location') >= 0 ? 100 : 0);

    setTimeout(function(){
      navigator.geolocation.getCurrentPosition(function(){
        jQuery('#status').html("found you!");
      });
    }, timeout)
  });
</script>

Capybara test via selenium in rspec

  def simulate_location(lat, lng)
    page.driver.browser.execute_script <<-JS
      window.navigator.geolocation.getCurrentPosition = function(success){
        var position = {"coords" : { "latitude": "#{lat}", "longitude": "#{lng}" }};
        success(position);
      }
    JS
  end

  it "can use location", :js => true do
    visit '/?test_location=true'
    simulate_location 20, 20
    sleep 0.2
    page.should have_content "found you!"
  end

Jasmine result styles for non-jumping page

The default jasmine page always jumped around, since the #jasmine_content area is above the results.
This css makes the page more stable with a 2-column layout, progress top, results left, content right.

# jasmine.yml
stylesheets:
  - spec/javascripts/support/jasmine.css
  ...
# spec/javascripts/support/jasmine.css

#HTMLReporter .results{
  position:absolute;
  top: 250px;
  width: 50%;
}

#jasmine_content {
  position:absolute;
  top: 250px;
  right: 0;
  width: 50%;
}

Freeze / Stub Time in Jasmine tests

Usage

withTimeFrozenAt("2012-01-01", function(){
  it("is frozen", function(){
    // do something useful with time 🙂
  })
})

Code

var withTimeFrozenAt = function(time, fn){
  describe('with time frozen at ' + time, function() {
    var oldDate = Date;

    beforeEach( function() {
      Date = function() {
        return new oldDate(time);
      };
    });

    afterEach(function() {
      Date = oldDate;
    });

    fn();
  });
};