Mirrors/leptos
2
0
Fork 0
mirror of https://github.com/leptos-rs/leptos synced 2024-11-10 06:44:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix portal tests

Browse source
This commit is contained in:
Greg Johnston 2024-06-09 15:04:56 -04:00
parent 39902d1e66
commit f5d06577f4
1 changed files with 7 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
examples/portal/tests/web.rs
View file

@ -1,9 +1,9 @@
use portal::App;
use wasm_bindgen::JsCast;
use wasm_bindgen_test::*;
wasm_bindgen_test_configure!(run_in_browser);
use leptos::*;
use portal::App;
use leptos::{leptos_dom::helpers::document, mount::mount_to};
use web_sys::HtmlButtonElement;
async fn next_tick() {
@ -12,14 +12,14 @@ async fn next_tick() {
#[wasm_bindgen_test]
async fn portal() {
let document = leptos::document();
let document = document();
let body = document.body().unwrap();
let div = document.create_element("div").unwrap();
div.set_id("app");
let _ = body.append_child(&div);
mount_to(div.clone().unchecked_into(), || view! { <App/> });
let _handle = mount_to(div.clone().unchecked_into(), App);
let show_button = document
.get_element_by_id("btn-show")
@ -31,10 +31,7 @@ async fn portal() {
next_tick().await;
// check HTML
assert_eq!(
div.inner_html(),
"<!-- <App> --><div><button id=\"btn-show\">Show Overlay</button><!-- <Show> --><!-- <DynChild> --><!-- <> --><div>Show</div><!-- <Portal> --><!-- <() /> --><!-- </Portal> --><!-- </> --><!-- </DynChild> --><!-- </Show> --></div><!-- </App> --><div><!-- <> --><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">Close Overlay</button><button id=\"btn-toggle\">Toggle inner</button><!-- <Show> --><!-- <DynChild> -->Hidden<!-- </DynChild> --><!-- </Show> --></div><!-- </> --></div>"
);
assert_eq!(div.inner_html(), "<div><button id=\"btn-show\">Show Overlay</button><div>Show</div><!----></div><div><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">Close Overlay</button><button id=\"btn-toggle\">Toggle inner</button>Hidden<!----></div></div>");
let toggle_button = document
.get_element_by_id("btn-toggle")
@ -43,10 +40,7 @@ async fn portal() {
toggle_button.click();
assert_eq!(
div.inner_html(),
"<!-- <App> --><div><button id=\"btn-show\">Show Overlay</button><!-- <Show> --><!-- <DynChild> --><!-- <> --><div>Show</div><!-- <Portal> --><!-- <() /> --><!-- </Portal> --><!-- </> --><!-- </DynChild> --><!-- </Show> --></div><!-- </App> --><div><!-- <> --><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">Close Overlay</button><button id=\"btn-toggle\">Toggle inner</button><!-- <Show> --><!-- <DynChild> --><!-- <> -->Visible<!-- </> --><!-- </DynChild> --><!-- </Show> --></div><!-- </> --></div>"
);
assert_eq!(div.inner_html(), "<div><button id=\"btn-show\">Show Overlay</button><div>Show</div><!----></div><div><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">Close Overlay</button><button id=\"btn-toggle\">Toggle inner</button>Hidden<!----></div></div>");
let hide_button = document
.get_element_by_id("btn-hide")
@ -55,8 +49,5 @@ async fn portal() {
hide_button.click();
assert_eq!(
div.inner_html(),
"<!-- <App> --><div><button id=\"btn-show\">Show Overlay</button><!-- <Show> --><!-- <DynChild> --><!-- <() /> --><!-- </DynChild> --><!-- </Show> --></div><!-- </App> -->"
);
assert_eq!(div.inner_html(), "<div><button id=\"btn-show\">Show Overlay</button><div>Show</div><!----></div><div><div style=\"position: fixed; z-index: 10; width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); color: white;\"><p>This is in the body element</p><button id=\"btn-hide\">Close Overlay</button><button id=\"btn-toggle\">Toggle inner</button>Hidden<!----></div></div>");
}