檢查水豚::節點::元素已經由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 

該測試suppossed工作，因爲下面的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元素很多，你也可以寫一個自定義的水豚選擇，以使事情更容易閱讀，本地化「卡」的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) 

等