Test-Driven Development

(Fun fact, I looked up capitalization rules for hyphenated words in titles. I was going to capitalize Driven no matter what since it is the first D in TDD, but I thought it would be interesting to know the proper grammar)

I feel like testing in general and test-driven development in particular might be a very polarizing subject for some. Maybe being new to the field helps me have a much more blasé attitude toward the topic. Maybe, for once, my naivety is working in my favor. Or perhaps I am strolling blindly down the biggest primrose path in programming. Only time will tell!

Today I wrote my first ever tests. I even started with a blank slate of a program and made sure that every test fails the first time around. Some of them continue to fail after that first time. Eventually I get them to pass. I’m even up to four tests! It has been an interesting process.

Like everything else in learning to program, the first step is the most daunting. There are so many choices. And, once again, my knowledge and ability isn’t really up to evaluating the choices… at all. So, I turned to Google. Having just purchased WebStorm, I thought it would be a good idea to see what integrates well there. That lead me to some WebStorm documentation (here) that narrowed my choices down. Kind of. It now looked like I needed to pick a test runner AND a unit testing framework. Well, ok. On the list for test runners are:

When I was looking at all this, last night, all of these names were new to me. I dug further into the docs and it looked like Karma had the most extensive write-up, so I chose it. First step to installation was installing node.js, because everything else from here on out would be installed using npm, the node package manager. From there you get some choices. You cna use WebStorm’s GUI to select packages from a list or go straight for the command line. It’s the same process for the frameworks, here are the choices:

I had actually heard of (and did surface research on) both QUnit and Jasmine before, so I thought I would try those out. I spent a while typing away on the command line and getting everything setup and then the moment of truth… how in the world do I actually write my tests? It was pretty late by the time I got all of this accomplished so I decided to get a fresh start in the morning.

What really happened was, I had a long talk with my friend Chris about testing and he even showed me how he got it working in Visual Studio. We went over some tests and the ideas of writing an initially failing test and some of the philosophy behind TDD. In some ways, he is almost as new to testing as I am, so it is interesting to get a grizzled veteran’s take on the whole thing. When that was over, it was really bedtime, and my brain was fried anyway, so off to dreamland I went.

This morning I cleaned out my project and started from fresh. I looked at the WebStorm docs some more and looked at other testing docs, specifically Mocha’s. It actually looked pretty simple to set up, and it turns out I can use it without a test runner, so for the sake of actually getting something done, I gave it a shot. At first, it was pretty hairy. There are still pieces of the puzzle missing for me, so I just copied chunks of the tutorial to get things working. I got tests working to some degree, but I kept (and continue to keep) banging up against the edges of both my comfort zone and my actual knowledge base.

I’m not entirely happy with the details of how I have mocha running, but for now, I am prioritizing having it working over having it working just right. Here is the fruits of my labor:

mochaThe tests are on the top and the result on the bottom. Four passing tests! I really have no idea if my tests are too simple or too complex or if I am using the correct syntax, or a million other things that point out my already completely obvious newness to programming. I am learning to get over the nervousness about exposing my ignorance. I will sometimes post stupid example or ask stupid questions, and I have to be ok with that.

In my next post, I will dive more into the details of how I got this all working and the steps I took once I had it working to jump into the TDD way of doing things. As always, I’m always happy to answer questions or explain specific nuances of my process. Thanks for taking the time to read this and, keep coding!



This should be a short update. A while back I talked about having a backup in case cloud9 was down or I couldn’t connect to the internet. Those two conditions actually have pretty big implications. If cloud9 is down and I can connect, I’d like to use another cloud or internet based ide so I can work on my chromebook. If I can’t get connected, I think my chromebook becomes an expensive (although not that expensive) paperweight. In that case, I can look at more traditional desktop IDEs.

There are a few big-name choices for working on JavaScript and other web focused programming. Visual Studio, WebStorm and Sublime are the ones that I have the most awareness of. NetBeans and Eclipse are in my peripheral vision and I am sure there is a slew of others. I have installed Visual Studio Community (I think that is how it is identified), but I haven’t done much more than open it yet. Upside, it’s free. Probably a good place to start investigating. However, I chose to take a run at JetBrains offering, WebStorm.

So far I like it. I may even love it, but I am still in the awkward learning-how-to-make-things-go phase. The hints and warnings are a lot more detailed and helpful (bordering on pushy). It plays nicely with GitHub, which isn’t a surprise but is still nice to confirm.  I knew I had some slightly sloppy code and sure enough,WebStorm pointed that out for me and offered to turn some of my lazier declarations into inline declarations. That’s an interesting feeling. I hope it makes me more aware instead of more blasé. I’ll go into more detail later, with before-and-after examples and other hints I have already picked up.

It’s a good product. I am using the 30-day free trial. I’m already tempted to just spend the $49, but I will restrain myself until the trial is up.  It is definitely worth a look.

It’s the little things.

One of the things I had been hung up on was how to move the checker into the lowest available spot in a column. I’d taken a shot at writing a function to do it. I would pass it the column to search and then loop through the values, using getElementById to look for an empty cell. It didn’t work. I’m not sure why it didn’t work. I tweaked it and rewrote it and tweaked it some more. I could hardcode values in and it would do what I wanted it to. Great.

Eventually I enlisted the help of one of my mentors, Chris Gomez. We used Cloud9’s collaboration tools to dig around in my code and run little tests. Finally, I found myself in the in the dev console of firefox, setting breakpoints and watching expressions. Without those tools, I don’t know how much longer it would have taken for me to find the problem. I was doing too much work. I had one too many steps. Luckily I could see that one of the expressions was evaluating to ’empty’. That was exactly what I was looking for. I think took that expression and tried to do more work on it, which ended up giving me a null and killing the loop.

