Mats Bryntse, Bryntum
JS Testing
and
Continuous Integration
@Bryntum
Slide 2
Slide 2 text
Intro | PRESENTATION
Who am I?
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Intro | DESCRIPTION
Less Theory, More Real World
Slide 5
Slide 5 text
Intro | WHY
Hands up: Who is testing their JS?
Slide 6
Slide 6 text
Intro | WHY
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Intro | TERMINOLOGY
Terminology: what does testing mean for a JS developer?
Slide 9
Slide 9 text
Intro | TERMINOLOGY
Unit tests, UI tests, Application tests..?
Slide 10
Slide 10 text
Intro | Test pyramid
JS Unit tests
App Tests
UI tests
Slide 11
Slide 11 text
Intro | Common company scenario
Backend unit tests
App Tests
Slide 12
Slide 12 text
Unit Tests
Introduction
Slide 13
Slide 13 text
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…
Slide 14
Slide 14 text
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’);
});
});
Slide 15
Slide 15 text
Intro | Unit Tests
describe('A simple Model test', function (t) {
t.it(‘Will not run', function(t) {
…
});
t.iit(‘Isolate this section', function(t) {
…
});
});
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
Unit tests | TDD basics
1. Make the unit test fail
2. Implement
3. Make the test pass
4. Refactor, Repeat
Slide 18
Slide 18 text
Unit tests | Writing a unit test
Unit testing demo
Slide 19
Slide 19 text
Testing your UI
Functional testing
Slide 20
Slide 20 text
UI tests | Intro
Manually writing UI tests takes time
Slide 21
Slide 21 text
UI tests | Intro
UI tests are more fragile & run slower than unit tests
Slide 22
Slide 22 text
UI tests | Intro
Understanding CSS and ComponentQuery is key
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
UI tests | Intro
UI Unit test demo
Slide 25
Slide 25 text
Application Tests
Introduction
Slide 26
Slide 26 text
Application tests | Intro
•Black box testing, go to index.html…
•Runs all the code of your application
•Does app work or not?
Slide 27
Slide 27 text
Application tests | Challenges
•Database needs to be put in a known state pre test start
•Slow
•Fragile, race conditions
•Errors likely harder to find
Slide 28
Slide 28 text
Application tests | Intro
Using an Event Recorder
Slide 29
Slide 29 text
Application tests | Event recorder
•Great for application tests
•Records user actions: clicks, types, drag drop
•Can be used by a non-programmer
•Big timesaver
Slide 30
Slide 30 text
Application tests | Event recorder
Let’s try the recorder
Slide 31
Slide 31 text
Application tests | Monkey tests
Monkey testing
Slide 32
Slide 32 text
Application tests | Monkey tests
•Random UI testing
•Clicks, drags etc. in your UI
•Finds unhandled exceptions
•Free testing help. 0€
Continuous Integration | Cloud testing
So…running in multiple browsers?
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
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…
Slide 52
Slide 52 text
Continuous Integration | Cloud testing
Launching tests in BrowserStack
Slide 53
Slide 53 text
Rounding up | Summary
•Prioritise JS unit tests
•UI tests
•Application & monkey tests
•Tips for finding errors early
•Continuous Integration
Slide 54
Slide 54 text
Rounding up | Links
•bryntum.com/products/siesta
•bryntum.com/blog
•teamcity.bryntum.com/guest
•browserstack.com/
•saucelabs.com/
Slide 55
Slide 55 text
Rounding up | Fika
Dear Ladies and Gentlemen,
you are now welcome to ”Vinterträdgården” for
a lovely coffee break that is sponsored by
Slide 56
Slide 56 text
Rounding up | Questions
Questions?
Twitter: @Bryntum