We all know we need automated tests for our code - they are our guardian angel against regression bugs. But what exactly is the point in writing a test in advance - how does this even make sense? The first thing to grasp is that, at this stage, these are not tests - but specifications, which force us to think about exactly what we want to do - in advance. In addition TDD/BDD provide a rigorous methodology, which can help to keep us sane whilst developing complex code in steady confident steps.

1. EXAMPLE-FIRST
A Sane Test-Driven Approach16/01/18
JS OXFORD

2. 16/01/18JS OXFORD
What’s a Test?

3. 16/01/18JS OXFORD
A Simple Unit Test
class Calculator {
sum(a, b) {
return a + b;
}
}
let calc = new Calculator();
let result = calc.sum(1, 2);
assert.equal(result, 3);
Class Unit Test

4. Test Driven Development

5. [test]
A procedure intended to
establish the performance,
or reliability of something,
especially before it is taken
into widespread use.
To do something in order
to discover if something is
safe, works correctly, etc.,
or if something is present
Noun Verb

6. Kent Beck
“Rediscovered” TDD in 1994
“TDD By Example” –
Published 2002
Test-Driven Development by Example

7. Test-Driven Development is a way of
managing fear during programming
Kent Beck - 2002

8. MAKE IT
PASS
REFACTOR
WRITE
FAILING
TEST
RED / GREEN / REFACTOR

9. MAKE IT
PASS
REFACTOR
WRITE
FAILING
TEST
3 RULES OF TEST DRIVEN DESIGN
1. No code unless you’re making a test pass
2. Stop writing the test as soon as it fails
3. Write only enough code to make it green

10. 16/01/18JS OXFORD
Testing tools and frameworks

11. 16/01/18JS OXFORD
Jasmine - Expectations
let calculator = new Calculator();
calculator.sum(1, 2);

12. 16/01/18JS OXFORD
Jasmine - Expectations
let calculator = new Calculator();
expect(calculator.sum(1, 2)).toBe(3)

13. Jasmine - Expectations
Declaration Behavior
expect(2 - 1).toBe(1)
Expect(2).not.toBe(1)
Argument must match a value exactly
person1 = {age: 12}
person2 = {age: 14}
expect(person1).not.toEqual(person2)
Matches (or not) objects or arrays
let message = 'foo bar'
expect(message).toMatch(/bar/)
expect(message).not.toMatch(/abc/)
Matches regular expression
expect(value).toBeDefined()
expect(value).toBeNull()
Matches undefined or null

14. 16/01/18
What we need
npm install –g jasmine webpack
npm install --save-dev jasmine jasmine-spec-reporter

15. 16/01/18JS Oxford
What we need
export JASMINE_CONFIG_PATH=jasmine.json
{
"spec_dir": "spec",
"spec_files": [
"**/*.js"
],
"helpers": [
"../jasmine/**/*.js"
],
"stopSpecOnExpectationFailure": false,
"random": false
}

16. 16/01/18JS OXFORD
What we need
Examples in –
git clone https://github.com/jon-acker/js-oxford-tdd

17. ü Returns 0 for an empty string
ü Returns the “bare” number given one number
ü Returns the sum of two numbers separated by space
ü Returns the sum of several numbers separated by space
ü Returns the sum of any “whitespace” space-separated string
StringCalculator

18. 16/01/18JS OXFORD
Demo

19. An Object–Oriented View

20. An Object–Oriented View
Customer
Acme
System
Compliance
Checker
Telephone
Directory
isListed
register

21. Test Doubles
- Fake
- Stand in for a class/function that does not exist yet
- Stub
- Fake that returns fixed data (indirect outputs)
- Mock
- Stub that can capture the indirect outputs for later observation
- Spy
- Spy on method calls and capture inputs with expectations
[Meszaros 2007]

22. An Object–Oriented View
Customer
Acme
System
Compliance
Checker
Telephone
Directory
isListed
register
Object
under test
Test Doubles
Spy
Stub

