Skip to content

Instantly share code, notes, and snippets.

@adrienpoly

adrienpoly/application.html.erb

Last active November 3, 2024 13:14
Show Gist options
  • Save adrienpoly/862846f5882796fdeb4fc85b260b3c5a to your computer and use it in GitHub Desktop.
Save adrienpoly/862846f5882796fdeb4fc85b260b3c5a to your computer and use it in GitHub Desktop.
Download ZIP
Capybara / Stimulus test helper to ensure JS is ready when test starts
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
...
</head>
<body data-controller="js">
<%= yield %>
</body>
</html>
Raw
js_controller.js
import { Controller } from 'stimulus'
export default class extends Controller {
static values = { loaded: Boolean }
connect() {
this.loadedValue = true
}
}
Raw
some_system_test_spec.rb
# ...
scenario 'test some js behavior', js: true do
visit some_path
ensure_js_is_ready
# JS is fully loaded you can start interacting with the page
end
# ...
Raw
system_spec_helpers.rb
def ensure_js_is_ready
expect(page).to have_css('[data-js-loaded-value="true"]')
end
@rogerkk
Copy link

rogerkk commented Nov 3, 2024 •
edited
Loading

Thanks for this idea!

We're lazy loading Stimulus controllers and this didn't fully solve our flaky tests. Since lazy loading controllers get loaded in the order in which they occur in the DOM, this solution seems to work best when referencing the controller at the very end of the document. Something like this:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>

  <body>
    <%= yield %>
  </body>
  
  <js-testing data-controller="js" />
</html>

I know this kind of self-closing is invalid HTML, but for some reason the tag needs to be self closing for the controller to be executed. Haven't had the time to dig into that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment