Test driven java script development
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Test driven java script development

on

  • 1,512 views

JavaScript ist eine sehr dynamische Sprache und verhält sich zudem je nach Browser unterschiedlich. Daher sind automatisierte Tests besonders wertvoll. Dieser Vortrag zeigt, wie Cross-Browser-Tests ...

JavaScript ist eine sehr dynamische Sprache und verhält sich zudem je nach Browser unterschiedlich. Daher sind automatisierte Tests besonders wertvoll. Dieser Vortrag zeigt, wie Cross-Browser-Tests für JavaScript entwickelt werden können.

Vortrag von der MobileTech Conference 2011

Statistics

Views

Total Views
1,512
Views on SlideShare
1,509
Embed Views
3

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 3

https://twitter.com 2
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Test driven java script development Presentation Transcript

  • 1. Tobias  Bosch  &  Stefan  Scheidt  /  OPITZ  CONSULTING  GmbH  Test-­‐Driven  JavaScript  Development  
  • 2. Wer  sind  wir?   tobias.bosch@opitz-­‐consulLng.com   (@Lgbro)    stefan.scheidt@opitz-­‐consulLng.com   (@beezlebug)    
  • 3. Märkte Kunden Leistungs- Fakten angebotn Java n Branchen- n IT-Strategie n Gründung 1990n SOA übergreifend n Beratung n 400 Mitarbeitern ORACLE n Über 600 n Implementierung n 8 Standorte in D/n BI/DWH Kunden n Betrieb PLn Outtasking n Training Industrie / Versorger / Handel / Logistik / Telekommunikation Dienstleistungen 29% 29% 42% Öffentliche Auftraggeber / Banken & Versicherungen / Vereine & Verbände © OPITZ CONSULTING GmbH 2011 Seite 3
  • 4. Wer  sind  Sie?  
  • 5. In  diesem  Vortrag  geht‘s  um...     ...automaLsiertes  Testen   ...durch  Entwickler  
  • 6. Warum  testen?  
  • 7. Warum  JavaScript-­‐Code  testen?  
  • 8. Laufzeitumgebungen  für   JavaScript             ...  
  • 9. In  diesem  Vortrag:            Icon  Set  by  Paul  Irish  (h4p://paulirish.com/2010/high-­‐res-­‐browser-­‐icons/)    
  • 10. Tests  formulieren  
  • 11. „Klassisch“  mit  xUnit-­‐Asserts       „BDD-­‐Style“    à  la  RSpec  
  • 12. Demo:  BDD  mit  Jasmine  
  • 13. Hello  Jasmine!  describe("parseFloat",  function()  {            it("should  return  undefined  for  undefined",  function  ()  {                  expect(util.parseFloat(undefined)).toBeUndefined();          });            it("should  return  0  for  empty  string",  function  ()  {                  expect(util.parseFloat()).toEqual(0);          });            it("should  return  number  for  number  strings",  function  ()  {                  expect(util.parseFloat(1.5)).toEqual(1.5);          });            //  ...    });  
  • 14. Hello  Jasmine!  describe("parseFloat",  function()  {   Suite            it("should  return  undefined  for  undefined",  function  ()  {                  expect(util.parseFloat(undefined)).toBeUndefined();          });            it("should  return  0  for  empty  string",  function  ()  {                  expect(util.parseFloat()).toEqual(0);          });            it("should  return  number  for  number  strings",  function  ()  {                  expect(util.parseFloat(1.5)).toEqual(1.5);          });            //  ...    });  
  • 15. Hello  Jasmine!  describe("parseFloat",  function()  {            it("should  return  undefined  for  undefined",  function  ()  {                  expect(util.parseFloat(undefined)).toBeUndefined();          });     Sp cs        it("should  return  0  for  empty  string",  function  ()  {   e                expect(util.parseFloat()).toEqual(0);            });            it("should  return  number  for  number  strings",  function  ()  {                  expect(util.parseFloat(1.5)).toEqual(1.5);          });            //  ...    });  
  • 16. Hello  Jasmine!  describe("parseFloat",  function()  {            it("should  return  undefined  for  undefined",  function  ()  {                  expect(util.parseFloat(undefined)).toBeUndefined();          });     Matc        it("should  return  0  for  empty  string",  function  ()  {                  expect(util.parseFloat()).toEqual(0);   her          });            it("should  return  number  for  number  strings",  function  ()  {                  expect(util.parseFloat(1.5)).toEqual(1.5);          });            //  ...    });  
  • 17. Hello  Jasmine!   her  Matc expect(x).toEqual(y);   expect(x).toBe(y);   expect(x).toBeDefined();   expect(x).toBeUndefined();   expect(x).toBeTruthy();   expect(x).toBeFalsy();   ...  
  • 18. Hello  Jasmine!   Spec   Runn er  
  • 19. Fortgeschriaene  Konzepte  
  • 20. Spies  
  • 21. Spies  describe("execute  fadein",  function()  {            it("should  eventually  set  opacity  to  1",  function  ()  {                  var  element  =  document.createElement("div");                  spyOn(window,  setTimeout).andCallFake(                          function(callback)  {                                  callback();                          });                  spyOn(util,  opacity);                  fadein.execute(element);                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);          });    });  
  • 22. Spies  describe("execute  fadein",  function()  {            it("should  eventually  set  opacity  to  1",  function  ()  {                  var  element  =  document.createElement("div");                  spyOn(window,  setTimeout).andCallFake(                          function(callback)  {                                  callback();                          });                  spyOn(util,  opacity);                  fadein.execute(element);                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);          });    });  
  • 23. Spies  describe("execute  fadein",  function()  {   Arran   ge          it("should  eventually  set  opacity  to  1",  function  ()  {                  var  element  =  document.createElement("div");                  spyOn(window,  setTimeout).andCallFake(                          function(callback)  {                                  callback();                          });                  spyOn(util,  opacity);                  fadein.execute(element);                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);          });    });  
  • 24. Spies  describe("execute  fadein",  function()  {   Arran          it("should  eventually  set  opacity  to  1",  function  ()  {   ge                  var  element  =  document.createElement("div");                  spyOn(window,  setTimeout).andCallFake(                          function(callback)  {                                  callback();                          });                  spyOn(util,  opacity);   //  waits  for  delay  seconds                  fadein.execute(element);   //  then  calls  callback                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);   window.setTimeout  =  function  (callback,  delay)  {          });          ...     };    });  
  • 25. Spies  describe("execute  fadein",  function()  {   Arran          it("should  eventually  set  opacity  to  1",  function  ()  {   ge                  var  element  =  document.createElement("div");   //  set  opacity  of  element  to  opacity   util.opacity  =  function  (element,  opacity)  {                  spyOn(window,  setTimeout).andCallFake(          ...                          function(callback)  {   };                                    callback();                          });                  spyOn(util,  opacity);                  fadein.execute(element);                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);          });    });  
  • 26. Spies  describe("execute  fadein",  function()  {            it("should  eventually  set  opacity  to  1",  function  ()  {                  var  element  =  document.createElement("div");                  spyOn(window,  setTimeout).andCallFake(                          function(callback)  {                                  callback();                          });   Act                  spyOn(util,  opacity);                  fadein.execute(element);                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);          });    });  
  • 27. Spies  describe("execute  fadein",  function()  {            it("should  eventually  set  opacity  to  1",  function  ()  {                  var  element  =  document.createElement("div");   //  set  opacity  of  element  to  opacity   util.opacity  =  function  (element,  opacity)  {                  spyOn(window,  setTimeout).andCallFake(          ...                          function(callback)  {   };                                    callback();                          });   Asser                spyOn(util,  opacity);   t                  fadein.execute(element);                  expect(util.opacity.mostRecentCall.args[1]).toEqual(1);          });    });  
  • 28. FunkLon   Der  Spy  soll...  spy.andCallThrough()   ...  die  ursprüngliche  FunkLon   aufrufen  spy.andReturn(argument)   ...  das  übergebene  Argumente   zurückgeben  spy.andThrow(exception)   ...  die  übergebene  ExcepLon   werfen  spy.andCallFake(function)   ...  die  übergebene  FunkLon   aufrufen   FunkLonen  von  Spies  
  • 29. FunkLon   Prüb,  ob  der  Spy...  toHaveBeenCalled()   ...  aufrufen  wurde  toHaveBeenCalledWith(args)   ...  mit  den  übergebenen   Argumenten  aufgerufen  wurde   Matcher  für  Spies  FunkLon   Bedeutung  spy.callCount   Anzahl  der  Aufrufe  spy.argsForCall[i]   Argumente  des  i-­‐ten  Aufrufs  spy.mostRecentCall.args   Argumente  des  letzten  Aufrufs   Eigenschaben  von  Spies  
  • 30. Asynchrone  Tests  
  • 31. Asynchrone  Tests  it("should  eventually  set  opacity  to  1",  function()  {          var  element  =  document.createElement("div");          spyOn(util,  opacity);          runs(function()  {                  fadein.execute(element);          });          waitsFor(function  ()  {                  return  opacitySpy.mostRecentCall.args[1]  ===  1;          });          runs(function()  {                  //  some  other  expectations                  expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);            });  });  
  • 32. Asynchrone  Tests  it("should  eventually  set  opacity  to  1",  function()  {          var  element  =  document.createElement("div");          spyOn(util,  opacity);   Arran        runs(function()  {   ge                  fadein.execute(element);          });          waitsFor(function  ()  {                  return  opacitySpy.mostRecentCall.args[1]  ===  1;          });          runs(function()  {                  //  some  other  expectations                  expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);            });  });  
  • 33. Asynchrone  Tests  it("should  eventually  set  opacity  to  1",  function()  {          var  element  =  document.createElement("div");          spyOn(util,  opacity);          runs(function()  {   Act                  fadein.execute(element);          });          waitsFor(function  ()  {                  return  opacitySpy.mostRecentCall.args[1]  ===  1;          });          runs(function()  {                  //  some  other  expectations                  expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);            });  });  
  • 34. Asynchrone  Tests  it("should  eventually  set  opacity  to  1",  function()  {          var  element  =  document.createElement("div");          spyOn(util,  opacity);          runs(function()  {                  fadein.execute(element);   Wait        });   ...          waitsFor(function  ()  {                  return  opacitySpy.mostRecentCall.args[1]  ===  1;          });          runs(function()  {                  //  some  other  expectations   //  set  opacity  of  element  to  opacity                  expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);     util.opacity  =  function  (element,  opacity)  {          });          ...  });   };    
  • 35. Asynchrone  Tests  it("should  eventually  set  opacity  to  1",  function()  {          var  element  =  document.createElement("div");          spyOn(util,  opacity);          runs(function()  {                  fadein.execute(element);          });          waitsFor(function  ()  {                  return  opacitySpy.mostRecentCall.args[1]  ===  1;          });   Asser        runs(function()  {   t                  //  some  other  expectations                  expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);            });  });  
  • 36. UI-­‐Tests  
  • 37. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;          loadHtml("/js-­‐fadein/index.html");          runs(function()  {                  win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });          waitsForAsync();          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 38. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;   .          loadHtml("/js-­‐fadein/index.html");   age.. dex  p        runs(function()  {   n The  i                win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });          waitsForAsync();          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 39. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;          loadHtml("/js-­‐fadein/index.html");   Arran        runs(function()  {   ge,  P art  1                  win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });          waitsForAsync();          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 40. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;          loadHtml("/js-­‐fadein/index.html");   Arran        runs(function()  {   ge,  P art  2                  win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });          waitsForAsync();          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 41. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;          loadHtml("/js-­‐fadein/index.html");          runs(function()  {                  win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });   Act          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });          waitsForAsync();          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 42. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;          loadHtml("/js-­‐fadein/index.html");          runs(function()  {                  win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });   Wait ...          waitsForAsync();          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 43. it("should  fade  in  hello  div  on  button  click",  function  ()  {          var  win,  field,  button;          loadHtml("/js-­‐fadein/index.html");          runs(function()  {                  win  =  testwindow();                  field  =  win.document.getElementById(hello);                  button  =  win.document.getElementById(fadein);          });          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(0);                  jasmine.ui.simulate(button,  click);          });   Asser        waitsForAsync();   t          runs(function  ()  {                  expect(win.util.opacity(field)).toEqual(1);          });  });    UI-­‐Test  mit  Jasmine-­‐UI    
  • 44. Testausführung  automaLsieren  
  • 45. Pro   Contra   Beispiele   -­‐  Schwerer  zu   Im   Laufen  in    QUnit   automaLsieren  Browser   ProdukLons-­‐  YUI  Test   testen   -­‐  Schwerer  in  CI   umgebung    Jasmine   einzubeaen   -­‐  Leicht  zu    Envjs  Headless   automaLsieren   Browser  wird    PhantomJS  Browser   -­‐    Leicht  in  CI   nur  simuliert    Zombie.js   einzubeaen    HtmlUnit  
  • 46. Browser  fernsteuern  
  • 47. JsTestDriver  h4p://code.google.com/p/js-­‐test-­‐driver/  
  • 48. Demo:  JsTestDriver  
  • 49. Fazit   Es  gibt  ein  umfangreiches  Toolset  zum  Testen   von  JavaScript-­‐Code.     Testen  Sie  Ihren  Code!  Testen  Sie  insbesondere  Ihren  JavaScript-­‐Code!   Sie  haben  keine  Ausrede...  
  • 50. Links  Jasmine   hap://pivotal.github.com/jasmine/  Jasmine  UI   haps://github.com/Lgbro/jasmine-­‐ui  JsTestDriver   hap://code.google.com/p/js-­‐test-­‐driver/  
  • 51. saturated  wriLng   (By  Eduordo,  hap://www.flickr.com/photos/tnarik/366393127/)     Smiley  Keyboard   (By  ~Prescoa,  hap://www.flickr.com/photos/ppym1/93571524/)     Spyhole,  Paris  (By  smith  of  smiths,  hap://www.flickr.com/photos/hesketh/232015302/)     Sorta  synchronised  diving   (By  Aaron  Retz,  hap://www.flickr.com/photos/aretz/309469339/)  
  • 52. Stamp  Collector  (By  C.  CasLllo,  hap://www.flickr.com/photos/carolinedecasLllo/2750577684/)     bios  [bible]   (By  Gastev,  hap://www.flickr.com/photos/gastev/2174505811/)     Day  276/365:  in  hot  pursuit   (By  Tina  Vega,  hap://www.flickr.com/photos/Lnavega/3066602429/)    
  • 53. Besuchen  Sie  uns  Morgen  beim  Vortrag     JavaScript  Data  Binding   mit  jQuery  Mobile     um  10:00  Uhr  im  Watordsaal  
  • 54. Vielen  Dank  für  Ihr  Interesse!     @Lgbro   @beezlebug