0

I am using Jasmine to text and setting fixtures.

I have this following test code here which demonstrates a problem:

describe("foo", function() {

var $input = $('<input type="text" name="testfield" value="10" id="testInput">');
var $textArea = $('<textarea name="textarea" id="testTextArea">10</textarea>');
console.log( 'typeof: $input.get(0)' + ' ' + typeof $input.get(0) ); //object
console.log( 'typeof: $input[0]' + ' ' + typeof $input[0] ); //object
console.log( 'typeof: $input[0].toString()' + ' ' + typeof $input[0].toString() ); //string

beforeEach(function(){
    var html =  $input[0] + $textArea[0];
    var ghtml =  $input[0] + $textArea[0];
    $('body').append(html);
    $('body').append(ghtml); 
    $('body').append(ghtml + html );
    $('body').append( $input[0] );
    $('body').append( $textArea[0] );
    $('body').append( $input[0] + '' + $textArea[0]);
    $('body').append( $input[0] + $textArea[0]);
    $('body').append( $input.get(0) + $textArea.get(0) );
    $('body').append( $input.get(0) + ' ' + $textArea.get(0) );
    $('body').append( $input.html() + $textArea.html() );
    $('body').append( $input[0].toString() + $textArea[0].toString() );
    $('body').append( ($input[0].toString()) + ($textArea[0].toString()) );
    $('body').append( ($input.get(0).toString()) + ($textArea.get(0).toString()) );
    $('body').append( ($input.get(0).toString()) + ' ' + ($textArea.get(0).toString()) );


    setFixtures( html );
});  

   it("has a value of bar", function() {
     expect(foo).toBe('bar');
   });
});

Ignoring what the test does itself, look at what I am trying to append to the body tag. What I want is the actual html element to be appended, and for whatever reason I getting back an html object.

Please see the fiddle: http://jsfiddle.net/sidouglas/e6jau1mq/9/

Is this a Jasmine issue or a PEBKAC issue?

Thank you Simon.

Simon
  • 2,484
  • 6
  • 35
  • 54
  • 1
    The `+` operator automatically converts the elements into strings with `.toString()` (which outputs `[object...]`) because you cannot add HTML nodes together (but you can concatenate HTML strings, as *tymeJV* suggested). – JCOC611 Oct 23 '14 at 02:35
  • try `$input.html() + $textArea.html();` – artm Oct 23 '14 at 02:35
  • `$input.get(0)` gets you a DOM object, NOT the DOM object's contents. And doing addition with a DOM object isn't going to do anything useful. Maybe you want `$input.val()` to get the text out of the input field? – jfriend00 Oct 23 '14 at 02:39
  • $input is a jQuery object, $input[0] returns the native DOM element, $input[0] + $textarea[0] is adding two DOM Objects, just doesn't make sense. jQuery's html expects a string – OJay Oct 23 '14 at 02:40
  • `$('body').append( ($input.get(0).toString()) + ' ' + ($textArea.get(0).toString()) );` still resolves to two objects as strings being concatenated. – Simon Oct 23 '14 at 03:15
  • Duplicate question of http://stackoverflow.com/questions/652763/jquery-object-to-string – Simon Oct 23 '14 at 06:26

1 Answers1

1

.append takes the actual HTML string, so just use that instead of the jQ object:

var $input = '<input type="text" name="testfield" value="10" id="testInput">'
var $textArea = '<textarea name="textarea" id="testTextArea">10</textarea>'
tymeJV
  • 103,943
  • 14
  • 161
  • 157