Sencha Roadshow 2016: Sencha Test by Don Griffin

Sencha Roadshow 2016: Sencha Test by Don Griffin

Transcript

1. View Slide

2. © 2016 Sencha Inc.
   Sencha Test!
   Improving Web App Quality!
   !
   By!
   Don Griffin!
   Director of Engineering!
   

   View Slide

3. © 2016 Sencha Inc.
   What We’ll Cover!
   •  History / Backstory!
   •  Test Types and their challenges!
   •  Where does Sencha Test fit?!
   •  Sencha Test highlights!
   •  Demo!
   3!
   

   View Slide

4. © 2016 Sencha Inc.
   Backstory!
   

   View Slide

5. © 2016 Sencha Inc.
   Backstory!
   •  Sencha got really serious about automated testing with Ext JS 4!
   -  Over 5 years ago!
   •  Combined various tools!
   -  Jasmine, Team City, WebDriver, Istanbul, Siesta, Sauce Labs!
   •  Across the test spectrum!
   -  Unit tests!
   -  Integration (component) tests!
   -  Application tests (for our examples, etc.)!
   -  Visual testing for CSS issues!
   5!
   

   View Slide

6. © 2016 Sencha Inc.
   Testing In Sencha Today!
   •  Tests are run…!
   -  On each pull request before merging!
   -  Against main branches after merge!
   •  Tests are run on IE8-11, Edge, Firefox, Chrome, Safari, iPad etc..!
   -  Multiplied out that comes to 330,000 test executions per run!
   -  With code coverage on most branches!
   •  QA team!
   -  Runs automated tests on apps and examples using nightly builds!
   6!
   

   View Slide

7. © 2016 Sencha Inc.
   Common Challenges!
   •  I fixed that bug…!
   -  How did it break again?!?!
   •  It is hard to write asynchronous tests…!
   -  I’ll add some when I have more time.!
   •  It works on my machine…!
   -  But fails in the CI run!!
   •  How do I test my code…!
   -  In the same way the CI does?!
   •  The tests all pass….!
   -  But things don’t look right!!
   7!
   

   View Slide

8. © 2016 Sencha Inc.
   Test Types!
   

   View Slide

9. © 2016 Sencha Inc.
   Test
   Engineer Developer
   Test Types!
   1.  Unit Tests!
   -  Creating class instances, calling methods directly!
   -  No User Interface involved!
   2.  Integration Tests!
   -  Isolated instances of Components, Views and Controllers!
   -  Mock dependencies!
   3.  Application Tests!
   -  Launch application!
   -  Interact with the UI and check results!
   9!
   

   View Slide

10. © 2016 Sencha Inc.
    Test Types!
    10!
    Integration Tests Application Tests
    Unit Tests
    •  Easy to write!
    •  Fast execution!
    •  Immediate feedback!
    •  More complex!
    •  Slower to run!
    •  Typically async!
    •  Isolation can be tricky!
    •  Mocking is tricky!
    •  Hardest to write!
    •  Tedious to run!
    -  Require installed app!
    -  Server environment!
    •  Data / Results hard to
    make predictable!
    

    View Slide

11. © 2016 Sencha Inc.
    Comparing Test Types!
    11!
    Integration Tests Application Tests
    Unit Tests
    •  Yes!
    •  Developer!
    •  Developer!
    •  Yes!
    •  Developer!
    •  Developer!
    •  Yes!
    •  Test Engineer!
    •  Test Engineer!
    Necessary!
    Author!
    Run By!
    Problem
    

    View Slide

12. © 2016 Sencha Inc.
    Ideal Mix!
    12!
    App
    Integration
    Unit
    

    View Slide

13. © 2016 Sencha Inc.
    Typical Case!
    13!
    App
    ?
    developers
    boss
    ?!?
    #$@!
    customers
    

    View Slide

14. © 2016 Sencha Inc.
    Sencha Test!
    

    View Slide

15. © 2016 Sencha Inc.
    Sencha Test!
    •  Productizes Sencha’s testing experience!
    •  Common request from customers!
    •  One place for the dev and QA team to collaborate!
    -  Because it handles unit, integration and application testing!
    •  First release covers the essential workflows!
    15!
    

    View Slide

16. © 2016 Sencha Inc.
    Web App
    Architecture Overview!
    16!
    – or –
    h,p h,p
    h,p
    test/*
    

    View Slide

17. © 2016 Sencha Inc.
    Sencha Test Essentials!
    •  Understands Sencha application structure!
    -  Works seamlessly with Cmd-based projects!
    -  Works with any web app that has a URL!
    •  Test configuration performed in Sencha Studio is used to…!
    -  Run tests directly in Sencha Studio!
    -  Run tests via the Sencha Test command-line tool (stc)!
    •  First things to check out!
    -  Test Runner!
    -  Futures API!
    17!
    

    View Slide

18. © 2016 Sencha Inc.
    Test Runner!
    

    View Slide

19. © 2016 Sencha Inc.
    Test Runner!
    19!
    Scenario Name
    Local Brower Pool
    Test File
    Inventory
    Mobile Device
    Browser Pool
    WebDriver
    Browser Pools
    

    View Slide

20. © 2016 Sencha Inc.
    Test Runner!
    20!
    Full Test
    Inventory /
    Run Results
    Result Details
    Selected Browsers
    

    View Slide

21. © 2016 Sencha Inc.
    Test Runner!
    21!
    Parking Lot
    Address
    •  Intelligently manages
    browser tabs!
    •  Parked browsers are
    redirected to test runners!
    •  Redirected back when
    runner is closed!
    •  Preserves debugger
    context!
    

    View Slide

22. © 2016 Sencha Inc.
    Futures API!
    

    View Slide

23. © 2016 Sencha Inc.
    Make asynchronous tests!
    simple and reliable!
    (like synchronous tests)!
    

    View Slide

24. © 2016 Sencha Inc.
    Futures API!
    •  Many (most?) Integration and App tests are asynchronous. They wait on:!
    -  Loading data!
    -  Rendering!
    -  Animations!
    -  Layouts!
    •  Asynchronous tests!
    -  Harder to write!
    -  Harder to maintain!
    -  Sometimes fail sporadically (race conditions)!
    24!
    

    View Slide

25. © 2016 Sencha Inc.
    A future is an object used to describe a!
    sequence of actions to take in the future.!
    

    View Slide

26. © 2016 Sencha Inc.
    Futures API – Example!
    ST.grid('#mygrid'). // locate the grid
    rowAt(1000). // interact with a row
    cell('firstName'). // now with a cell
    reveal(). // scroll into view
    click(10, 10); // click at offset
    26!
    

    View Slide

27. © 2016 Sencha Inc.
    Demo!
    

    View Slide

28. © 2016 Sencha Inc.
    Q&A!
    Don Griffin!
    don@sencha.com!
    @dongryphon!
    http://www.sencha.com!
    

    View Slide