Jasmine failing on jQuery

Question

I am trying to test if a field is disabled properly in jasmine but I am running into a weird error:

https://gist.github.com/3366765

Error: Expected { 0 : HTMLNode, length : 1, context : HTMLNode, selector : '#input1', constructor : Function, init : Function, jquery : '1.7.2', size : Function, toArray : Function, get : Function, pushStack : Function, each : Function, ready : Function, eq : Function, first : Function, last : Function, slice : Function, map : Function, end : Function, push : Function, sort : Function, splice : Function, extend : Function, data : Function, removeData : Function, queue : Function, dequeue : Function, delay : Function, clearQueue : Function, promise : Function, attr : Function, removeAttr : Function, prop : Function, removeProp : Function, addClass : Function, removeClass : Function, toggleClass : Function, hasClass : Function, val : Function, on : Function, one : Function, off : Function, bind : Function, unbind : Function, live : Function, die : Function, delegate : Function, undelegate : Function, trigger : Function, triggerHandler : Function, toggle : Function, hover : Function, blur : Function, focus : Function, focusin : Function, focusout : Function, load : Function, resize : Function, scroll : Function, unload : Function, click : Function, dblclick : Function, mousedown : Function, mouseup : Function, mousemove : Function, mouseover : Function, mouseout : Function, mouseenter : Function, mouseleave : Function, change : Function, select : Function, submit : Function, keydown : Function, keypress : Function, keyup : Function, error : Function, contextmenu : Function, find : Function, has : Function, not : Function, filter : Function, is : Function, closest : Function, index : Function, add : Function, andSelf : Function, parent : Function, parents : Function, parentsUntil : Function, next : Function, prev : Function, nextAll : Function, prevAll : Function, nextUntil : Function, prevUntil : Function, siblings : Function, children : Function, contents : Function, text : Function, wrapAll : Function, wrapInner : Function, wrap : Function, unwrap : Function, append : Function, prepend : Function, before : Function, after : Function, remove : Function, empty : Function, clone : Function, html : Function, replaceWith : Function, detach : Function, domManip : Function, appendTo : Function, prependTo : Function, insertBefore : Function, insertAfter : Function, replaceAll : Function, css : Function, serialize : Function, serializeArray : Function, ajaxStart : Function, ajaxStop : Function, ajaxComplete : Function, ajaxError : Function, ajaxSuccess : Function, ajaxSend : Function, show : Function, hide : Function, _toggle : Function, fadeTo : Function, animate : Function, stop : Function, slideDown : Function, slideUp : Function, slideToggle : Function, fadeIn : Function, fadeOut : Function, fadeToggle : Function, offset : Function, position : Function, offsetParent : Function, scrollLeft : Function, scrollTop : Function, innerHeight : Function, outerHeight : Function, height : Function, innerWidth : Function, outerWidth : Function, width : Function, propAttr : Function, _focus : Function, scrollParent : Function, zIndex : Function, disableSelection : Function, enableSelection : Function, mouse : Function, draggable : Function, droppable : Function, resizable : Function, selectable : Function, sortable : Function, _addClass : Function, _removeClass : Function, _toggleClass : Function, switchClass : Function, effect : Function, _show : Function, _hide : Function, __toggle : Function, cssUnit : Function, accordion : Function, autocomplete : Function, menu : Function, button : Function, buttonset : Function, datepicker : Function, dialog : Function, progressbar : Function, slider : Function, tabs : Function, alert : Function, carousel : Function, collapse : Function, dropdown : Function, modal : Function, scrollspy : Function, tab : Function, tooltip : Function, popover : Function, typeahead : Function } to be true.
at new jasmine.ExpectationResult (http://localhost:8888/__JASMINE_ROOT__/jasmine.js:102:32)


describe("disableFields", function() {
  var $trigger, $input1, $input2, $otherInput;
  var fixture = "<input id='input1' class='disable'></input>" +
                "<input id='otherInput' class='other'></input>" +
                "<button id='submit' data-behavior='disableFields' data-selector='.disable' data-form-id='form'></input>";


  beforeEach(function() {
    $('#jasmine_content').empty();
    $('#jasmine_content').append(fixture);
    Elemental.load(document);
   });

  it('disables all the inputs', function() {
    $trigger = $('#submit');
    expect($("#input1").prop("disabled", false)).toBe(true);
    $trigger.click();
    expect($("#input1").prop("disabled", true)).toBe(true);
  });
 });

I am not sure why the jasmine is throwing a error with the selector, does anyone have any ideas?

--Thanks

Answer 1

You are missing two things,

expect($("#input1"),prop("disabeld", false)).toBe(true);

disabeld should be disabled and,

$("#input1"),prop("disabeld".. you have to use dot instead comma.

But in both cases,

expect($("#input1").prop("disabled", true)).toBe(true);

will never be evaluated to true since $("#input1").prop("disabled", true) returns JQuery object rather than a bool value. So use

expect($("#input1").prop("disabled")).toBe(true);

instead.

jQuery prop documentation

Answer 2

I'm not sure but you have a typo here:

expect($("#input1"),prop("disabeld", false)).toBe(true);

"disabeld" should be "disabled".