Instant Download of Premium Web Templates
2009 December | Java-ScriptGate.com

Archive for December, 2009

Development

December 31, 2009

2010 New Year’s Resolution

I have a backlog of draft posts, and I’m going to start working my way through them. I had a very interesting semester, and the next should be even more interesting. I’m keen to resume sharing. Look for more posts to come.

JS and App

December 30, 2009

JavaScript Unit Testing

Our JavaScript Developer Survey results showed that a large percentage of readers don’t currently unit test their JavaScript. I’ve been unit testing my own JavaScript projects for a few years, which resulted in the creation of riotjs — for more on riotjs see my blog post: Riotjs: A JavaScript Unit Testing Framework

There are lots of JavaScript test frameworks. I’ve presented a summary below — there are both traditional unit testing libraries and behaviour-driven frameworks.

unittest.js

unittest.js by Thomas Fuchs has been used by many JavaScript developers since Scriptaculous became popular in 2006. It provides a test framework that is recognisable to Ruby developers, and the relationship between Rails and Scriptaculous further increased adoption in this group.

This library depends on Prototype and is usually run inside HTML templates rather than a JavaScript interpreter.

Tests look like this:

  new Test.Unit.Runner({
    testExample: function() { with(this) {
      var exampleVar = '1234';
      assertEqual('1234', exampleVar);
      assert(true);
    }}
    
  }, "testlog");

Fuchs uses with(this) to cut down unnecessary syntax — you don’t have to write tests this way though.

Setup and teardown methods are supported. Shoulda-style assertion names have also been added. This adds methods to the prototypes for common JavaScript objects, so it’s possible to write 'test'.shouldEqual('test').

unittest.js also includes a handy benchmark method, and the following assertions:

assertNotEqual(expected, actual) Inverse of assertEqual
assertNotVisible(element) Checks if an element has display: none
assertVisible(element) Inverse of above
assertInspect(expected, actual) Checks if expected is the same as actual.inspect()
assertEnumEqual(expected, actual) Ensured two enumerables are equal
assertIdentical(expected, actual) Comparison using ===
assertNotIdentical(expected, actual) Inverse of above
assertNull(obj) Is obj null?
assertNotNull(obj) Inverse of above
assertMatch(expected, actual) Performs a regex, where expected is the regex
assertType(expected, actual) Checks if actual.constructor == expected
assertNotOfType(expected, actual) Inverse of above
assertInstanceOf(expected, actual) Checks if actual is instanceof expected
assertNotInstanceOf(expected, actual) Inverse of above
assertRespondsTo(method, obj) Checks if obj has a method named method
assertReturnsTrue(method, obj) Ensured that the method named method called on obj returns true
assertReturnsFalse Inverse of above
assertRaise(exceptionName, method) Ensures calling method raises an exception named exceptionName
assertElementsMatch([elements], expression1, expression2, ...) Ensures the array of elements match the list of expressions
assertElementMatches(element, expression) A helper for the above assertion when supplying a single element

JsUnitTest

JsUnitTest is a port of unittest.js without the Prototype dependency.

JsUnit

Development for JsUnit started in 2001, and is based on JUnit. Like unittest.js, tests are designed to be run in a web browser. By using the build.xml Ant file, tests can be run against multiple browsers on a local machine, or on multiple remote machines.

JsUnit tests are grouped within a Test Page. Test pages contain your tests. If a Test Page has setUp or tearDown functions, they will be run before and after each test function. A function called setUpPage will be run once per Test Page.

Each test function is written prefixed with test:

function testExample() {
    assert(true);
}

The following assertions are available:

  • assert([comment], booleanValue)
  • assertTrue([comment], booleanValue)
  • assertFalse([comment], booleanValue)
  • assertEquals([comment], value1, value2)
  • assertNotEquals([comment], value1, value2)
  • assertNull([comment], value)
  • assertNotNull([comment], value)
  • assertUndefined([comment], value)
  • assertNotUndefined([comment], value)
  • assertNaN([comment], value)
  • assertNotNaN([comment], value)
  • fail(comment)

QUnit

QUnit is used by jQuery for its unit tests. To use QUnit, include qunit.js and qunit.css within a HTML file that can display the test results.

