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 - [email protected] > To unsubscribe, change settings or access archives, > see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
_______________________________________________________ fluid-work mailing list - [email protected] To unsubscribe, change settings or access archives, see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
