Unit testing
Rich UI brownbags
www.slideshare.net/bmarchal/unit-test-in-javascript
US Software Population
0
10
20
30
40
50
60
70
80
90
100
1950 1965 1980 1995 2010
Development personnel Maintenance personn...
Benoît Marchal
http://marchal.com
3
Unit tests
Proven, well-known technique
to delay legacy comes
to JavaScript
4
Share RoMa frontend experience
With unit tests
5
Unit tests in JavaScript
Jasmine helps us write formal, executable
specifications. It integrates transparently with
our de...
Find them early, fix them cheaply
0
10
20
30
40
50
60
70
80
90
Introduction of defects
7
Cost to fix
FORMAL SPECIFICATIONS
Delay legacy
How/when/why to use these?
• function union(gsA, gsB, geography) {
// …
}
• this.detach = function() {
// …
}
• function p...
Show me an example
• it("fused municipalities", function() {
var seeds = [
item("/antwerpen"), item("/arlon"), item("/brug...
Formal Specifications
• Formal component specifications
– What is the component supposed to do?
– Executable so always up-...
Written when…
• Understanding the problem or solution
– Describe what you expect, include edge cases
– Test that you imple...
Formal specifications
• Find problems early
• Facilitates change
• Simplifies integration
• Documentation
• Design
13
TRANSPARENT
Write it in plain JavaScript
Magically self-healing code
Sadly it’s a myth
15
Documentation exposes equally
The good
• Brilliant solution
• Efficient component
• Stable API
• Beautiful design
• You se...
Generic development cycle
Design/
refactor
CodeTest
17
Test cycle
Design/
refactor
Write
tests
Code
Run
(write)
tests
18
SOLID is easier to specify/test*
• Single responsible principle
– A component has a single responsibility
• Open/closed pr...
Transparent
• No silver bullet
• Highlights equally strengths and flaws
– So you can see them
• Testable code is more like...
TOOLS
Making it fit
Jasmine and Karma
22
WebStorm or Grunt/PhantomJS
23
: separation of concerns
Factory
Service
Controller
Filter
Template
Directive
24
model
interaction
view
integration
templates
• it("responds to a click (direct compilation)",
function() {
$rootScope.$digest();
spyOn(scope, "tickle");
brow...
jargon
• describe() : specification
• it()
• beforeEach() & afterEach()
• xit() & xdescribe()
• iit() & ddescribe()
• crea...
Demo
27
Tools
28
templates
UNIT TESTS IN JAVASCRIPT
Share RoMa experience
Unit tests in JavaScript
Jasmine helps us write formal, executable
specifications. It integrates transparently with
our de...
Check these out
• Guidelines and JavaScript Templates
– http://wiki.netpost/display/ROMA/JS+unit+testing+and+specification...
Delay legacy
Specifications in plain JavaScript
32
Upcoming SlideShare
Loading in …5
×

Unit test in JavaScript

878 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
878
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit test in JavaScript

  1. 1. Unit testing Rich UI brownbags www.slideshare.net/bmarchal/unit-test-in-javascript
  2. 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. 3. Benoît Marchal http://marchal.com 3
  4. 4. Unit tests Proven, well-known technique to delay legacy comes to JavaScript 4
  5. 5. Share RoMa frontend experience With unit tests 5
  6. 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. 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. 8. FORMAL SPECIFICATIONS Delay legacy
  9. 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. 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. 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. 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. 13. Formal specifications • Find problems early • Facilitates change • Simplifies integration • Documentation • Design 13
  14. 14. TRANSPARENT Write it in plain JavaScript
  15. 15. Magically self-healing code Sadly it’s a myth 15
  16. 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. 17. Generic development cycle Design/ refactor CodeTest 17
  18. 18. Test cycle Design/ refactor Write tests Code Run (write) tests 18
  19. 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. 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. 21. TOOLS Making it fit
  22. 22. Jasmine and Karma 22
  23. 23. WebStorm or Grunt/PhantomJS 23
  24. 24. : separation of concerns Factory Service Controller Filter Template Directive 24 model interaction view integration
  25. 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. 26. jargon • describe() : specification • it() • beforeEach() & afterEach() • xit() & xdescribe() • iit() & ddescribe() • createSpy() & createSpyObj() • expect() • jasmine.any() • matchers • dependency injection 26
  27. 27. Demo 27
  28. 28. Tools 28 templates
  29. 29. UNIT TESTS IN JAVASCRIPT Share RoMa experience
  30. 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. 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. 32. Delay legacy Specifications in plain JavaScript 32

×