Testing Ext JS 5 Apps with Siesta

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Intro | DESCRIPTION Less Theory, More Real World

Slide 4

Slide 4 text

Intro | WHY Q: Who here is testing their JS codebase?

Slide 5

Slide 5 text

Intro | WHY Why Testing?

Slide 6

Slide 6 text

Intro | WHY 1. Productivity & conﬁdence in code 2. Frameworks contain bugs 3. So does your code (and mine) 4. Refactoring & code handover 5. Fix bugs once

Slide 7

Slide 7 text

Intro | TERMINOLOGY Terminology: what does testing mean for a JS developer?

Slide 8

Slide 8 text

Intro | TERMINOLOGY ! ! Unit tests, UI tests, Application tests..?

Slide 9

Slide 9 text

Intro | TERMINOLOGY Unit tests ! ! App Tests UI tests

Slide 10

Slide 10 text

Unit Tests Red, Green, Refactor

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Unit tests | Writing a unit test Unit testing demo

Slide 14

Slide 14 text

Testing your UI Functional testing

Slide 15

Slide 15 text

UI tests | Intro Manually writing UI tests takes time

Slide 16

Slide 16 text

UI tests | Intro UI tests are more fragile & run slower than unit tests

Slide 17

Slide 17 text

UI tests | Intro Understanding CSS and ComponentQuery is key

Slide 18

Slide 18 text

UI tests | Intro Siesta Event Recorder

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

UI tests | Event recorder Let’s try the recorder

Slide 21

Slide 21 text

Continuous Integration TeamCity, Code Coverage & Statistics

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Continuous Integration | TeamCity Let’s checkout TeamCity

Slide 24

Slide 24 text

UI tests | Cloud testing So…running in multiple browsers?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 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 27

Slide 27 text

Webinar | Links •bryntum.com/products/siesta •bryntum.com/docs/siesta •teamcity.bryntum.com/guest •browserstack.com/ •saucelabs.com/

Slide 28

Slide 28 text

Webinar | Questions Questions? Twitter: @Bryntum