Sunday, June 1, 2014

Learning to think with a test-driven mindset. A website example.

This post is a continuation of a theme I call a "test-driven mindset". I have tried to make this as non-technical as possible yet still convey the concept.

I recently found a potential problem on one of my sites caused by a Windows to Linux conversion. 

I downloaded my site from the code repository. Then, when I started up my local web server and did some browsing.. Everything looked good..... at first.

When trying it on my mobile device, something was wrong... The main page had no formatting. I didn't know what the problem was but realized it was related to CSS (styles) somehow.

The Play! Framework developed site has code that automatically detects a desktop or mobile device user and provides a different looking site (including CSS).

How I created a software based automated test and fixed the potential problem using a "test-driven mindset"....

In Code / Manual or Research

Launch a server in the test framework and set myself to be a mobile-device (set my user-agent header to Android)
Connect to the home page
Try and find the <link rel="Stylesheet" type="text/css"> and read that in
Wait... this is tough and a bit cumbersome....
I could write some code to try and figure out what the CSS is but it would be a lot easier if the page was easier to test. I wonder.. Is it "legal" in HTML5 to put an "id=" on a <Link> tag?
Five minutes of research.. yes it is.
Write a Test to try and find "id=cssMain"
The test immediate fails (of course). (This is the idea)
Re-write the web page to add "id=cssMain" to the <Link> tag.
The "id=cssMain" test passes
Now.... I can easily find the CSS selector for the test
Let's read the "href=" (for non technical people, this is the location to find and get the style-sheet")
Try to open that location and if everything works out, I should be able to get a text file that has the words "html, body" (this is a convention I have for style-sheets in my sites).
I do get an error (as expected).
Let's see if I can clear this error up.  Now, it is obvious to me that the problem was caused by the Windows to Linux migration.

The existing Windows machine(s) did not care about case-sensitivity. The new Linux environment does.
The webpage was specifying "casparMobile.css" when the file on the drive was called casparmobile.css"  (The capitalization did not matter in Windows).
I chose to rename the file from casparmobile.css to casparMobile.css (a personal preference).
Then, the entire test passes.  Yeah!

The final Automated test now runs before check-ins (plus other tests of course)....
  • starts up a test server
  • sets itself to mobile
  • requests the home page
  • finds the css selector by Id
  • gets the href setting from the tag on the page
  • tries to get the specified style-sheet and then confirms it's what is expected in the file.
After committing the code to my code repository, my Continuous Build and Deploy Server will re-run all the tests in the background and auto-deploy and launch it for me to my cloud hosting provider.

I hope this real life example helps to work toward a "test-driven mindset".

Mike Caspar
Passionate About Agile