Tweet
Tweet

Slide 1

Slide 1 text

1 @Bryntum Siesta Deep Dive Improve the quality of your Ext JS app releases with unit & UI tests

Slide 2

Slide 2 text

Mats Bryntse Chief JavaScript Officer, Bryntum

Slide 3

Slide 3 text

Agenda 3 Siesta News Unit & UI tests •Recently added features •What’s new in Siesta 3.0 •Feature walkthrough •Application tests •Continuous Integration •Tips & Tricks •BDD / TDD •Using PhantomJS •Testing a view App tests & CI

Slide 4

Slide 4 text

Siesta News

Slide 5

Slide 5 text

Recent Siesta features 5 • sandboxing now optional • async setup/tearDown test methods • taking screenshots • event recorder improvements & configurability

Slide 6

Slide 6 text

What’s new in Siesta 3.0 6

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

Jasmine Support 8

Slide 9

Slide 9 text

9 describe(‘Some spec', function (t) {
 var component; t.beforeEach(function(t) { component = new Ext.Component(); })
 t.it('Should test something', function (t) {
 });
 }); beforeEach/afterEach

Slide 10

Slide 10 text

10 Responsive UI controls

Slide 11

Slide 11 text

…and more 11 • Improved memory management • Tests can now run in popups instead of iframes • Touch event support • Jasmine style spies

Slide 12

Slide 12 text

Download it today: www.bryntum.com/products/siesta 12 :

Slide 13

Slide 13 text

Why test?

Slide 14

Slide 14 text

14 Hands up: Are you unit testing your JS?

Slide 15

Slide 15 text

Know this guy? 15

Slide 16

Slide 16 text

16 Reasons to test

Slide 17

Slide 17 text

17 Productivity & confidence in code

Slide 18

Slide 18 text

18 Productivity & confidence in code

Slide 19

Slide 19 text

19 Code handover

Slide 20

Slide 20 text

20 Refactoring without tests

Slide 21

Slide 21 text

21 Refactoring like a boss

Slide 22

Slide 22 text

22 Fix bugs once

Slide 23

Slide 23 text

23 Quality of sleep

Slide 24

Slide 24 text

Unit Tests Red, Green, Refactor

Slide 25

Slide 25 text

25 Terminology: What does testing mean for a JS developer?

Slide 26

Slide 26 text

26 Unit tests, UI tests, Application tests..?

Slide 27

Slide 27 text

Ideal Test Pyramid 27 JS Unit tests App Tests UI tests

Slide 28

Slide 28 text

Real World 28 Backend unit tests App Tests

Slide 29

Slide 29 text

A unit test • should focus on a single JS class (“unit”) • should not involve DOM • is pure logic, runs very fast • is perfect for pre-commit hooks 29

Slide 30

Slide 30 text

30 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");
 
 });
 }); Simple BDD unit test

Slide 31

Slide 31 text

31 describe("A simple Model test", function (t) {
 
 t.it("Will not run", function (t) {
 …
 });
 
 
 t.iit("Isolate this section", function (t) {
 …
 });
 
 }); t.iit for fast test debugging

Slide 32

Slide 32 text

Unit tests are your friend 32 • 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 33

Slide 33 text

TDD basics 33 1. Make the unit test fail 2. Implement 3. Make the test pass 4. Refactor, Repeat

Slide 34

Slide 34 text

Unit Test Demo 34

Slide 35

Slide 35 text

UI Testing Render, Interact, Assert

Slide 36

Slide 36 text

36 • UI unit test of a single UI component • Or application test, open index.html and test it Two main types of UI tests

Slide 37

Slide 37 text

37 Manually writing UI tests takes time

Slide 38

Slide 38 text

38 UI tests are more fragile & run slower than unit tests

Slide 39

Slide 39 text

39 Understanding CSS and ComponentQuery is key

Slide 40

Slide 40 text

40 Reveals tight coupling very efficiently UserList.js Test sandbox Viewport.js

Slide 41

