Fix placement visual test

Cargo.toml

@@ -26,6 +26,7 @@ features = [
     "DomRect",
     "DomRectList",
     "Element",
+    "Event",
     "EventTarget",
     "HtmlElement",
     "HtmlSlotElement",

packages/leptos/test/visual/Cargo.toml

@@ -18,3 +18,4 @@ floating-ui-leptos = { path = "../.." }
 wasm-bindgen.workspace = true
 web-sys.workspace = true
 leptos_router = { version = "0.6.9", features = ["csr", "nightly"] }
+convert_case = "0.6.0"

packages/leptos/test/visual/src/spec/placement.rs

@@ -1,7 +1,8 @@
+use convert_case::{Case, Casing};
 use floating_ui_leptos::{use_floating, Placement, UseFloatingOptions, UseFloatingReturn};
 use leptos::{html::Div, *};
 
-use crate::utils::all_placements::ALL_PLACEMENTS;
+use crate::utils::{all_placements::ALL_PLACEMENTS, use_size::use_size};
 
 #[component]
 pub fn Placement() -> impl IntoView {
@@ -21,25 +22,20 @@ pub fn Placement() -> impl IntoView {
             .placement(placement.into())
             .while_elements_mounted_auto_update(),
     );
-    let (size, set_size) = create_signal(80);
-
-    _ = watch(
-        rtl,
-        move |_, _, _| {
-            update();
-        },
-        false,
-    );
+    let (size, set_size) = use_size(None, None);
 
     view! {
         <h1>Placement</h1>
         <p>
             The floating element should be correctly positioned when given each of the 12 placements.
         </p>
-        <div class="container" style=move || match rtl() {
-            true => "direction: rtl;",
-            false => "direction: ltr;",
-        }>
+        <div class="container" style=move || {
+                log::info!("rtl {}", rtl());
+                match rtl() {
+                    true => "direction: rtl;",
+                    false => "direction: ltr;",
+                }
+            }>
             <div _ref=reference class="reference">
                 Reference
             </div>
@@ -68,14 +64,14 @@ pub fn Placement() -> impl IntoView {
                 key=|local_placement| format!("{:?}", local_placement)
                 children=move |local_placement| view! {
                     <button
-                        data-testid=format!("placement-{:?}", local_placement)
+                        data-testid=format!("Placement{:?}", local_placement).to_case(Case::Kebab)
                         style:background-color=move || match placement() == local_placement {
                             true => "black",
                             false => ""
                         }
                         on:click=move |_| set_placement(local_placement)
                     >
-                        {format!("{:?}", local_placement)}
+                        {format!("{:?}", local_placement).to_case(Case::Kebab)}
                     </button>
                 }
             />
@@ -86,17 +82,24 @@ pub fn Placement() -> impl IntoView {
                 <For
                 each=|| [true, false]
                 key=|value| format!("{}", value)
-                children=move |value| view! {
-                    <button
-                        data-testid=format!("rtl-{}", value)
-                        style:background-color=move || match rtl() == value {
-                            true => "black",
-                            false => ""
-                        }
-                        on:click=move |_| set_rtl(value)
-                    >
-                        {format!("{}", value)}
-                    </button>
+                children=move |value| {
+                    let rtl_update = update.clone();
+
+                    view! {
+                        <button
+                            data-testid=format!("rtl-{}", value)
+                            style:background-color=move || match rtl() == value {
+                                true => "black",
+                                false => ""
+                            }
+                            on:click=move |_| {
+                                set_rtl(value);
+                                rtl_update();
+                            }
+                        >
+                            {format!("{}", value)}
+                        </button>
+                    }
                 }
             />
         </div>

packages/leptos/test/visual/src/utils.rs

@@ -1,2 +1,3 @@
 pub mod all_placements;
 pub mod new;
+pub mod use_size;

packages/leptos/test/visual/src/utils/use_size.rs

@@ -0,0 +1,26 @@
+use leptos::{create_signal, event_target_value, ReadSignal, WriteSignal};
+use wasm_bindgen::closure::Closure;
+use web_sys::{js_sys::Reflect, window, Event};
+
+pub fn use_size(
+    initial_size: Option<i32>,
+    key: Option<&'static str>,
+) -> (ReadSignal<i32>, WriteSignal<i32>) {
+    let initial_size = initial_size.unwrap_or(80);
+    let key = key.unwrap_or("floating");
+
+    let (size, set_size) = create_signal(initial_size);
+
+    let closure: Closure<dyn Fn(Event)> = Closure::new(move |event: Event| {
+        set_size(event_target_value(&event).parse().unwrap());
+    });
+
+    Reflect::set(
+        &window().expect("Window should exist."),
+        &format!("__handleSizeChange_{}", key).into(),
+        &closure.into_js_value(),
+    )
+    .expect("Reflect set should be successful.");
+
+    (size, set_size)
+}