Pivotal Labs

Main menu

Skip to primary content
Skip to secondary content
  • About
  • Case Studies
  • Team
    • Executives
    • Locations
      • San Francisco (HQ)
      • Boston
      • Boulder
      • Denver
      • London
      • Los Angeles
      • New York
  • Community
    • Blogs
    • Tech Talks
    • Events
  • Careers
    • Lifestyle
    • Principles & Practices
    • Benefits
    • FAQ
    • Apply
  • Contact
    • Press Room
    • Press Releases
    • In The News
    • Press Kit
  • All
  • Labs
  • Standup
  • Tracker
Danny Gagne

[Standup][NY] 9/10/12: Debugging CoffeeScript in Chrome

Danny Gagne
Monday, September 10, 2012

Interestings

Debugging CoffeeScript in Chrome

When you go to “Sources” in web inspector for a web page that includes test.js it will now show your CoffeeScript source files where you can set break points, hover variables to see their values, etc.

http://ryanflorence.com/2012/coffeescript-source-maps/

Events

  • Monday: CTO School
  • Tuesday: NYC.rb Presentation Night http://www.meetup.com/NYC-rb/
  • 0 Shares
  • Share on Facebook
  • Share on Twitter
Mike Gehard

Using Jasmine to test CoffeeScript in a Rails 3.1 App

Mike Gehard
Wednesday, May 11, 2011

Lately I’ve had the opportunity to use Jasmine to test drive a whole bunch of Javascript and am loving it. If you haven’t had a chance to take Jasmine for a spin, I recommend you take some time to do so.

When I heard that Rails 3.1 was going to include CoffeeScript I decided to work to figure out how I could write both my production code as well as my specs in Coffeescript.

Using this gist as a guide, I came up with these detailed instructions:

Add Guard and Guard-Coffeescript to your Gemfile and run bundle.

Run guard init to create a Guardfile and edit it to contain the following:

guard 'coffeescript', :output => 'public/javascripts/compiled' do
  watch(/^app/assets/javascripts/(.*).coffee/)
end

guard 'coffeescript', :output => 'spec/javascripts/compiled' do
  watch(/^spec/javascripts/(.*).coffee/)
end

Edit your spec/javascripts/support/jasmine.yml to have at least the following entries:

src_dir: public/javascripts/compiled
src_files:
  - **/*.js

spec_dir: spec/javascripts/compiled
spec_files:
  - **/*_spec.js

Start up the Jasmine server using rake jasmine and point your browser to http://localhost:8888. You should see 0 specs, 0 failures. Since you have changed the location that Jasmine looks for spec files, you aren’t picking up the example Jasmine specs any longer.

Create a new spec file in spec/javascripts/math_spec.coffee with the following contents:

describe 'Math:', ->
  describe 'fib()', ->
    it 'should calculate the numbers correctly up to fib(16)', ->
      fib = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987]
      expect(Math.fib(i)).toEqual fib[i] for i in [0..16]

Refresh your browser, you should see one failing spec. Guard has compiled your .coffee file into a .js file that Jasmine will use.

Create a new implementation file in app/assets/javascripts/math.coffee with the following contents:

Math.fib = (n) ->
    s = 0
    return s if n == 0
    if n == 1
      s += 1
    else
      Math.fib(n - 1) + Math.fib(n - 2)

Refresh your Jasmine browser window and you should see 1 passing spec. Again, Guard has compiled your implementation file and Jasmine uses it to satisfy the spec.

At some point, it would be nice to figure out a way to run Jasmine specs directly from the .coffee files and against the implementation .coffee files without having to use Guard to compile them. With the above steps, you still have to check in the compiled files into source control so your tests can be run in the CI environment. If you miss one of the compiled specs or one of the compiled implementation files, your CI environment may report improper results.

If anyone has any ideas, I’d love to hear them.

  • 0 Shares
  • Share on Facebook
  • Share on Twitter

Topics

  • agile (780)
  • rails (113)
  • testing (88)
  • ruby (83)
  • ruby on rails (70)
  • jobs (62)
  • javascript (55)
  • techtalk (44)
  • rspec (38)
  • ironblogger (32)
  • productivity (30)
  • activerecord (29)
  • gogaruco (29)
  • git (28)
  • nyc (27)
  • rubymine (26)
  • bloggerdome (23)
  • mobile (22)
  • process (21)
  • pivotal tracker (20)
  • cucumber (20)
  • jasmine (19)
  • design (18)
  • ios (18)
  • webos (17)
  • objective-c (17)
  • android (16)
  • palm (16)
  • "soft" ware (16)
  • fun (15)
  • tracker ecosystem (15)
  • ci (15)
  • cedar (15)
  • rails3 (14)
  • performance (14)
  • bdd (14)
  • gem (13)
  • css (13)
  • tdd (13)
  • selenium (12)
  • goruco (12)
  • bundler (12)
  • meetup (11)
  • railsconf (11)
  • nyc-standup (11)
  • capybara (10)
  • mac (10)
  • mojo (10)
  • chef (10)
  • api (10)
Subscribe to coffeescript Feed
  • About
  • Case Studies
  • Team
  • Community
  • Careers
  • Contact
  • Labs
  • Events

Contact Us

contact@pivotallabs.com
+1 415-77-PIVOT
TwitterLinkedInFacebook

Pivotal Tracker

Tracker is the award-winning agile project management tool that enables real-time collaboration around a shared, prioritized backlog.
Visit pivotaltracker.com >