1. Unit testing
Rich UI brownbags
www.slideshare.net/bmarchal/unit-test-in-javascript

2. US Software Population
0
10
20
30
40
50
60
70
80
90
100
1950 1965 1980 1995 2010
Development personnel Maintenance personnel
2The economics of software maintenance in the XXI century, Capers Jones, 2006

3. Benoît Marchal
http://marchal.com
3

4. Unit tests
Proven, well-known technique
to delay legacy comes
to JavaScript
4

5. Share RoMa frontend experience
With unit tests
5

6. Unit tests in JavaScript
Jasmine helps us write formal, executable
specifications. It integrates transparently with
our development methodologies while supporting
us with a set of tools.
6

7. Find them early, fix them cheaply
0
10
20
30
40
50
60
70
80
90
Introduction of defects
7
Cost to fix

8. FORMAL SPECIFICATIONS
Delay legacy

9. How/when/why to use these?
• function union(gsA, gsB, geography) {
// …
}
• this.detach = function() {
// …
}
• function plantATree(inputNodes) {
// …
}
• {
assume: function(uri, id, type) {
// …
}
}
9

10. Show me an example
• it("fused municipalities", function() {
var seeds = [
item("/antwerpen"), item("/arlon"), item("/brugge"),
item("/gent"), item("/hasselt"), item("/leuven"), item("/liege"),
item("/mons"), item("/namur"), item("/wavre")
],
harvest = {
"/antwerpen": { include: true, children: {} },
"/arlon": { include: true, children: {} },
"/brugge": { include: true, children: {} },
"/gent": { include: true, children: {} },
"/hasselt": { include: true, children: {} },
"/leuven": { include: true, children: {} },
"/liege": { include: true, children: {} },
"/mons": { include: true, children: {} },
"/namur": { include: true, children: {} },
"/wavre": { include: true, children: {} }
};
expect(plantATree(seeds)).toEqual(harvest);
});
10

11. Formal Specifications
• Formal component specifications
– What is the component supposed to do?
– Executable so always up-to-date
– Specifications “by example”
• Testing is a tool, not a goal
– Alternatives
• Design by contract
• Assertions
• Legacy code: code without tests
– Michael Feathers “Working effectively with legacy code”
– Premature legacy
• Oftentimes easier to rewrite than to understand
• Unit tests protect components
11

12. Written when…
• Understanding the problem or solution
– Describe what you expect, include edge cases
– Test that you implemented your understanding… for free
– Akin to rubber duck debugging 
– By nature, UI work is iterative
• Teamwork
– Encourage reuse: code samples for now or later
– Ease maintenance: pinpoint source of problems
– Team growth or change
• Refactoring
– Enforce the existing API
– Or highlight where it’s broken
12

13. Formal specifications
• Find problems early
• Facilitates change
• Simplifies integration
• Documentation
• Design
13

14. TRANSPARENT
Write it in plain JavaScript

15. Magically self-healing code
Sadly it’s a myth
15

16. Documentation exposes equally
The good
• Brilliant solution
• Efficient component
• Stable API
• Beautiful design
• You see it,
– You have confidence
And the not so good
• Defect
• Slow component
• Difficult API
• Odd design
• You see it,
– You can improve it
16

17. Generic development cycle
Design/
refactor
CodeTest
17

18. Test cycle
Design/
refactor
Write
tests
Code
Run
(write)
tests
18

19. SOLID is easier to specify/test*
• Single responsible principle
– A component has a single responsibility
• Open/closed principle
– Open for extension, closed for modification
• Liskov substitution principle
– Objects replaceable with instances of their subtypes
• Interface segregation principle
– Client-specific interfaces over general-purpose ones
• Dependency inversion principle
– Depend upon abstractions, not concretions
• * = see separation of concerns
19

20. Transparent
• No silver bullet
• Highlights equally strengths and flaws
– So you can see them
• Testable code is more likely to be SOLID
• Fit it in your coding habits/methodologies
20

21. TOOLS
Making it fit

22. Jasmine and Karma
22

23. WebStorm or Grunt/PhantomJS
23

24. : separation of concerns
Factory
Service
Controller
Filter
Template
Directive
24
model
interaction
view
integration

25. templates
• it("responds to a click (direct compilation)",
function() {
$rootScope.$digest();
spyOn(scope, "tickle");
browserTrigger(element.children(), "click");
expect(scope.tickle).toHaveBeenCalled();
});
25

26. jargon
• describe() : specification
• it()
• beforeEach() & afterEach()
• xit() & xdescribe()
• iit() & ddescribe()
• createSpy() & createSpyObj()
• expect()
• jasmine.any()
• matchers
• dependency injection
26

27. Demo
27

28. Tools
28
templates

29. UNIT TESTS IN JAVASCRIPT
Share RoMa experience

30. Unit tests in JavaScript
Jasmine helps us write formal, executable
specifications. It integrates transparently with
our development methodologies while supporting
us with a set of tools.
30

31. Check these out
• Guidelines and JavaScript Templates
– http://wiki.netpost/display/ROMA/JS+unit+testing+and+specifications
– http://svn.netpost:10080/svn/rom/branches/DEV_V0003.10.00/
• components/2020/ui/rom-ui-app/test/examples
• Writing testable code
– http://wiki.netpost/display/ROMA/Testing+the+Domain+Model
• Angular guidelines
– https://docs.angularjs.org/guide/unit-testing
• Tools
– http://jasmine.github.io/
– http://karma-runner.github.io/
– http://www.jetbrains.com/webstorm/
– http://gruntjs.com/
– http://phantomjs.org/
31

32. Delay legacy
Specifications in plain JavaScript
32