@csedl/hotwire-svelte-helpers 4.8.0 → 4.9.0

package/README.md

@@ -115,6 +115,20 @@ Event Triggers on the panel element:
 
 - `before-open`
 
+## Testing
+
+When adding system tests, it is important not to click the button until the event listener has been added.
+
+In this package, the stimulus controllers add the class `stimulus-connected` to the button elements after the connect method of stimulus has passed.
+
+For example, to test a dropdown button using Playwright, you can do the following:
+
+```ruby
+page.wait_for_selector(".dropdown-button.stimulus-connected").click
+```
+
+This aligns with the `.hydrated` class of the `svelte-on-rails` gem.
+
 ## Helpers
 
 If the panels are rendered to a different location than the button (see z-index on [rails-app](https://gitlab.com/sedl/stimulusfloatingdropdown)), within a scrollable (e.g.) container, the button would scroll away from the panel. For such cases, add this both data-attributes to the scrollable element:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Hotwire + Svelte helpers for Rails: Stimulus floating dropdowns/toolips + Svelte global panels/modals + RTurbo-friendly utilities. Build together with the rubygem svelte-on-rails and its npm-package.",
   "main": "index.js",
   "scripts": {

package/src/stimulus/dropdown-controller.js

@@ -8,6 +8,8 @@ export default class extends Controller {
 
         this.element.addEventListener('click', (e) => this.toggle(e))
 
+        this.element.classList.add('stimulus-connected')
+
     }
 
 

package/src/stimulus/modal-controller.js

@@ -8,6 +8,8 @@ export default class extends Controller {
 
         this.element.addEventListener('click', (e) => this.toggle(e))
 
+        this.element.classList.add('stimulus-connected')
+
     }
 
 

package/src/stimulus/move-panels-controller.js

@@ -25,6 +25,8 @@ export default class extends Controller {
 
             resize_observer.observe(this.element)
         }
+
+        this.element.classList.add('stimulus-connected')
     }
 
     handle_placement(trigger_label) {

package/src/stimulus/tooltip-controller.js

@@ -18,6 +18,8 @@ export default class extends Controller {
         this.element.addEventListener('mouseenter', (e) => this.start_opening(e, panel_id, delay_sec * 1000))
         this.element.addEventListener('mouseleave', (e) => this.close(e, panel_id))
         this.element.addEventListener('click', (e) => this.toggleByClick(e, panel_id))
+
+        this.element.classList.add('stimulus-connected')
     }
 
     start_opening(e, panel_id, delay_ms) {