茉莉花测试功能，可将x，y单击坐标设置为文本框

AdRoiT 发表于 Dev

AdRoiT

开发环境：Ruby on rails，茉莉花。

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

在茉莉花中测试功能：（试图添加固定装置，我不知道自己在做什么）

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 inside 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);
    });

});

治具：

<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：我对RoR和茉莉花完全陌生。我仔细阅读了文档以弄清楚这一点。任何帮助深表感谢。

最大限度

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

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
    }
});

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

然后进行测试就像触发点击，然后检查相应的输入是否具有正确的值一样容易。但是请记住，文本字段的值是字符串。这就是为什么检查.toBeGreaterThan会失败的原因。

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);
    });
});