I had what I needed. I cleaned up the function. Manually tested it a half a dozen times, and gave a spirited “Hell yes!” to my empty room. Made my day.


An introspective interlude

Getting a late start tonight. In the future I intend to utilize my downtime a little better and take advantage of the ability to load some articles up for publishing in the future! In a minute I will talk a little about the details of writing my backgammon game, but something happened to me today that made me take stock of some of my programming behaviors.

For a very brief time, and through no fault of their own, Cloud9’s workspaces were unavailable. It was somewhere around 30 minutes and I was hardly even inconvenienced. I was wondering why a certain piece of my code worked while another piece I was hoping to use as a more elegant solution to the same problem didn’t. Not pressing, but a bit of a shock.

“But you use source control, why not just pull down the code and look at it somewhere else?” an astute reader might ask. I do, and I could have… except I hadn’t pushed my code in a day or so. There are certainly a couple of lessons to be learned here, for me. In a wider sense, I need to have a backup plan. What that means specifically, is first, to keep my repository (more) up to date. With my code available, I would have been able to pop open another IDE and keep coding. To that end, I will be investigating the other cloud IDEs as backups. On the PC I will probably just rely on Visual Studio.

(I want to say, “lesson learned,” but at the time of this writing, I still haven’t pushed my changes up.)

On to code. A bit of (hopefully brief) background first. The exercises in the Head First JavaScript book have certain quirks for ease of publishing. They throw the JavaScript inside a script
wrapper in the HTML (and use inline CSS). I figured it wouldn’t be much more difficult to separate the css and JS into their own files and link them in the HTML. It generally wasn’t any more difficult. The other thing I wanted to do was set up a simple “webpage” that would hold the exercises and any of my projects. This actually did cause a little more cognitive overhead.

At first I was keeping it all on one page and all the JavaScript on one .js file. There came a point where I felt that was too cluttered and so I pulled my backgammon stuff onto its own page and the JavaScript into its own file. Not a completely clean break, all of my CSS is in one place. It works. That’s probably the best thing I can say about it at this point.

I am aware that most of what I am doing at these stages is “ugly” code. There are probably better, cleaner and more efficient ways to do nearly everything I am attempting to do. I don’t know those things yet, so I work with what I have. I am under no illusions that I am writing masterpiece software. I even had the idea that I would do this first with vanilla JavaScript and then dive into things like Bootstrap and jQuery for a total rewrite. I have already trashed that plan and started to incorporate jQuery. I am just not sure I see the value in making things harder for me than they need to be.

Next time, I’ll show you some of my code and talk about the reasons I made the decisions I made.

Staying on the branching path.

Looking through book after book after book, I had no idea how to evaluate their potential usefulness. I didn’t know what aspects were going to be important to me and what methods would work best for me. After I left the bookstore, I felt a little discouraged and overwhelmed. All the work I had done, all the progress I felt I had made, and I still felt like I was at square one. How could I keep moving forward? What was my next step?

I woke up feeling a lot more hopeful and decided to jump into some of the more “advanced” topics at Codecademy. The lessons didn’t always make sense, but I figured some of the knowledge would trickle in and, more importantly, I was just getting familiar with the entire process. Familiarity felt like an important goal. I thought back to my friend’s advice, “… start there.” I had started there, right? I mean, here I was, learning, but was that really starting?

Up to this point, I had done all my work inside the Codecademy lessons. It really is an incredible site, with a built in IDE and a test window. Maybe, however, it was time I started writing code in my own “space.” It was time to find an IDE that I could use, and wow are there a lot to choose from. Off the top of my head, there are: Visual Studio Community, JetBrain’s WebStorm, Sublime Text, and Eclipse, and that’s just the ones I knew about before I really started looking. I settled on none of these, but that was only because I had an additional requirement that I hadn’t given any though to until that moment.

I do most of my work from a desktop PC running some flavor of windows. I have no special preference for them, and would gladly try any of those IDEs from the list above. But occasionally, I am away from my desk, and that means I am working on a Chromebook. Once again with help from my friends, I discovered the world of cloud IDEs. It turns out there is actually a lot of choice here too. I quickly chose two tools in this category and haven’t spent much, if any, time examining the other options. The two I latched onto are Cloud9 and JSFiddle. I also jumped into one more piece of software, even though I didn’t then understand why I needed it, GitHub. There’s a lot to say about these tools, and some day I will. For now it’s enough to say they work very well.

I spent the next week or so reviewing my lessons and trying to apply them in new and creative ways. Patching code together helped me push against the constraints of my knowledge, and there were many times I was running a few steps ahead of reasonable. I made a lot of mistakes. Logical mistakes. Syntactical mistakes. Spelling mistakes. Creative mistakes. I wish I could say I learned from every mistake, but I did learn from enough of them. Most importantly, I started to understand what I needed. What would keep me motivated and progressing.

So, back to the bookstore I went, and this time I was confident enough to buy a couple of books to take home with me. “Head First JavaScript Programming” by Freeman & Robson, and “Sams Teach Yourself jQuery and JavaScript”. From skimming through the Head First book, I saw that it had some projects to build. That appealed to me, as well as the less formal writing style. Having now progressed through the book, I can say that it does a really good job of building concepts and reinforcing the knowledge at every step. Like the software tools above, there is a lot to say about both of these books, and I hope I will get a chance to review them in the future. This is also the first time I have even mentioned jQuery, so maybe it seems a bit strange to jump right into buying a book about it, but I knew it was time to explore the world of JavaScript libraries in general and jQuery specifically.

Next time, I’ll talk about putting all of this together and actually “getting started”!