Tests look like this:

test("a basic test example", function() {
  ok(true, "this test is fine");
  var value = "hello";
  equals("hello", value, "We expect value to be hello");
});

The jQuery QUnit documentation has full examples.

jspec

jspec (by Yehuda Katz) is an RSpec inspired framework. Rather than traditional unit tests, jspec attempts to provide a behaviour-driven development approach.

This is best illustrated with an example:

jspec.describe("The browser environment", function() {
  it("should have Array.prototype.push", function() {
    Array.prototype.push.should("exist");
  });
 
  it("should have Function.prototype.apply", function() {
    Function.prototype.apply.should("exist");
  });
})

Tests are written with it() blocks and chained should() calls.

The GitHub repository is currently pretty spartan, with no documentation or README, but jspec is a good port for those of you who are familiar with RSpec or want a change from JUnit-style libraries.

JSpec

JSpec by visionmedia (who have cropped up frequently on DailyJS) is a much more fleshed out BDD library. The author has tried to keep it minimal, but it has a unique and friendly DSL. It’s possible to write “grammar-less” tests using plain JavaScript.

Jasmine

Jasmine builds on the ideas of the previous libraries to provide a BDD library that supports asynchronous tests — Ajax-friendly testing.

JS and App

December 29, 2009

Doodle.js

I’ve written a few posts about canvas-based animation and graphics libraries lately. Before moving on to another topic I thought I’d mention Doodle.js, which is a sprite-based canvas library. Doodle.js simplifies working with the canvas, and includes excanvas for IE support.

Code using Doodle.js looks like this:

(function(oo) {
 oo.canvas('#my_canvas');
 var box = oo.rect({x:25, y:25,
                    width:50, height:50, fill:"#ff0000"});
 box.draw(); //draw a red box with initial parameters
 
 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
 box.modify({fill:'purple'}).rotate(-45).draw();
 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
 
})($doodle);

As you can see, the API is fairly clean. There isn’t currently much documentation, but the author has written a length blog post with examples.

While Processing.js is a full drawing and animation system, and Raphael is a vector graphics library, Doodle.js provides a simple way of working with sprites.

Frameworks

December 27, 2009

WTFramework – Detect Which Framework A Site Is Using, The Easy Way

Tags: , ,

WTFramework Summary

WTFramework is a dead simple, and well designed way to detect which framework a site is using as well as version. Being primarily a JavaScript developer I was always looking through the source to find which framework a certain site was using. Or to see if the developer had done something particularly cool with my favorite framework MooTools. It was developed by Oskar Krawczyk and is implemented as a bookmark for any A grade browser. You simply drag it into your bookmarks bar and its installed. You can now use it on any site you visit. The notifications are “Growl” like and are very well designed. Kudos to Oskar on this one, a dead simple, but time saving tool.

Installation

  1. Visit The Site
  2. Drag the big red icon into your bookmarks.
  3. It is now installed.

Fortunately For Us

Oskar has a public Git Hub repository for this. So if needs be you can change it to suit your needs.

Gallery

London based Website Design Company is providing professional website design and website development services. They create a range of website applications and solutions - from secure ecommerce platforms to tailored content management system. Hampshire based Web design agency is specializing in ecommerce website development. Browse through our work portfolio on website designing. Our programming team focuses to deliver an ecommerce web design that produces great ROI.

JS and App

December 23, 2009

Conway’s Game of Life

Our recent post about Processing.js made me think about Conway’s Game of Life. If you haven’t come across it before, it’s a simulation that works like this:

1. Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
2. Any live cell with more than three live neighbours dies, as if by overcrowding.
3. Any live cell with two or three live neighbours lives on to the next generation.
4. Any dead cell with exactly three live neighbours becomes a live cell.

I like to use this algorithm to experiment with new graphics libraries, so I had my own Processing version from back in 2005. I’ve ported it to Processing.js here conway-js.

I’ve also found lots of interesting pure JavaScript implementations. ConwayJS by Joseph Robert is my favourite. It’s pretty fast and allows you to draw cells with the mouse.

Another interesting one is game_of_life by sukhchander.

I’ve uploaded my Processing.js examples to DailyJS so you can see them without checking out the git repositories: