Testing Sencha Applications With Siesta

[email protected] Mats Bryntse, Developer, Bryntum Hee-Yeon Woo, Sr. QA Engineer,
Sencha @bryntum [email protected] Testing Sencha Applications with Siesta Saturday, July 20, 13

• Senior QA Architect team @Sencha • Previously Flash authoring
/ AIR at Adobe / Macromedia • Before that, Web developer at SK Telecom Hee-Yeon Woo Saturday, July 20, 13

Mats Bryntse • Ext JS developer since 2007 • Started
Bryntum 2009 • Makes components & tools for the Sencha ecosystem • www.bryntum.com Saturday, July 20, 13

Agenda • Beneﬁts of Siesta in your project • Writing
your ﬁrst unit Siesta test • Functional testing • New Siesta features & improvements • Code coverage • Testing Sencha Architect Saturday, July 20, 13

Why Test? Saturday, July 20, 13

3 Beneﬁts of using Siesta Saturday, July 20, 13

Unit + Functional testing Saturday, July 20, 13

Siesta speaks Sencha Saturday, July 20, 13

Automatable Saturday, July 20, 13

Writing your ﬁrst Siesta unit test Saturday, July 20, 13

Siesta User Interface Saturday, July 20, 13

Test Model layer ﬁrst - Easy to test, high ROI.
- Your.data.Model - Your.data.Store - Your.util.Class - Focus on one class per test ﬁle - Test your code, not framework code Saturday, July 20, 13

Ext.deﬁne(“My.model.User”, { extend : ‘Ext.data.Model’, ﬁelds : [‘FirstName’, ‘LastName’, ‘Salary’],
getAnnualSalary : function () { return this.get(‘Salary’) * 12; }, isValid : function() { return this.get(‘FirstName’) && this.get(‘LastName’); } }); My.model.User Saturday, July 20, 13

describe(“Testing my User model”, function(t) { t.it(‘Should get correct annual
salary’, function(t) { var user = new My.model.User({ Salary : 5000 }); t.expect(user.getAnnualSalary()).toBe(60000); }); t.it(‘Should treat incomplete name as invalid’, function(t) { var user = new My.model.User({ FirstName : ‘Bob’ }); t.expect(user.isValid()).toBeFalsy(); }); }) User.t.js Saturday, July 20, 13

StartTest(function(t) { t.it(‘Should be able to get name’, function(t) {
var user = new My.model.User({ FirstName : ‘Bob’ }); t.expect(user.get(‘FirstName’)).toBe(‘Bob’); }); }) Don’t test the framework Saturday, July 20, 13

var Harness = Siesta.Harness.Browser.ExtJS; Harness.conﬁgure({ preload : [ "http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css", "http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js",
"my-app-all-debug.js" ] }); Harness.start({ group : 'Model Layer', items : [ 'User.t.js' ] }); Harness.js Saturday, July 20, 13

Saturday, July 20, 13

Using PhantomJS (or Selenium) Saturday, July 20, 13

Testing views • Normally, your app consists of many view
classes • Test your components in isolation: - My.app.UserList - My.app.OrderForm Test your public conﬁg properties + API Sanity tests give you peace of mind Saturday, July 20, 13

10 Component Sanity Tests Saturday, July 20, 13

1. Namespace check > ReferenceError: Ext is not defined Saturday,
July 20, 13

2. No global variable leaks for (i = 0; i
< 5; i++) { ... } Saturday, July 20, 13

3. No global Ext JS overrides Ext.Panel.override({ ... }); Saturday,
July 20, 13

4. JsHint check Saturday, July 20, 13

5. No unscoped CSS .x-panel { background : red; /*
No Good! */ } Saturday, July 20, 13

6. Subclassing Ext.define(“Sub”, { extend : “foo”}); new Sub(); Saturday,
July 20, 13

7. No component/DOM leaks <body> <div id=”leak”>Oops, forgot to clean
me up</div> </body> Saturday, July 20, 13

8. No private Ext fn overrides Saturday, July 20, 13

9. Life cycle new YourCmp().destroy(); new YourCmp({ renderTo : “div”}).destroy();

10. Simple monkey test Saturday, July 20, 13

http://github.com/matsbryntse Saturday, July 20, 13

