Improve Web App Quality: Sencha Test - by Lee Boonstra

Learn how you can improve application quality and accelerate release cycles with Sencha Test. Empower developers and test engineers with the solution that was created specifically to test Ext JS applications. Teams can rapidly create and execute automated tests and find issues earlier in the lifecycle.

Transcript

1. View Slide

2. © 2016 Sencha Inc.
   Sencha Test!
   !
   Lee Boonstra !
   Sales Engineer, Sencha Inc.!
   @ladysign!
   !
   

   View Slide

3. © 2016 Sencha Inc.
   What We’ll Cover!
   •  About JavaScript Testing!
   •  Various Test types!
   •  Introducing Sencha Test!
   •  Test Runner!
   •  Sencha Test API!
   •  Q&A!
   3!
   

   View Slide

4. © 2016 Sencha Inc.
   About JavaScript testing!
   

   View Slide

5. © 2016 Sencha Inc.
   Your JavaScript in an Ext JS App:!
   5!
   Ext JS SDK!
   Classes!
   Custom!
   Code!
   Tested by Sencha ???
   app.js!
   

   View Slide

6. © 2016 Sencha Inc. 6!
   

   View Slide

7. © 2016 Sencha Inc.
   Why should you test?!
   !
   To get clear understanding of your code!
   Productivity will go up, when you are confident with your code!
   !
   You don’t want to break previous written code.!
   ..or someone else his code!
   7!
   code!
   test!
   review!
   

   View Slide

8. © 2016 Sencha Inc. 8!
   

   View Slide

9. © 2016 Sencha Inc.
   Why should you test?!
   !
   Bugs should only happen once!
   !
   It’s very common to write server-side test, !
   why not test on the client-side?!
   9!
   

   View Slide

10. © 2016 Sencha Inc.
    How Sencha tests their frameworks…!
    •  Sencha got really serious about automated testing with Ext JS 4!
    •  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!
    10!
    

    View Slide

11. © 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!
    11!
    

    View Slide

12. © 2016 Sencha Inc.
    Various Test Types!
    

    View Slide

13. © 2016 Sencha Inc.
    Test Types!
    13!
    Integration / UI Unit
    Tests
    Application Tests
    Unit Tests
    Class Instances,
    Singletons, Models!
    !
    No UI involved.!
    Isolated instances of
    components / views!
    !
    We need to mock
    dependencies.!
    Test the application!
    !
    !
    We need to launch the
    app and interact with the
    full UI.!
    

    View Slide

14. © 2016 Sencha Inc.
    Test Types!
    14!
    Integration / UI Unit
    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

15. © 2016 Sencha Inc.
    Test Types!
    15!
    Integration / UI Unit
    Tests
    Application Tests
    Unit Tests
    developers developers test engineers
    

    View Slide

16. © 2016 Sencha Inc.
    Write Tests - Example of a Unit Test!
    describe("Music Player", function() {
    it("Should play song from Spotify", function() {
    //API magic to retrieve the song…
    expect(result).toBeTruthy();
    });
    });
    16!
    

    View Slide

17. © 2016 Sencha Inc.
    Write Tests - The TDD Approach!
    Developers can use the TDD approach to write better code:!
    1.  Write a test, and make it fail!
    2.  Implement the code in your project!
    3.  Make the test pass!
    4.  Refactor & repeat!
    17!
    

    View Slide

18. © 2016 Sencha Inc.
    Write Tests - Integration tests!
    Integration tests (aka UI Unit Test) are a little more difficult. You are depending on
    the DOM, and the DOM needs to be available. You need to locate the element,
    with for example a Dom Query, XPATH or Ext.ComponentQuery.!
    !
    •  Use Futures API!
    18!
    

    View Slide

19. © 2016 Sencha Inc.
    Write Tests - Application tests!
    Application tests (aka functional tests), depends on your application. You will visit
    the index.html, whole app will be launched. Then you have interaction. (Click, wait,
    fill in a form…, test).!
    !
    •  Q&A test teams!
    •  Use Event Recorder to capture actions!
    19!
    

    View Slide

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

    View Slide

21. © 2016 Sencha Inc.
    Sencha Test!
    

    View Slide

22. © 2016 Sencha Inc.
    Sencha Test: Create robust tests that help you deliver quality apps!
    Common request from our customers!
    One place for the DEV and QA team to
    collaborate.!
    !
    •  Author and execute tests!
    •  Record and playback tests !
    •  Review and archive results!
    22!
    

    View Slide

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

    View Slide

24. © 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)!
    !
    24!
    

    View Slide

25. © 2016 Sencha Inc.
    Browser Desktop
    (PCs & Laptops
    Browser Mobile
    (Tablets &
    Smartphones)
    Test Framework
    Integra?ons
    Supported Sencha
    Applica?ons
    Test Automa?on
    Integra?ons
    •  Internet
    Explorer 8+
    •  Microso4 Edge
    •  Chrome
    •  Firefox
    •  Safari 6+
    •  Opera 15+
    •  IE10 on
    Windows Phone
    8+
    •  Chrome/Stock
    Browser on
    Android 4+
    •  Safari on iOS 7+
    •  Jasmine 2.4.1
    •  Istanbul 0.4.1
    •  Sencha Ext JS
    4.2+
    •  Sencha Touch
    2.1+
    •  Browser Farm-
    Sauce Labs
    •  ConSnuous
    IntegraSon -
    TeamCity/
    Jenkins
    25!
    Supported Platforms!
    

    View Slide

26. © 2016 Sencha Inc.
    Out Of The Box Integrations!
    26!
    Jasmine
    Test Framework
    Browser Farms
    Continuous Integration
    Istanbul
    Code Coverage
    

    View Slide

27. © 2016 Sencha Inc.
    Code Coverage - Test Archiver!
    27!
    •  Review results from automated
    and manual test runs!
    •  Summary level results & drill
    into the detail of failed tests!
    •  Out of the box integration with
    Istanbul enables users to
    identify and rectify code
    coverage gaps!
    •  View % coverage at the
    Statements, Branches,
    Functions and Lines levels!
    

    View Slide

28. © 2016 Sencha Inc.
    Test Runner!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. © 2016 Sencha Inc.
    Sencha Test API!
    

    View Slide

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

    View Slide

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

    View Slide

35. © 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
    35!
    

    View Slide

36. © 2016 Sencha Inc.
    Visual Screen Comparison!
    36!
    •  Minimize the time spent
    verifying images on hundreds
    of screens!
    •  Review images that are
    captured from previous test
    runs and compare to each
    subsequent test run!
    •  ST.screenshot()
    

    View Slide

37. © 2016 Sencha Inc.
    API - http://docs.sencha.com/sencha_test/!
    37!
    

    View Slide

38. © 2016 Sencha Inc.
    Demos!
    

    View Slide

39. © 2016 Sencha Inc.
    Sencha Test Key Resources!
    Product Download: https://www.sencha.com/products/test!
    Trial Download: https://www.sencha.com/products/test/evaluate/ !
    Futures API: https://www.sencha.com/blog/inside-the-sencha-test-futures-api/!
    Documentation: http://docs.sencha.com/sencha_test/!
    Samples: https://github.com/sencha/SenchaTestDemo!
    Forum: https://www.sencha.com/forum/forumdisplay.php?144-Sencha-Test!
    FAQ: https://www.sencha.com/products/test/faq/!
    !
    !
    39!
    

    View Slide

40. © 2016 Sencha Inc.
    Q&A!
    Lee Boonstra!
    lee@sencha.com!
    @ladyign!
    !
    http://www.leeboonstra.com!
    

    View Slide