Testing Javascript with Jasmine

A talk I gave a an AustinJS meeting and also Lone Star Ruby Conf 2011 *** Video here: http://confreaks.com/videos/2531-lsrc2011-testing-javascript-with-jasmine ***

Transcript

1. Testing JavaScript with Jasmine By: Tim Tyrrell
2. Tim Tyrrell @timtyrrell
3. 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
4. Why are you talking about JavaScript at a Ruby conference?
5. Why unit test JavaScript?
6. "External tests don't help us with internal design" @glv
7. "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
9. What is Jasmine?
10. Why Jasmine?
11. Jasmine is not an integration testing framework.
12. 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(){ ... }; }); });
13. 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(); });
14. 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'! });
15. 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);
16. Custom Matchers #RSpec Spec::Matchers.define :be_greater_than_zero do match do |actual| actual > 0 end end Spec::Matchers.define :be_zero_when_subtracting do match do |actual, number| (actual - number) == 0 end end
17. Custom Matchers // Jasmine beforeEach(function() { this.addMatchers({ toBeGreaterThanZero: function() { return this.actual > 0; } }), this.addMatchers({ toBeZeroWhenSubtracting: function(number) { return (this.actual - number) === 0 } }) });
18. Custom Matchers describe('Custom Matchers', function () { it('should be greater than 0', function () { expect(1).toBeGreaterThanZero(); }); it('should equal zero when subtracting two numbers', function() { expect(5).toBeZeroWhenSubtracting(5); }); });
19. 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); });
20. TDD? "Red, Green, Refactor"
21. Why do *I* like TDD?
22. Jasmine with "vanilla" JavaScript - Download "Stand alone" http://pivotal.github.com/jasmine/download.html
27. describe("Calculator", function() { }); Spec for Calculator:
28. describe("Calculator", function() { var calc; beforeEach(function(){ calc = new Calculator(); }); }); 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(); }); it("should return the sum", function() { expect(calc.Add(1,1)).toEqual(2); }); }); Spec for Calculator:
31. Failing Test
32. Create the "Calculator" function function Calculator () { }
33. One passing, one left to fix
34. Add the method function Calculator () { this.Add = function(num1, num2){ return num1 + num2; }; }
35. Passed!
36. Jasmine with Ruby(not Rails)
37. $ gem install jasmine
38. $ jasmine init
39. Generated folder structure
40. $ rake jasmine
41. http://localhost:8888
42. $ rake jasmine:ci
43. Jasmine with JQuery
44. * 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
45. "A lightweight, easy to use Javascript <span> injector for radical Web Typography"
46. @davatron5000
47. Lettering.js <h1 class="fancy_title">Some Title</h1> <script> $(document).ready(function() { $(".fancy_title").lettering(); }); </script>
48. Lettering.js results <h1 class="fancy_title"> <span class="char1">S</span> <span class="char2">o</span> <span class="char3">m</span> <span class="char4">e</span> <span class="char5"></span> <span class="char6">T</span> <span class="char7">i</span> <span class="char8">t</span> <span class="char9">l</span> <span class="char10">e</span> </h1>
49. Standalone folder structure + more
50. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Jasmine Test Runner</title> <link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.2/jasmine.css"> <script type="text/javascript" src="lib/jasmine-1.0.2/jasmine.js"></script> <script type="text/javascript" src="lib/jasmine-1.0.2/jasmine-html.js"></script> <script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="lib/jasmine-jquery-1.2.0.js"></script> <script type="text/javascript" src="lib/jquery.lettering-0.6.1.min.js"></script> <script type="text/javascript" src="spec/LetteringSpec.js"></script> </head> <body> <script type="text/javascript"> jasmine.getEnv().addReporter(new jasmine.TrivialReporter()); jasmine.getEnv().execute(); </script> </body> </html>
51. describe("Lettering", function(){ beforeEach(function(){ //loadFixtures('myfixture.html'); setFixtures('<h1 class="fancy_title">Some Title</h1>'); $('.fancy_title').lettering(); }); });
52. describe("Lettering", function(){ beforeEach(function(){ //loadFixtures('myfixture.html'); setFixtures('<h1 class="fancy_title">Some Title</h1>'); $('.fancy_title').lettering(); }); it("should be visible", function() { expect($('.fancy_title')).toBeVisible(); }); });
53. describe("Lettering", function(){ beforeEach(function(){ //loadFixtures('myfixture.html'); setFixtures('<h1 class="fancy_title">Some Title</h1>'); $('.fancy_title').lettering(); }); it("should be visible", function() { expect($('.fancy_title')).toBeVisible(); }); it("should have 10 spans", function(){ expect($('.fancy_title > span').length).toEqual(10); }); });
54. describe("Lettering", function(){ beforeEach(function(){ //loadFixtures('myfixture.html'); setFixtures('<h1 class="fancy_title">Some Title</h1>'); $('.fancy_title').lettering(); }); it("should be visible", function() { expect($('.fancy_title')).toBeVisible(); }); it("should have 10 spans", function(){ expect($('.fancy_title > span').length).toEqual(10); }); it("should contain 'S' as the text of the first span", function(){ expect($('.fancy_title > span:first').text()).toEqual('S'); }); });
55. describe("Lettering", function(){ beforeEach(function(){ //loadFixtures('myfixture.html'); setFixtures('<h1 class="fancy_title">Some Title</h1>'); $('.fancy_title').lettering(); }); it("should be visible", function() { expect($('.fancy_title')).toBeVisible(); }); it("should have 10 spans", function(){ expect($('.fancy_title > span').length).toEqual(10); }); it("should contain 'S' as the text of the first span", function(){ expect($('.fancy_title > span:first').text()).toEqual('S'); }); it("should have a class of 'char1' on the first span", function(){ expect($('.fancy_title > span:first')).toHaveClass('char1'); }); });
56. Jasmine with Rails gem "jasmine" $ bundle install $ jasmine init (optional) $ rake jasmine or $ rake jasmine:ci http://localhost:8888
57. Generated Rails spec folder
58. Generated default javascript objects
59. $ rake jasmine
61. $ gem install evergreen
62. gem install evergreen
63. Evergreen default folder paths (not generated)
64. $ evergreen serve
65. $ evergreen run
66. Evergreen and Rails 3 gem 'evergreen', :require => evergreen/rails'localhost:3000/evergreen rake spec:javascripts
67. What about CoffeeScript???
68. Installing CoffeeScript brew install node.js (then add to PATH, NODE_PATH) curl http://npmjs.org/install.sh | sh npm install -g coffee-script
69. Add a "_spec.coffee" file
70. require('/calculator.js') describe 'Calculator', -> beforeEach -> @calc = new Calculator it 'should return the sum', -> expect(@calc.Add(1,1)).toEqual(2)
71. require('/calculator.js') describe 'Calculator', -> beforeEach -> @calc = new Calculator it 'should return the sum', -> expect(@calc.Add(1,1)).toEqual(2)
72. require('/calculator.js') describe 'Calculator', -> beforeEach -> @calc = new Calculator it 'should return the sum', -> expect(@calc.Add(1,1)).toEqual(2)
73. #winning
75. Headless Browser Install - Download and install Qt 4.7+ binary package - gem install capybara-webkit -v=1.0.0.beta4 - create "config/evergreen.rb"
76. Configure Evergreen require 'capybara-webkit' Evergreen.configure do |config| #config.driver = :selenium config.driver = :webkit config.public_dir = 'public' config.spec_dir = 'spec/javascripts' end
77. Using a Headless Browser #selenium Finished in 3.92 seconds 2 examples, 0 failures #webkit Finished in 1.05 seconds 2 examples, 0 failures
78. Node.js + Jasmine "jasmine-node"
79. Any other cool utilities?
80. Rosie "Rosie is a factory for building JavaScript objects, mostly useful for setting up test data. It is inspired by factory_girl." https://github.com/bkeepers/rosie
81. Summer Breeze "Summer Breeze is a tool for generating fixture DOM output for Jasmine JavaScript tests directly from your Rails Views with a simple DSL for specifying fixtures" https://github.com/noelrappin/summer_breeze
82. jasminerice "Pain free coffeescript testing under Rails 3.1" https://github.com/bradphelan/jasminerice
83. http://try-jasmine.heroku.com
84. Wrap Up 1. Unit testing is important 2. Javascript can and should be unit tested 3. Jasmine is easy to setup and use
86. Thank You! @timtyrrell Questions? Did I miss any cool plugins? http://bit.ly/jasmine-lsrc http://spkr8.com/t/7818
87. 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: