How does Jasmine work if function does not return values?

Question

First of all, i am new to both Test Driven Development (TDD) and Behaviour Driven Development (BDD) and i am having a hard time believing that this is a good way of developing web pages since the pages often needs to be developed in a rapid manner, which is hard if you have to develop test code before you can do anything.

Any ways!

The reason that i am writing this thread is not because of, what i find to be, issue (but if you have input i would enjoy reading that as well!). I have been reading some about syntax, how it works, and all of that. I discovered though that the approach is hard to implement if my function doesn't return a value.

Let's say for instance that i have a click-event triggered function that merely changes a text value of a input:

$('input[type="text"]').click(function() {
    $(this).val('Oh, that tickles!');
});

How does jasmine handle this? Like the following code?:

describe('Input type text is clicked', function () {  
    it('changes text in the input field', function () {  
        expect($('input[type="text"]').val()).toEqual("Oh, that tickles!");  
    });  
});

This is although wrong, since the jQuery object can contain multiple input fields that does not contain that value. Is there any ways of finding the element (such as $(this) or similar), or should I put a click-handler inside the jasmine test? Like this:

describe('Input type text is clicked', function () {  
    it('changes text in the input field', function () {
        $('input[type="text"]').click(function() {
            expect($(this).val()).toEqual("Oh, that tickles!");
        }  
    });  
});

Some clarity would be nice :)

Thanks a lot in advance!

/J.

Answer 1

One approach is to make sure there is only one text input field when the test is run. You can use jasmine-jquery to create a fixture with the input field:

describe('Input type text is clicked', function () {  
  beforeEach(function() {
    jasmine.getFixtures().set('<input type="text" />');
    bindClickEvent();
  });
  it('changes text in the input field', function () {
    $('input[type="text"]').click();
    expect($('input[type="text"]').val()).toEqual("Oh, that tickles!");  
  });  
});

You may want to refactor up your code so you can test that the click event is handled separately the click handler itself:

var eventHandlers = {
  tickle: function() {
    $(this).val('Oh, that tickles!');
  }
};    
$('input[type="text"]').click(eventHandlers.tickle);

Then you would have two tests:

describe('Input type text is clicked', function () {  
  beforeEach(function() {
    jasmine.getFixtures().set('<input type="text" />');
    spyOn(eventHandlers, 'tickle');
    bindClickEvent();
  });
  it('should tickle the field', function () {
    $('input[type="text"]').click();
    expect(eventHandler.tickle).toHaveBeenCalled();
  });  
});

describe('eventHandlers.tickle', function () {  
  it('should set the field value', function () {
    var input = $('<input type="text"/>');
    eventHandlers.tickle.call(input);
    expect(input.val()).toBe("Oh, that tickles!");
  });  
});