Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Testing and Continuous Integration

JavaScript Testing and Continuous Integration

jDays 2015


Mats Bryntse

March 18, 2015


  1. Mats Bryntse, Bryntum JS Testing and Continuous Integration @Bryntum

  2. Intro | PRESENTATION Who am I?

  3. 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
  4. Intro | DESCRIPTION Less Theory, More Real World

  5. Intro | WHY Hands up: Who is testing their JS?

  6. Intro | WHY

  7. 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
  8. Intro | TERMINOLOGY Terminology: what does testing mean for a

    JS developer?
  9. Intro | TERMINOLOGY Unit tests, UI tests, Application tests..?

  10. Intro | Test pyramid JS Unit tests App Tests UI

  11. Intro | Common company scenario Backend unit tests App Tests

  12. Unit Tests Introduction

  13. 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…
  14. Intro | Unit Tests describe('A simple Model test', function (t)

 t.it('Should do something', function(t) { var user = new User({ name : ‘Bob’ });

  15. Intro | Unit Tests describe('A simple Model test', function (t)

 t.it(‘Will not run', function(t) { … });
 t.iit(‘Isolate this section', function(t) { … });

  16. 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
  17. Unit tests | TDD basics 1. Make the unit test

    fail 2. Implement 3. Make the test pass 4. Refactor, Repeat
  18. Unit tests | Writing a unit test Unit testing demo

  19. Testing your UI Functional testing

  20. UI tests | Intro Manually writing UI tests takes time

  21. UI tests | Intro UI tests are more fragile &

    run slower than unit tests
  22. UI tests | Intro Understanding CSS and ComponentQuery is key

  23. 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
  24. UI tests | Intro UI Unit test demo

  25. Application Tests Introduction

  26. Application tests | Intro •Black box testing, go to index.html…

    •Runs all the code of your application •Does app work or not?
  27. Application tests | Challenges •Database needs to be put in

    a known state pre test start •Slow •Fragile, race conditions •Errors likely harder to find
  28. Application tests | Intro Using an Event Recorder

  29. Application tests | Event recorder •Great for application tests •Records

    user actions: clicks, types, drag drop •Can be used by a non-programmer •Big timesaver
  30. Application tests | Event recorder Let’s try the recorder

  31. Application tests | Monkey tests Monkey testing

  32. Application tests | Monkey tests •Random UI testing •Clicks, drags

    etc. in your UI •Finds unhandled exceptions •Free testing help. 0€
  33. Application tests | Monkey tests Cost breakdown: 5€ * 0

    = 0 5€
  34. Application tests | Monkey tests Monkey testing demo

  35. Application tests | Monkey tests Cheap/Free way to catch bugs

  36. Finding bugs | Error logging Error Logging

  37. Finding bugs | Error logging Unhandled JS exception: What does

    the user see?
  38. Finding bugs | Error logging Nothing

  39. Finding bugs | Error logging win.onerror = function (message, file,

    line, column, errorObj) { // Log it
  40. Finding bugs | Error logging Demo - it’s simple

  41. Finding bugs | Git hooks Pre-commit hook

  42. Finding bugs | Pre-commit hook •Pre-commit hooks are great to

    keep code base clean •Check JsHint •Run unit tests
  43. Finding bugs | Pre-commit hook A sample Git pre-commit hook

  44. Continuous Integration TeamCity, Code Coverage & Statistics

  45. Continuous Integration | Intro •Automated builds •Nightly test suite execution

    •Finding errors early => Code quality => Motivated developers •Enables Continuous Delivery Purpose of having CI:
  46. Continuous Integration | Intro Always ready to release!

  47. 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
  48. Continuous Integration | TeamCity Let’s checkout TeamCity

  49. Continuous Integration | Cloud testing So…running in multiple browsers?

  50. 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
  51. 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…
  52. Continuous Integration | Cloud testing Launching tests in BrowserStack

  53. Rounding up | Summary •Prioritise JS unit tests •UI tests

    •Application & monkey tests •Tips for finding errors early •Continuous Integration
  54. Rounding up | Links •bryntum.com/products/siesta •bryntum.com/blog •teamcity.bryntum.com/guest •browserstack.com/ •saucelabs.com/

  55. Rounding up | Fika Dear Ladies and Gentlemen, 

    you are now welcome to ”Vinterträdgården” for a lovely coffee break that is sponsored by
  56. Rounding up | Questions Questions? Twitter: @Bryntum