Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing Rich Web Apps with Siesta

Mats Bryntse
December 12, 2012

Testing Rich Web Apps with Siesta

My slides from CopenhagenJS meetup November 2012

Mats Bryntse

December 12, 2012
Tweet

More Decks by Mats Bryntse

Other Decks in Technology

Transcript

  1. Testing rich web apps with Siesta (C) 2012 Mats Bryntse

    www.bryntum.com Wednesday, December 12, 12
  2. About me Mats Bryntse Helsingborg, Sweden Background in C, C#,

    ASP.NET JavaScript/Sencha enthusiast since 2007 Wednesday, December 12, 12
  3. About me Mats Bryntse Helsingborg, Sweden Background in C, C#,

    ASP.NET JavaScript/Sencha enthusiast since 2007 Founded Bryntum 2009 Wednesday, December 12, 12
  4. About me Mats Bryntse Helsingborg, Sweden Background in C, C#,

    ASP.NET JavaScript/Sencha enthusiast since 2007 Founded Bryntum 2009 We make JS UI components (Gantt/Scheduler/Siesta) Wednesday, December 12, 12
  5. About me Mats Bryntse Helsingborg, Sweden Background in C, C#,

    ASP.NET JavaScript/Sencha enthusiast since 2007 Founded Bryntum 2009 We make JS UI components (Gantt/Scheduler/Siesta) @bryntum facebook.com/bryntum Wednesday, December 12, 12
  6. Before we start Do you have a frontend test suite

    for your product or web app? Wednesday, December 12, 12
  7. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers

    (Chrome, FF, IE) Multiple versions of browsers Wednesday, December 12, 12
  8. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers

    (Chrome, FF, IE) Multiple versions of browsers Multiple rendering modes (Quirks, Strict, ...) Wednesday, December 12, 12
  9. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers

    (Chrome, FF, IE) Multiple versions of browsers Multiple rendering modes (Quirks, Strict, ...) Multiple versions of Ext JS Wednesday, December 12, 12
  10. Too many combinations Multiple platforms (Mac, PC, Linux) Multiple browsers

    (Chrome, FF, IE) Multiple versions of browsers Multiple rendering modes (Quirks, Strict, ...) Multiple versions of Ext JS Multiple Timezones: Varying DST transitions Wednesday, December 12, 12
  11. New guy studies the code // When I wrote this,

    only God and // I understood what I was doing // Now, God only knows Wednesday, December 12, 12
  12. Why Siesta? Too much manual testing doesn’t scale Hard to

    test a javascript generated UI Wednesday, December 12, 12
  13. Why Siesta? Too much manual testing doesn’t scale Hard to

    test a javascript generated UI Testing only raw JS not enough Wednesday, December 12, 12
  14. Why Siesta? Too much manual testing doesn’t scale Hard to

    test a javascript generated UI Testing only raw JS not enough Needed DOM interaction tests too. Wednesday, December 12, 12
  15. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery,

    NodeJS) Unit testing and Functional testing Wednesday, December 12, 12
  16. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery,

    NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Wednesday, December 12, 12
  17. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery,

    NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Adapters for Ext JS, Sencha Touch Wednesday, December 12, 12
  18. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery,

    NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Adapters for Ext JS, Sencha Touch We use it. 3000+ assertions Wednesday, December 12, 12
  19. Siesta overview Freemium, generic JS testing tool (Ext JS, jQuery,

    NodeJS) Unit testing and Functional testing Write tests in plain JavaScript Adapters for Ext JS, Sencha Touch We use it. 3000+ assertions Automation via PhantomJS or Selenium Wednesday, December 12, 12
  20. Siesta features t.is(“foo”, “foo”, ‘values match’); // PASS t.isnt(“foo”, “bar”,

    “values mismatch”); // PASS t.isDeeply({ foo : ‘bar’}, { a : ‘b’ }, ‘Objects’); // FAIL t.ok(true, ‘True is truthy’); // PASS t.notOk(null, ‘null is falsy’); // PASS Basic assertions Wednesday, December 12, 12
  21. Siesta features t.click(myDiv, fn); t.moveCursorTo(myDiv, fn); t.dragBy(myDiv, [50, 50], fn);

    t.type(myInput, ‘Hello world’, fn) User simulation Wednesday, December 12, 12
  22. Siesta features myFunction : function() { var counter = 1;

    i = 0; .... } Globals detection Wednesday, December 12, 12
  23. Simple unit test function User (name) { this.name = name;

    }; var bob = new User(‘Bob’); t.is(bob.name, ‘Bob’, ‘Name works!’); Wednesday, December 12, 12
  24. Element Targeting Element id CSS selector Coordinate DOM node function

    () {} Component instance Wednesday, December 12, 12
  25. Element Targeting Element id Component query CSS selector Coordinate DOM

    node function () {} Component instance Wednesday, December 12, 12
  26. Element Targeting Element id Component query Composite query CSS selector

    Coordinate DOM node function () {} Component instance Wednesday, December 12, 12
  27. Action ‘chain’ t.chain( { action : ‘click’, target : ‘>>myform

    namefield’ }, { action : ‘type’, text : ‘John’ }, { action : ‘click’, target : ‘>> myform savebutton’ }, function () { t.is(myUser.get(‘name’), ‘John’, ‘Wooo!’); } ); Wednesday, December 12, 12
  28. Future plans Fiesta - crowd sourced test tool Recorder Cloud

    testing environment Wednesday, December 12, 12
  29. Future plans Fiesta - crowd sourced test tool Recorder Cloud

    testing environment [your idea here] Wednesday, December 12, 12