Module: Opal::Vite::Testing::StableHelpers

Defined in:
lib/opal/vite/testing/stable_helpers.rb

Overview

StableHelpers - JavaScript-based element interaction methods for Capybara All polling and retry logic runs in JavaScript for reliability Reduces Ruby ↔ JavaScript communication overhead

Usage:

# In spec_helper.rb
require 'opal/vite/testing/stable_helpers'

RSpec.configure do |config|
  config.include Opal::Vite::Testing::StableHelpers, type: :feature
end

Constant Summary collapse

DEFAULT_TIMEOUT =

Default configuration

10
DEFAULT_INTERVAL =

ms (JavaScript side)

50

Instance Method Summary collapse

Instance Method Details

#js_wait_for(js_condition, timeout: DEFAULT_TIMEOUT) ⇒ Object

Public API for custom JavaScript conditions

Parameters:

  • js_condition (String) —

    JavaScript expression that returns true when ready

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



223
224
225
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 223

def js_wait_for(js_condition, timeout: DEFAULT_TIMEOUT)
  js_poll_until(js_condition, timeout: timeout, error_message: "Condition not met: #{js_condition}")
end

#stable_all(selector, timeout: DEFAULT_TIMEOUT) ⇒ Array<Capybara::Node::Element>

Find all elements after ensuring DOM stability

Parameters:

  • selector (String) —

    CSS selector

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds

Returns:

  • (Array<Capybara::Node::Element>) —

    Found elements



36
37
38
39
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 36

def stable_all(selector, timeout: DEFAULT_TIMEOUT)
  wait_for_dom_stable(timeout: timeout)
  all(selector, wait: 1)
end

#stable_click(selector, timeout: DEFAULT_TIMEOUT) ⇒ Object

Click element with retry logic Uses Capybara native click with JS fallback for reliability

Parameters:

  • selector (String) —

    CSS selector

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 45

