Test Driving (TDD) a React.js UI Component with Jasmine
-
Upload
naresh-jain -
Category
Software
-
view
1.114 -
download
0
Transcript of Test Driving (TDD) a React.js UI Component with Jasmine
![Page 2: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/2.jpg)
OO= Modelling Real World
![Page 3: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/3.jpg)
…And soon
![Page 4: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/4.jpg)
![Page 5: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/5.jpg)
Classic Debate
![Page 6: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/6.jpg)
OO Gets A Bad Name
X
![Page 7: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/7.jpg)
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 …
![Page 8: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/8.jpg)
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…
![Page 9: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/9.jpg)
W E P L A N T O B U I L D T H I S …
![Page 10: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/10.jpg)
Add a Test
Run the Test
Make a little change
Run the Test
Refactor
Fail
Pass
Fail
Pass
TDD Rhythm Test, Code, Refactor
![Page 11: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/11.jpg)
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
![Page 12: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/12.jpg)
Commercial Break!
![Page 13: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/13.jpg)
Copyright © 2012, AgileFAQs. All Rights
![Page 14: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/14.jpg)
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…
![Page 15: Test Driving (TDD) a React.js UI Component with Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022050614/58a194601a28ab97118b5489/html5/thumbnails/15.jpg)
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