From e976d7c14549ed10a76cb44f1e9f5787dcfabc95 Mon Sep 17 00:00:00 2001
From: giles <giles.bradshaw@rose-ash.com>
Date: Thu, 23 Apr 2026 16:58:14 +0000
Subject: [PATCH] generator: translate clickAndReadStyle() helper into
 dom-dispatch click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Upstream tests use clickAndReadStyle(evaluate, sel, prop) to click-and-read
before asserting toHaveCSS(sel, prop, val). Emit just the click — downstream
toHaveCSS checks then test the post-click state. Net: transition 6→13.
---
 spec/tests/test-hyperscript-behavioral.sx |  7 +++++++
 tests/playwright/generate-sx-tests.py     | 17 +++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/spec/tests/test-hyperscript-behavioral.sx b/spec/tests/test-hyperscript-behavioral.sx
index 15003cb4..edfdda7d 100644
--- a/spec/tests/test-hyperscript-behavioral.sx
+++ b/spec/tests/test-hyperscript-behavioral.sx
@@ -12667,6 +12667,7 @@ end")
       (dom-set-attr _el-div "_" "on click transition *width from 0px to 100px")
       (dom-append (dom-body) _el-div)
       (hs-activate! _el-div)
+      (dom-dispatch _el-div "click" nil)
       (assert= (dom-get-style _el-div "width") "100px")
     ))
   (deftest "can transition a single property on current element using style ref"
@@ -12675,6 +12676,7 @@ end")
       (dom-set-attr _el-div "_" "on click transition *width from 0px to 100px")
       (dom-append (dom-body) _el-div)
       (hs-activate! _el-div)
+      (dom-dispatch _el-div "click" nil)
       (assert= (dom-get-style _el-div "width") "100px")
     ))
   (deftest "can transition a single property on current element with the my prefix"
@@ -12683,6 +12685,7 @@ end")
       (dom-set-attr _el-div "_" "on click transition my *width from 0px to 100px")
       (dom-append (dom-body) _el-div)
       (hs-activate! _el-div)
+      (dom-dispatch _el-div "click" nil)
       (assert= (dom-get-style _el-div "width") "100px")
     ))
   (deftest "can transition a single property on current element with the my prefix using style ref"
@@ -12691,6 +12694,7 @@ end")
       (dom-set-attr _el-div "_" "on click transition my *width from 0px to 100px")
       (dom-append (dom-body) _el-div)
       (hs-activate! _el-div)
+      (dom-dispatch _el-div "click" nil)
       (assert= (dom-get-style _el-div "width") "100px")
     ))
   (deftest "can transition a single property on form"
@@ -12699,6 +12703,7 @@ end")
       (dom-set-attr _el-form "_" "on click transition *width from 0px to 100px")
       (dom-append (dom-body) _el-form)
       (hs-activate! _el-form)
+      (dom-dispatch _el-form "click" nil)
       (assert= (dom-get-style _el-form "width") "100px")
     ))
   (deftest "can transition a single property on form using style ref"
@@ -12707,6 +12712,7 @@ end")
       (dom-set-attr _el-form "_" "on click transition *width from 0px to 100px")
       (dom-append (dom-body) _el-form)
       (hs-activate! _el-form)
+      (dom-dispatch _el-form "click" nil)
       (assert= (dom-get-style _el-form "width") "100px")
     ))
   (deftest "can transition on another element"
@@ -12802,6 +12808,7 @@ end")
       (dom-set-attr _el-div "_" "on click set startWidth to 0 then set endWidth to 100 transition *width from (startWidth)px to (endWidth)px")
       (dom-append (dom-body) _el-div)
       (hs-activate! _el-div)
+      (dom-dispatch _el-div "click" nil)
       (assert= (dom-get-style _el-div "width") "100px")
     ))
   (deftest "can use initial to transition to original value"
diff --git a/tests/playwright/generate-sx-tests.py b/tests/playwright/generate-sx-tests.py
index 13e69c61..5ecd9697 100644
--- a/tests/playwright/generate-sx-tests.py
+++ b/tests/playwright/generate-sx-tests.py
@@ -901,6 +901,23 @@ def parse_dev_body(body, elements, var_names):
             ops.append(f'(dom-set-inner-html {target} "{val}")')
             continue
 
+        # clickAndReadStyle(evaluate, SEL, PROP) — upstream helper that
+        # dispatches a click on SEL and returns its computed style[PROP].
+        # Materialize the click; downstream toHaveCSS assertions then test
+        # the post-click state. The helper call may appear embedded in a
+        # larger statement (e.g. `const x = await clickAndReadStyle(...)`)
+        # so we use `search`, not `match`.
+        m = re.search(
+            r"clickAndReadStyle\(\s*\w+\s*,\s*(['\"])([^'\"]+)\1\s*,\s*['\"][^'\"]+['\"]\s*\)",
+            stmt_na,
+        )
+        if m and seen_html:
+            sel = re.sub(r'^#work-area\s+', '', m.group(2))
+            target = selector_to_sx(sel, elements, var_names)
+            ops.append(f'(dom-dispatch {target} "click" nil)')
+            # Fall through so any trailing assertions in the same split
+            # statement still get picked up.
+
         # evaluate(() => document.querySelector(SEL).click()) — dispatch click
         # on the matched element (bubbles so ancestors see it too).
         m = re.match(