Slide 41 text

41 UI Unit test demo

Slide 42

Slide 42 text

Application Tests Click, Wait, Assert

Slide 43

Slide 43 text

Application testing 43 • Aka black box testing, functional testing • Go to application index.html • Runs all the code of your application • Does app work or not?

Slide 44

Slide 44 text

Challenges 44 •Database needs to be put in a known state •Slow •Tests can become fragile, race conditions •Errors likely harder to find

Slide 45

Slide 45 text

Using the event recorder 45

Slide 46

Slide 46 text

46 • Great for application tests • Records user actions: clicks, types, drag drop • Can be used by a non-programmer • Big timesaver Using the event recorder

Slide 47

Slide 47 text

47 Let’s try the recorder

Slide 48

Slide 48 text

48 Monkey testing

Slide 49

Slide 49 text

Monkey testing 49 • Random UI testing • Clicks, drags etc. in your UI • Finds unhandled exceptions • Free testing help. 0€

Slide 50

Slide 50 text

50 5€ * 0 = 0 5€ Cost breakdown

Slide 51

Slide 51 text

51 Monkey testing demo

Slide 52

Slide 52 text

Continuous Integration Team City, Cloud Services, Statistics

Slide 53

Slide 53 text

Purpose of CI 53 • Automated builds • Nightly test suite execution • Finding errors early => Code quality => Motivated developers • Enables Continuous Delivery

Slide 54

Slide 54 text

54 Always ready to release!

Slide 55

Slide 55 text

55 • Bryntum uses TeamCity • Test suites run every 2 hours in Chrome • Nightly for all other browsers • Reports, statistics, charts and code coverage

Slide 56

Slide 56 text

56 Let’s checkout TeamCity

Slide 57

Slide 57 text

57 So…running in multiple browsers?

Slide 58

Slide 58 text

X-browser testing 58 •Need to create Virtual Machines for each version of IE •Total: Chrome, Safari, FF, IE 7-11 => 5 VMs •Managing such a farm can be very time consuming

Slide 59

Slide 59 text

59 • 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… Cloud to the rescue

Slide 60

Slide 60 text

60 Launching tests with Sauce

Slide 61

Slide 61 text

Tips & Tricks How to find bugs early

Slide 62

Slide 62 text

62 Unhandled JS exception: What does the user see? Finding bugs faster

Slide 63

Slide 63 text

63

Slide 64

Slide 64 text

64 Most likely: Nothing

Slide 65

Slide 65 text

65 Capturing unhandled errors win.onerror = function (message, file, line, column, errorObj) {
 // Log it
 
 };

Slide 66

Slide 66 text

66 Demo - it’s simple!

Slide 67

Slide 67 text

67 You can do it too http://www.sencha.com/forum/showthread.php?295768-Basic-error-handling-for-Ext-JS-apps

Slide 68

Slide 68 text

68 Testing different screen sizes {
 name : 'Responsive app test - landscape',
 viewportWidth : 1024,
 viewportHeight : 768,
 hostPageUrl : 'executive-dashboard/',
 url : 'executive-dashboard/tests/large-size.t.js'
 },
 {
 name : 'Responsive app test - portrait',
 viewportWidth : 500,
 viewportHeight : 700,
 hostPageUrl : 'executive-dashboard/',
 url : 'executive-dashboard/tests/small-size.t.js'
 }

Slide 69

Slide 69 text

69 Debugging the right iframe

Slide 70

Slide 70 text

70 Native Events Parallelization Screenshot comparison Siesta.next

Slide 71

Slide 71 text

Summing up 71 • Prioritise JS unit tests • Don’t forget UI tests • Application & monkey tests • Continuous Integration • Tips for finding errors early

Slide 72

Slide 72 text

Links 72 • bryntum.com/products/siesta • bryntum.com/blog • teamcity.bryntum.com/guest • browserstack.com/ • saucelabs.com/

Slide 73

Slide 73 text

73 Questions? Twitter: @Bryntum