gregs » JavaScript

Small update to my jasmine BDD post

gregs — Sun, 25 Sep 2011 19:55:31 +0000

Following on from my post way back in July, I have created a repository over at the github, with some updated examples surrounding validation, adding comments to posts and some refactoring.

I am currently looking into DI for javascript objects, as well as phantom.js and jasmine-jquery to start putting together some examples for user journey testing and easier testing of jquery widgets and fixture loading.

First steps with Jasmine

gregs — Tue, 12 Jul 2011 16:27:08 +0000

New job and opportunities. One of the core approaches to developing here, is the use TDD. Now in a JS/UI kind of role this is really novel approach (well at least for me). I don't know how many times in the past I have lamented the fact that I needed to click through way too many steps to get to the issue at hand and then rinse and repeat to debug/fix. Even once I had wrapped my head round Chrome's debugger this approach still took way too long. I had dabbled a little in TDD and BDD on personal ruby projects, but never from a UI perspective and when faced with a monumental UI code base I just didn't have the stomach to tackle the problem retro fit tests. Also to be honest the JavaScript testing frameworks just didn't click with me, until Node.js and Jasmine that is.

With Node.js installed grab the following modules using npm

coffee-script
jasmine-node

Easiest way to get tests running type 'node ./spec.js ' at the command line, which is pointing to ./spec/ folder

In my BlogSpec.js file let's start with some basic tests

PLAIN TEXT

CODE:

describe('blog creation', function() {
it('should have a title attribute', function(){
expect(testBlog.title).toBeDefined();
});
it('should have a title', function() {
expect(testBlog.title).not.toBeNull();
});
});

When you run the spec with : 'node-blog git:(master) ✗ node spec.js' the test should fail

PLAIN TEXT

CODE:

Started
FF
Spec blog creation
it should have a title attribute
Error: ReferenceError: testBlog is not defined
at new <anonymous> (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmine-1.0.1.js:94:50)
at [object Object].fail (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmine-1.0.1.js:1963:27)
at [object Object].execute (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmine-1.0.1.js:970:15)
at [object Object].next_ (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmine-1.0.1.js:1739:31)
at [object Object].start (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmine-1.0.1.js:1692:8)
at [object Object].execute (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmine-1.0.1.js:2018:14)
at [object Object].next_ (/Users/gregstewart/Projects/node-blog/node_modules/jasmine-node/lib/jasmine-node/jasmin%

So everything is as expected at this stage, let's start work on getting the basic tests to pass. First off let's create out Blog object

PLAIN TEXT

CODE:

Blog = function(title) {
this.title = title;
}
Blog.prototype.getTitle = function() {
return this.title;
};
exports.Blog = Blog;

And not let's bring the Blog object into our test and initialise it:

PLAIN TEXT

CODE:

var Blog = require('../Blog').Blog;
describe('blog creation', function() {
var testBlog;
beforeEach(function() {
testBlog = new Blog();
});
it('should have a title attribute', function(){
expect(testBlog.title).toBeDefined();
});
it('should have a title', function() {
expect(testBlog.title).not.toBeNull();
});
});

Now let's get the first test to pass, by editing our Blog.js file

PLAIN TEXT

CODE:

Blog = function(title) {
this.title = typeof title !== 'undefined' ? title : null;
}
Blog.prototype.getTitle = function() {
return this.title;
};
exports.Blog = Blog;

Nearly there, only problem is that our second test is failing because we require a title to not be null.

PLAIN TEXT

CODE:

var Blog = require('../Blog').Blog;
describe('blog creation', function() {
var testBlog;
beforeEach(function() {
testBlog = new Blog('test');
});
it('should have a title attribute', function(){
expect(testBlog.title).toBeDefined();
});
it('should have a title value', function() {
expect(testBlog.title).not.toBeNull();
});
});

Let's see what the output looks like:

PLAIN TEXT

CODE:

➜ node-blog git:(master) ✗ node spec.js
Started
..
Spec blog creation
Finished in 0.001 seconds
1 test, 2 assertions, 0 failures

And just because I can, let's rewrite the Blog.js in Coffee Script:

PLAIN TEXT

CODE:

class Blog
constructor:(@title) ->
getTitle: ->
@title
exports.Blog = Blog;

How much terser is that?

node.js chat server

gregs — Tue, 05 Apr 2011 14:28:55 +0000

Since I have a bit of time on my hands right now, I took a look at node.js and socket.io. The outcome, a really simple chat client/server written in JavaScript. Source is up over at Github, with some instructions on getting started.

AJAX calls and expired sessions

gregs — Thu, 19 Jun 2008 08:12:44 +0000

I have been updating a bunch of code recently to make use of the new features in Prototype 1.6 and one of the great additions in this release was the introduction of Automatic JavaScript response evaluation. This allowed me to improve on my session checking code without having to fuff around with the response information sent back to the client. The problem was with XHR requests: i.e. if the user initiated such a request when his session had expired, then usually the response would fail or worse just hang.

The snippet below shows my new session checking code.

PLAIN TEXT

JAVASCRIPT:

The trick is to intercept the call when you do your session checking at the back end. Let's say you have a fuseaction called login.login (see below and yes this is fusebox 3 :S) where you display the login form when a user is not logged in, this is where I inserted the check for an XHR request, by looking at the http headers sent along with the request. The key here is a new header attribute passed in with Prototype "X-Requested-With". If this attribute exists then I know it's an XHR request and I can create a custom JSON header with an error struct that holds a key called session with a value of timeout. All I then need to do is encode the struct as JSON and pass that encoded struct back to the browser.

PLAIN TEXT

CODE:

"login">
request = GetHttpRequestData()/>
(attributes.request.headers,"X-Requested-With")>
"false">
"attributes.jsonObj" default="#CreateObject('component','com.jehiah.json')#"/>
"error" default="#StructNew()#"/>
['session']='timeout'/>
(attributes,"jsonObj")>
"X-JSON" value="#trim(attributes.jsonObj.encode(error))#" />
(session,'login')>
login = session.login/>
"attributes.login" default=""/>
xfa.submitform='index.cfm?fuseaction=login.processlogin';
"#affiliate('dsp_login.cfm')#"/>

Now let's jump back to the JavaScript code and take a look at the onComplete function again:

PLAIN TEXT

JAVASCRIPT:

onComplete : function(transport,json)
{
if(json && json['session'])
{
setSessionExpired();
} else {
//Code to run when the request has completed
}
}

If there's a JSON object and it has a key of session then I call my setSessionExpired function which redirects the users. Now the json session key only exists in these situations since the call normally just passes back the result of the call.

Reflow

gregs — Fri, 30 May 2008 04:27:42 +0000

Or more appropriately what is it? Fascinating...

Embedded images an IE work around

gregs — Mon, 19 May 2008 02:13:04 +0000

A while back I posted about using the data:image/jpeg;base64 to directly embed the image in to the source attribute of an image tag, however this did not work with IE. Today I stumbled across this JavasScript solution. Certainly an option, though in my case it was overkill, however I thought others might find it useful.

IE , the dom and long numbers

gregs — Fri, 27 Apr 2007 02:47:39 +0000

I just spent the best part of 45 minutes trying to figure out a weird issue with a value I was pulling out of a select box (using $F(element)). The value in question was a long number: 1000002229651626, which IE converted at the time of writing the value to the page (this was an AJAX call) to: 1.00000222965163e+15.

IE decided to convert my number when I was using the new Option() method to populate the drop down, making the debug process even harder. I personally can't wait until we get a firebug like extension for IE, right now I'd just settle for an option to view the rendered source.

Rant over, the solution is to convert the number to a string:

PLAIN TEXT

JavaScript:

selectBox[x] = new Option('Some text',new String(1000002229651626),false);

On the plus side I came across a neat way to debug values in a form field using the address the browser address bar:

PLAIN TEXT

CODE:

javascript:alert(document.all.myfield.value); void(0)

And to see what IE had actually written to the page:

PLAIN TEXT

CODE:

javascript:alert(document.all.myfield.innerHTML ); void(0)

encodeURIComponent()

gregs — Wed, 30 Nov -0001 00:00:00 +0000

I just stumbled across this post from the Red Balloon guys, which reminded me that I wanted to blog about this great little resource about the subtle differences of URL encoding and JavaScript.

The bottom line of this article is that 9 times out of 10 you'll want to be using encodeURIComponent() to encode vars that are to be passed as part of a URL instead of the escape() method.

FireBug

gregs — Wed, 30 Nov -0001 00:00:00 +0000

Now I can't remember where I stumbled across this little gem of a plug in for FireFox: FireBug, but yesterday it completely surprised me.

I originally had installed it because it was meant to be far better at debugging JS, than the new version of the JavaScript Console that was shipped with FireFox 1.5 and that it was. So I have been using it for a while now, but yesterday I stumbled across a feature that makes it utterly invaluable now. I do a lot of Ajax based development these days and sometimes trying to figure out what is going on under the hood is a little problematic. However if you open it up and look at the options, you'll see an option to show XmlHttpRequests disabled. Enable it and make a remoting call.

Along with the usual JS/CSS debug you should now see something like this:

If you click on the Response Tab you can see what has been returned to the browser.

And if you click on the JS tab you can inspect the whole response object.

Awesome!

And since it's been so long between posts here a couple of other useful Ajax/prototype links:

It's all over the Internet but getting started can be tricky: Painless JavaScript Using Prototype
More prototype documentation
Behaviour the perfect way to write unobtrusive JavaScript

Generic Form validation part ii

gregs — Wed, 30 Nov -0001 00:00:00 +0000

A few weeks back someone on the CFDJ list enquired about JavaScript form validation and pointed them in the direction of my script, however I only just realised that the script itself was no longer working. Oops... so apologies, but I have fixed up the problems and done made it sure it works for the following browsers.

Win XP / Netscape 4.7x
Win XP / IE 6
Win XP / Mozilla 1.4
Win 2K / IE 6
Win 2K / Mozilla 1.5
Win XP / Firefox 0.8

If you have access to ones not on the list, I'd be grateful for any feedback. The revised version with sample file can be found here.