Functional Testing Saturday, July 20, 13

Functional testing • Interacting with the UI as a real
user • Hard to solve using tools that focus on raw DOM/HTML. • Siesta allows you to simulate user interactions: - type - click - drag Saturday, July 20, 13

Component Query === Power - CSS Query “.x-btn” - Component
Query “>>button” - Composite Query “gridpanel => .x-grid-cell” Saturday, July 20, 13

Functional Test Demo Saturday, July 20, 13

Siesta News Saturday, July 20, 13

Siesta 2.0 available! Saturday, July 20, 13

Siesta news • Better stability, improved user simulation • Auto-scroll
target element into view • Assertion detecting global Ext JS overrides • Assertion to detect unnecessary layouts Saturday, July 20, 13

describe("The Siesta test suite", function(t) { t.it("Siesta should support BDD
style", function(t) { t.expect(true).toBeTruthy(); }); }); BDD Saturday, July 20, 13

Component Inspector - Detects Sencha components (Ext JS 3, 4,
Touch) - Highlights, shows a link to the online documentation - Console prompt to interact with components easily Saturday, July 20, 13

Component Inspector Saturday, July 20, 13

Code Coverage Saturday, July 20, 13

What is code coverage? Measures % of code exercised by
your tests. To be able to measure, code must ﬁrst be instrumented. Saturday, July 20, 13

var a = 1; Before instrumenting Saturday, July 20, 13

if (typeof __coverage__ === 'undefined') { __coverage__ = {}; }
if (!__coverage__['filename.js']) { __coverage__['filename.js'] = {"path":"filename.js","s":{"1":0},"b": {},"f":{},"fnMap":{},"statementMap":{"1":{"start":{"line":1,"column": 0},"end":{"line":1,"column":10}}},"branchMap":{}}; } var __cov_1 = __coverage__['filename.js']; __cov_1.s['1']++;var a=1; After (via Istanbul) Saturday, July 20, 13

Di erent coverage types Function coverage Branch coverage Line coverage
Statement coverage Saturday, July 20, 13

Useful metric - Code with low coverage to be considered
unsafe - Having 100% code coverage not really realistic - 100% code coverage !== working code - Absense of code coverage is the main interest Saturday, July 20, 13

Testing Sencha Architect Saturday, July 20, 13

Sencha Architect • WYSIWYG editor • Ext JS + Touch
• Web based (Ext JS) • Code generation Saturday, July 20, 13

Background • Testing strategy for Architect • Challenges, pre-Siesta. •
Beneﬁts of Siesta Saturday, July 20, 13

Complexity • Multiple Ext JS versions • Another framework in
the canvas • Canvas sandboxed in iframe • Runs packaged in a Chromium environment • Can we do it? Saturday, July 20, 13

YES Saturday, July 20, 13

• A big test suite requires good test abstractions •
Code reuse, readability • Ideally readable by a non-developer. Our needs... Saturday, July 20, 13

startNewProject(‘extjs42’, callback) waitForCanvasReady(callback) dragComponentToCanvas(‘gridpanel’, callback); setPropertyComponent(‘title’, ‘Customer List’) Architect Test
Abstractions Saturday, July 20, 13

VS Manual 2 Hours Automated 2 Minutes Saturday, July 20,
13

Demo Saturday, July 20, 13

Let’s sum up • Siesta speaks “Sencha” - high abstraction
level. • Test your Model layer ﬁrst, great ROI. • Code coverage helps you ﬁnd untested code in your app. 100% test coverage !== working app. • Automated functional testing saves time and $$$ Saturday, July 20, 13

Questions? Saturday, July 20, 13

Thank You! • Siesta http://bryntum.com/products/siesta • Sencha Architect Preview http://sc13-live.sencha.com
• Component Maker Test Pack http://github.com/matsbryntse • Feedback welcome! Saturday, July 20, 13

Take the Survey! • Session Survey - Available on the
SenchaCon mobile app - http://app.senchacon.com • Be Social! - @SenchaCon - #SenchaCon - @bryntum Saturday, July 20, 13

Testing Sencha Applications With Siesta

Testing Sencha Applications With Siesta

More Decks by Mats Bryntse

Other Decks in Programming

Featured

Transcript