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 Test Driven Development with React

170 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

×