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
JavaScript Testing and Continuous Integration
Search
Mats Bryntse
March 18, 2015
Technology
1
160
JavaScript Testing and Continuous Integration
jDays 2015
Mats Bryntse
March 18, 2015
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
79
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
430
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
Testing SalesForce A
mats
0
67
Other Decks in Technology
See All in Technology
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
280
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.2k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
270
With Devin -AIの自律とメンバーの自立
kotanin0
2
1k
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
530
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
7
1.6k
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
810
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
570
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
2.2k
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
140
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
790
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Adaptive Systems
keathley
43
2.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Writing Fast Ruby
sferik
628
62k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
Mats Bryntse, Bryntum JS Testing and Continuous Integration @Bryntum
Intro | PRESENTATION Who am I?
Agenda | Content Unit tests UI tests Continuous Integration •
Writing a unit test • Using PhantomJS • Hello world sample • Testing a view • Recording a UI test • Application test • TeamCity • Code Coverage • Statistics • Cloud Testing
Intro | DESCRIPTION Less Theory, More Real World
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 | Test pyramid JS Unit tests App Tests UI
tests
Intro | Common company scenario Backend unit tests App Tests
Unit Tests Introduction
Intro | Unit Tests • should focus on a single
JS class (“unit”) • should not involve DOM • is pure logic, runs very fast • is perfect for pre-commit hooks A unit test…
Intro | Unit Tests describe('A simple Model test', function (t)
{ t.it('Should do something', function(t) { var user = new User({ name : ‘Bob’ }); t.expect(user.name).toBe(‘Bob’); }); });
Intro | Unit Tests describe('A simple Model test', function (t)
{ t.it(‘Will not run', function(t) { … }); t.iit(‘Isolate this section', function(t) { … }); });
Unit tests | Intro •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
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
Application Tests Introduction
Application tests | Intro •Black box testing, go to index.html…
•Runs all the code of your application •Does app work or not?
Application tests | Challenges •Database needs to be put in
a known state pre test start •Slow •Fragile, race conditions •Errors likely harder to find
Application tests | Intro Using an Event Recorder
Application tests | Event recorder •Great for application tests •Records
user actions: clicks, types, drag drop •Can be used by a non-programmer •Big timesaver
Application tests | Event recorder Let’s try the recorder
Application tests | Monkey tests Monkey testing
Application tests | Monkey tests •Random UI testing •Clicks, drags
etc. in your UI •Finds unhandled exceptions •Free testing help. 0€
Application tests | Monkey tests Cost breakdown: 5€ * 0
= 0 5€
Application tests | Monkey tests Monkey testing demo
Application tests | Monkey tests Cheap/Free way to catch bugs
Finding bugs | Error logging Error Logging
Finding bugs | Error logging Unhandled JS exception: What does
the user see?
Finding bugs | Error logging Nothing
Finding bugs | Error logging win.onerror = function (message, file,
line, column, errorObj) { // Log it };
Finding bugs | Error logging Demo - it’s simple
Finding bugs | Git hooks Pre-commit hook
Finding bugs | Pre-commit hook •Pre-commit hooks are great to
keep code base clean •Check JsHint •Run unit tests
Finding bugs | Pre-commit hook A sample Git pre-commit hook
Continuous Integration TeamCity, Code Coverage & Statistics
Continuous Integration | Intro •Automated builds •Nightly test suite execution
•Finding errors early => Code quality => Motivated developers •Enables Continuous Delivery Purpose of having CI:
Continuous Integration | Intro Always ready to release!
Continuous Integration | Intro •Bryntum uses TeamCity •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
Continuous Integration | 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 => 8 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 | Summary •Prioritise JS unit tests •UI tests
•Application & monkey tests •Tips for finding errors early •Continuous Integration
Rounding up | Links •bryntum.com/products/siesta •bryntum.com/blog •teamcity.bryntum.com/guest •browserstack.com/ •saucelabs.com/
Rounding up | Fika Dear Ladies and Gentlemen,
you are now welcome to ”Vinterträdgården” for a lovely coffee break that is sponsored by
Rounding up | Questions Questions? Twitter: @Bryntum