• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Testing Ext JS and Sencha Touch
 

Testing Ext JS and Sencha Touch

on

  • 8,588 views

My SourceDevCon 2012 presentation slides.

My SourceDevCon 2012 presentation slides.

Statistics

Views

Total Views
8,588
Views on SlideShare
8,458
Embed Views
130

Actions

Likes
4
Downloads
85
Comments
0

5 Embeds 130

http://lanyrd.com 110
https://si0.twimg.com 9
https://twitter.com 9
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Testing Ext JS and Sencha Touch Testing Ext JS and Sencha Touch Presentation Transcript

    • Testing Ext JS & Sencha Touch 2012 Mats Bryntse @bryntum
    • Contents• Why test your JavaScript?• Testing Methodologies• Introducing Siesta• Writing testable JS• Automating tests
    • About mevar me = { name : ”Mats Bryntse”, age : 35+, lives : ”Helsingborg, Sweden”, does : ”Runs Bryntum”, site : ”www.bryntum.com”, twitter : ”@bryntum”};
    • What we doExt JS/ST Components Siesta (JS Test Tool)
    • First, a quick raise of hands: How many of you...
    • How many of you...• have a frontend test suite?• have frontend test suite as part of your CI?• run your test suite in all major browsers?• have zero or fewer frontend tests for your app?
    • Why test yourJavaScript?
    • A typical web app... Interwebshttp://www.app.com
    • The backend • Single controlled platform • Simple to test and refactor • Good IDEs and toolsPHP C# Java
    • The frontend• Multiple platforms & versions (Mac, Windows XP/Vista/7/8, Linux...)• Multiple browser versions• Hard to refactor• JavaScript support in IDEs is still !== awesome
    • ConclusionToo easy to #FAIL as a frontend developerTesting helps you keep fails to a minimum.
    • But...”... my code is bug free””...testing takes time away from adding newfeatures (+ new bugs)””...it’s QA’s job to test””... it’s boring and I’ll quit my job”
    • A good investment• Writing tests === investment in your code• Takes time• Will pay you back, though not instantly
    • Scenario:A nasty bug was found 3 options
    • [panic]
    • [patch it]
    • [proper fix]
    • A test suite...=> confidence in your code=> serves as extra documentation=> easier refactoring=> bugs happen once, easier to find=======> quality of sleep
    • Code handover• Test cases are really useful when handing over responsibility for a JS module• Developer Bob quits his job. New guy gets responsibility of his JS code.• How will new guy know what parts of the codebase is safe to change & refactor?
    • New guy studies codebase application.js /** * When I wrote this, only God and I understood what I was doing * Now, God only knows **/ /* I am not sure if we need this, but too scared to delete. */ // drunk, fix later // This is my last day...
    • Code handoverNew guy, scared
    • Code handover• Without test suite, will new guy feel good about making major changes?• Only minor cosmetic changes on the surface.• System accumulates cruft over time.• Sounds familiar?
    • JS TestingMethodologies
    • Unit testingIntegration testingFunctional testing
    • Unit testing• Testing the API of a single isolated ’unit’• Typically pure JS, non UI / DOM • verify set/get method of a Model • verify date manipulation logic• Many tools available
    • Unit testing• Siesta• Jasmine• QUnit (jQuery)• Google js-test (V8)
    • Integration testing• Testing integration between units.• E.g. verify cell editing plugin works in GridPanel
    • Functional Web testing• UI testing of a component or an application as a whole.• Send commands to the web page and evaluate result.• ’click button’, ’type into login field’, ...
    • Functional Web testing• Siesta• Selenium• JsTestDriver
    • Interacting with the DOM Approaches to faking user input • Synthetic events (JavaScript) • Native events (via Java Applet)
    • Synthetic events+ Supported in all major browsers+ Compatible with mobile+ Don’t rely on native event queue Tests can be run in parallell.- Browsers don’t ”trust” synthetic events - Enter key on a focused link - Tab between input fields, etc...- X-browser differences DOM Events, Key events, key codes (http://unixpapa.com)
    • Native events+ Java applets are supported in desktopbrowsers+ As close to a ’real’ user as possible- Won’t work on iOS, Android.- No parallell tests since native event queueis used.
    • What is Siesta?• Unit testing and DOM testing tool• Optimized for Ext JS & Sencha Touch - also supports jQuery, NodeJS, or any JS• Simple syntax, Extensible• Automate using PhantomJS & Selenium.
    • Siesta Browser Harness
    • Siesta Browser Harness• A UI for Siesta, view DOM, inspect assertions• Define a tree of tests, in logical groups• Global settings for the test suite autoCheckGlobals, preload, testClass
    • A Siesta Test• is pure JavaScript, no magic.StartTest(function(t) { $(body).html(JQuery was here); t.contentLike(document.body, JQuery was here, Found correct text in DOM);});
    • A Siesta Test• is completely isolated in its own iframe (no teardown, cleanup required)
    • A Siesta Test• can be extended with your own custom assertions and helper methodsStartTest(function(myTest) { var app = myTest.startApplication(); myTest.performLogin(app); myTest.isLoggedIn(app, ’Logged in ok’); myTest.is(app.nbrUsers, 1, ’Found 1 user’);});
    • Lifecycle of a UI testSetup create grid, load storesWait for store to load, grid rows to renderSimulate click button, type into textboxVerify isEqual(a, b)
    • Setupvar userGrid = new My.UserGrid({ … });userGrid.render(Ext.getBody());
    • Waitt.waitForRowsVisible(userGrid, function(){ // Do something});t.waitForComponentQuery(“formpanel > textfield”);t.waitForCompositeQuery(“grid => .x-grid-row”);
    • Simulate// A list of actions to simulatet.chain( { desc : Should click trigger field, action : click, target : testgrid triggerfield }, { desc : Should type into filter field, action : type, target : testgrid triggerfield, text : FOO }, ...);
    • Verifyt.is(userStore.getCount(), 5, ”5 users found”);t.willFireNTimes(store, 2, ”write”);t.hasCls(grid.getEl(), ”myClass”, ”Found CSS”);t.hasSize(myWindow, 300, 300, ”Window size ok”);
    • DEMO
    • Sencha Touch supportSimulate tap, doubleTap, swipe, longPress, etc...
    • Siesta.next• Benchmarking• Code coverage• Multi-browser, multi-device testing• Crowd sourced test case tool “Code Cowboy”• Your suggestion?
    • Headless testing• Headless browsers are great, fast• Command line, easy to integrate with IDEs• PhantomJS, GUI-less WebKit browser
    • Phantom JSCreated by Ariya Hidayat (Sencha Inc.)Fast headless testingSite scrapingSVG rendering, PDF/PNG outputSupports CoffeeScript
    • Headless browsers+ Run tests on command line+ Faster+ Automation+ Doesn’t require an actual browser- Not 100% accurate, but close.
    • Writing testable JS
    • Some ground rules• Keep your JavaScript in JS files• Never put JavaScript in your HTML page/tags• Keep code organized in logical manageable files. Decide on some max nbr of lines/file.
    • No no no
    • Testable MVC code• Fat model, skinny view• Don’t pollute your views with business logic• Testing pure JS is a lot easier than testing DOM-dependent JS• Promotes reuse of your code
    • Mixing view and logicExt.define(UserForm, { extend: Ext.FormPanel, width: 400, height: 400, // Returns true if User is valid isValid: function (userModel) { return userModel.name.length > 4 && userModel.password.length > 8; }});
    • BetterExt.define(UserModel, { extend: Ext.data.Model , name : , password : , isValid : function () { return this.name.length > 4 && this.password.length > 8; }});
    • Refactored viewExt.define(UserForm, { extend: Ext.FormPanel, width: 400, height: 400, // Returns true if User is valid isValid: function () { return this.model.isValid(); }});
    • Avoid private code• Avoid overuse of private functions in closures• If your code cannot be accessed it cannot be tested
    • Testing Ajax• Try to avoid involving your database.• Use either static JS files with mock data (async, slower)• Or Mock the entire Ajax call (sync, faster) Sinon.js, Jasmine-ajax etc.
    • Automation &Continuous Integration
    • Continuous Integration• Once you have decided on your testing toolset, integrate it with your CI.• Automatically run test suite on pre-commit or post-commit• Nightly builds, full test suite execution, reporting via email etc.
    • CI Tools• Jenkins• TeamCity• Cruise Control• Test Swarm
    • JS Code Coverage• JsCoverage Seems abandoned• ScriptCover Google Chrome Plugin• JsTestDriver Add-in module for coverage• JesCov Rhino, Jasmine
    • Resources - Yahoohttp://screen.yahoo.com/
    • Resources - GTAC
    • ”Without unit tests, you’re not refactoring. You’re just changing shit.”Hamlet D’Arcy
    • Thanks for listening! Questions? 2012 Mats Bryntse @bryntum