Ever wondered how the Mootools development team tests Mootools SVN Trunk code? Personally, I don’t think they build their js file with the download builder bookmarklet I posted a few weeks ago. I’ll go into how to load all Mootools components from the SVN Trunk when testing.

Where to start

I assume you’re familiar with SVN, for those not, the SVN Book is a good place to start. My development environment looks like this:

Of course you don’t need all this, you can also use the Turtoise SVN Browser and use the IDE of your choice. Next step, is to checkout the Mootools SVN trunk, by pointing your SVN browser to http://svn.mootools.net/trunk. The trunk holds the latest development version of Mootools. In Aptana, you can do the following: File › New › Other › SVN › Checkout Projects from SVN › Create new repository location. The rest you can figure out yourself.

Zillions of files

Once you have downloaded the trunk, you can see a few folders, which are containing a lot of files. Now, what to do if you want to test your own code with the SVN trunk version of Mootools, and you don’t like to use the download builder? Very easy if you ask me. Just do the following:

  • Create a new folder in the trunk root (ex. MyFolder)
  • Create a new HTML file (ex. index.html)

Your filestructure should look something like this:

Mootools SVN Trunk
Example Mootools File structure

Now we need some code that includes all trunk javascript files from the Source folder into the document. This can easily be done by the following piece of code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="../Specs/Builder.js"></script>
		<script type="text/javascript">
			// This code includes all js files from the Source folder
			Builder.includeType('source');
		</script>
	</head>
	<body>
		<script type="text/javascript">
			window.addEvent('load', function(){
				alert('Version: ' + MooTools.version);
			});
			window.addEvent('domready', function(){
				alert('This alert won\'t show up!');
			});
		</script>
	</body>
</html>

When the page has loaded it alerts the Mootools version.

Important

As you can see in the code above I added an event handler to the load event of the window. Of course this is a bad practice, I should use the ‘domready’ event, which is fired sooner because it doesn’t wait on images to load. In this case I have to use the load event, because we include the javascript code for the ‘domready’ event when the page is already loading. So the ‘domready’ event doesn’t even fire.

So now you can test like a real pro and use the SVN trunk code to stay ahead of version changes. How did you test before? Share it by leaving a comment.