From db810543512be4376dae7e33a29027894fb972dd Mon Sep 17 00:00:00 2001
From: Danielle Huisman <danielle@huisman.me>
Date: Fri, 5 Apr 2024 22:45:25 +0200
Subject: [PATCH] Fix arrow visual test

---
 packages/leptos/tests/playwright.rs           | 11 ++++++++++
 .../leptos/tests/visual/src/spec/arrow.rs     |  8 ++++----
 .../tests/visual/src/utils/use_scroll.rs      | 20 +++++++++++--------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/leptos/tests/playwright.rs b/packages/leptos/tests/playwright.rs
index e73d3a6..8fbbbfe 100644
--- a/packages/leptos/tests/playwright.rs
+++ b/packages/leptos/tests/playwright.rs
@@ -24,6 +24,7 @@ pub fn playwright() {
     let repository_dom_path = repository_path.join("packages/dom");
     let repository_package_json_path = repository_dom_path.join("package.json");
     let repository_playwright_config_path = repository_dom_path.join("playwright.config.ts");
+    let repository_arrow_test_path = repository_dom_path.join("test/functional/arrow.test.ts");
 
     let visual_test_path = Path::new(env!("CARGO_MANIFEST_DIR")).join("tests/visual");
 
@@ -126,6 +127,16 @@ pub fn playwright() {
     fs::write(repository_playwright_config_path, config_content)
         .expect("Writing Playwright config file failed.");
 
+    let arrow_test_content = fs::read_to_string(repository_arrow_test_path.clone())
+        .expect("Reading arrow test file failed.")
+        .replace(
+            // Match React test behaviour
+            "await click(page, `[data-testid=\"arrow-padding-${arrowPadding}\"]`);",
+            "if (arrowPadding !== 0) { await click(page, `[data-testid=\"arrow-padding-${arrowPadding}\"]`); }",
+        );
+    fs::write(repository_arrow_test_path, arrow_test_content)
+        .expect("Writing arrow test file failed.");
+
     let status = Command::new("pnpm")
         .arg("run")
         .arg("playwright")
diff --git a/packages/leptos/tests/visual/src/spec/arrow.rs b/packages/leptos/tests/visual/src/spec/arrow.rs
index c8b6673..9737024 100644
--- a/packages/leptos/tests/visual/src/spec/arrow.rs
+++ b/packages/leptos/tests/visual/src/spec/arrow.rs
@@ -80,13 +80,10 @@ pub fn Arrow() -> impl IntoView {
         rtl: None,
     });
 
-    // Match React test behaviour
     let placement_update_scroll = update_scroll.clone();
     let padding_update_scroll = update_scroll.clone();
     let add_offset_update_scroll = update_scroll.clone();
-    // _ = watch(placement, move |_, _, _| placement_update_scroll(), false);
-    // _ = watch(padding, move |_, _, _| padding_update_scroll(), false);
-    // _ = watch(add_offset, move |_, _, _| add_offset_update_scroll(), false);
+    let center_offset_update_scroll = update_scroll.clone();
 
     view! {
         <h1>Arrow</h1>
@@ -312,6 +309,7 @@ pub fn Arrow() -> impl IntoView {
                 each=|| [true, false]
                 key=|value| format!("{}", value)
                 children=move |value| {
+                    let center_offset_update_scroll = center_offset_update_scroll.clone();
                     view! {
                         <button
                             data-testid=format!("centerOffset-{}", value)
@@ -332,6 +330,8 @@ pub fn Arrow() -> impl IntoView {
                                     set_placement(Placement::Bottom);
                                     set_padding(0);
                                 }
+                                // Match React test behaviour
+                                center_offset_update_scroll();
                             }
                         >
                             {format!("{}", value)}
diff --git a/packages/leptos/tests/visual/src/utils/use_scroll.rs b/packages/leptos/tests/visual/src/utils/use_scroll.rs
index bb2f9df..762e7a5 100644
--- a/packages/leptos/tests/visual/src/utils/use_scroll.rs
+++ b/packages/leptos/tests/visual/src/utils/use_scroll.rs
@@ -1,4 +1,4 @@
-use std::rc::Rc;
+use std::{ops::Deref, rc::Rc};
 
 use floating_ui_leptos::{
     dom::{get_overflow_ancestors, OverflowAncestor},
@@ -61,7 +61,6 @@ pub fn use_scroll(
 
     let (ancestors, set_ancestors) = create_signal::<Vec<OverflowAncestor>>(vec![]);
     let (scroll, set_scroll) = create_signal::<Option<(i32, i32)>>(None);
-    let is_update_required = create_rw_signal(false);
 
     let local_update_update = update.clone();
     let local_update_indicator_update = indicator_update_rc.clone();
@@ -75,11 +74,7 @@ pub fn use_scroll(
     }));
 
     let effect_local_update = local_update.clone();
-    create_effect(move |_| {
-        if is_update_required.get() {
-            is_update_required.set_untracked(false);
-        }
-
+    let effect = move || {
         if let Some(reference) = reference_ref() {
             let mut ancestors = get_overflow_ancestors(&reference, vec![], true);
 
@@ -102,8 +97,11 @@ pub fn use_scroll(
             set_ancestors(ancestors);
 
             if let Some(scroll) = scroll_ref() {
+                let h: &web_sys::HtmlDivElement = scroll.deref();
+                log::info!("{:?}", h);
                 let x = scroll.scroll_width() / 2 - scroll.offset_width() / 2;
                 let y = scroll.scroll_height() / 2 - scroll.offset_height() / 2;
+                log::info!("x {x} | y {y}");
                 scroll.set_scroll_top(y);
                 scroll.set_scroll_left(match rtl {
                     Some(true) => -x,
@@ -113,6 +111,12 @@ pub fn use_scroll(
 
             update();
         }
+    };
+    let effect_rc = Rc::new(effect);
+
+    let effect_effect = effect_rc.clone();
+    create_effect(move |_| {
+        effect_effect();
     });
 
     on_cleanup(move || {
@@ -144,7 +148,7 @@ pub fn use_scroll(
     };
 
     let update_scroll = move || {
-        is_update_required.set(true);
+        effect_rc();
     };
 
     UseScrollReturn {