Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
An Introduction to TDD
Lawton Spelliscy
Overview
● The benefits and shortcomings of TDD
● The tools of the trade
● Testing with JS and React
TDD 101
● Write Tests prior to
implementation
TDD 102
● Red, Green, Refactor
Benefits of Testing
● Tests run fast
● Early step in automated
deployment
● Help avoid introducing bugs in
greater code ba...
Benefits of TDD
● Clear, Concise Code
● Minimize context switching
● Catches bugs early
● Better live documentation
Frustrations
● Feels unnatural
● One more thing to maintain
● Slows down development
● Technology not ready
Not a “Silver Bullet” Solution
“With TDD we’ll have no bugs”
“We’ve implemented TDD why
aren’t we going faster?”
Tools of the Trade
React
● JS Library for building user interfaces
● Uses a virtual DOM prior to rendering
to browser’s DOM
Testing Tools
● Test Framework
● Assertion Libraries
● Mocking Library
Example
Essentials:
● React
● Mocha - Test Framework
● Chai - Assertion Library
● Sinon - Mock Library
● Enzyme - React Test Utili...
Story
Given
Numerical values separated by +
symbols are entered in the
equation field
When
User clicks the equal button
Th...
describe("test addition", () => {
it('simple addition', () => {
//Arrange/Act
const rtnValue = math.parseEquation('1 + 1')...
7
We connect the digital and physical worlds
export class Math1 {
static parseEquation(equation) {
const addValues = equat...
We connect the digital and physical worlds
7
We connect the digital and physical worlds
export class Math1 {
static parseEquation(equation) {
const addValues = equat...
We connect the digital and physical worlds
export class Math2 {
static parseEquation(equation) {
const addValues = equatio...
What about React?
We connect the digital and physical worlds
describe('test addition component', () => {
let subject;
let mockParseEquation;...
We connect the digital and physical worlds
...
it('displays result of math utility', () => {
//Arrange
mockParseEquation.r...
We connect the digital and physical worlds
calculateValue() {
const additionSum = math.parseEquation(this.state.equation);...
Building Next Step
We connect the digital and physical worlds
it('invalid input', () => {
//Arrange/Act
const rtnValue = math.parseEquation('...
Are We Finished?
We connect the digital and physical worlds
export class Math2 {
static parseEquation(equation) {
const addValues = equatio...
We connect the digital and physical worlds
it('invalid input between numbers', () => {
//Arrange/Act
const rtnValue = math...
We connect the digital and physical worlds
// attempt 3
export class Math3 {
static parseEquation(equation) {
const addVal...
We connect the digital and physical worlds
We connect the digital and physical worlds
// attempt 3
export class Math3 {
static parseEquation(equation) {
const addVal...
We connect the digital and physical worlds
// attempt 4
export class Math4 {
static parseEquation(equation) {
const addVal...
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...
Thank you
● https://github.com/Lawton/react-testing-example
● https://medium.com/tribalscale/tutorial-on-testing-react-par...
An Introduction to Test Driven Development with React
An Introduction to Test Driven Development with React
An Introduction to Test Driven Development with React
Upcoming SlideShare
Loading in …5
×

An Introduction to Test Driven Development with React

218 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Lawton Spelliscy, Tribalscale

Overview

While there are many best practises and approaches to test driven development or TDD, the basic concept is that a developer writes tests prior to implementing a specific set of functionality. This can feel unintuitive or cumbersome, but test driven development can have numerous benefits. If done correctly, the methodology can help add a stable routine to your development process. It naturally creates short development cycles, well defined functions, and builds a stable suite of unit tests.

React has a strong test utility library, making it easy to test. This presentation will introduce some of the common libraries used for testing in React and the routine Lawton follows when developing.

Objective

To demonstrate the advantages of test driven development


Target Audience

Front-end developers


Assumed Audience Knowledge

Experience with front-end development, an understanding of Javascript with some exposure to the React library.


Five Things Audience Members Will Learn

The benefits and disadvantages of test driven development
How to incorporate test driven development into your development process
Learn about useful React test libraries
How to run tests on JavaScript applications
Ways to isolate your tests to specific functionality

Published in: Technology
  • Be the first to comment

  • Be the first to like this

An Introduction to Test Driven Development with React

  1. 1. An Introduction to TDD Lawton Spelliscy
  2. 2. Overview ● The benefits and shortcomings of TDD ● The tools of the trade ● Testing with JS and React
  3. 3. TDD 101 ● Write Tests prior to implementation TDD 102 ● Red, Green, Refactor
  4. 4. Benefits of Testing ● Tests run fast ● Early step in automated deployment ● Help avoid introducing bugs in greater code base ● Live documentation
  5. 5. Benefits of TDD ● Clear, Concise Code ● Minimize context switching ● Catches bugs early ● Better live documentation
  6. 6. Frustrations ● Feels unnatural ● One more thing to maintain ● Slows down development ● Technology not ready
  7. 7. Not a “Silver Bullet” Solution
  8. 8. “With TDD we’ll have no bugs” “We’ve implemented TDD why aren’t we going faster?”
  9. 9. Tools of the Trade
  10. 10. React ● JS Library for building user interfaces ● Uses a virtual DOM prior to rendering to browser’s DOM
  11. 11. Testing Tools ● Test Framework ● Assertion Libraries ● Mocking Library
  12. 12. Example
  13. 13. Essentials: ● React ● Mocha - Test Framework ● Chai - Assertion Library ● Sinon - Mock Library ● Enzyme - React Test Utility The Stack
  14. 14. 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
  15. 15. describe("test addition", () => { it('simple addition', () => { //Arrange/Act const rtnValue = math.parseEquation('1 + 1'); //Assert expect(rtnValue).to.equal(2); }); });
  16. 16. 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; } }
  17. 17. We connect the digital and physical worlds
  18. 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; } } 0 + “1 ” + “ 1” = “01 1”
  19. 19. 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; } }
  20. 20. What about React?
  21. 21. 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'); }); ...
  22. 22. 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'); }); });
  23. 23. 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> ); }
  24. 24. Building Next Step
  25. 25. We connect the digital and physical worlds it('invalid input', () => { //Arrange/Act const rtnValue = math.parseEquation('1 + one'); //Assert expect(rtnValue).to.be.NaN; });
  26. 26. Are We Finished?
  27. 27. 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
  28. 28. 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
  29. 29. 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; } }
  30. 30. We connect the digital and physical worlds
  31. 31. 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; } }
  32. 32. 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; } }
  33. 33. 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
  34. 34. 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

×