2

My system tests are experiencing a race condition leading to inconsistent test results. Sometimes the turbo frame is updated before my assertion (test passes) and sometimes afterward (test fails).

View:

<div data-controller="filter">
  <%= form_with url: root_path, method: :get, data: { turbo_frame: "intakes", filter_target: "form", action: "change->filter#submit" } do %>
      <%= select_tag "country", options_for_select(@countries) %>
  <% end %>

  <%= turbo_frame_tag "intakes" do %>
      <table>
        <% @family_intakes.each do |family_intake| %>
          <tr>
            <td><%= family_intake.full_name %></td>
          </tr>
        <% end %>
      </table>
  <% end %>
</div>

This Stimulus controller submits my form on change event (ultimately updating the turbo frame):

export default class extends Controller {
  static targets = ["form"];

  submit(event) {
    this.formTarget.requestSubmit();
  }
}

Test:

class FamilyIntakesTest < ApplicationSystemTestCase
  test "Only intakes from selected country are displayed" do
    login
    select "Afghanistan", from: "country"
    assert_selector "td", text: family_intakes(:manizha).first
    assert_selector "td", text: family_intakes(:sayed).first
    refute_selector "td", text: family_intakes(:mohammad).first
  end
end

Error:

Failure:
FamilyIntakesTest#test_Only_intakes_from_selected_country_are_displayed [/home/eric/<redacted>/test/system/family_intakes_test.rb:31]:
expected not to find visible css "td" with text "Mohammad", found 1 match: "Mohammad Ahmad". Also found "Manizha Ahmadi", "Sayed Shinwari", which matched the selector but not all filters.
5
  • You might be able use the wait argument with should have_content if you're using capybara, stackoverflow.com/a/55749877/7619578 Commented Dec 7, 2022 at 14:48
  • What is on your page before selecting Afghanistan, and what is on it after? Are you sure you haven’t turned off capybaras waiting/retrying behavior? Commented Dec 8, 2022 at 1:12
  • 1
    @Int'lManOfCodingMystery I may end up going that route. Commented Dec 8, 2022 at 2:22
  • @ThomasWalpole Before selecting Afghanistan, full names of all records are displayed. After, only names from records matching that country are displayed. In this case that's manizha and sayed but not mohammed. Commented Dec 8, 2022 at 2:32
  • I haven't really tweaked too many default settings. Capybara.predicates_wait is true. Commented Dec 8, 2022 at 2:48

1 Answer 1

-3

My current solution is to add a turbo-response class to the table being updated inside my turbo frame and to scope my test assertions to that css class. That way I can't get a false negative if my assertion runs before before the frame is updated.

View update

<table class="<%= "turbo-response" if turbo_frame_request? %>">

Helper:

module ApplicationHelper
  def turbo_frame_request?
    request.headers["Turbo-Frame"]
  end
end

Test:

class FamilyIntakesTest < ApplicationSystemTestCase
  test "Only intakes from selected country are displayed" do
    login
    select "Afghanistan", from: "country"
    within('.turbo-response') do
      assert_selector "td", text: family_intakes(:manizha).first
      assert_selector "td", text: family_intakes(:sayed).first
      refute_selector "td", text: family_intakes(:mohammad).first
    end
  end
end

Also, during the debugging process, to prevent any "accidental" success of my tests caused by the turbo frame just "happening" to load first, I intentionally slowed down my JavaScript form submission:

submit(event) {
  setTimeout(() => this.formTarget.requestSubmit(), 1500);
}

The slowdown should be less than Capybara.default_max_wait_time which is typically 2 seconds or else Capybara really will give up. I went with 1.5 seconds or 1500 milliseconds. Just make sure to remove the setTimout later! Getting my tests to pass with or without that slowdown gives me way more confidence that they are passing for the right reasons!

1
  • This really shouldn't be necessary, although scoping is always a good idea to isolate changes. You should check for the things that change on the page first in order to synchronize. Since the change on the page is "mohammed" going away you should do the refute_selector first, which assuming your Capybara.default_max_wait_time is set large enough for the hardware you're running on will cause Capybara to wait for the entry to be removed from the page before moving on to your 'assert_selector' calls. I'd also recommend using assert_css/refute_css over xxx_selector when using a CSS locator Commented Dec 10, 2022 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.