Testing JavaScript in Rails Applications

Transcript

1. TESTING JS IN RAILS APPS and H. J. Simpson Vasili Kachalko twitter.com/dreamfa11 github.com/dreamfall Brainspec brainspec.com Sunday, February 24, 13
2. CLIENT SIDE APPS PROS Sunday, February 24, 13
3. CLIENT SIDE APPS PROS • High speed Sunday, February 24, 13
4. CLIENT SIDE APPS PROS • High speed • Clients love them Sunday, February 24, 13
5. CLIENT SIDE APPS PROS • High speed • Clients love them • Server load reduction Sunday, February 24, 13
6. CLIENT SIDE APPS CONS Sunday, February 24, 13
7. CLIENT SIDE APPS CONS • Testing Sunday, February 24, 13
8. CLIENT SIDE APPS CONS • Testing • It’s JavaScript Sunday, February 24, 13
9. TEST COVERAGE 100% Sunday, February 24, 13
10. APPLICATION LANGUAGES 63% 7% 30% ruby javascript coffeescript Sunday, February 24, 13
11. SO HOW SHOULD WE TEST JS Capybara? Sunday, February 24, 13
12. SO HOW SHOULD WE TEST JS Capybara? NO Sunday, February 24, 13
13. SOLUTIONS mocha* + chai * - mocha читается как “мока”. Точно. Я проверял. Да, другой вариант смешнее. Sunday, February 24, 13
14. Sunday, February 24, 13
15. Sunday, February 24, 13
16. ASSERTIONS/MATCHERS Sunday, February 24, 13
17. ASSERTIONS/MATCHERS • to (should) • be • been • is • that • and • have • with • .deep • .a(type) • .include(value) • .ok • .true • .false • .null • .undefined • .exist • .empty • .equal (.eql) • .above(value) • .below(value) • .within(start, finish) • .instanceof(constructor) • .property(name, [value]) • .ownProperty(name) • .length(value) • .match(regexp) • .string(string) • .keys(key1, [key2], [...]) • .throw(constructor) • .respondTo(method) • .satisfy(method) • .closeTo(expected, delta) Sunday, February 24, 13
18. EXAMPLE describe 'Foo', -> it 'returns omg', -> expect(Foo.bar).to.eq('omg') Foo.bar.should.eq('omg') assert_equal(Foo.bar, 'omg') Sunday, February 24, 13
19. INTEGRATING WITH RAILS Sunday, February 24, 13
20. Sunday, February 24, 13
21. INSTALLATION # Gemfile gem 'konacha' # config/initializers/konacha.rb Konacha.configure do |config| config.spec_dir = "spec/javascripts" config.spec_matcher = /_spec\.|_test\./ config.driver = :selenium config.stylesheets = %w(application) end if defined?(Konacha) Sunday, February 24, 13
22. EXAMPLE <div class="choo"> <input type="text"><a href="#">Do it</a> </div> app/views/home/index.html.erb Sunday, February 24, 13
23. EXAMPLE app/assets/javascripts/application.js.coffee #= require jquery jQuery -> ($ document).delegate 'a', 'click', (e) -> do e.preventDefault ($ '.choo input').val 'CHOO CHOO!11' Sunday, February 24, 13
24. EXAMPLE spec/javascripts/spec_helper.js.coffee #= require_tree ./templates #= require application #= require chai-jquery Sunday, February 24, 13
25. EXAMPLE spec/javascripts/templates/choo.jst.skim .choo input type="text" a href="#" | Do it Sunday, February 24, 13
26. EXAMPLE spec/javascripts/application_spec.js.coffee #= require spec_helper describe 'Application', -> it 'works!', -> ($ '#konacha').html JST['templates/choo']() do ($ '.choo a').click expect($ '.choo input').to.have.value 'CHOO CHOO!11' Sunday, February 24, 13
27. RUNNING rake konacha:run Sunday, February 24, 13
28. RUNNING rake konacha:serve http://0.0.0.0:3500/ Sunday, February 24, 13
29. EXAMPLE spec/javascripts/templates/choo.jst.skim .choo input type="text" a href="#" | Do it gem ‘skim’ Sunday, February 24, 13
30. EXAMPLE spec/javascripts/application_spec.js.coffee #= require spec_helper describe 'Application', -> it 'works!', -> ($ '#konacha').html JST['templates/choo']() do ($ '.choo a').click expect($ '.choo input').to.have.value 'CHOO CHOO!11' ??? Sunday, February 24, 13
31. Sunday, February 24, 13
32. chai-jquery gem ‘chai-jquery-rails’ Sunday, February 24, 13
33. CHAI-JQUERY MATCHERS • .attr(name[, value]) • .data(name[, value]) • .class(className) • .id(id) • .html(html) • .text(text) • .value(value) • .visible • .hidden • .selected • .checked • .disabled • .exist • .match(selector) / .be(selector) • .contain(selector) • .have(selector) Sunday, February 24, 13
34. EXAMPLE app/assets/javascripts/application.js.coffee #= require jquery jQuery -> ($ document).delegate 'a', 'click', (e) -> do e.preventDefault if confirm 'Are you sure?' ($ '.choo input').val 'CHOO CHOO!11' Sunday, February 24, 13
35. Sunday, February 24, 13
36. Sunday, February 24, 13
37. sinon.js http://sinonjs.org/ Sunday, February 24, 13
38. SINON.JS •stubs •mocks •spies •fake timers •fake XHR •fake servers •... Sunday, February 24, 13
39. spec/javascripts/spec_helper.coffee #= require_tree ./templates #= require chai-jquery #= require application #= require support/sinon #= require_tree ./support # Needed for stubbing out "window" properties # like the confirm dialog Konacha.mochaOptions.ignoreLeaks = true beforeEach -> @sandbox = sinon.sandbox.create() afterEach -> @sandbox.restore() Sunday, February 24, 13
40. EXAMPLE spec/javascripts/application_spec.js.coffee #= require spec_helper describe 'Application', -> beforeEach -> @sandbox.stub(window, "confirm").returns(true) it 'works!', -> ($ '#konacha').html JST['templates/choo']() do ($ '.choo a').click expect(($ '.choo input')).to.have.value 'CHOO CHOO!11' Sunday, February 24, 13
41. WHAT ABOUT AJAX REQUESTS? Sunday, February 24, 13
42. STUBBING AJAX RESPONSES #= require jquery jQuery -> $(document).delegate 'a', 'click', (e) -> do e.preventDefault $.get '/omg', (data) -> $('.choo input').val data Sunday, February 24, 13
43. STUBBING AJAX RESPONSES #= require spec_helper describe 'Application', -> beforeEach -> @server = do sinon.fakeServer.create @server.respondWith '/omg', (xhr, params) -> xhr.respond 200, {'Content-Type': 'application/ text'}, 'CHOO CHOO!11' afterEach -> do @server.restore it 'works!', -> ($ '#konacha').html JST['templates/choo']() do ($ '.choo a').click do @server.respond expect(($ '.choo input')).to.have.value 'CHOO CHOO!11' Sunday, February 24, 13
44. THANK YOU twitter.com/HomerJSimpson twitter.com/dreamfa11 github.com/dreamfall Brainspec brainspec.com Sunday, February 24, 13