Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Testing Ext JS 5 Applications with Siesta
Search
Mats Bryntse
December 02, 2014
Technology
1
130
Testing Ext JS 5 Applications with Siesta
From SenchaDay 2014 in Karlsruhe
Mats Bryntse
December 02, 2014
Tweet
Share
More Decks by Mats Bryntse
See All by Mats Bryntse
Expect the unexpected - How to deal with JavaScript errors in web applications
mats
1
77
Creating Reusable UI Components with Ext JS
mats
2
1k
Dealing with javascript errors in SPAs
mats
0
130
Record.Replay.Reproduce
mats
0
160
Expect the unexpected
mats
0
420
Record.Replay.Reproduce - Dealing with JS errors in modern web apps
mats
0
480
Unit and UI Testing Your Ext JS Web Applications with Siesta
mats
0
220
Siesta Deep Dive
mats
0
330
JavaScript Testing and Continuous Integration
mats
1
160
Other Decks in Technology
See All in Technology
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
680
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
390
An introduction to Claude Code SDK
choplin
2
1.4k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1.1k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
120
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
400
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
700
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Become a Pro
speakerdeck
PRO
29
5.4k
Side Projects
sachag
455
42k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
314
140k
A better future with KSS
kneath
238
17k
How to Ace a Technical Interview
jacobian
278
23k
Transcript
Copyright Sencha Inc. 2014 Mats Bryntse, Bryntum Testing Ext JS
5 Apps @Bryntum
Intro | DESCRIPTION Who am I?
Webinar | Content Unit tests UI tests Continuous Integration •
Writing a unit test • Using PhantomJS • Hello world sample • Event recorder intro • Testing an Ext JS cmp • Recording a UI test • TeamCity • Code Coverage • Statistics • Cloud Testing
Intro | DESCRIPTION Less Theory, More Real World
Intro | WHY Why Testing?
Intro | WHY Hands up: Who is testing their JS?
Intro | WHY
Intro | WHY 1. Productivity & confidence in code 2.
Frameworks contain bugs 3. So does your code (and mine) 4. Refactoring & code handover 5. Fix bugs once
Intro | TERMINOLOGY Terminology: what does testing mean for a
JS developer?
Intro | TERMINOLOGY Unit tests, UI tests, Application tests..?
Intro | TERMINOLOGY Unit tests App Tests UI tests
Testing With Siesta Introduction
Intro | Testing with Siesta • runs in any browser
• is written in plain JS • is sandboxed by default A Siesta test…
Intro | Testing with Siesta • can do both UI
and unit testing • can be automated using PhantomJS or Selenium WebDriver • can detect leaked global variables A Siesta test…
Intro | Testing with Siesta describe('A simple Model test', function
(t) { t.it('Should do something', function(t) { // Test things t.expect(1).toBe(1); }); });
Unit Tests Red, Green, Refactor
Unit tests | Intro •Unit tests usually only involve “raw”
JS •Run very fast •Perfect for pre-commit hooks •Disable sandboxing if possible
Unit tests | Intro •Should be your #1 priority •Cover
your most important JS classes •Run often, before commit, daily, nightly. •Use TDD approach + BDD style for readability
Unit tests | TDD basics 1. Make the unit test
fail 2. Implement 3. Make the test pass 4. Refactor, Repeat
Unit tests | Writing a unit test Unit testing demo
Testing your UI Functional testing
UI tests | Intro Manually writing UI tests takes time
UI tests | Intro UI tests are more fragile &
run slower than unit tests
UI tests | Intro Understanding CSS and ComponentQuery is key
UI tests | Intro •UI “unit test” of a single
UI component •Or Application test, open index.html and test it Two main types of UI tests
UI tests | Intro UI Unit test demo
UI tests | Intro Siesta Event Recorder
UI tests | Event recorder •Great for application tests •Records
user actions: clicks, types, drag drop •Exports actions to a Siesta test case •Can be used by a non-programmer •Big timesaver
UI tests | Event recorder Let’s try the recorder
UI tests | Monkey tests Monkey testing
UI tests | Monkey tests •Random UI testing •Clicks, drags
etc. in your UI •Finds unhandled exceptions •Free testing help. 0€
UI tests | Monkey tests Cost breakdown: 5€ * 0
= 0 5€
Continuous Integration TeamCity, Code Coverage & Statistics
Continuous Integration | Intro •Bryntum uses TeamCity, Siesta integrates with
others (Jenkins…) •Test suites run every 2 hours in Chrome •Full test suites executed nightly •Reports, statistics, charts and code coverage
Continuous Integration | TeamCity Let’s checkout TeamCity
UI tests | Cloud testing So…running in multiple browsers?
Continuous Integration | Cloud testing •Need to create Virtual Machines
for each version of IE •Total: Chrome, Safari, FF, IE 7-11 => 7 VMs •Managing such a farm can be very time consuming
Continuous Integration | Cloud testing •Siesta integrates with both BrowserStack
and 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…
Continuous Integration | Cloud testing Launching tests in BrowserStack
Rounding up | Links •bryntum.com/products/siesta •bryntum.com/docs/siesta •teamcity.bryntum.com/guest •browserstack.com/ •saucelabs.com/
Rounding up | Questions Questions? Twitter: @Bryntum