Now that we are becoming QA anal, testing is a huge concern moving forward on all development. In regards to UI testing is just annoying to address. Lets take a feature we all know and love, and see how you would go about getting it tested and implemented.

google_dropdown.gif
How about this drop down menu from Google.  How would you write a unit test that verifies that this menu will function correctly? The key things are, how do we get an environment where we can validate code events and underpinnings?
What we are going to do is create an HTML page with just the markup for the control. Then when we include our Javascript which we can then write tests that verify that it interacts with that HTML properly. We won’t end up with JSUnit tests on google.com, we won’t even have anything to do with google.com, which as an internal google developer you wouldn’t anyway. You want to make sure that your menu bar fires off its drop down correctly.

basepage.gif

Here we’ve made just the basics of our prototype page. Nothing special except our javascript library and our CSS reset file.

basepagewithhtml.gif

Here is the our page with the prototype code now on it. Depending on what level of development googleMenu.js is at, this may actually be a functional prototype. You should be able to open up this file and show people what the code will look like in a very isolated fashion. If this is step 1 of a new feature then you should see the evolution of your feature in the browser as you implement the code for it.

Lets say the component already exists, we are just wiring up a test to validate a bug fix. At the end you have this code.

basepagewithtests.gif

The body of my test is commented out because well, none of this exists, its air-code.

Now we have a JSUnit test page that has a duel function as a stand alone prototype page.

No comments

Leave a Reply