I chose Tetris as my somewhat bigger project to practice TDD.
It all started when one friend told me about some company that would ask the aplicants to develop Tetris as the interview process. At first I was “wow! that’s crazy!”, five seconds later I was like “yeah, the board would be a matrix and all the other pieces can be represented as matrices as well, hmm..”. That stuck in my head, and now that DBC is over I actually had time to start it.
The chalenge I set to myself was to develop the game from scratch completely TDDing it. Most of the first day went by reading about the problem. Although I didn’t use their architecture, this Stanford assignment was really useful to know the problem better.
After staring the screen not knowing how to start for a long time, I decided to start with something, didn’t matter if the tests were good or not, I just had to start, we can always delete bad tests later. Tetris pieces, a Tetris game needs Tetris pieces, so I started with that. Turns out that starting with really simple tests woke up my brain and made it start to think, worrying only with the next step, not about what was tested before because the green line says it works :)
Writing tests made the project take a ridiculous amount of time to build, something around 7 days of actual work (stopping in the between for hackathons :D). The nice part is that the project was built consistently, after writing one test you usually have the next one in mind already. And when you get idea, it just seems like a game, write a test, make it pass, write a test, make it pass. Something wrong? Found a bug? No worries, write a test and make it pass! It’s just beautiful.
I feel just really secure with my code, and it actually does not need to be the most beautiful code, because the tests simply wrap the code around and make sure it works. After a lot of coding and having nothing to actually see the game besides some print functions with console.log’s (really useful actually :D) I created a really simple interface to just use the code I had before, which, ofr my surprise, ended up being really REALLY straight forward, simply using the interfaces that my tests forced me to create. Ended up with this first version (let me timetravel with git to get the screenshot):
Which is not impressive in a picture, but actually really impressive when you are the person that worked on it for a week and start to see the blossoms of your work, and having things working way better than what you would expect if started coding the game with no tests. Being able to interact with the game without having to position the pieces with code and console.log results was a really helpful way to find more bugs. Yes, software always have bugs, get used to it.
That’s when the actual fun started I would find a bug interacting with the GUI, write a test that simulated it, see that it was actually failing (yeah!), and then write code to make it pass. That simple. After that, open the GUI again and realize everything still works as before and the bug was gone. Mind blown.
The notion of finding a bug, writing a test for it and making sure it never comes back is smart. It makes programming more fun. After changing a huge portion of your code, you are still confident that your code works when you see the green line saying SUCCESS. The project ended up with 66 tests, for which I used Jasmine and Karma.
No fear of refactoring. Trust in your code. What else can you ask for? A nice UI you might say.. okay, after making the game work, just poked a bit more with the CSS, discovered that each piece should have it’s own color, found the original colors used on the Atari version of the game and we were good to go. Setting the color of the pieces actually required a bit of refactoring, which was fine only because I had tests! Thank you tests :D
Well the resulting game is the one that you can see in the image bellow, there are still a lot of things that would be good to do, like add some animations, display the next piece, show some kind of score, but hey, the MVP is ready, the game is playable. And you can play it here.
The layout is not the best, but I really like it, and I’m actually proud of the code! Let me know if you find any bugs. The project Github page is here.
The sad part is that even though I programmed it, I’m still really bad playing Tetris :P