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

Unit and UI Testing Your Ext JS Web Applicatio...

Unit and UI Testing Your Ext JS Web Applications with Siesta

Testing a large Ext JS application code base can be challenging. Running your tests across multiple platforms and browsers is also a bit of a pain. The good news is, there are many great tools out there that will make your life as a developer (and tester) easier.

Mats Bryntse

October 26, 2016
Tweet

More Decks by Mats Bryntse

Other Decks in Technology

Transcript

  1. 3 •Team of Sencha community members since 2007 •Powerful Gantt

    & Scheduling charts for Ext JS •Testing and monitoring tools •Training / Consulting •2000+ clients in 70+ countries
  2. Agenda 4 Siesta Intro UI tests •Feature walkthrough •Writing good

    tests •Basic unit test •Using PhantomJS •Application tests •Recorder •Continuous Integration •Simulating actions •Testing a view •Custom Test Class Application tests
  3. 6

  4. 7 • Siesta handles Unit, UI + Application testing all

    in one tool • Tests any JS code base • Siesta is web based, extensible • Special testing layer for Ext JS Overview
  5. 8 • Tests are written in JS in “plain” style

    or BDD • Tests run completely isolated in iframes • Powerful event recorder • Code coverage • You can extend Siesta and add own assertions or helper methods Test features
  6. 9 • Report generation (HTML, JSON, XML) • Integrates easily

    with TeamCity, Jenkins, and more • Integrates with cloud testing provides such as Sauce • Supports parallel test execution Automation features
  7. 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 15
  8. 16 describe(‘Some spec', function (t) {
 var component; t.beforeEach(function(t) {

    component = new Ext.Component({ width : 100 }); })
 t.it('Should test something', function (t) {
 t.expect(component.getWidth()).toBe(100) });
 }); Basic Unit Test
  9. 17 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
  10. Unit tests are your friend 18 • 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
  11. TDD basics 19 1. Make the unit test fail 2.

    Implement 3. Make the test pass 4. Refactor, Repeat
  12. Test code standards 22 • Apply same code standards for

    test code as for app code • Document well • Don’t overcomplicate: favour test readability over DRY • Write abstracted methods for code reuse to avoid boilerplate test code
  13. Break tests into subtests 23 describe("A simple Model test", function

    (t) {
 
 t.it("Will not run", function (t) {
 …
 });
 
 
 t.iit("Isolate this section", function (t) {
 …
 });
 
 });
  14. Minimising test maintenance 24 • Flaky tests can be hard

    and demoralising • Race conditions can sneak into application / test code easily • Debugging consumes time • Some guidelines tips & tricks to consider
  15. Avoid hard coded waits 25 t.chain( { click : “div.loadUserButton”

    }, 
 { waitFor : 2000 }, // loading takes time
 function() { // Should be 10 users in grid now t.expect(userGrid.getCount()).toBe(10);
 }
 });
  16. Use waitFor with condition 26 t.chain(
 { click : “div.loadUserButton”

    }, 
 { waitFor : function() { return userGrid.getCount() > 0; },
 function() { // Should be 10 users in grid now t.expect(userGrid.getCount()).toBe(10);
 }
 );
  17. Independent tests 27 • Tests should not rely on other

    tests • It should always produce same result regardless of when executed • Automation mode does not guarantee test order (== good)
  18. 29 • UI unit test of a single UI component

    • Or application test, open index.html and test it Two main types of UI tests
  19. 34 t.chain(
 { click : '>>[name=name]' },
 
 { type

    :'Bob[TAB]' },
 
 { type : ‘Bobs password' },
 
 { click : 'div.x-btn:contains(Login)'},
 
 { waitForSelectorNotFound : ‘.loginWindow'} ) Siesta UI test format
  20. Testing dynamic DOM apps 37 • Organisation decision: Testing must

    be prioritised • Code should be written to facilitate testing. • Developers should annotate DOM for easy UI testing
  21. Application testing 44 • Aka black box testing, functional testing

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

    known state • Slow • Tests can become fragile, race conditions • Errors harder to find
  23. 47 •Great for application tests •Records user actions: clicks, types,

    drag drop •Can be used by a non-programmer •Big timesaver Using the event recorder
  24. Monkey testing 50 • Random UI testing • Clicks, drags

    etc. in your UI • Finds unhandled exceptions • Free testing help. 0€
  25. Multiple test launchers 56 • webdriver (preferred) • PhantomJS (Webkit-ish)

    • SlimerJS (Firefox) • xvfb (Linux, parallel test execution on local machine)
  26. Purpose of CI 57 • Automated builds • Nightly test

    suite execution • Finding errors early => Code quality => Motivated developers • Enables Continuous Delivery
  27. 59 •Bryntum uses TeamCity •Test suites triggered by every commit

    in Chrome •Nightly for all other browsers •Reports, statistics, charts and code coverage
  28. X-browser testing 61 •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
  29. 62 • Siesta integrates seamlessly with 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
  30. Summing up 66 • Prioritise JS unit tests • Don’t

    forget UI tests • Application & monkey tests • Continuous Integration • Automate!