O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

TDD + React

react tdd intro for my talk at ReactJS.IL:
http://www.meetup.com/ReactJS-IL/events/223120671/

  • Seja o primeiro a comentar

TDD + React

  1. 1. React TDD Ynon Perek ynon@tocode.co.il tocode.co.il
  2. 2. Agenda ✤ TDD short intro ✤ The tools ✤ React It: translating old JS to React using TDD ✤ Conclusions & Takeaways
  3. 3. Hello TDD ✤ TDD helps you write easy to test code ✤ Write tests first
  4. 4. TDD + React ✤ React helps us avoid code pitfalls ✤ TDD makes sure we get it right
  5. 5. TDD + React Markup Code Spec
  6. 6. TDD Workflow
  7. 7. The Tools ✤ Webstorm ✤ Webpack ✤ Karma ✤ Mocha / Sinon / Chai ✤ React.addons.TestUtils
  8. 8. TDD Workflow ✤ Run tests from within IDE, while coding ✤ Fix code and build more tests as you go along ✤ Eventually check look & feel in the browser
  9. 9. Demo: Vanilla -> TDD React ✤ Given the square game here:
 http://codepen.io/ynonp/pen/YXrPNj?editors=101 ✤ Let’s write a React version using TDD
  10. 10. Start with a test describe('Game cells', function() { it('renders .square child nodes', function() { var game = TestUtils.renderIntoDocument(<Game cells={9} />); var squares = TestUtils.scryRenderedDOMComponentsWithClass(game, "square"); expect(squares.length).to.eq(9); }); });
  11. 11. Continue to the component render: function () { return ( <div> { _.map(_.range(this.props.cells), this.renderItem)} </div> ) }
  12. 12. React.addons.TestUtils ✤ renderIntoDocument ✤ scry / find functions to find React components and DOM nodes ✤ Simulate functions to simulate DOM events
  13. 13. Simulate and stubs ✤ Let’s randomise the winner ✤ Let’s change the winning square after each click
  14. 14. The problem with random
  15. 15. Stubbing with sinon it('is selected randomly using _.sample', function() { sinon.stub(_, "sample").returns(42); var game = TestUtils.renderIntoDocument(<Game cells={3} />); expect(game.state.winner).to.eq(42); _.sample.restore(); });
  16. 16. Other useful stubs ✤ Stubbing clocks with sinon.fakeTimers ✤ Stubbing ajax with sinon.fakeServer
  17. 17. Other useful stubs ✤ Sub components (rewire) ✤ Demo: Game Timer
  18. 18. Q & A
  19. 19. What we have now ✤ Coding was fun ✤ The tests are useful going forward ✤ Better code
  20. 20. Where To Go From Here ✤ Code example @github:
 https://github.com/ynonp/react-tdd-demo ✤ React Course @tocode:
 https://tocode.co.il/bundles/react-by-example ✤ Thanks For Listening :)

×