Capybara Webkit, найдите определенный элемент li, нажмите кнопку «Удалить» и проверьте, отсутствует ли какой-либо элемент li.

Question

Я хочу протестировать простой delete jquery/ajax, используя capybara-webkit.

Пользователь нажимает кнопку «Удалить», в пределах <li>, после чего элемент должен исчезнуть.

Мой HTML выглядит следующим образом:

<div class="artist-songs"> 
    <h3 tabindex="-1" id="song_h" class="song_h">Songs:</h3> 
    <ol id="song-list"> 
     <li class="song"> 
      <span>The Plug</span> 
      <span> 
       - 
       2000 
       - 
      </span> 
      <span>Downtempo</span> 
      <button name="button" type="submit" data-artist-id="5" data-song-id="14" class="delete del_song">Delete</button> 
     </li> 

я решил генерировать тестовые модели жгутов так:

feature 'Testing song methods', js: true do 
    let(:test_artist) { create :artist, name: 'Band' } 

    let!(:song1) { create :song, title: 'Song 1', year: 1987, genre: 'Hip Hop', artist: test_artist } 
    let!(:song2) { create :song, title: 'Song 2', artist: test_artist } 
    let!(:song3) { create :song, title: 'Song 3', artist: test_artist } 
    let!(:song4) { create :song, title: 'Song 4', artist: test_artist } 


    scenario 'Delets first song' do 
    visit artist_path(test_artist.id) 
    end 
end 

я получаю основную идею, как тест простые действия, но я не знаю, как напишите тест, поэтому я уверен, что правильный элемент <li> удален не случайно.

Так, например, «Песня 1» удаляется только.

Answer 1

Для проверки удаления SONG1 вы могли бы сделать что-то вроде

scenario 'Delete song 1' do 
    visit artist_path(test_artist.id) 
    within('#song-list') do 
    find(:css, 'li.song', text: song1.title).click_button('Delete') 
    expect(page).not_to have_css('li.song', text: song1.title) # RSpec 
    # page.assert_no_selector(:css, 'li.song', text: song1.title) # if not using RSpec 
end 

Примечание:: параметр CSS может быть опущена, если Capybara.default_selector ==: CSS (это значение по умолчанию)

Если вы» вновь собирается иметь дело с большим количеством li.song элементов в ваших тестах вы можете также определить пользовательский селектор, как

Capybara.add_selector(:song) do 
    xpath { |title| XPath.css('li.song')[XPath.string.n.is(title)] } 
end 

означает, что вы могли бы сделать

find(:song, song1.title).click_button('Delete') 
expect(page.not_to have_selector(:song, song1.title)