斷言高度已使用水豚

我有一個iframe這是一種形式的目標改變了：斷言高度已使用水豚

<form target="preview"> 
    <textarea name="content"></textarea> 
</form> 

<iframe name="preview"></iframe>

當在文本區域的用戶類型（我省略了爲了簡潔去抖動碼的形式被提交）：

$('textarea').keyup(function() { 
    // debouncer ensures this happens at *most* every two seconds 
    $('form').submit(); 
});

而且我這使iframe的高度腳本調整到它的內容：

$('iframe').load(function() { 
    var height = $('body', $(this).contents()).height(); 
    $(this).height(height); 
});

現在我正在編寫一個功能規格來聲明實際發生的高度調整。我已經確定我需要使用evaluate_script來獲得iframe的高度。所以，從理論上說，我的天賦應該是這個樣子：

def preview_iframe_height 
    page.evaluate_script('$("iframe").height()') 
end 

scenario 'preview grows to content', js: true do 
    initial_height = preview_iframe_height 
    fill_in('Content', with: 'some content') 
    expect(preview_iframe_height).to be > initial_height 
end

但是，此代碼不會等待重新填充的iframe請求，總是失敗。我知道水豚非常善於利用像have_content這樣的匹配器來等待內容出現，但我不知道如何去等待高度發生變化。有任何想法嗎？

我的測試套件：

RSpec的
水豚
騷靈

來源

2014-09-23 tristanm

您可能會發現此鏈接有幫助： http://robots.thoughtbot.com/automatically-wait-for-ajax-with-capybara它是關於等待ajax完成，但你可以適應它等待，直到你的jQuery完成調整大小，然後再檢查高度， – 2014-09-23 23:55:12

您可能也會發現這也很有幫助：http://animalssittingoncapybaras.tumblr.com/它會讓您放心解決問題。 – Jake 2014-09-23 23:57:19

由於上述@泰倫 - 東部的評論，我已經成功地適應this from Thoughtbot's blog：

def preview_iframe_height 
    page.evaluate_script('$("iframe").height()') 
end 

scenario 'preview grows to content', js: true do 
    page.execute_script(%{ 
    iframe_loaded = false; 
    $('iframe').load(function() { 
     iframe_loaded = true; 
    }); 
    }); 

    initial_height = preview_iframe_height 
    content = "line\n\n" * 30 
    fill_in('Content', with: content) 

    Timeout.timeout(Capybara.default_wait_time) do 
    loop until page.evaluate_script('iframe_loaded') 
    end 

    expect(preview_iframe_height).to be > initial_height 
end

This de罰款一個變量，iframe_loaded，並在iframe加載完成後將其設置爲true。規格等待iframe_loaded變成true繼續其預期。

這可以被抽象爲一個更通用的幫助方法。

請問upvote @ taryn-east對這個問題非常有用的評論！

來源

2014-09-24 00:23:46 tristanm

斷言高度已使用水豚

回答

相關問題