Slides from my Lonestar Ruby Conf 2011 presentation. *** Video of presentation: http://confreaks.com/videos/2531-lsrc2011-testing-javascript-with-jasmine *** Agenda: - Briefly cover why you should unit test - Discuss what Jasmine is and isn't - Show syntax with comparisons to RSpec - Jasmine with: - Vanilla JavaScript - Jasmine with jQuery - Jasmine with Ruby (not Rails) - Jasmine with Rails - Evergreen - capybara-webkit - Where does CoffeeScript, node.js, etc. fit in? - Other helpful libraries/Wrap-up

2. Testing JavaScript with Jasmine By: Tim Tyrrell

3. Tim Tyrrell @timtyrrell

5. Why are you talking about JavaScript at a Ruby conference?

6. Why unit test JavaScript?

7. "External tests don't help us with internal design" @glv

8. "There is only one way to go truly fast. Do the best job you can. Anything else is slower." @unclebobmartin http://twitter.com/#!/unclebobmartin/status/39438225869254656

10. What is Jasmine?

11. Why Jasmine?

12. Jasmine is not an integration testing framework.

13. RSpec vs. Jasmine: Structure #RSpec describe "Calculate" do describe "#add" do it "should return the sum" do ... end end end //Jasmine describe "Calculate", function(){ describe "#Add", function(){ it "should return the sum", function(){ ... }; }); });

14. RSpec vs. Jasmine: Before/After #RSpec before(:each) do @calc = Calculator.new end after(:each) do @calc.reset end //Jasmine var calc; beforeEach(function(){ calc = new Calculator(); }); afterEach(function(){ calc.reset(); });

15. RSpec vs. Jasmine: Expectations # RSpec it "should return the sum" do calc = Calculator.new calc.add(1,1).should == 2 calc.add(1,2).should_not == 2 #Use one expectation per 'it'! end // Jasmine it("should return the sum", function() { var calc = new Calculator(); expect(calc.Add(1,1)).toEqual(2); expect(calc.Add(1,2)).not.toEqual(2); //Use one expectation per 'it'! });

16. Jasmine Matchers expect(x).toEqual(y) expect(x).toBe(y); expect(x).toMatch(pattern) expect(x).toBeDefined() expect(x).toBeNull(); expect(x).toBeTruthy(); expect(x).toBeFalsy(); expect(x).toContain(y); expect(x).toBeLessThan(y); expect(x).toBeGreaterThan(y); expect(fn).toThrow(e);

20. RSpec vs. Jasmine: Stubbing # RSpec it "should add the numbers" do calc = Calculator.new calc.stub!(:add).and_return(3) calc.add(1,1).should == 3 end // Jasmine it("should add the numbers", function() { var calc = new Calculator(); spyOn(calc, 'add').andReturn(3); expect(calc.Add(1,1)).toEqual(3); });

21. TDD? " Red , Green , Refactor"

22. Why do *I* like TDD?

28. describe("Calculator", function() { }); Spec for Calculator:

29. describe("Calculator", function() { var calc; beforeEach(function(){ calc = new Calculator(); }); }); Spec for Calculator:

30. describe("Calculator", function() { var calc; beforeEach(function(){ calc = new Calculator(); }); }); Spec for Calculator:

31. describe("Calculator", function() { var calc; beforeEach(function(){ calc = new Calculator(); }); it("should return the sum", function() { expect(calc.Add(1,1)).toEqual(2); }); }); Spec for Calculator:

32. Failing Test

34. One passing, one left to fix

36. Passed!

37. Jasmine with Ruby(not Rails)

38. $ gem install jasmine

39. $ jasmine init

40. Generated folder structure

41. $ rake jasmine

42. http://localhost:8888

43. $ rake jasmine:ci

44. Jasmine with JQuery

45. * toBe(jQuerySelector) * toBeChecked() * toBeEmpty() * toBeHidden() * toBeSelected() * toBeVisible() * toContain(jQuerySelector) * toExist() * toHaveAttr(attributeName, attributeValue) * toHaveBeenTriggeredOn(selector) * toHaveClass(className) * toHaveData(key, value) * toHaveHtml(string) * toHaveId(id) * toHaveText(string) * toHaveValue(value) * toBeDisabled() jasmine-jquery Matchers

46. &quot;A lightweight, easy to use Javascript <span> injector for radical Web Typography&quot;

47. @davatron5000

48. Lettering.js <h1 class=&quot;fancy_title&quot;>Some Title</h1> <script> $(document).ready(function() { $(&quot;.fancy_title&quot;).lettering(); }); </script>

50. Standalone folder structure + more

57. Jasmine with Rails gem &quot;jasmine&quot; $ bundle install $ jasmine init (optional) $ rake jasmine or $ rake jasmine:ci http://localhost:8888

58. Generated Rails spec folder

59. Generated default javascript objects

60. $ rake jasmine

62. $ gem install evergreen

63. gem install evergreen

64. Evergreen default folder paths (not generated)

65. $ evergreen serve

66. $ evergreen run

68. What about CoffeeScript???

70. Add a &quot;_spec.coffee&quot; file

74. #winning

80. Any other cool utilities?

84. http://try-jasmine.heroku.com

87. Thank You! @timtyrrell Questions? Did I miss any cool plugins? http://bit.ly/jasmine-lsrc http://spkr8.com/t/7818

88. http://pivotal.github.com/jasmine/ https://github.com/jnicklas/evergreen https://github.com/velesin/jasmine-jquery https://github.com/thoughtbot/capybara-webkit http://obtiva.com/blog/112-javascript-specs-with-jasmine-a-primer-for-rubyists-part-1 http://obtiva.com/blog/119 http://daverupert.com/2010/09/lettering-js/ http://www.engineyard.com/university/screencasts/javascript-tests-with-jasmine http://blog.levid.com/?p=29 http://blog.carbonfive.com/2010/10/21/rspec-best-practices/ https://github.com/johnbintz/guard-jasmine-headless-webkit References: