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

Siesta Deep Dive

C3d3ad4d0758d38bf60f1a648bd0fe02?s=47 Mats Bryntse
June 03, 2015
250

Siesta Deep Dive

From SenchaCon Roadshow 2015

C3d3ad4d0758d38bf60f1a648bd0fe02?s=128

Mats Bryntse

June 03, 2015
Tweet

Transcript

  1. 1 @Bryntum Siesta Deep Dive Improve the quality of your

    Ext JS app releases with unit & UI tests
  2. Mats Bryntse Chief JavaScript Officer, Bryntum

  3. Agenda 3 Siesta News Unit & UI tests •Recently added

    features •What’s new in Siesta 3.0 •Feature walkthrough •Application tests •Continuous Integration •Tips & Tricks •BDD / TDD •Using PhantomJS •Testing a view App tests & CI
  4. Siesta News

  5. Recent Siesta features 5 • sandboxing now optional • async

    setup/tearDown test methods • taking screenshots • event recorder improvements & configurability
  6. What’s new in Siesta 3.0 6

  7. 7

  8. Jasmine Support 8

  9. 9 describe(‘Some spec', function (t) {
 var component; t.beforeEach(function(t) {

    component = new Ext.Component(); })
 t.it('Should test something', function (t) {
 });
 }); beforeEach/afterEach
  10. 10 Responsive UI controls

  11. …and more 11 • Improved memory management • Tests can

    now run in popups instead of iframes • Touch event support • Jasmine style spies
  12. Download it today: www.bryntum.com/products/siesta 12 :

  13. Why test?

  14. 14 Hands up: Are you unit testing your JS?

  15. Know this guy? 15

  16. 16 Reasons to test

  17. 17 Productivity & confidence in code

  18. 18 Productivity & confidence in code

  19. 19 Code handover

  20. 20 Refactoring without tests

  21. 21 Refactoring like a boss

  22. 22 Fix bugs once

  23. 23 Quality of sleep

  24. Unit Tests Red, Green, Refactor

  25. 25 Terminology: What does testing mean for a JS developer?

  26. 26 Unit tests, UI tests, Application tests..?

  27. Ideal Test Pyramid 27 JS Unit tests App Tests UI

    tests
  28. Real World 28 Backend unit tests App Tests

  29. A unit test • should focus on a single JS

    class (“unit”) • should not involve DOM • is pure logic, runs very fast • is perfect for pre-commit hooks 29
  30. 30 describe('A simple Model test', function (t) {
 
 


    t.it('Should do something', function (t) {
 var user = new User({ name : "Bob" });
 
 
 t.expect(user.name).toBe("Bob");
 
 });
 }); Simple BDD unit test
  31. 31 describe("A simple Model test", function (t) {
 
 t.it("Will

    not run", function (t) {
 …
 });
 
 
 t.iit("Isolate this section", function (t) {
 …
 });
 
 }); t.iit for fast test debugging
  32. Unit tests are your friend 32 • Should be your

    #1 priority • Cover your most important JS classes, code that is reused • Run often, before commit, daily, nightly. • Use TDD approach + BDD style for readability
  33. TDD basics 33 1. Make the unit test fail 2.

    Implement 3. Make the test pass 4. Refactor, Repeat
  34. Unit Test Demo 34

  35. UI Testing Render, Interact, Assert

  36. 36 • UI unit test of a single UI component

    • Or application test, open index.html and test it Two main types of UI tests
  37. 37 Manually writing UI tests takes time

  38. 38 UI tests are more fragile & run slower than

    unit tests
  39. 39 Understanding CSS and ComponentQuery is key

  40. 40 Reveals tight coupling very efficiently UserList.js Test sandbox Viewport.js

  41. 41 UI Unit test demo

  42. Application Tests Click, Wait, Assert

  43. Application testing 43 • Aka black box testing, functional testing

    • Go to application index.html • Runs all the code of your application • Does app work or not?
  44. Challenges 44 •Database needs to be put in a known

    state •Slow •Tests can become fragile, race conditions •Errors likely harder to find
  45. Using the event recorder 45

  46. 46 • Great for application tests • Records user actions:

    clicks, types, drag drop • Can be used by a non-programmer • Big timesaver Using the event recorder
  47. 47 Let’s try the recorder

  48. 48 Monkey testing

  49. Monkey testing 49 • Random UI testing • Clicks, drags

    etc. in your UI • Finds unhandled exceptions • Free testing help. 0€
  50. 50 5€ * 0 = 0 5€ Cost breakdown

  51. 51 Monkey testing demo

  52. Continuous Integration Team City, Cloud Services, Statistics

  53. Purpose of CI 53 • Automated builds • Nightly test

    suite execution • Finding errors early => Code quality => Motivated developers • Enables Continuous Delivery
  54. 54 Always ready to release!

  55. 55 • Bryntum uses TeamCity • Test suites run every

    2 hours in Chrome • Nightly for all other browsers • Reports, statistics, charts and code coverage
  56. 56 Let’s checkout TeamCity

  57. 57 So…running in multiple browsers?

  58. X-browser testing 58 •Need to create Virtual Machines for each

    version of IE •Total: Chrome, Safari, FF, IE 7-11 => 5 VMs •Managing such a farm can be very time consuming
  59. 59 • Siesta integrates with both BrowserStack and Sauce Labs

    • Run tests easily in any OS and Browser combination • No need to setup your own VM farm • Read more on the Bryntum blog… Cloud to the rescue
  60. 60 Launching tests with Sauce

  61. Tips & Tricks How to find bugs early

  62. 62 Unhandled JS exception: What does the user see? Finding

    bugs faster
  63. 63

  64. 64 Most likely: Nothing

  65. 65 Capturing unhandled errors win.onerror = function (message, file, line,

    column, errorObj) {
 // Log it
 
 };
  66. 66 Demo - it’s simple!

  67. 67 You can do it too http://www.sencha.com/forum/showthread.php?295768-Basic-error-handling-for-Ext-JS-apps

  68. 68 Testing different screen sizes {
 name : 'Responsive app

    test - landscape',
 viewportWidth : 1024,
 viewportHeight : 768,
 hostPageUrl : 'executive-dashboard/',
 url : 'executive-dashboard/tests/large-size.t.js'
 },
 {
 name : 'Responsive app test - portrait',
 viewportWidth : 500,
 viewportHeight : 700,
 hostPageUrl : 'executive-dashboard/',
 url : 'executive-dashboard/tests/small-size.t.js'
 }
  69. 69 Debugging the right iframe

  70. 70 Native Events Parallelization Screenshot comparison Siesta.next

  71. Summing up 71 • Prioritise JS unit tests • Don’t

    forget UI tests • Application & monkey tests • Continuous Integration • Tips for finding errors early
  72. Links 72 • bryntum.com/products/siesta • bryntum.com/blog • teamcity.bryntum.com/guest • browserstack.com/

    • saucelabs.com/
  73. 73 Questions? Twitter: @Bryntum