TDD Exercies

Michelle D'Souza michelled33 at gmail.com
Thu Nov 10 15:29:02 UTC 2011


Hi everyone,

Yesterday's exercise in TDD was a lot of fun and very informative. One of the things I found most useful was the simple example of using the Infusion framework that we came out with. Anastasia encouraged me to write down the process that we went through so that people who were not able to make it could benefit, so here you go. :)


We started with the idea that we would build a calculator using TDD. Asking Joanna for her input, we determined that the first thing we'd build was the ability to enter numbers. 

This led to our first test which checked for the existence of a calculator: 
https://github.com/yzen/TDD-Framework-example/blob/master/test.js#L8-11

We wrote and ran the test which of course failed and then we implemented the code. The implementation was merely a defaults block with the appropriate grade name:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L3-4

and the markup to go with it: 
https://github.com/yzen/TDD-Framework-example/blob/master/test.html#L22


Writing our second test involved determining a little more about the shape of the component. We decided that we would have a model that was auto bound to 'line1' in the DOM. 
https://github.com/yzen/TDD-Framework-example/blob/master/test.js#L13-18

Implementing this involved adding the selector to the defaults block:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L5-6

adding a model and prototree: 
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L14-16

setting render on init:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L29

and adding to the markup:
https://github.com/yzen/TDD-Framework-example/blob/master/test.html#L23


At this point we discussed the workflow we were trying to implement - put in a number, click add, put in another number, click equals and see the result. From this we decided that our third test would be to check for the appropriate buttons:
https://github.com/yzen/TDD-Framework-example/blob/master/test.js#L20-24

The implementation was two more selectors:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L7-8

strings and an addition to the prototree to render them:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L17-26

and markup additions:
https://github.com/yzen/TDD-Framework-example/blob/master/test.html#L24-25


Our last test checked the workflow that I described above. We had quite a bit of conversation while building this test and we ended up writing it to test both the user interaction with the page as well as the underlying model changes: 
https://github.com/yzen/TDD-Framework-example/blob/master/test.js#L26-47

Implementation required events: 
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L10-13

listeners:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L28

and both a pre and post init function:
https://github.com/yzen/TDD-Framework-example/blob/master/calc.js#L30-55


We ran out of time to continue our implementation and refactor and improve the code but we did end up with a good structure in place. One of our next steps would have been to build a demo of the calculator. 

Hope this is useful. Next week we are having a javascript and jQuery primer - feel free to join us. 

Michelle

------------------------------------------------------------------------
Michelle D'Souza
Senior Inclusive Developer
Inclusive Design Research Centre, OCAD University




On 2011-11-09, at 4:24 PM, Zenevich, Yura wrote:

> Hello everyone, 
> 
> Here's the link to the GIT repo with the code that we wrote during our text driven development exercise:
> https://github.com/yzen/TDD-Framework-example
> 
> Regards,
> 
> Yura
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20111110/d613def8/attachment.html>


More information about the fluid-work mailing list