$.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 链接/按钮通常由 JS 处理（可能你已经在链接上设置了一个方法供 Rails 使用 - POST、PUT、PATCH 等）但是 JS 中的错误正在阻止JS 处理程序不会被附加到链接/按钮。

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