The document provides an introduction to test-driven development (TDD) and testing with JavaScript and React. It discusses the benefits of TDD such as early bug detection, clear code, and living documentation. It also covers frustrations with TDD. The document demonstrates TDD by incrementally developing a calculator app through testing examples, showing the red-green-refactor process and handling invalid inputs. It emphasizes that TDD helps improve code quality and avoids bugs but is not a "silver bullet" solution.

1. An Introduction to TDD
Lawton Spelliscy

2. Overview
● The benefits and shortcomings of TDD
● The tools of the trade
● Testing with JS and React

3. TDD 101
● Write Tests prior to
implementation
TDD 102
● Red, Green, Refactor

4. Benefits of Testing
● Tests run fast
● Early step in automated
deployment
● Help avoid introducing bugs in
greater code base
● Live documentation

5. Benefits of TDD
● Clear, Concise Code
● Minimize context switching
● Catches bugs early
● Better live documentation

6. Frustrations
● Feels unnatural
● One more thing to maintain
● Slows down development
● Technology not ready

7. Not a “Silver Bullet” Solution

8. “With TDD we’ll have no bugs”
“We’ve implemented TDD why
aren’t we going faster?”

9. Tools of the Trade

10. React
● JS Library for building user interfaces
● Uses a virtual DOM prior to rendering
to browser’s DOM

11. Testing Tools
● Test Framework
● Assertion Libraries
● Mocking Library

12. Example

14. Essentials:
● React
● Mocha - Test Framework
● Chai - Assertion Library
● Sinon - Mock Library
● Enzyme - React Test Utility
The Stack

15. Story
Given
Numerical values separated by +
symbols are entered in the
equation field
When
User clicks the equal button
Then
Sum of all numerical values
should display to the right of the
equal button

16. describe("test addition", () => {
it('simple addition', () => {
//Arrange/Act
const rtnValue = math.parseEquation('1 + 1');
//Assert
expect(rtnValue).to.equal(2);
});
});

18. 7
We connect the digital and physical worlds
export class Math1 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
addValues.forEach((value) => {
sum += value;
});
return sum;
}
}

19. We connect the digital and physical worlds

20. 7
We connect the digital and physical worlds
export class Math1 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
addValues.forEach((value) => {
sum += value;
});
return sum;
}
}
0 + “1 ” + “ 1” = “01 1”

21. We connect the digital and physical worlds
export class Math2 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
addValues.forEach((value) => {
sum += parseInt(value.trim());
});
return sum;
}
}

22. What about React?

23. We connect the digital and physical worlds
describe('test addition component', () => {
let subject;
let mockParseEquation;
beforeEach(() => {
//Arrange
subject = shallow(<Calculator/>);
mockParseEquation = sinon.stub(math, "parseEquation");
});
afterEach(() => {
mockParseEquation.restore();
});
it('calls math function on click with correct values', () => {
//Arrange
subject.setState({equation:'1 + 1'})
//Act
subject.find('button').simulate('click');
//Assert
expect(mockParseEquation.getCall(0).args[0]).to.equal('1 + 1');
});
...

24. We connect the digital and physical worlds
...
it('displays result of math utility', () => {
//Arrange
mockParseEquation.returns(2);
//Act
subject.find('button').simulate('click');
//Assert
const resultText = subject.find('.result').text();
expect(resultText).to.equal('2');
});
});

25. We connect the digital and physical worlds
calculateValue() {
const additionSum = math.parseEquation(this.state.equation);
this.setState({calculatedResult: additionSum});
}
render() {
return (
<div>
<input
value={this.state.equation}
onChange={this.handleValueChange} />
<button onClick={this.calculateValue}>
=
</button>
<label className="result">{this.state.calculatedResult}</label>
</div>
);
}

26. Building Next Step

27. We connect the digital and physical worlds
it('invalid input', () => {
//Arrange/Act
const rtnValue = math.parseEquation('1 + one');
//Assert
expect(rtnValue).to.be.NaN;
});

29. Are We Finished?

30. We connect the digital and physical worlds
export class Math2 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
addValues.forEach((value) => {
sum += parseInt(value.trim());
});
return sum;
}
}
1 + NaN = NaN

31. We connect the digital and physical worlds
it('invalid input between numbers', () => {
//Arrange/Act
const rtnValue = math.parseEquation('1 + 123asdf453');
//Assert
expect(rtnValue).to.be.NaN;
});
1 + 123 = 124

32. We connect the digital and physical worlds
// attempt 3
export class Math3 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
const invalidInput = addValues.some((value) => {
const trimValue = value.trim();
if(!isNaN(parseInt(trimValue)) && isFinite(trimValue)) {
return true;
} else {
sum += parseInt(trimValue);
return false;
}
});
return invalidInput ? NaN : sum;
}
}

33. We connect the digital and physical worlds

34. We connect the digital and physical worlds
// attempt 3
export class Math3 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
const invalidInput = addValues.some((value) => {
const trimValue = value.trim();
if(!isNaN(parseInt(trimValue)) && isFinite(trimValue)) {
return true;
} else {
sum += parseInt(trimValue);
return false;
}
});
return invalidInput ? NaN : sum;
}
}

35. We connect the digital and physical worlds
// attempt 4
export class Math4 {
static parseEquation(equation) {
const addValues = equation.split('+');
let sum = 0;
const invalidInput = addValues.some((value) => {
const trimValue = value.trim();
if(!isNaN(parseInt(trimValue)) && isFinite(trimValue)) {
sum += parseInt(trimValue);
return false;
} else {
return true;
}
});
return invalidInput ? NaN : sum;
}
}

36. TDD is your Pal!
● Testing doesn’t have to be a bad word
● The flow can feel so natural
● With React TDD can include front end development

37. Thank you
● https://github.com/Lawton/react-testing-example
● https://medium.com/tribalscale/tutorial-on-testing-react-part-1-2c587e39114d
● https://medium.com/tribalscale/tutorial-on-testing-react-with-tdd-part-2-c50172
bf272e
● http://www.tribalscale.com/blog