Client side tests in Javascript client side applications. Best practices & techniques for testing models, controllers and views, as well as integration tests.

1. MILAN 20/21.11.2015
Adam Klein - 500Tech
JS tests like a pro
creativecommons.org/licenses/by-nc-sa/3.0/

2. MILAN 20/21.11.2015 - Adam Klein
Leave your feedback on Joind.in!
https://joind.in/16318

3. Adam Klein
- Developing for >18 years
- Development, Consulting & Training
in Angular, React & Node
- International clients
CTO @ 500Tech

4. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa

5. MEMES

9. DEMO APP

10. The project
http://localhost:8080
https://github.com/500tech/js-tests-pro

11. Tools
๏ webpack
๏ karma
๏ jasmine
๏ ES6
๏ angular
๏ angular-kick

12. TESTABLE CODE

13. import _ from 'lodash'
class TabsController {
constructor(tabs, onActivate) {
this.tabs = tabs;
this._onActivate = onActivate;
}
isActive(tab) {
return this._activeTab === tab;
}
activate(tab) {
this._activeTab = tab;
this._onActivate(tab);
}
}
Unit
initialisation
dependencies
internal state
public
API
side effects

14. WHAT TO TEST?

16. Models & Services
- Little dependencies
- Not coupled to view
- Framework agnostic
- Easiest to test

17. Controllers
- Coupled to the view
- Many dependencies
- Might be heavily reused
- Change a lot

18. Integration tests
- Using Selenium
- Very slow
- Very reliable
- Hard to write and maintain

19. UI Components
- unit tests using DOM API
- Unit tests are faster

20. Floating code
- router resolve
- run / config blocks
- super objects / main controllers
- inside event listeners

21. TOOLS

22. jasmine / mocha / chai
describe('some action', function() {
beforeEach(function() {
given = something();
spyOn(http, 'get');
result = action(given);
});
it ('should return something', function() {
expect(result).toBeGreaterThan(0);
});
it ('should have side effects', function() {
expect(http.get).toHaveBeenCalled();
});
});

23. karma
๏ Test Runner
๏ Tests run in the browser

24. ES6 - babel + webpack / browserify
๏ arrow functions
๏ classes
๏ import / export
๏ lots more features

25. Saucelabs / Browserstack
๏ Different browsers
๏ Different OS
๏ Different resolutions

26. TEST SERVICE

27. // TODO:

28. TEST UI COMPONENT

29. Questions?

30. MILAN 20/21.11.2015
Keep in touch
adam@500tech.com
blog.500Tech.com
@500techil
https://www.slideshare.net/500Tech/js-tests-like-a-pro