Question

我有以下要测试的功能：发表评论并用它更新我的时间表。这是异步完成的。

这是我的表格（部分）：

<%= form_for [answer, comment], remote: true do |f| %>
  <%= render 'shared/error_messages', object: f.object %>

  <div class="form-group">
    <%= f.text_area :content, class: "form-control" %>
  </div>
  <%= f.submit btn_text, class: "btn btn-primary pull-right" %>
<% end %>

这是我的行动：

  def create
    @answer = Answer.find(params[:answer_id])
    @comment = @answer.comments.create(comment_params.merge(user: current_user))

    respond_to { |format| format.js }
  end

这是我行动的答案：

<% if @comment.errors.any? %>
  $('#new_comment').prepend('<%= escape_javascript(render "shared/error_messages", object: @comment) %>');
<% else %>
  // Add comment in the timeline.
  $(".timeline").prepend("<%= escape_javascript(render partial: 'comment', locals: { comment: @comment }) %>")
  $("#comment_content").val("");
<% end %>

最后，这是我的功能测试（我正在使用RSpec，Capybara和Poltergeist）：

需要'rails_helper'

describe "Post a comment", js: true do
  let(:teacher) { create(:user, :teacher) }
  let!(:answer) { create(:answer) }

  before do
    login_as teacher
    visit answer_path(answer)
    fill_in "comment_content", with: "comment"
    click_on "Postar comentário"
  end

  it "add the comment to the page" do
    expect(page).to have_selector("li.time-label span", count: 1)
    expect(page).to have_selector("div.timeline-item", count: 1)
  end
end

此功能在开发环境中运行良好，但在此功能测试中无效。我收到“找不到错误：

  1) Post a comment add the comment to the page
     Failure/Error: expect(page).to have_selector("li.time-label span", count: 1)
       expected to find css "li.time-label span" 1 time but there were no matches

我用打印屏幕检查了，表单提交按钮仍然按下，好像还在等待答案（我增加Capybara.default_max_wait_time，但答案永远不会出现。）

但是，检查测试日志时，会向页面添加评论的create.js被调用：

Processing by CommentsController#create as JS
  Parameters: {"utf8"=>"✓", "comment"=>{"content"=>"comment"}, "commit"=>"Postar comentário", "answer_id"=>"1"}
  [1m[36mUser Load (0.3ms)[0m  [1m[34mSELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?[0m  [["id", 4], ["LIMIT", 1]]
  [1m[36mAnswer Load (0.1ms)[0m  [1m[34mSELECT  "answers".* FROM "answers" WHERE "answers"."id" = ? LIMIT ?[0m  [["id", 1], ["LIMIT", 1]]
  [1m[35m (0.1ms)[0m  [1m[36mbegin transaction[0m
  [1m[35mSQL (0.3ms)[0m  [1m[32mINSERT INTO "comments" ("answer_id", "user_id", "content", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?)[0m  [["answer_id", 1], ["user_id", 4], ["content", "comment"], ["created_at", 2017-04-09 13:06:14 UTC], ["updated_at", 2017-04-09 13:06:14 UTC]]
  [1m[35m (316.9ms)[0m  [1m[36mcommit transaction[0m
  Rendering comments/create.js.erb
  Rendered shared/_error_messages.html.erb (0.9ms)
  Rendered comments/_form.html.erb (108.9ms)
  Rendered comments/_comment.html.erb (221.3ms)
  Rendered comments/create.js.erb (236.7ms)
Completed 200 OK in 784ms (Views: 239.8ms | ActiveRecord: 317.7ms)

这里可以发生什么？

编辑：

comments/_comment.html.erb：

<li id="comment-<%= comment.id %>">
  <i class="fa fa-envelope bg-blue"></i>

  <div class="timeline-item">
    <span class="time">
      <i class="fa fa-clock-o"></i>
      <%= comment.created_at.strftime("%d/%m/%Y %H:%M:%S") %>
    </span>

    <div class="timeline-body">
      <div id="comment-<%= comment.id %>-content">
        <%= comment.content %>
      </div>
    </div>

    <div class="pull-left" style="color: grey; margin-right: 20px" title="Hora de postagem">
      <i class="fa fa-clock-o"></i>
      <%= comment.created_at.strftime("%H:%M:%S") %>
    </div>

    <% if comment.created_at != comment.updated_at %>
      <div class="pull-left" style="color: grey" title="Data e hora de alteração">
        <i class="fa fa-pencil-square-o"></i>
        <%= comment.created_at.strftime("%d/%m/%Y %H:%M:%S") %>
      </div>
    <% end %>

    <div class="pull-right">
      <%= link_to comment, method: :delete, remote: true, title: "Deletar comentário",
          data: { confirm: "Tem certeza que deseja excluir esse comentário?" } do %>
          <i class="fa fa-times" style="color: red; margin-right: 4px"></i>
      <% end %>

      <a id="edit-comment-<%= comment.id %>" href="#" target="">
        <i class="fa fa-pencil-square-o"></i>
      </a>
    </div>

  </div>
</li>

<script>
  $('#edit-comment-<%= comment.id %>').click(function(event) {
    event.preventDefault();
    $('#comments-form').html("<%= escape_javascript(render partial: 'comments/form', locals: { comment: comment, answer: nil, btn_text: 'Salvar' } ) %>");
    $('#comments-form').append("<a id='cancel-edit' href='#'>Cancelar edição</a>");
  });
</script>

功能测试永远不会使用ajax响应更新视图

0 个答案: