test driving (tdd) a react.js ui component with jasmine

Naresh Jain @nashjain

http://nareshjain.com

Test Driving React.js

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 git@github.com: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

Naresh Jain @nashjain

http://nareshjain.com

Thank you!