javascript - jasmine test for function that sets x, y click coordinates to textboxes -

javascript - jasmine test for function that sets x, y click coordinates to textboxes -

dev environment: ruby on rails, jasmine.

function needs testing: click coordinates , set text field values x, y.

$(document).on('ready page:load', function() { $('.floor_map_edit').click(function(e) { var posx = $(this).offset().left, posy = $(this).offset().top; document.getelementbyid("location_x").value = (e.pagex - posx); document.getelementbyid("location_y").value = (e.pagey - posy); }); });

test function in jasmine:(tried add together fixtures, don't know i'm doing)

describe("edit locations", function() { beforeeach(function() { var posx,posy = null; loadfixtures('floor_map_click.html'); namefields = $(".name-field"); spyon($('.floor_map_edit'), "click"); }); it("should asset x, y coordinate within text fields", function() { //$('.floor_map_edit').click(); $('.floor_map_edit').trigger('click'); expect($(document.getelementbyid("location_x")).value).tobegreaterthan(0); expect($(document.getelementbyid("location_x")).value).tobegreaterthan(0); }); });

fixture:

<div class="floor_map_edit"><p>hello world</p></div> <form> <input type="text" id="location_x" data-id-field="id-field1" class="name-field"> <input type="text" id="location_y" data-id-field="id-field2" class="name-field"> </form>

ps: i'm totally new ror , jasmine. i've gone through documents figure much out. help much appreciated.

first need little test helper clicks within element:

jquery.fn.extend({ clickinside : function(x, y){ var offset = this.offset(); var e = new jquery.event("click"); e.pagex = offset.left + x; e.pagey = offset.top + y; homecoming this.trigger(e); // chaining } });

http://jsfiddle.net/maxcal/32z62kyv/

testing easy triggering click , checking if corresponding input has right value. remember value of text field string. thats why checking .tobegreaterthan fail.

describe("edit locations", function(){ beforeeach(function(){ loadfixtures('floor_map_click.html'); // jasmine automatically clean these this.namefields = $(".name-field"); this.floor_map = $("floor_map_edit"); }); // 1 expectation per illustration practice. it("updates x coordinate when click map", function(){ this.floor_map.clickinside(6, 9); // ensure comparing number , not string expect( parseint($("#location_x").val()) ).toequal(6); }); it("updates y coordinate when click map", function(){ this.floor_map.clickinside(6, 9); expect( parseint($("#location_y").val()) ).toequal(9); }); });

javascript ruby-on-rails-4 jasmine