Very chilled out…

• Semantic Html is my golden hammer
• Progressive enhancement is my swiss army knife
• I love JavaScript but try to never write any but if i must I make sure it’s generic. I try very hard to make sure no else writes any either and if they do I just refactor it till it deletes itself.
• I love AHAH and barely tolerate AJAX / JSON
• REST is my natural state not something I read about

All of these forces / values / beliefs drive me to solve the problem of web testing in a very different approach from most people. It is about an alternative holistic approach to web architecture, testing and productivity.

So now I have expressed some of the forces / the whys, I will try cover the hows and whats.

As the “crazy” guy behind the in-memory / out-of-container acceptance testing on a number of java/.net projects, I think it’s important I explain to people the “Why” and the forces / constraints I am trying to balance. But first I want to quickly lay down my beliefs and values:

• I believe in testing as much as possible (UI included)
• I believe tests must add more value than they cost (Measure it!)
• I value tests that are fast and are resilient to change more than tests that take a long time to run and are brittle.
• When refactoring a feature I value acceptances tests and integration test over unit tests.
• When designing/exploring a new interface / object interaction I value unit tests over acceptance tests to help guide me.
• I believe that QA’s are so much better at finding bugs than DEVs but worse at writing code / abstractions

Interestingly they talk about the fact they had to do “Hundreds of iterative tests” to get the design right:

http://www.dyson.co.uk/insidedyson/default.asp#Air_Mult_Tech_Dev

Not only was the process super fast but I watched the fix being discussed then applied. I looked at the code change and the unit tests being updated all as it happened. Needless to same I am very impressed.

Interestingly I noticed the same issue with Opera and logged an issue with the exact same details on the same day, unfortunately Opera’s bug tracking system is private and so I have no idea if the issue is even being looked at. When they do eventually fix the issue I’ll still have to wait for sometime as they don’t have a public build server for me to download and try the fix before an official release.

What I needed was a simple tool to convert my semi structured text into html and then I could just upload that to my blog. Ideally the tool would be a command line tool so I could easily automate the two steps.

I looked at a few different tools but in the end chose to use stx2any as it seemed to be a fairly close fit to the type of plain text I normally use, and also produced the cleanest html.

Then I started to look at tools to upload html into my Wordpress blog, I was expecting there to be quite a few but can honestly say I didn’t even find one. I find this a bit wierd as blogs where originally just html and before that text (remember finger). So I started to look at Python scripts that interacted with the MetaWeblogAPI but as my Python is fairly limited I thought I could probably do it quicker in Scala (as thats what I’ve been mainly working in lately).

And so an hour or two later html2blog was born. And here is how I tied it all together:

stx2any --link-abbrevs --make-title off -T html $1 |
 tidy -asxhtml -qc -w 0 | java -jar html2blog.jar

Currently html2blog is very limited in that it always creates a new draft, so the next step will be to make it update an existing entry. I’d also like to get images working at some point.

• Running fullscreen (so no desktop distractions)
• Supporting plain text only (so no styling distractions)
• No toolbar
• No menubar
• No statusbar
• A few simple shortcuts to do what you need

Anyway I have been running Ubuntu for a number of years, and had often ran Nano fullscreen in a Gnome Terminal but was curious what might now be available. So a few moments googling and this was the list:

• WriteRoom for Mac
• DarkRoom for Windows
• q10 for Windows
• PyRoom for Linux
• Focussed for Adobe Air

After trying each one, I decided that I actually really liked the q10 version and even though it runs perfectly on Linux via Wine, it just takes way to long to startup (2-3 seconds). Mean while the PyRoom version starts in less than 200ms, so after upgrading to 0.41 I was able to get PyRoom looking very similar to q10 with the following settings:

• Green screen theme
• 95% height
• 62% width
• Padding 5
• No border
• Autosave
• BitStream Vera Sans font

The only thing I am missing is it remembering what file I was last editing, maybe it’s time I brushed up my Python skills.

• Small changes in the HTML cause lots of tests to fail
• Small changes to visual layout require large changes to the HTML which then causes the above
• Developers say the work is done but it can’t be signed off as it looks terrible or doesn’t work in certain browsers
• CSS or QAs want developer to add ID attributes to lots of elements so they can target them more easily

Now ideally all your developers should be poly skilled and understand javascript / CSS / HTML just as well as they understand java / C# / ruby but often the reality is not quite so rosy.
So if we are working in a world where we don’t have the ideal but still need to get the job done what can we do to reduce the pain?

Well the technique I have used on a number of teams is to come up with a “HTML contract”. An example might be as follows:

• Everyone must make the HTML as semantic as possible
• IDs are deprecated in favor of class attributes. Just use more specific CSS selectors to target elements
• Developers will liberally add class attributes with semantic names even if they don’t need them immediately (QAs and CSS will use them even if you don’t)
• CSS / Designers can add class attributes if needed but can not remove class attributes without pairing with a dev/QA.
• Changing the HTML to support visual display (I’m talking about document order, float and clear) is severely frowned upon. If you have to do it consider doing it with javascript instead.
• QAs are to use hand written XPath expressions in tests that match the domain and make extensive use of contains(@class, ’someClassName’) and descendant:: rather than IDs or specifying HTML tags

Some more general tips that I find help:

• Converting tables to divs is really no better apart from download size. Use divs to group things or as the root element for a control, use lists for lists of things, tables for tabular data etc.
• Hacking HTML, CSS, Javascript just because you are fed up with IE6 is not acceptable
• No Cut and Pasting from the web. Or mass import of Javascript / CSS fixes. Don’t put it in if you don’t understand what it does.
• When you have a CSS issue keep deleting rules until you work out which rule is causing the problem then rebuild the rules up.

I post some examples in my next post

After the crazy !@$%  with JavaScript yesterday I said to Christian, I bet we can do this with C# lambda. So the challenge was set….

class Purse
{
    public Func<int> get;
    public Action<int> set;

    public Purse(int money)
    {
        get = () => { return money; };
        set = (newMoney) => { money = newMoney ; };
    }
}

And here is the test …

var p = new Purse(2);
p.set(p.get() + 1);
Assert.AreEqual(3, p.get());

If you tried to use reflection, as expected there is no field to inspect.

Now the language doesn’t have a key word but I knew that you could use function scoping to achieve the same affect as I had seen the same thing done using the E programming language.

So after 5 minutes here is what we came up with:

function Purse(money) {
	this.getMoney = function() {
		return money;
	}
	this.setMoney = function(newMoney) {
		money = newMoney;
	}
}

This will create a truely private field that can only be accessed via the methods.

You can still mix your private getters and setters with prototype methods. eg:

Purse.prototype = {
	add : function( money ) {
		this.setMoney(this.getMoney() + money);
	}
}

var p = new Purse(2);
p.add( 1 );
p.getMoney(); returns 3

If you tried to access the money field directly it would be undefined.