$.ajax 请求破坏 js：rspec 中的真实规范

Question

我有一个通过的规范，如下所示：

scenario "Brand likes a comment", js: true do
  visit post_path(question, as: brand)

  within("#comment_#{comment.id}") do
    click_on "Like"
  end

  expect(page).to have_text "Like •1"
end

我最近添加了一个带有 chart.js 图表的页面，我正在使用 ajax 请求加载该图表的数据，看起来是这样的：

  $.ajax({
    url: "/admin/reporting/weekly_new_users",
    type: "get",
    dataType: "json",
    cache: false,
    success: function(response){
      var ctx = document.getElementById("weeklyUsers");
      new Chart(ctx, {
          type: 'line',
          data: {
              labels: response.weekly_users.map(arr => arr[0]),
              datasets: [{
                  label: '# of New Users',
                  data: response.weekly_users.map(arr => arr[1]),
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                  ],
                  borderColor: [
                      'rgba(255,99,132,1)',
                  ],
                  borderWidth: 1
              }]
          },
      });
    }
  })
};

此 ajax 请求导致我的 js:true 规范失败，并显示以下错误消息：

Failure/Error: raise ActionController::RoutingError, "No route matches [#{env['REQUEST_METHOD']}] #{env['PATH_INFO'].inspect}"

     ActionController::RoutingError:
       No route matches [GET] "/likes/1"

当我注释掉 ajax 请求时，规范通过了。不确定是什么原因造成的，有什么想法吗？

Answer 1

您已经表明您正在使用 capybara-webkit 作为 JS 测试的驱动程序 - 如果确实如此，那么很可能您没有完全填充和转换您的 JS 代码以与其兼容。这最终意味着您在提供给您的应用程序的串联资产中存在错误（不受支持的 JS），从而阻止了某些 JS 的处理。在这种情况下，我猜你的 Like link/button 通常由 JS 处理（可能你已经在 link 上设置了一个方法供 Rails 使用 - POST、PUT、PATCH 等）但是 JS 中的错误阻止了 JS 处理程序附加到 link/button.

至于你的 $.ajax 中是什么导致了问题，一种可能是你使用了 capybara-webkit 不支持的箭头函数（它大致相当于一个 6-7 岁的孩子Safari 版本）。为了继续使用 capybara-webkit，您需要确保所有 JS 都经过转译和 polyfill 以与真正的旧浏览器兼容。一个更好的解决方案，虽然可能需要更多的工作，但可以切换到使用 Selenium with headless Chrome 或 Firefox 进行测试。您不仅能够在用户实际使用的现代浏览器上进行测试，而且能够在尝试调试问题时轻松地在有头和无头之间切换。

$.ajax 请求破坏 js：rspec 中的真实规范

$.ajax request breaking js: true spec in rspec

ajax

rspec

ruby-on-rails

capybara

capybara-webkit