MILAN 20/21.11.2015

Adam Klein - 500Tech

JS tests like a pro

creativecommons.org/licenses/by-nc-sa/3.0/

MILAN 20/21.11.2015 - Adam Klein

Leave your feedback on Joind.in! https://joind.in/16318

Adam Klein

- Developing for >18 years - Development, Consulting & Training

in Angular, React & Node - International clients

CTO @ 500Tech

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa

MEMES

DEMO APP

The projecthttp://localhost:8080

https://github.com/500tech/js-tests-pro

Tools๏ webpack

๏ karma

๏ jasmine

๏ ES6

๏ angular

๏ angular-kick

TESTABLE CODE

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); } }

Unitinitialisation

dependencies

internal state

publicAPI

side effects

WHAT TO TEST?

Models & Services- Little dependencies

- Not coupled to view

- Framework agnostic

- Easiest to test

Controllers- Coupled to the view

- Many dependencies

- Might be heavily reused

- Change a lot

Integration tests- Using Selenium

- Very slow

- Very reliable

- Hard to write and maintain

UI Components- unit tests using DOM API

- Unit tests are faster

Floating code- router resolve

- run / config blocks

- super objects / main controllers

- inside event listeners

TOOLS

jasmine / mocha / chaidescribe('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(); }); });

karma๏ Test Runner

๏ Tests run in the browser

ES6 - babel + webpack / browserify

๏ arrow functions

๏ classes

๏ import / export

๏ lots more features

Saucelabs / Browserstack๏ Different browsers

๏ Different OS

๏ Different resolutions

TEST SERVICE

// TODO:

TEST UI COMPONENT

Questions?

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