23. Stub declaration
Declaration Effect
spyOn(obj,'method').and.returnValue(value) Will cause value to be returned
spyOn(obj,'method').and.returnValues(val1, val2) Return values in order of
calling
spyOn(obj,'method').and.throwError('error') Will cause exception with
string ‘error’
spyOn(obj,'method’).and.callThrough() Will return the return value of
the original function

24. Spy expectations
Declaration Expectation
expect(obj.method).toHaveBeenCalled()
expect(obj.method).not.toHaveBeenCalled()
Expected obj.method() to be called
toHaveBeenCalledWith(args)
not.toHaveBeenCalledWith(args)
Expected [or not expected] to be
called with arguments
expect(obj.method.calls.count()).toBe(2) Tracks number of times spy was
called
expect(obj.method).toHaveBeenCalledWith(
12, jasmine.anything()
)
Expected object.method(12, ***) to
be called

25. An Object – Oriented View
Customer
Acme
System
Compliance
Checker
Telephone
Directory
isListed
register
expect(system.register).toHaveBeenCalledWith(user)
spyOn(directory, ‘isListed’).and.returnValue(true)
spyOn(system, ‘register’)

26. module.exports = function CustomerFactory(system, directory) {
let acmeSystem = system;
let telephoneDirectory = directory;
return new class Customer {
/**
* @param {string} name
*/
named(name) {
let customer = new Customer();
customer.name = name;
return customer;
}
/**
* Register customer on Acme system
*/
register() {
if (!telephoneDirectory.lists(this.name)) {
throw new Error('Customer ' + this.name + ' is not in directory');
}
acmeSystem.register(this);
}
};
};
Dependencies

27. const CustomerFactory = require('../src/Customer');
const telephoneDirectory = jasmine.createSpyObj('telephoneDirectory', ['list', 'lists']);
const acmeSystem = require('../src/acmeSystem');
let customer;
beforeEach(function() {
customer = CustomerFactory(acmeSystem, telephoneDirectory).named('Jon');
spyOn(acmeSystem, 'register');
});
it('Throws exception when registering with name that is not in directory', function() {
telephoneDirectory.lists.and.returnValue(false);
expect(() => customer.register()).toThrowError('Customer ' + customer.name + ' is not in directory');
expect(telephoneDirectory.lists).toHaveBeenCalledWith(customer);
expect(acmeSystem.register).not.toHaveBeenCalled();
});
it('Can be registered when name is listed in directory', function() {
telephoneDirectory.lists.and.returnValue(true);
customer.register();
expect(telephoneDirectory.lists).toHaveBeenCalledWith(customer);
expect(acmeSystem.register).toHaveBeenCalledWith(customer);
});

28. it('Can be registered when name is listed in directory', function() {
telephoneDirectory.lists.and.returnValue(true);
customer.register();
expect(telephoneDirectory.lists).toHaveBeenCalledWith(customer);
expect(acmeSystem.register).toHaveBeenCalledWith(customer);
});
Arrange / Act/ Assert
Arrange
Act!
Assert

29. Don’t rush ahead with more
code.
Instead, add another example
and let it guide you to what you
have to do next.
- David Chelimsky 2010
A Language Shift

30. Test Driven Development
By
Examples
A Language Shift

31. Fun
Profit
Business Requirements
What is software development driven by?

32. Requirements Examples
What is software development driven by?

33. – Incremental and iterative development
– Short feedback loops
– Never write code without a failing test
Steve Freeman & Nat Pryce – 2009
A More Holistic Approach

34. TDD is described as
A Design Activity
“Start by writing an acceptance test” – Freeman & Pryce 2009
ATDD – Acceptance Test Driven

35. Outer-loop / Inner-loop

36. Behavior Driven Development

37. 16/01/18JS OXFORD
BDD – Dan North’s Definition
BDD is a second-generation, outside-in, pull-based,
multiple-stakeholder, multiple-scale, high-
automation, agile methodology.

38. 16/01/18JS OXFORD
BDD – Liz Keogh’s Definition
BDD is the art of using examples in conversation to
illustrate behaviour.

39. 16/01/18JS OXFORD
A Behavior Driven Approach?
Behavior Driven Development
Rules:
- Customers must be listed in the phone directory to register with Acme
Scenario: Customer cannot be registered if they are not in the phone directory
Given Jon is not listed in the Greater London telephone directory
When Jon tries to register for Acme Systems
Then Jon should be told they cannot register because they are not listed

40. Background:
Given Acme's compliance system requires customers to be at least 18 years old
Scenario: Customer cannot be registered if they are not in the phone directory
Given Jon is not listed in the Greater London telephone directory
When Jon tries to register for Acme Systems
Then Jon should be told they cannot be registered because they are not listed
And Jon should not be registered with Acme Systems
Scenario: Customer cannot be registered if they are not compliant with Acme's rules
Given Jon is listed in the Greater London telephone directory
But Jon is only 16 years old
When Jon tries to register for Acme Systems
Then Jon should be told that he must be at least 18 to register
And Jon should not be registered with Acme Systems
Scenario: Customer successfully registers with Acme (finally!)
Given Jon is listed in the Greater London telephone directory
And Jon is 20 years old
When Jon tries to register for Acme Systems
Then Acme Systems should now have Jon registered as a customer

41. When('{string} tries to register for Acme Systems', function (customerName, cb) {
try {
customer.register();
} catch (e) {
caughtException = e.message;
}
cb();
});
Then('{string} are told they cannot register ...', function (customerName, cb) {
expect(caughtException).to.equal('Customer '+customerName+' is not in listed');
cb();
});

42. it('Can be registered when name is listed in directory', function() {
telephoneDirectory.lists.and.returnValue(true);
customer.register();
expect(telephoneDirectory.lists).toHaveBeenCalledWith(customer);
expect(acmeSystem.register).toHaveBeenCalledWith(customer);
});
Given/ When/ Then
Given
When!
Then

43. 16/01/18JS OXFORD
BDD = TDD for the business J
Driven!
ü Examples drive code
ü Business requirements drive code

44. 16/01/18JS OXFORD
The DOM In The Room

45. You Don’t Need to Test the DOM
16/01/18JS OXFORD
module.exports = class Page {
constructor($element) {
this.$element = $element;
}
display(total) {
this.$element.animate({
borderWidth: 30
}, 1000).text(total);
}
};

46. You Don’t Need to Test the DOM
16/01/18JS OXFORD
const dom = new JSDOM("<html><div id='main'></div></html>");
$element = jQuery('#main');
spyOn($element, 'animate').and.returnValue($element);
let page = new Page($element);
page.display(total);
expect($element.animate).toHaveBeenCalledWith({borderRadius:
100});

47. 16/01/18JS OXFORD
Really want to test the UI ??!
http://appraise.qa

48. 16/01/18JS OXFORD

49. Pros & Cons of TDD
¨ 100% test coverage (almost)
¨ Less fear of changing code
¨ Code guided (by tests)
¨ Loose coupling – high cohesion
¨ Instant feedback on code
¨ More testable code
¨ Living documentation
¨ Risky to change code
¨ Addition time spent upfront
¨ Can be less productive
¨ No assurance of optimal code
¨ Hard to adopt and master
¨ Test maintenance
17/01/18JS OXFORD
Pros Cons

50. THANK YOU!
16/01/18JS OXFORD
__@jacker__
digitaloxford.slack.com: Jon Acker