Monthly Archives: May 2012

Code Code Code …. Review Review Review

Code freeze for the 0.5 release of Popcorn Maker/Butter is coming up Tuesday and we have a lot to do before we close the code merging flood gates. In addition to this week being 1 day shorter for most of us because of Victoria day, we also had people venturing off to a conference downtown Thursday making things even tighter schedule wise. Needless to say we have needed to pick up the load to nth level to make up for all the lost man power (or maybe it’s finger power?)!

This week I finished off a few things. One was adding a test harness system for Butter. Now we can have one file that will run all of our QUnit based tests all at once, helping make testing much easier. It will land Monday since it’s now the weekend and whatnot.

I also finished updating the the cornfield tests. They now are use the proper updated methods and on top of that fixing them exposed a few problems with our validation for passed in data. On top of that they are just plain better than they were before. A lot of places in the tests previous used timeouts to call QUnit’s start() method to QUnit know it could run each assertion which could cause potential issues. They now follow a “cascading” style if you will that will have subsequent calls to browserid to happen withing the callback function of the previous call, allowing us to know that the previous work has finished preventing any asynchronous issues. For example:

asyncTest("Async API", 7, function() {
 var foundProject = false;

 butter.cornfield.list( function( res ){
 ok(res, "The project list response has data" );
  equal( res.error, "okay", "Project list status is \"okay\"" );
  ok( res.projects, "There is a list of projects" );

  for( i = 0, len = res.projects.length; i < len; i++ ){
   if( res.projects[ i ].name === filename ){
    foundProject = true;
    break;
   }
  }

  equal( false, foundProject, filename + " is not present in the projects list" );

  butter.cornfield.load( filename, function( res ){
   deepEqual( res, { error: "project not found" }, "The project load response is project not found" );

   butter.cornfield.save(filename, stringedData, function(res){
    equal( res.error, "okay", "The project save response is okay" );

    filename = res.project._id;

    butter.cornfield.load(filename, function(res){
     deepEqual( JSON.parse(res.project), data.data, "The project is the same" );

     start();
    });
   });
  });
 });
});

With this setup we know start won’t be called until our servers has completed our requests with browserid and our database holding project information.

On top of that I took over the manual tests that we are making. These tests contain a list of instructions for people to run and what they expected outcome should be if they follow those instructions. They can then report if the expected results were achieved or not. Eventually these will be linked for a database of some sort where we can monitor the results people will be reporting. Most of the real issues that we had were because the tests themselves were being loaded into an iframe. This caused issues with the sources provided for various plugins and other scripts because they were relative links in our config file. I also realized we were missing some vendor prefixed versions of linear-gradient on the index.html page, causing the links for the manual tests not to appear in browsers that weren’t FF, making it look like nothing loaded at all.

On top of all this there were many reviews. While reviews require that the person doing the reviews takes their time looking over it and is a very important task, it also means that someone has sort of gained enough experience in the project that they can be “trusted” so to speak which is a nice sign that I am progressing a lot within the Butter and Popcorn projects.

Other Cool Stuff
We also have basically a complete rewrite to our flash players in the works. David Humphrey started the work to basically mimic the HTMLMediaElement spec and early testing is showing it’s going to work quite awesome.

We also have the Django front end coming up for the 0.5 release, slated to be available on June 15th. This will create a new template management system and bring a lot of new cool stuff to the project.

0.5 is slated to be about 200 tickets! Yikes.

Can’t wait for the rest 🙂

Advertisements

OCE Discovery and more Popcorn popping

This week has been a shorter work week for me in the typical sense. I was asked to go help represent Seneca College down at OCE Discovery 12, a conference held by Ontario Centres of Excellence aimed at bringing together key players from industry, academia, government, the investment community as well as entrepreneurs and students to pursue collaboration opportunities.

This event was very interesting for me. It was a great opportunity to work on my presentation skills, although not in the typical sense. One thing that was said to us back at the beginning of the summer was that we need to be able to talk about what we are working on to anyone at anytime; Be able to describe our project on a high level so that anyone could understand it. I spoke to people of varying knowledge levels: from nothing all the way to other programmers from other schools, such as Niagara Research.

However, I feel that something like Popcorn is hard to show off at that kind of event. All we have are computer monitors showing videos on screen. In particular we were demoing our open source work done in conjunction with Native Earth and that particular demo is not particularly eye caching. It would have been better to show off some of more flashier demos that are out there on the net or maybe make one ourselves. What might have been even better would be to have multiple computers setup allowing people to play with Popcorn Maker. That is something more people can understand and the fact that they would be creating something themselves would make it a more lasting experience.

Still, there was a lot of cool things on display, including but not limited to: the U of T electric car that was used as part of a race across Australia and an app that was able to read your brains waves measuring focus levels that got you to controls the physics of a game. Going to this kind f event has definitely given me more thoughts about the kinds of things I want to do in the future. I never would have thought this 3 months ago but perhaps the career of a tech evangelist is in my future!

    Oh Yeah, I Did Some Coding Too

This week consisted of more fixes for butters unit testing and many code reviews. We also spent a lot of time discussing key aspects of the Django app that is going to make its way into Popcorn Maker soon along with new UI/UX stuff. While I am learning a lot more when it comes to JavaScript, I’m still very humble in my skills levels. Projects like these keep you humble because the code can be very hard to follow and learn. I’m sure if someone else was handling my tickets it would take them 1/4 of the time but that’s why we are all here; to learn.

I’m looking forward to finishing this stuff up so I can switch gears back to UI testing now that we have additional tools available, such as David Humphrey’s addition of Firefox’s “special powers” chrome access JavaScript. Going to be awesome!

Implementing Testing for Popcorn Maker

For the foreseeable future my main focus is going to be beefing up the testing system in place for Popcorn Maker. As it stands Popcorn Maker doesn’t have the same sort of testing environment and infrastructure that Popcorn.js has and this needs to be changed. Some basic QUnit based tests are present however they are never run and most are severely out dated, basing themselves off of an older version of the Butter SDK behind all of this. This is due to the culture the project currently has and my goal is to be apart of the change behind it.

All the Areas that Need Testing

  • Comm
  • Dialog
  • EventEditor
  • Cornfield
  • PluginManager
  • Timeline
  • TrackEditor
  • UI Testing
  • Test Harness so all the above testing can be run easily all at once

Needless to say, it’s a long list. A lot of it involves areas of the Butter SDK that I don’t know much about. On top of that there doesn’t seem to this one framework that can handle everything we want to do on the UI Testing side all nice and neatly like QUnit does for everything else. I have played around with Selenium a lot and that proved to be quite the nightmare. I’m still not 100% certain if it’s what we want to use because there are definitely elements to it that work and a lot that seemingly don’t. Right now I’m playing around with two frameworks, called PhantomJS and CasperJS, which CasperJS is built on top of PhantomJS to provide additional functionality.

As it stands, CasperJS doesn’t appear to allow me to send key events in any way to the page it interacts with. This is bad because it basically means I can’t run any of our tests that rely on some sort of key press from the user. On top of that there doesn’t appear to be anything available to test dragging and dropping of elements on a page. Once again, this is also a problem because we wouldn’t be able to test moving things like track events, track containers, track handles, events onto a track and anything else I haven’t included.

Thusfar I have only been able to have these run on the command line. I’m sure there is some sort of way that to integrate all of this together, so I went and asked their google group to see if someone more knowledgeable can assist me. In the mean time, here is some of what I have come up with thusfar:


casper.test.comment( "Testing iFrame Dialog Closing with Esc Key - Popcorn Maker" );

var p = require("webpage").create,
    t = Date.now();

casper.start( "http://localhost:8888/templates/test.html", function(){

  t = Date.now() - t;

  console.log( "Loading Time: " + t + "msec" );

  // Ensure template has loaded
  this.waitUntilVisible( "#butter-header-new", function(){

    // Confirm button exists
    this.test.assertExists( "#butter-header-new", "The button did load" );

    // Move mouse over button
    this.mouse.move( "#butter-header-new" );
    // Click zee button
    this.click( "#butter-header-new" );

  });

});

casper.then( function(){

  // Our iFrames don't have IDs, but all use the same class and this class is
  // only ever present in the DOM once
  this.test.assertExists( "iframe[class=' fade-in']", "The iFrame Loaded" );

});

// Run the whole test suite (all the above)
casper.run( function(){

  // Sends a test done message when all the of the above has finished running
  this.test.done();
  this.test.renderResults( true, 0, "iframe_esc_close.xml" );

});

This set of tests opens our testing template and then wait’s for our content to load. Once it has, it ensures an element with the id butter-header-new is present in the DOM. It then moves the mouse of that element, and clicks it. After the click has finished it will check if an iFrame with the class name fade-in is present. All of our iFrame dialogs use this class name and there will only ever be one iFrame dialog open at one time.

One of the interesting things that is run after all the tests are done is Casper.renderResults. What it does is send the results of our testing to the file I specified in an XUnit formatted XML file. From what I read we might be able to hook this into another continuous integration service such as Jenkins.

Here’s what running that code looks like:

What’s next?
Hopefully we can sort this out sooner rather than later. Once we can solve exactly what frameworks/technologies we will use to write out tests we can actually go about and well, write them! Hopefully my next post will include some of that 🙂

Until then!

My Experiences at Mozilla Hot Hacks: Two Awesome Days

This past weekend myself along with many of the Popcorn.js team in Toronto – Chris DeCairos, Bobby Richter, Dave Seifried, Jon Buckley, Scott Downe and Kate Hudson – were apart of the Mozilla event Hot Hacks, which is apart of the Living Docs Project from Mozilla. The idea behind Hot Hacks is bringing developers on the web together with documentary film makers to rapidly prototype web documentaries and make some awesome experiences.

Unlike my colleagues I was assigned the task of being a floater amongst all the projects. I went where help was needed and did what I could. This led me to helping three total projects over the two days: Following Wise Men, Turcot Interchange and Immigrant Nation. It was a unique experience because I got to involve myself with multiple filmmakers and experience their ideas on making their documentaries interactive on the web. Admittedly, some of the contributions were smaller than others but it was fun none the less.

These kinds of events are great because I feel they have helped me gain new ways of looking at solving problems. When you are presented with designing and then implementing something unique and interesting in such a short time frame you quickly learn how to work and accomplish goals like these in new ways just as unique as the projects themselves. At the same time I know I definitely couldn’t have taken on the role of being a main developer on one of these teams. I’m no where near the capability of pulling off some of the awesome stuff seen there during two days. I do hope to be there sometime soon. Maybe for the next one!

If you want to take a look at some of the demos, they are available at the links below:

Following Wise Men
Looking for Los Sures
The Message
Turcot Interchange

As a final note, I really want to thank Mozilla. It truly was and awesome experience and a really fun time. Can’t wait for the next!