如何使JavaScript在Rspec Capybara測試中運行

Question

我正在構建一個簡單的Reddit Clone進行練習，並想測試一下ajax是否有效以及屏幕上的值是否已使用javascript響應正確更新。 這是測試：

RSpec.describe "User voting", type: :system, js: true do # Rails 5 uses describe, Rails < 5 feature
    it "updates the downvote count" do
        user = create(:user)
        login_as(user)
        link = create(:link)
        visit root_path
        expect(page).to have_css('#upvotes-1', text: '0')
        click_on(id: 'upvoter-1')
        wait_for_ajax
        expect(page).to have_css('#upvotes-1', text: '1')
   end
end

wait_for_ajax ：（在/spec/support/wait_for_ajax.rb中）

module WaitForAjax
    def wait_for_ajax
        Timeout.timeout(Capybara.default_max_wait_time) do
            loop until finished_all_ajax_requests?
        end     
    end

    def finished_all_ajax_requests?
        page.evaluate_script('jQuery.active').zero?
    end
end

來自index.html.erb的相對代碼：

<%= button_tag(class: "btn btn-secondary btn-sm", id: "upvoter-#{link.id}") do %>
 <span class="fa fa-chevron-up"></span>
 Upvote
 <%= content_tag(:span, link.upvotes(), id: "upvotes-#{link.id}") %>
<% end %>   

控制器代碼：

  def create
    @vote = current_user.votes.new(link_params)
    if @vote.vote_value == 1
      @new_value = @vote.link.upvotes
      @id_name = "#upvotes-" + @vote.link.id.to_s
    else
      @new_value = @vote.link.downvotes
      @id_name = "#downvotes-" + @vote.link.id.to_s
    end

    respond_to do |format|
      if @vote.save
        format.js   { }
      else
        format.html { render :new }
      end
    end
  end

最后是create.js.erb：

console.log("create.js.erb file");

$("<%= j @id_name %>").html("<%= j @new_value.to_s %>");

的Gemfile：

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  gem 'rspec-rails'
  gem 'guard-rspec', require: false
  gem 'factory_bot_rails', '~> 4.0' 
  gem 'database_cleaner'
  gem 'rails-controller-testing'
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'
  gem 'puma'
  gem 'poltergeist'
end

如果我自己加載網站並單擊按鈕，則提示會正確更新。 但是，測試失敗的第二個期望。 如果我重新加載頁面，則提示將更新，因此數據庫將更新，並且#create可以按預期工作。 javascript由於某種原因未執行。 而且我也嘗試在click_on之后入睡。 它仍然失敗。 我在這里似乎缺少一些簡單的東西。

Answer 1

切換到Selenium幫助我更清楚地了解了問題。 這是一個非常不錯的教程，告訴您如何使用Rails 5 /最新（2018年末）版本進行設置：

RSpec中的Rails系統測試快速指南

最后，我使用.new來創建模型，但沒有保存它，因此沒有顯示新的投票數。 保存后移動拉動計數的邏輯即可解決問題。

在tickets_controller.rb中：

  def create
    @vote = current_user.votes.new(link_params)
    respond_to do |format|
      if @vote.save
        format.js   {
          if @vote.vote_value == 1
            @new_value = @vote.link.upvotes
            @id_name = "#upvotes-" + @vote.link.id.to_s
          else
            @new_value = @vote.link.downvotes
            @id_name = "#downvotes-" + @vote.link.id.to_s
          end             
            }
     else
       format.html { render :new }
     end
   end
  end