在 Capybara 功能规范中测试 toast 是否触发？

Question

我有一个 Rails 应用程序，我最近重构了标准 flash[:success] 消息以使用 flash[:toast]，使用 http://materializecss.com/dialogs.html

这是我用我的 Flash 部分所做的：

<% flash.each do |type, message| %>
  <% if type == "success" %>
    <div class="alert alert-success alert-dismissable" role="alert">
      ...
    </div>
  <% elsif type == "toast" %>
    <script>
      $(function() {
        Materialize.toast('<%= message %>', 3000);
      });
    </script>
  <% else %>
    <div class="alert alert-danger alert-dismissible" role="alert">
      ...
    </div>
  <% end %>
<% end %>

这看起来很棒，尤其是在移动设备和复杂的数据页面上，我将用户发送回页面中间，并且页面顶部的标准 flash 成功消息将不可见.

我可以在控制器测试中轻松测试 flash[:toast] 是否为 nil，但在水豚功能测试中，我无法访问它，而且我无法使用我使用的标准代码用于测试 flash[:success]，如：

expect(page).to have_content("Your email address has been updated successfully.")
expect(page).to have_css(".alert-success")

现在我正在求助于测试是否存在警报危险，例如：

expect(page).to_not have_css(".alert-danger")

这有效，但并没有真正测试 toast 是否已启动。有什么方法可以检查 javascript 是否已触发或吐司是否在页面上显示了 3 秒？

Answer 1

只要您使用的是支持 JS 的驱动程序（除了默认的机架测试驱动程序之外，几乎可以使用任何其他驱动程序）然后

expect(page).to have_content("The message shown by the toast")

应该在页面上显示 toast 时找到它。如果你想检查它是否在 3 秒内出现和消失，你可以这样做

expect(page).to have_content("The message shown by the toast") 
expect(page).not_to have_content("The message shown by the toast", wait: 3)

第一个语句应该等待文本出现，第二个语句将等待最多 3 秒直到它消失。如果您想真正验证文本是否显示在 toast 容器中，那么您可以这样做

expect(page).to have_css("#toast-container", text: "The message shown") #update css selector to whatever container you are displaying the toast in
expect(page).not_to have_css("#toast-container", text: "The message shown", wait: 3)

在 Capybara 功能规范中测试 toast 是否触发？

Test that a toast fires off in a Capybara feature spec?

rspec

ruby-on-rails

capybara

materialize

rspec-rails