如何让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年末）版本的东西进行设置：

A Quick Guide to Rails System Tests in RSpec

最后，我使用.new来创建模型，但没有保存它，所以没有显示新的投票计数。保存后移动计数的逻辑解决了问题。

在votes_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