上下文:當用戶登錄並查閱自己的個人資料時,他可以點擊他的頭像,此點擊顯示一個帶有「上傳頭像」選項的下拉菜單。當用戶點擊這個選項時,它會打開一個表單,用於上傳頭像的新圖像。 我使用twitter bootstrap來處理下拉(和模態)。如何在經過驗證的頁面上測試JavaScript隱藏/顯示行爲?
當然,我想測試這個。但我不知道如何。
讓我們集中於下拉功能,如模態測試將可能幾乎相同:
起初我在考慮使用水豚的,但沒有辦法檢查元素是否通過它的CSS屬性display: none
可見或display: block
。 我讀過一些人建議通過水豚檢查類如hidden
。但在這種情況下,因爲我使用的是Twitter Bootstrap,因此僅有一個dropdown
。
我不想修改bootstrap行爲只是爲了能夠測試它,這將是一種氣味。
這裏是我的RSpec套件的一個樣本:
describe 'should display a dropdown menu' do
let(:user) { FactoryGirl.create :user }
before do
sign_in_as user
# I have routes just like that: /1/firstname-lastname
visit(profile_path(id: user.id, first: user.first_name.downcase, last: user.last_name.downcase))
click_link 'avatar-dropdown'
end
it { should have_css('.dropdown-menu', visible: true) }
describe 'with an upload link' do [...] end
end
的HTML看起來像:
<div class="dropdown" id="avatar-menu">
<a class="dropdown-toggle" id="avatar-dropdown" data-toggle="dropdown" href="#avatar-menu">
<%= @user.avatar %>
</a>
<ul class="dropdown-menu">
<li><a class="upload-avatar" href="#">Upload an image</a></li>
</ul>
</div> <!-- #upload-menu -->
當然,它不與visible: true
工作,爲display: none
由Twitter的引導的設置CSS。
然後,我考慮用Jasmine測試這種行爲(一個很好的機會潛入),但是如果我這樣做,我應該如何註冊一個用戶? 我不知道它是否共享測試數據庫,但我不認爲我可以使用工廠女孩在茉莉花中創建新用戶,對嗎? 我甚至不知道是否訪問茉莉花的註冊頁面(如果它甚至可能?)並提交表單將做伎倆。與認證一樣。
我該如何測試這些行爲?我應該使用水豚(有沒有一個技巧?)或茉莉花(什麼是去的方式,然後?)
謝謝!