test driving (tdd) a react.js ui component with jasmine
TRANSCRIPT
OO= Modelling Real World
…And soon
Classic Debate
OO Gets A Bad Name
X
O O + F P + T D DT H I S W O R K S H O P I S A B O U T …
A G E N D A - 4 5 M I N S
• Basic Setup (WebStorm, NPM, Jasmine, Karma, …)
• Code Walk Thru of Test Driving a Comments react component
• Next Steps…
W E P L A N T O B U I L D T H I S …
Add a Test
Run the Test
Make a little change
Run the Test
Refactor
Fail
Pass
Fail
Pass
TDD Rhythm Test, Code, Refactor
B A S I C S E T U P
• git clone [email protected]:nashjain/React-Karma-Jasmine-Webpack-Babel-ES6-JS.git
• cd React-Karma-Jasmine-Webpack-Babel-ES6-JS
• npm update
• npm run test
• should see 32 tests pass
• Open the project in WebStorm
• Right click on karma.conf.js and select “Run karma.conf.js”
• should see 32 tests pass
Commercial Break!
Copyright © 2012, AgileFAQs. All Rights
O U R P L U G I N ’ S F E AT U R E S
• Should be able to accept a comments json and display the comments
• Should display most popular (with max likes) comments on top
• If 2 comments have same likes, then the most recent comment on top
• Private comments should be displayed only to the author of the comment
• Others should be able to like your comment
• and so on…
R E F E R E N C E S
• https://facebook.github.io/react/
• http://karma-runner.github.io/
• http://webpack.github.io/
• http://jasmine.github.io/edge/introduction.html
• https://github.com/airbnb/enzyme
• https://github.com/jasmine/jasmine-ajax
