jquery - 检查 Capybara::Node::Element 是否已被 jQuery.remove() 删除

Question

我正在尝试进行以下测试:

it 'remove item from cart' do
  visit cart_path
  button = page.find("a[href='/carts/#{item.id}/remove']")
  card = find_ancestor_with_class(button, '.card')
  button.click
  # check if card has been removed from page
end

此测试应该有效，因为以下 JS 会从页面中删除卡片:

$.ajax({
  url: link,
  method: "GET",
  success: function() {
    $('#alert-modal').modal('show');
    $(button).closest(".card").remove();
  }
});

如何验证 .card html 是否已从页面中删除？

Answer 1

要检查页面上是否有某些内容不可见，您会执行以下操作

expect(page).to have_no_css(".card")

或

expect(page).not_to have_css(".card")

所以总的来说，它变成了

visit cart_path
click_link(href: "/cars/#{item.id}/remove")    
expect(page).not_to have_css(".card")

只有删除所有 .card 元素时，这才有效。如果页面上仍有其他 .card 元素，则根据您希望在卡片中出现的文本或卡片元素(id 等)上的其他属性/属性进行检查，例如项目描述或其他显示内容，如

expect(page).not_to have_css(".card", text: item.description)

如果您经常处理 .card 元素，您还可以编写自定义 Capybara 选择器以使内容更易于阅读，本地化“卡片”等的 CSS 定义

Capybara.add_selector :card do
  xpath do |content| 
    xp = XPath.css('.card')
    xp = xp[XPath.string.n.is(content)] unless content.nil?
    xp
  end
end

然后应该允许

expect(page).to have_no_selector(:card)
expect(page).to have_no_selector(:card, item.description)

等等