Javascript jasmine测试用于将x、y单击坐标设置为文本框的函数

开发环境：RubyonRails，jasmine

需要测试的函数：获取单击坐标并使用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);
    });
});

jasmine中的测试函数：（试图添加装置，我不知道我在做什么）

固定装置：

<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>

你好，世界

---

附言：我对罗和茉莉是完全陌生的。我查阅了文件，想弄明白这一点。非常感谢您的帮助。

首先，我们需要一个在元素内部单击的小测试助手：

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;
        return this.trigger(e); // for chaining
    }
});

测试它就像触发一次点击，然后检查相应的输入值是否正确一样简单。 但是请记住，文本字段的值是字符串。这就是为什么将

检查为大于
将失败的原因

describe("Edit Locations", function(){

    beforeEach(function(){
        loadFixtures('floor_map_click.html');
        // Jasmine will automatically clean these up for us
        this.nameFields = $(".name-field");
        this.floor_map = $("floor_map_edit");
    });

    // one expectation per example is a good practice. 
    it("updates X coordinate when I click map", function(){
        this.floor_map.clickInside(6, 9);
        // ensure that we are comparing an number and not a string
        expect( parseInt($("#location_x").val()) ).toEqual(6);
    });

    it("updates Y coordinate when I click map", function(){
        this.floor_map.clickInside(6, 9);
        expect( parseInt($("#location_y").val()) ).toEqual(9);
    });
});

谢谢你的意见。但是，这会引发一个错误：TypeError:无法读取未定义的属性“equal”。我在“地板地图编辑”之前加了一个“.”。我假设它找不到什么。对不起，我已经有一段时间没有使用Jasmine了，我不小心用了语法。茉莉花使用蛇形匹配器：
toEqual
。编辑。*因为我用了茉莉花是的，我修复了那个部分。它仍然给出“预期NaN等于6”。我一直在努力解决这个问题，但到目前为止，我还没有任何运气。不过还是要感谢您的帮助。下面是一个JSFIDLE，其中包含正在传递的规范：。如果我知道让jasmine在JSFIDLE上工作是如此容易，我会从一开始就这么做。
describe("Edit Locations", function(){

    beforeEach(function(){
        loadFixtures('floor_map_click.html');
        // Jasmine will automatically clean these up for us
        this.nameFields = $(".name-field");
        this.floor_map = $("floor_map_edit");
    });

    // one expectation per example is a good practice. 
    it("updates X coordinate when I click map", function(){
        this.floor_map.clickInside(6, 9);
        // ensure that we are comparing an number and not a string
        expect( parseInt($("#location_x").val()) ).toEqual(6);
    });

    it("updates Y coordinate when I click map", function(){
        this.floor_map.clickInside(6, 9);
        expect( parseInt($("#location_y").val()) ).toEqual(9);
    });
});