Fix inline and table visual tests

RustForWeb · Apr 19, 2024 · 59976a1 · 59976a1
1 parent 6431c01
commit 59976a1
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 25 deletions.
diff --git a/packages/leptos/tests/playwright.rs b/packages/leptos/tests/playwright.rs
@@ -9,15 +9,18 @@ const IMPLEMENTED_TESTS: [&str; 19] = [
     "decimal-size",
     "flip",
     "hide",
+    // "iframe",
     "inline",
     "offset",
     "placement",
     "relative",
     "scroll",
     "scrollbars",
+    // "shadow-dom",
     "shift",
     "size",
     "table",
+    // "top-layer",
     "transform",
     "virtual-element",
 ];

diff --git a/packages/leptos/tests/visual/src/spec/inline.rs b/packages/leptos/tests/visual/src/spec/inline.rs
@@ -240,7 +240,7 @@ pub fn Inline() -> impl IntoView {
                 key=|value| format!("{:?}", value)
                 children=move |value| view! {
                     <button
-                        data-testid=format!("fallbackPlacements-{}", match value {
+                        data-testid=format!("connected-{}", match value {
                             ConnectedStatus::One => "1",
                             ConnectedStatus::TwoDisjoined => "2-disjoined",
                             ConnectedStatus::TwoJoined => "2-joined",

diff --git a/packages/leptos/tests/visual/src/spec/table.rs b/packages/leptos/tests/visual/src/spec/table.rs
@@ -1,7 +1,7 @@
 use convert_case::{Case, Casing};
-use floating_ui_leptos::{use_floating, IntoReference, UseFloatingOptions, UseFloatingReturn};
+use floating_ui_leptos::{use_floating, UseFloatingOptions, UseFloatingReturn};
 use leptos::{
-    html::{Div, Table, Td, Tr},
+    html::{AnyElement, Div},
     *,
 };
 
@@ -16,23 +16,28 @@ const ALL_NODES: [Node; 3] = [Node::Table, Node::Td, Node::Th];
 
 #[component]
 pub fn Table() -> impl IntoView {
-    let reference_table_ref = create_node_ref::<Table>();
-    let reference_tr_ref = create_node_ref::<Tr>();
-    let reference_td_ref = create_node_ref::<Td>();
+    let reference_table_ref = create_node_ref::<AnyElement>();
+    let reference_tr_ref = create_node_ref::<AnyElement>();
+    let reference_td_ref = create_node_ref::<AnyElement>();
     let floating_ref = create_node_ref::<Div>();
 
     let (same_parent, set_same_parent) = create_signal(false);
     let (node, set_node) = create_signal(Node::Td);
 
-    // TODO: other refs
+    let reference_signal = MaybeProp::derive(move || match node() {
+        Node::Table => Some(reference_table_ref.into()),
+        Node::Td => Some(reference_td_ref.into()),
+        Node::Th => Some(reference_tr_ref.into()),
+    });
+
     let UseFloatingReturn {
         x,
         y,
         strategy,
         update,
         ..
     } = use_floating(
-        reference_table_ref.into_reference(),
+        reference_signal,
         floating_ref,
         UseFloatingOptions::default(),
     );
@@ -62,23 +67,29 @@ pub fn Table() -> impl IntoView {
             The floating element should be correctly positioned when the reference or ancestor is a table element.
         </p>
         <div class="container">
-            <table _ref=reference_table_ref>
-                <thead>
-                    <tr _ref=reference_tr_ref>
-                        <th>Reference th</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td _ref=reference_td_ref>
-                            Reference td
-                            <Show when=same_parent>
-                                {floating_view}
-                            </Show>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+            {move || view! {
+                <table>
+                    <thead>
+                        {move || view! {
+                            <tr>
+                                <th>Reference th</th>
+                            </tr>
+                        }.into_any().node_ref(reference_tr_ref)}
+                    </thead>
+                    <tbody>
+                        <tr>
+                            {move || view! {
+                                <td>
+                                    Reference td
+                                    <Show when=same_parent>
+                                        {floating_view}
+                                    </Show>
+                                </td>
+                            }.into_any().node_ref(reference_td_ref)}
+                        </tr>
+                    </tbody>
+                </table>
+            }.into_any().node_ref(reference_table_ref)}
 
             <Show when=move || !same_parent()>
                 {floating_view}