Fernando Daciuk - The magic world of tests with Jest
•
1 like•222 views
Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr Desenvolvedor web desde 2002, trabalha como Full Stack developer, utilizando JavaScript em praticamente todos os seus projetos, boa parte deles com React e Node.js. Tem como hobby ser professor e escrever para alguns blogs de tecnologia. https://github.com/fdaciuk @fdaciuk - Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria - Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform - Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter - Afterparty: An English Thing
Recommended
More Related Content
Similar to Fernando Daciuk - The magic world of tests with Jest
Similar to Fernando Daciuk - The magic world of tests with Jest (20)
More from React Conf Brasil
More from React Conf Brasil (10)
Recently uploaded
Recently uploaded (20)
Fernando Daciuk - The magic world of tests with Jest
- 1. The magic world of tests with Jest
- 2. Fernando Daciuk $ npm install fdaciuk
- 3. Fernando Daciuk $ npm install fdaciuk
- 12. The magic world of tests with Jest
- 14. Do you know TDD?
- 17. TDD is a mindset
- 18. You do TDD
- 19. You do TDD all the time
- 20. TDD how to do?
- 21. RED
- 22. RED write a test that fails
- 24. GREEN
- 25. GREEN write an implementation to pass the failed test
- 28. BLUE
- 29. BLUE Improve your code (refactory)
- 31. BLUE But don’t make any new feature
- 32. REPEAT
- 33. REPEAT To each new feature
- 34. TDD That is how we do
- 35. TDD How am I supposed to do all the time?
- 36. BUTTON
- 37. I need a header...
- 38. But I don’t have one.
- 39. RED It is the state. A test that fails.
- 41. Now I have a header!
- 42. GREEN It is the state. A simple implementation to pass the test.
- 43. Do I need to improve something?
- 44. BLUE It is the state. Refactor, if it is needed.
- 46. REPEAT
- 47. Now I need content on my header
- 48. RED It is the state. A test that fails.
- 51. GREEN It is the state. A simple implementation to pass the test.
- 52. Do I need to improve something?
- 53. BLUE It is the state. Refactor, if it is needed.
- 54. I don’t think so!
- 55. REPEAT
- 56. REPEAT until everything is done
- 57. TDD That is
- 59. Just remember:
- 60. TDD is a mindset
- 61. use it to write automated tests
- 62. why should I write automated tests?
- 63. Regression Tests will be automatically executed
- 64. Tests may be read as a documentation
- 65. how to write automated tests?
- 66. do I need any special tool?
- 68. installation
- 69. test() - test interface
- 70. expect() - assertion interface
- 71. a complete test
- 72. npm script to run tests
- 73. run tests
- 76. but first you must know...
- 77. ...how your application will work
- 79. happy path
- 80. unhappy path
- 82. now we are ready to start!
- 83. let’s implement the Array.prototype.map method with TDD
- 86. happy path functional descriptive map must be a function #1
- 87. happy path functional descriptive map must receive two arguments: an array and a function #2
- 88. happy path functional descriptive map must always return a new array with same length of the array passed on the first argument #3
- 89. happy path functional descriptive the function on second argument must be executed for all items in the array #4
- 90. happy path functional descriptive when the function (2nd argument) is called, pass by argument the array item that is being iterated #5
- 91. happy path functional descriptive the return of the function will be used to transform the array item in a new one #6
- 93. unhappy path functional descriptive if 2nd argument is not passed, return a new array with same data of array on 1st argument #1
- 94. unhappy path functional descriptive if 1st argument is not an array, throw a TypeError #2
- 95. unhappy path functional descriptive if 2nd is not a function or undefined, throw a TypeError #3
- 96. installation
- 97. create files - map.js - map.test.js
- 98. create files - map.js - map.spec.js
- 99. RED write a test that fails
- 100. map.test.js
- 103. GREEN
- 104. GREEN write an implementation to pass the failed test
- 105. GREEN use baby steps
- 106. map.js
- 108. BLUE
- 109. BLUE Improve your code (refactory)
- 110. BLUE Clean your code
- 111. BLUE But don’t make any new feature
- 112. map.js
- 113. REPEAT
- 114. RED
- 115. RED write a test that fails
- 116. happy path functional descriptive map must receive two arguments: an array and a function #2
- 117. happy path functional descriptive map must always return a new array with same length of the array passed on the first argument #3
- 118. map.test.js
- 120. GREEN
- 121. GREEN write an implementation to pass the failed test
- 123. GREEN use baby steps
- 124. map.js
- 125. I know you’re judging me
- 127. BLUE
- 128. BLUE Improve your code (refactory)
- 129. BLUE Clean your code
- 130. BLUE But don’t make any new feature
- 131. map.js
- 132. please don’t leave!
- 133. REPEAT
- 134. RED
- 135. map.test.js
- 137. GREEN
- 138. map.js
- 140. BLUE
- 141. map.js
- 142. REPEAT
- 143. RED
- 144. map.test.js
- 146. GREEN
- 147. map.js
- 148. map.js
- 150. BLUE
- 151. map.js
- 152. REPEAT
- 153. happy path functional descriptive the function on second argument must be executed for all items in the array #4
- 154. happy path functional descriptive when the function (2nd argument) is called, pass by argument the array item that is being iterated #5
- 155. happy path functional descriptive the return of the function will be used to transform the array item in a new one #6
- 156. map.test.js
- 158. map.js
- 160. map.js
- 161. map.test.js
- 163. home work: Implement tests for unhappy path
- 164. we saw: regression and unit tests
- 165. we saw: tests are documentation
- 166. but there is a lot more
- 167. see other Array methods implemented with tests: /da2k/curso-reactjs-ninja examples/m02/jest-in-practice
- 170. learn more About Jest in: jest-everywhere.now.sh
- 171. study tests
- 172. integration tests
- 173. E2E (end to end) tests
- 174. learn TDD
- 175. try it in personal projects
- 176. share knowledge
- 177. get involved
- 181. Fernando Daciuk $ npm install fdaciuk Thanks! /fdaciuk/talks