Skip to main content

JavaScript Tetris part II – some tests

Here’s a little update on the JavaScript front. I’ve been busy working on Tetris this weekend. Lots of new stuff to learn and lots to do. First of all I got a list of issues from Sebastiaan Janssen that needed fixing (thanks, that was exactly the kind of feedback I was hoping for). I’ve been playing around with unit testing JavaScript with QUnit. Of course my existing code wasn’t really testable so I had to refactor things a bit too. And I tried to test-drive a couple of small stories.

I’m not going to list all the code I wrote in my posts anymore. It makes for pretty dull reading and you can download the code and read it at your own leisure. I’m sure the code is a lot more readable in your editor than on my blog anyway. I’ll just list a couple of interesting pieces and try to work out more of the concepts in my blog posts.

First of all here are the issues Sebastiaan wanted me to fix:

  • I’m using the JavaScript const keyword but IE doesn’t support this.
  • Setting css styles can be done a bit cleaner.
  • JavaScript in the .html file
  • You can’t use arrow keys to move blocks. This is a problem on laptop keyboards without a numeric keypad.

The first three were easy to fix, I added a user story for the fourth issue. As this was the only user story that came from a potential user I put it right at the top of my backlog.


I want to start test-driving things, QUnit is a nice new toy that I want to start using. But unfortunately my code is a bit of a ball of mud. Luckily it’s not big so we can’t call it an antipattern yet. But it’s a good time to start separating some concerns.

I want to pull out pieces of functionality and put them in their own objects. Something like a model view presenter architecture would be nice with a TetrisView object to encapsulate drawing and reacting to user input, a TetrisGame object to handle game state and a TetrisPresenter to tie the two together.

This is what the tests look like,

   1: module('tetrisGame');
   3: test('when initializing', function() {
   4:     var game = new TetrisGame();
   6:     equals(18, game.yPos, 'block starts on the right y position.');
   7:     equals(5, game.xPos, 'block starts on the right x position.');
   8: });
  10: test('when running the game loop', function() {
  11:     var game = new TetrisGame();
  13:     game.gameLoop();
  15:     equals(17, game.yPos, 'block moves down.');
  16:     equals(5, game.xPos, 'block stays in the same horizontal position.')
  17: });
  19: test('when moving left', function() {
  20:     var game = new TetrisGame();
  22:     game.moveLeft();
  24:     equals(4, game.xPos, 'block moves left');
  25:     equals(18, game.yPos, 'block stays at the same height');
  26: });
  28: // etc...

I’m not yet 100% happy with them. I like how QUnit pushes you to a context-specification-ish test style. But it’s easy to assert too much in one test which is a bit of a test-smell to me.

I like how easy it is to build stub and mock objects in a dynamic language. I played a bit with these in tetrispresentertests.js if you want to have a look.

Tell me a story

The iteration backlog for this iteration (today) looks like this.

  • The user can steer blocks with the arrow keys.
  • Blocks can’t move outside of the playing field.
  • When a block reaches the bottom of the playing field a new block should appear at the top

Now that I’ve got game logic, presentation logic and the view separated out nicely it’s easy to add some tests for these stories and implement them. I’ll just let the code speak for itself.

tetris0.02.rar (12.36 kb)


Popular posts from this blog

Using xUnit.Net with .Net 4.0

I’ve been using xUnit.Net for a while now. It’s just a tiny bit cleaner and slightly less abrasive than other .Net unit testing frameworks. Leaving out unnecessary stuff like [TestFixture] and shortening Assert.AreEqual to the equally clear but shorter Assert.Equal don’t seem like big improvements but when you type them several times a day tiny improvements start to add up. I also like the use of the [Fact] attribute instead of [Test]. It shifts the focus from testing to defining behavior. So how do we get all this goodness working with the Visual Studio 2010 beta?

Running a Git repository on Ubuntu using Gitosis

20I’ve been using Git for a couple of small projects that I’ve been hosting on but version control for my bigger ‘secret’ projects still runs on a windows machine with visual svn server.Now that I’m starting to use Mono for a couple of projects so I’m playing with linux more. Last week I decided to try to try out gitosis on an ubuntu server. I found out it’s pretty easy to use when you know your way around git but for a noob like me some things weren’t immediately clear. Eventually I solved most problems I ran into, so I decided to write up the steps I took to install gitosis on ubuntu 10.04

Android development resource links

I've been playing with the Android SDK and I have a growing list of bookmarks to Android dev resources for my own use. I thought the best place to keep them would be here on my blog. That way other people can benefit too. I'll keep updating this list so feel free to add suggestions in the comments.