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 Apps with Siesta
Search
Mats Bryntse
October 01, 2014
Programming
0
150
Testing Ext JS 5 Apps with Siesta
Slides from my talk at the Ext JS 1 day conference in Milan
Mats Bryntse
October 01, 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
66
Creating Reusable UI Components with Ext JS
mats
2
790
Dealing with javascript errors in SPAs
mats
0
85
Record.Replay.Reproduce
mats
0
130
Expect the unexpected
mats
0
310
Record.Replay.Reproduce - Dealing with JS errors in modern web apps
mats
0
400
Unit and UI Testing Your Ext JS Web Applications with Siesta
mats
0
200
Siesta Deep Dive
mats
0
310
JavaScript Testing and Continuous Integration
mats
1
150
Other Decks in Programming
See All in Programming
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
7
3.1k
雑に思考を整理する技術と効能
konifar
55
24k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
850
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
320
PostmanでAPIの動作確認が楽になった話
h455h1
0
110
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
7
4.1k
Featured
See All Featured
How to name files
jennybc
64
92k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
Design by the Numbers
sachag
274
18k
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
Gamification - CAS2011
davidbonilla
76
4.6k
Web Components: a chance to create the future
zenorocha
304
41k
Product Roadmaps are Hard
iamctodd
43
9.7k
Become a Pro
speakerdeck
PRO
9
4.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Atom: Resistance is Futile
akmur
258
25k
Transcript
Copyright Sencha Inc. 2014 Mats Bryntse, founder of Bryntum Testing
Ext JS 5 Apps
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 Q: Who here is testing their JS
codebase?
Intro | WHY Why Testing?
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
Unit Tests Red, Green, Refactor
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 Siesta Event Recorder
UI tests | Event recorder •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
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…
Webinar | Links •bryntum.com/products/siesta •bryntum.com/docs/siesta •teamcity.bryntum.com/guest •browserstack.com/ •saucelabs.com/
Webinar | Questions Questions? Twitter: @Bryntum