Skip to content

Instantly share code, notes, and snippets.

@adrienpoly
Last active March 22, 2024 08:14
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adrienpoly/862846f5882796fdeb4fc85b260b3c5a to your computer and use it in GitHub Desktop.
Save adrienpoly/862846f5882796fdeb4fc85b260b3c5a to your computer and use it in GitHub Desktop.
Capybara / Stimulus test helper to ensure JS is ready when test starts
<!DOCTYPE html>
<html>
<head>
...
</head>
<body data-controller="js">
<%= yield %>
</body>
</html>
import { Controller } from 'stimulus'
export default class extends Controller {
static values = { loaded: Boolean }
connect() {
this.loadedValue = true
}
}
# ...
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
# ...
def ensure_js_is_ready
expect(page).to have_css('[data-js-loaded-value="true"]')
end
@andrewyoo
Copy link

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!

Copy link

ghost commented Feb 7, 2024

@andrewyoo Did it work?

@andrewyoo
Copy link

@alan-pie Yes, it works very well. I have no intermittent issues after implementing it in my CI tests and identifying the problem areas (right after a visit).

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