3

Capybara / Stimulus test helper to ensure JS is ready when test starts

 6 months ago
source link: https://gist.github.com/adrienpoly/862846f5882796fdeb4fc85b260b3c5a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Stimulus test helper to ensure JS is ready when test starts · GitHub

Instantly share code, notes, and snippets.

Last active December 25, 2023 09:42
Capybara / Stimulus test helper to ensure JS is ready when test starts

Works perfectly.

Thanks!

FWIW my implementation was:

app/views/layouts/application.html.erb

<body class='h-full overflow-hidden' <%== %{data-controller='js'} if Rails.env.test? %>>

app/javascript/controllers/js_controller.js

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  static values = { loaded: { type: Boolean, default: false } }

  connect () {
    this.loadedValue = true
  }
}

But this doesn't actually tell Capybara to wait until something has loaded. I think its fast enough that the expectation just never fails. What if the stimulus controller is more complex or has async loading, such as in a more complex Stripe Elements form?

This works but it doesn't really scale up well when your page starts having more and more stimulus controllers attaching to it. It starts to get really messy when all controllers need this added to them. I really wish there was a way to handle this for all controllers even if it's only in test mode.

Author

This works but it doesn't really scale up well when your page starts having more and more stimulus controllers attaching to it. It starts to get really messy when all controllers need this added to them. I really wish there was a way to handle this for all controllers even if it's only in test mode.

There is only one controller needed in my example. Once a controller is connected it means all controllers on your page are connected.

There is only one controller needed in my example. Once a controller is connected it means all controllers on your page are connected.

Part of the issue I have is I’m using turbo streams to dynamically load additional parts of the page which have stimulus controllers making it all more complicated. In my case one controller being connected doesn’t necessarily mean all of them are.

Author

Lazy loaded frames have a complete attribute when. they are loaded
Turbo Stream channel have a connected attribute once they are ready to receive messages

given that the Stimulus application is already started on the page when new content is added it gets connected almost immediately. It never created a flaky on my side.

Can you give a more detailed example that provides unreliable test?

Sure, I have a flaky test at the moment that uses a toggle controller to show or hide a dropdown element. The controller is extremely basic:

toggle_controller.js

import {Controller} from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["content"]
  static classes = ["visibility"]

  toggle(event) {
    event.preventDefault();
    this.contentTargets.forEach(t => t.classList.toggle(this.visibilityClass));
  }
}

On the page I have the following:

div data-controller="toggle" data-toggle-visibility-class="hidden"
	button#dropdown-menu data-action="toggle#toggle"
	  .w-6 = "Dropdown"
	.relative
	  .hidden data-toggle-target="content"
        = link_to some_path, "Some Action"
	  ...

I then have a test the does the following:

	visit "/"
    ensure_js_is_ready
    click_on "dropdown-menu"
    click on "Some Action"

I get the following failure sometimes:

     Failure/Error: click_on "Some Action"
     
     Capybara::ElementNotFound:
       Unable to find visible link or button "Some Action"

This test intermittently fails for me since even though the JS controller is loaded, the toggle controller has not attached to the button yet. I can see from the test screenshot that the click has fired since the button is selected but the dropdown is missing. In order to fix this I have been having to add this.loadedValue = true individually to all of my stimulus controllers, which isn't ideal but it is the only way I can get somewhat reliable tests.

Author

Interesting I never had any issue with similar test

here is what you could try

connect() {
  requestAnimationFrame(() => {
      this.loadedValue = true
   })
}

loaded value will be set in the next tick after connect that could help hopefully

@adrienpoly Thanks for the suggestion! I'll have to try that out and report back. For now I've just been adding this.loadedValue = true on connect for all my controllers where this problem presents itself. It works but it really litters up all my stimulus controllers. It would really be nice if stimulus were just able to handle this instead of requiring workarounds like this.

I've been playing around with this as well. I noticed when i load all my controllers using import "controllers", they appear to load alphabetically when i put console.log in the various connect() function. So i renamed the js_controller to zz_js_controller and i'm going to try that out.

Given it's an intermittent issue only in my system tests, i can't confirm if it will fix anything. Thanks for this post though!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK