use sauron::{ html::{attributes::*, *}, *, }; use test_fixtures::simple_program; use wasm_bindgen_test::*; mod test_fixtures; wasm_bindgen_test_configure!(run_in_browser); #[wasm_bindgen_test] fn node_mounted_properly() { console_log::init_with_level(log::Level::Trace).ok(); console_error_panic_hook::set_once(); let document = web_sys::window().unwrap().document().unwrap(); let old: Node<()> = main( vec![class("container1")], vec![section( vec![class("todo")], vec![ article(vec![key(1)], vec![text("item1")]), article(vec![key(2)], vec![text("item2")]), ], )], ); let mut old_html = String::new(); old.render(&mut old_html).expect("must render"); let mut simple_program = simple_program(); simple_program .update_dom_with_vdom(old) .expect("must update dom"); let container = document .query_selector(".container1") .expect("must not error") .expect("must exist"); let expected_outer = "
\
\
item1
\
item2
\
\
"; assert_eq!(expected_outer, container.outer_html()); } #[wasm_bindgen_test] fn node_patched_properly() { console_log::init_with_level(log::Level::Trace).ok(); console_error_panic_hook::set_once(); let document = web_sys::window().unwrap().document().unwrap(); let old: Node<()> = main( vec![class("container2")], vec![section( vec![class("todo")], vec![ article(vec![key(1)], vec![text("item1")]), article(vec![key(2)], vec![text("item2")]), ], )], ); // we remove the key2 let update1: Node<()> = main( vec![class("container2")], vec![section( vec![class("todo")], vec![article(vec![key(1)], vec![text("item1")])], )], ); let patches = diff(&old, &update1); log::debug!("patches: {:#?}", patches); let mut old_html = String::new(); old.render(&mut old_html).expect("must render"); let mut simple_program = simple_program(); simple_program .update_dom_with_vdom(old) .expect("must update dom"); let container = document .query_selector(".container2") .expect("must not error") .expect("must exist"); let expected = "
\
\
item1
\
item2
\
\
"; assert_eq!(expected, container.outer_html()); simple_program .update_dom_with_vdom(update1) .expect("must not error"); let container = document .query_selector(".container2") .expect("must not error") .expect("must exist"); let expected1 = "
\
\
item1
\
\
"; assert_eq!(expected1, container.outer_html()); } #[wasm_bindgen_test] fn node_patched_properly_remove_from_start() { console_log::init_with_level(log::Level::Trace).ok(); console_error_panic_hook::set_once(); let document = web_sys::window().unwrap().document().unwrap(); let old: Node<()> = main( vec![class("test3")], vec![section( vec![class("todo")], vec![ article(vec![key(1)], vec![text("item1")]), article(vec![key(2)], vec![text("item2")]), article(vec![key(3)], vec![text("item3")]), ], )], ); // we remove the key1 let update1: Node<()> = main( vec![class("test3")], vec![section( vec![class("todo")], vec![ article(vec![key(2)], vec![text("item2")]), article(vec![key(3)], vec![text("item3")]), ], )], ); let patches = diff(&old, &update1); log::debug!("patches: {:#?}", patches); let mut old_html = String::new(); old.render(&mut old_html).expect("must render"); let mut simple_program = simple_program(); simple_program .update_dom_with_vdom(old) .expect("must update dom"); let container = document .query_selector(".test3") .expect("must not error") .expect("must exist"); let expected = "
\
\
item1
\
item2
\
item3
\
\
"; assert_eq!(expected, container.outer_html()); simple_program .update_dom_with_vdom(update1) .expect("must not error"); let container = document .query_selector(".test3") .expect("must not error") .expect("must exist"); let expected1 = "
\
\
item2
\
item3
\
\
"; assert_eq!(expected1, container.outer_html()); } #[wasm_bindgen_test] fn node_patched_properly_text_changed() { console_log::init_with_level(log::Level::Trace).ok(); console_error_panic_hook::set_once(); let document = web_sys::window().unwrap().document().unwrap(); let old: Node<()> = main( vec![class("test4")], vec![section( vec![class("todo")], vec![ article(vec![key(1)], vec![text("item1")]), article(vec![key(2)], vec![text("item2")]), article(vec![key(3)], vec![text("item3")]), ], )], ); // we remove the key1 let update1: Node<()> = main( vec![class("test4")], vec![section( vec![class("todo")], vec![ article(vec![key(2)], vec![text("item2")]), article(vec![key(3)], vec![text("item3 with changes")]), ], )], ); let patches = diff(&old, &update1); log::debug!("patches: {:#?}", patches); let mut old_html = String::new(); old.render(&mut old_html).expect("must render"); let mut simple_program = simple_program(); simple_program .update_dom_with_vdom(old) .expect("must update dom"); let container = document .query_selector(".test4") .expect("must not error") .expect("must exist"); let expected = "
\
\
item1
\
item2
\
item3
\
\
"; assert_eq!(expected, container.outer_html()); simple_program .update_dom_with_vdom(update1) .expect("must not error"); let container = document .query_selector(".test4") .expect("must not error") .expect("must exist"); let expected1 = "
\
\
item2
\
item3 with changes
\
\
"; assert_eq!(expected1, container.outer_html()); } #[wasm_bindgen_test] fn mixed_keyed_and_non_keyed_elements() { console_log::init_with_level(log::Level::Trace).ok(); console_error_panic_hook::set_once(); let document = web_sys::window().unwrap().document().unwrap(); let old: Node<()> = main( vec![class("test5")], vec![ section( vec![class("todo")], vec![ article(vec![key(1)], vec![text("item1")]), article(vec![key(2)], vec![text("item2")]), article(vec![key(3)], vec![text("item3")]), ], ), footer(vec![], vec![text("3 items left")]), ], ); // we remove the key1 let update1: Node<()> = main( vec![class("test5")], vec![ section( vec![class("todo")], vec![ article(vec![key(2)], vec![text("item2")]), article(vec![key(3)], vec![text("item3 with changes")]), ], ), footer(vec![], vec![text("2 items left")]), ], ); let patches = diff(&old, &update1); log::debug!("patches: {:#?}", patches); let mut old_html = String::new(); old.render(&mut old_html).expect("must render"); let mut simple_program = simple_program(); simple_program .update_dom_with_vdom(old) .expect("must update dom"); let container = document .query_selector(".test5") .expect("must not error") .expect("must exist"); let expected = "
\
\
item1
\
item2
\
item3
\
\ \
"; assert_eq!(expected, container.outer_html()); simple_program .update_dom_with_vdom(update1) .expect("must not error"); let container = document .query_selector(".test5") .expect("must not error") .expect("must exist"); let expected1 = "
\
\
item2
\
item3 with changes
\
\ \
"; assert_eq!(expected1, container.outer_html()); }