javascript - 使用Capybara/Poltergeist使用Fullcalendar测试拖放

Question

总览

我正在使用Ruby on Rails应用程序，其中的一部分使用Fullcalendar将事件拖到日历空间内或从日历空间内安排，以设置日程。

这一切工作都很好，但是测试它是另一回事。最初，我是通过一个控制器规范测试该功能的，该控制器规范模拟了通过拖放方法收集的数据，但不幸的是，该控制器规范被发现破坏了整个测试套件。因此，我被迫使用功能规格进行测试，然后将面板实际拖放到日历上。

测试尝试＃1失败

最初，我尝试使用Capybara的Node :: Element＃drag_to，尽可能地指定一个元素到日历中（原来是时隙<td>元素的第二个<tr>子元素（示例：$('tr[data-time="12:00:00"] td.fc-widget-content')[1]） 。

确切的电话是：

find('div[data-duration="1800000"]').drag_to all('tr[data-time="12:00:00"] td.fc-widget-content')[1]使用find验证的all和binding.pry都找到了合适的元素

这失败了，我很确定它失败了，因为该<td>元素的左边缘在Fullcalendar注册为可放置的区域之外，因此该元素返回了它的位置。

我想我需要一种方法来指定像素水平偏移来解决此问题。

测试尝试＃2失败

Capybara / Poltergeist附带了一个看似方便的drag_by(x, y)（请参阅文档here）。因为我需要根据给定的div元素计算自己的x和y偏移量，所以在我的规范中将该操作隔离到了它自己的函数中：

def drag_to_calendar(element_identifier, time = '12:00:00', x_off = 0, y_off = 0)
  x_buff = 100 # Number of pixels to the right of the left edge to get to the middle-area of the element
  y_buff = 10  # Number of pixels below the top to get to the middle-area of the element
  dest_x_script = "$('tr[data-time=\"#{time}\"]').offset().left"
  dest_y_script = "$('tr[data-time=\"#{time}\"]').offset().top"
  init_x_script = "$('#{element_identifier}').offset().left"
  init_y_script = "$('#{element_identifier}').offset().top"

  dest_x = page.evaluate_script(dest_x_script) + x_buff + x_off
  dest_y = page.evaluate_script(dest_y_script) + y_buff + y_off
  init_x = page.evaluate_script(init_x_script)
  init_y = page.evaluate_script(init_y_script)
  x = dest_x - init_x
  y = dest_y - init_y

  find(element_identifier).native.drag_by(x, y)
end

我做了这个功能，可以指定任何时间以及其他x和y偏移量（用于在日历内/日历周围更动态地移动元素）。 element_identifier只是一个字符串，可以直接将其插入Capybara find()函数中以获取该元素。

用法示例：

drag_to_calendar("div[data-duration="1800000"]", '12:00:00', 0, 0)

（* _script变量是因为您不能直接将＃{variables}插入到validate_script参数中，因此我不得不在调用它们之前构建这些字符串。您可能会注意到，我在脚本中只得到了 <tr>元素，而不是第二个 <td>子元素；这是因为我无法在子元素上使用.offset（）； 100像素的水平偏移是要比以前更左移）

使用binding.pry，我确认所有变量都已正确设置，所有脚本均正常运行，并且最后所有算术均按预期运行。

使用完全与 robertc's answer here无关的与应用程序无关的完全独特的测试页，我确认Capybara / Poltergeist的drab_by也可以正常工作。 （为了构建测试环境，我用robertc的示例重写了在#edit页面上进行的所有操作，将他的样式添加到了application.scss中，并将以下代码添加到了在该页面上运行的javascript文件中：

$(document).on('turbolinks:load',function() {
    // Pre-existing javascript things....

    dm = document.getElementById('dragme');
    if (dm != null) {
        dm.addEventListener("mousedown", dmMouseDown, false);
    }
});

function dmMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("mousemove", dmMouseMove, false);
}

function dmMouseMove(ev) {
    var pX = ev.pageX;
    var pY = ev.pageY;
    dm.style.left = pX + "px";
    dm.style.top = pY + "px";
    document.addEventListener ("mouseup", dmMouseUp, false);
}

function dmMouseUp() {
    document.removeEventListener ("mousemove", dmMouseMove, false);
    document.removeEventListener ("mouseup", dmMouseUp, false);
}

这表明Capybara / Poltergeist的drag_by的操作与使用鼠标拖动元素的操作完全相同。

但是，当所有这些起作用的元素放在一起时，该规范仍然没有起作用。在binding.pry环境中，我使用可能想到的每个变换对拖动进行了测试：使用负值包装x和y（以防我进入了一个镜像宇宙，其中+ x表示左），将x和y视为与初始值的偏移量元素，从页面原点开始将它们视为绝对值，甚至将半随机值放入x和y中，以期希望有足够的飞镖最终可以射入飞镖板上。没事。要么元素没有被拖动（不太可能考虑到上述情况），要么fullcalendar没有注册下降。

评定

我认为问题出在Fullcalendar，或者是Poltergeist和Fullcalendar之间的互动，其中Fullcalendar无法识别掉落的东西。在Chrome的调试工具上查看事件侦听器，似乎mousedown，mouseup和mousemove是Javascript仅有的与拖放相关的事物，因此Fullcalendar唯一可以寻找的事物，因此似乎应该正在工作。但事实并非如此。

任何建议将不胜感激。任何解决方案，更是如此！

Answer 1

以下代码显示了在FullCalendar演示页面上工作的事件的拖放

require 'capybara/poltergeist'

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, js_errors: true, phantomjs_options: ['--ssl-protocol=TLSv1.2'])
end

sess = Capybara::Session.new(:poltergeist)
sess.visit 'https://fullcalendar.io/'
event = sess.first('.fc-day-grid-event', minimum: 1)
first_day = sess.find('.fc-day-grid .fc-week:first-child .fc-content-skeleton tbody td:first-child')
first_day.assert_no_selector('.fc-day-grid-event')

event.drag_to(first_day)
first_day.assert_selector('.fc-day-grid-event')

这会将日历上的第一个事件拖回到日历的第一天。由于该功能正常运行，可能是FullCalendar的配置问题，您的位置计算已关闭，或者您拖到错误的元素。我在FullCalendar中看到拖动开始之前有一个可配置的延迟，您是否有机会进行设置？