向phantomJS无头浏览器添加jQuery选择器控件

Question

I am trying to add jQuery selector controls to a phantomJS headless browser for testing purposes.

Is it possible?

To this point we have been overwriting the check to see if the control exists and haven't made any attempts to manipulate values and test onChange events.

The test I am wanting to run is this:

//arrange
//OnChange results in values being stored in cookies
$('#TestControl').val(cookieValue).trigger('change');

//act
var result = $.cookie(cookieName);

//assert
expect(result).toBe(cookieValue);

The problem is that I don't know how to actually create $('#TestControl')

Answer 1

For creating DOM elements in phantomJS/jasmine, you could do the following:

var TestControl = $('<input id="TestControl"/>');
$(document.body).append(TestControl);

However, it is better to define the markup in html. The fixture module of jasmine-jquery allows you to load HTML content to be used by your tests. The overall workflow is as follows:

In myfixture.html file:

<div id="my-fixture"><input id="TestControl"/></div>

Inside your test:

loadFixtures('myfixture.html')
$('#TestControl').val(cookieValue).trigger('change')
expect($('#my-fixture')).to...