def stable_click(selector, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  start_time = Time.now

  loop do
    begin
      # Use Capybara's find with wait, then click
      element = find(selector, wait: 2, visible: true)
      element.click
      # Small delay to allow event processing
      sleep(0.05)
      return true
    rescue Capybara::ElementNotFound, Ferrum::NodeNotFoundError, Ferrum::TimeoutError,
           Capybara::Cuprite::MouseEventFailed => e
      # If native click fails, try JavaScript click
      js_clicked = page.evaluate_script("        (function() {\n          var el = document.querySelector('\#{escaped_selector}');\n          if (el && el.offsetParent !== null) {\n            el.click();\n            return true;\n          }\n          return false;\n        })()\n      JS\n      return true if js_clicked\n\n      elapsed = Time.now - start_time\n      raise e if elapsed > timeout\n      sleep(DEFAULT_INTERVAL / 1000.0)\n    end\n  end\nend\n")

#stable_find(selector, timeout: DEFAULT_TIMEOUT, visible: true) ⇒ Capybara::Node::Element

Wait for element to be present and stable in DOM using JavaScript polling

Parameters:

  • selector (String) —

    CSS selector

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds

Returns:

  • (Capybara::Node::Element) —

    The found element



27
28
29
30
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 27

def stable_find(selector, timeout: DEFAULT_TIMEOUT, visible: true)
  js_wait_for_element(selector, timeout: timeout, visible: visible)
  find(selector, visible: visible, wait: 1)
end

#stable_input(selector, value, submit_key: nil, timeout: DEFAULT_TIMEOUT) ⇒ Object

Combined set and send_keys for form inputs (common pattern) Uses JavaScript for value setting, Capybara native for key events

Parameters:

  • selector (String) —

    CSS selector

  • value (String) —

    Value to type

  • submit_key (Symbol) (defaults to: nil) —

    Key to send after value (e.g., :enter)



101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 101

def stable_input(selector, value, submit_key: nil, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  escaped_value = escape_js(value)
  start_time = Time.now

  loop do
    # Set value via JavaScript for reliability
    result = page.evaluate_script("      (function() {\n        var el = document.querySelector('\#{escaped_selector}');\n        if (!el || el.offsetParent === null) {\n          return { success: false, reason: 'not_found' };\n        }\n\n        try {\n          el.focus();\n          el.value = '\#{escaped_value}';\n          el.dispatchEvent(new Event('input', { bubbles: true }));\n          el.dispatchEvent(new Event('change', { bubbles: true }));\n\n          if (el.value !== '\#{escaped_value}') {\n            return { success: false, reason: 'value_not_set' };\n          }\n\n          return { success: true };\n        } catch (e) {\n          return { success: false, reason: e.message };\n        }\n      })()\n    JS\n\n    if result && result['success']\n      # Use Capybara's native send_keys for Enter key (more reliable with Stimulus)\n      if submit_key\n        # Small delay to ensure Stimulus has processed the value change\n        sleep(0.05)\n        element = find(selector)\n        element.native.send_keys(submit_key)\n      end\n      return true\n    end\n\n    elapsed = Time.now - start_time\n    if elapsed > timeout\n      reason = result ? result['reason'] : 'unknown'\n      raise Capybara::ElementNotFound, \"stable_input failed on '\#{selector}': \#{reason}\"\n    end\n\n    sleep(DEFAULT_INTERVAL / 1000.0)\n  end\nend\n")

#stable_send_keys(selector, *keys, timeout: DEFAULT_TIMEOUT) ⇒ Object

Send keys to element with stability check

Parameters:

  • selector (String) —

    CSS selector

  • keys (Array) —

    Keys to send



91
92
93
94
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 91

def stable_send_keys(selector, *keys, timeout: DEFAULT_TIMEOUT)
  element = stable_find(selector, timeout: timeout)
  element.native.send_keys(*keys)
end

#stable_set(selector, value, timeout: DEFAULT_TIMEOUT) ⇒ Object

Set value on input with stability check

Parameters:

  • selector (String) —

    CSS selector

  • value (String) —

    Value to set

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



83
84
85
86
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 83

def stable_set(selector, value, timeout: DEFAULT_TIMEOUT)
  escaped_value = escape_js(value)
  js_retry_action(selector, 'set', value: escaped_value, timeout: timeout)
end

#wait_for_checked(selector, timeout: DEFAULT_TIMEOUT) ⇒ Object

Wait for checkbox to be checked

Parameters:

  • selector (String) —

    CSS selector

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



211
212
213
214
215
216
217
218
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 211

def wait_for_checked(selector, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  js_poll_until(
    "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.checked === true; })()",
    timeout: timeout,
    error_message: "Checkbox '#{selector}' not checked"
  )
end

#wait_for_class(selector, class_name, timeout: DEFAULT_TIMEOUT) ⇒ Object

Wait for element to have specific class

Parameters:

  • selector (String) —

    CSS selector

  • class_name (String) —

    CSS class name

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



184
185
186
187
188
189
190
191
192
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 184

def wait_for_class(selector, class_name, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  escaped_class = escape_js(class_name)
  js_poll_until(
    "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.classList.contains('#{escaped_class}'); })()",
    timeout: timeout,
    error_message: "Class '#{class_name}' not found on '#{selector}'"
  )
end

#wait_for_count(selector, count, timeout: DEFAULT_TIMEOUT) ⇒ Object

Wait for element count to match expected (all polling in JavaScript)

Parameters:

  • selector (String) —

    CSS selector

  • count (Integer) —

    Expected count

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



157
158
159
160
161
162
163
164
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 157

def wait_for_count(selector, count, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  js_poll_until(
    "document.querySelectorAll('#{escaped_selector}').length === #{count}",
    timeout: timeout,
    error_message: "Expected #{count} elements for '#{selector}'"
  )
end

#wait_for_dom_stable(timeout: DEFAULT_TIMEOUT, stability_time: 100) ⇒ Object

Wait for DOM to be stable (no pending mutations) Uses MutationObserver setup in JS with Ruby-based polling

Parameters:

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds

  • stability_time (Integer) (defaults to: 100) —

    Time in ms with no changes to consider stable



231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 231

def wait_for_dom_stable(timeout: DEFAULT_TIMEOUT, stability_time: 100)
  # Setup MutationObserver in JavaScript
  page.execute_script("    window.__domStabilityState = { stable: false, lastChange: Date.now() };\n    if (window.__domObserver) window.__domObserver.disconnect();\n\n    window.__domObserver = new MutationObserver(function() {\n      window.__domStabilityState.stable = false;\n      window.__domStabilityState.lastChange = Date.now();\n    });\n\n    window.__domObserver.observe(document.body, {\n      childList: true,\n      subtree: true,\n      attributes: true\n    });\n  JS\n\n  start_time = Time.now\n\n  # Poll for stability using Ruby loop\n  loop do\n    result = page.evaluate_script(<<~JS)\n      (function() {\n        var state = window.__domStabilityState;\n        if (!state) return { stable: true };\n        var elapsed = Date.now() - state.lastChange;\n        return { stable: elapsed >= \#{stability_time}, elapsed: elapsed };\n      })()\n    JS\n\n    if result && result['stable']\n      # Cleanup observer\n      page.execute_script(<<~JS)\n        if (window.__domObserver) {\n          window.__domObserver.disconnect();\n          delete window.__domObserver;\n        }\n        delete window.__domStabilityState;\n      JS\n      return true\n    end\n\n    elapsed = Time.now - start_time\n    if elapsed > timeout\n      # Cleanup observer on timeout\n      page.execute_script('if (window.__domObserver) window.__domObserver.disconnect();')\n      raise Capybara::ElementNotFound, 'DOM did not stabilize within timeout'\n    end\n\n    sleep(DEFAULT_INTERVAL / 1000.0)\n  end\nend\n")

#wait_for_no_class(selector, class_name, timeout: DEFAULT_TIMEOUT) ⇒ Object

Wait for element to NOT have specific class

Parameters:

  • selector (String) —

    CSS selector

  • class_name (String) —

    CSS class name

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



198
199
200
201
202
203
204
205
206
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 198

def wait_for_no_class(selector, class_name, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  escaped_class = escape_js(class_name)
  js_poll_until(
    "(function() { var el = document.querySelector('#{escaped_selector}'); return el && !el.classList.contains('#{escaped_class}'); })()",
    timeout: timeout,
    error_message: "Class '#{class_name}' still present on '#{selector}'"
  )
end

#wait_for_text(selector, text, timeout: DEFAULT_TIMEOUT) ⇒ Object

Wait for element to contain text

Parameters:

  • selector (String) —

    CSS selector

  • text (String) —

    Text to find

  • timeout (Integer) (defaults to: DEFAULT_TIMEOUT) —

    Maximum wait time in seconds



170
171
172
173
174
175
176
177
178
 
# File 'lib/opal/vite/testing/stable_helpers.rb', line 170

def wait_for_text(selector, text, timeout: DEFAULT_TIMEOUT)
  escaped_selector = escape_js(selector)
  escaped_text = escape_js(text)
  js_poll_until(
    "(function() { var el = document.querySelector('#{escaped_selector}'); return el && el.textContent.includes('#{escaped_text}'); })()",
    timeout: timeout,
    error_message: "Text '#{text}' not found in '#{selector}'"
  )
end