Category Archives: JavaScript

Using Loops in Jasmine

If you want to test your code against 10 different inputs you don’t want to have to write 10 different tests. You want to write one test you can call 10 times.

The cleanest way to achieve this is to have your inputs and outputs stored in an array or object (In the example below I have chosen an array).

Intuitively (especially if you are familiar with how to write Rspec tests) it might feel like all you need to do is wrap your it block in a for loop and have your arrays feed into it, unfortunately due to the nature of how Jasmine executes this will not work.

What you need to do is wrap your it block inside a function, which you can then call from inside a loop. For example;

describe('this is my looping test!', function() {
  var input = [1,2,3];
  var output = [10, 20, 30];

  function test_my_times_ten(input, output) {
    it('should multiply ' + input + ' by 10 to give ' + output, function() {
      expect(input * 10).toEqual(output)
    });
  }

  for(var x = 0; x < input.size; x++) {
    test_my_times_ten(input[x], output[x]);
  }
});

With this technique you can see how you could quickly build up a very large and comprehensive test suite without writing a large amount of tests, things start to get really interesting if you start having nested loops passing in input. Just be aware of the performance implications of nested loops though!

Share this on

Useful Chrome Extension for Backbone.js Debugging

If you do much work with Backbone.js inevitably you are going to have to end up debugging some silly mistake you have made, I know I have been making about 5000 a second over the past few days.

Luckily I read today that there is a Google Chrome extension out that can help debug Backbone.js issues. The code can be found here along with an easy to follow installation guide.

One thing the guide does not mention is that you will more than likely need to restart Chrome to get this to work, I know I did.

Whilst it is clearly still in early development, I have already been putting it to use and getting good stuff back from it

Share this on

Accessing PHP variables from within JavaScript under WordPress

Accessing PHP variables from within JavaScript under WordPress is so easy it is almost trivial.  Having said that, I didn’t know there was a way to do it until I asked on the WordPress StackExchange site.

I will show you what you need to do by way of an example.  Let us suppose we need the site URL in our JavaScript code.

It is a two step process, the first step is in your PHP;

wp_enqueue_script('my_script');
$data = array('site_url' => __(site_url()));
wp_localize_script('my_script', 'php_data', $data);

So what we have done there is enqueued our script (named here, my_script) and once we have done that we set up our data array. In our case the property is site_url and it’s contents are going to be the result of site_url(). Once we have that we can call wp_localize_script, into it we pass the name of our script, the name we want to give our JavaScript object and the data we want to pass in.

Next we want to be able to access the data, so in your JavaScript file you can simply call the following (if you wanted to alert out the site URL!)

alert(php_data.site_url);

Really, really easy and really, really handy!

For more information please see the official reference.

Share this on

Edit an option of a select menu using jQuery

I have read many articles that cover how to use jQuery to add and remove options from a select box but I couldn’t find one that covered how to edit an individual option.

I knew there had to be a way and the good people of Stack Overflow were able to answer my question.

Essentially what you need to do is use the option selector in order to grab the element you want, then it is fairly trivial.

$('#selectID option[value="knownValue"]').text('New Option Text');

So what we are saying here is for every element with the ID of ‘selectID’ look for an option with the value of ‘knownValue’.

Change the text of that option to ‘New Option Text’.

A use case for this (and indeed the reason why I was looking it up) is that if you have a collection of objects and you want to edit them dynamically by selecting them via dropdown then edit the fields you will most likely want to edit the ‘name’ field or some other field that represents the unique name which appears in the dropdown list.

If this is the case when you edit your name and hit save, assuming it is all done using ajax the value in the dropdown will no longer equate to the value stored in the database. This is a usability concern so you should use the method above to ensure that the option text of the dropdown gets edited accordingly.

Share this on

Possible issue when using parseInt function.

@psynnott recently pointed out that there was a potential issue in some of the code we had written.  It involved using the parseInt function of JavaScript in order to ensure we are dealing with integer values.

He noticed that if you pass a string of ’09′ the function will attempt to treat the value as an octal (which is a fairly insane thing to have as a default in my opinion) in order to fix this you would change

var test = parseInt('09');

to

var test = parseInt('09',10);

This will force base 10 to be used instead of octal.

Share this on