diff --git a/src/vdom.rs b/src/vdom.rs index bb6079140..4fb68f8c4 100644 --- a/src/vdom.rs +++ b/src/vdom.rs @@ -726,7 +726,8 @@ pub mod tests { use super::*; use crate as seed; // required for macros to work. - use crate::{div, li, prelude::*}; + use crate::{class, div, li, prelude::*, span}; + use wasm_bindgen::JsCast; #[derive(Clone, Debug)] enum Msg {} @@ -737,6 +738,18 @@ pub mod tests { vdom } + fn setup_and_patch( + doc: &Document, + parent: &Element, + mailbox: &Mailbox, + old_vdom: El, + new_vdom: El, + ) -> El { + let mut new_vdom = make_vdom(&doc, new_vdom); + patch(&doc, old_vdom, &mut new_vdom, parent, mailbox); + new_vdom + } + #[wasm_bindgen_test] fn el_added() { let mailbox = Mailbox::new(|_msg: Msg| {}); @@ -752,34 +765,28 @@ pub mod tests { assert_eq!(parent.children().length(), 1); assert_eq!(old_ws.child_nodes().length(), 0); - vdom = { - let mut new_vdom = make_vdom(&doc, div!["text"]); - patch(&doc, vdom, &mut new_vdom, &parent, &mailbox); - - assert_eq!(parent.children().length(), 1); - assert!(old_ws.is_same_node(parent.first_child().as_ref())); - assert_eq!(old_ws.child_nodes().length(), 1); - assert_eq!(old_ws.first_child().unwrap().text_content().unwrap(), "text"); - - new_vdom - }; + vdom = setup_and_patch(&doc, &parent, &mailbox, vdom, div!["text"]); + assert_eq!(parent.children().length(), 1); + assert!(old_ws.is_same_node(parent.first_child().as_ref())); + assert_eq!(old_ws.child_nodes().length(), 1); + assert_eq!(old_ws.first_child().unwrap().text_content().unwrap(), "text"); + + setup_and_patch( + &doc, + &parent, + &mailbox, + vdom, + div!["text", "more text", vec![li!["even more text"]]], + ); - { - let mut new_vdom = make_vdom( - &doc, - div!["text", "more text", vec![li!["even more text"]]], - ); - patch(&doc, vdom, &mut new_vdom, &parent, &mailbox); - - assert_eq!(parent.children().length(), 1); - assert!(old_ws.is_same_node(parent.first_child().as_ref())); - assert_eq!(old_ws.child_nodes().length(), 3); - assert_eq!(old_ws.child_nodes().item(0).unwrap().text_content().unwrap(), "text"); - assert_eq!(old_ws.child_nodes().item(1).unwrap().text_content().unwrap(), "more text"); - let child3 = old_ws.child_nodes().item(2).unwrap(); - assert_eq!(child3.node_name(), "LI"); - assert_eq!(child3.text_content().unwrap(), "even more text"); - } + assert_eq!(parent.children().length(), 1); + assert!(old_ws.is_same_node(parent.first_child().as_ref())); + assert_eq!(old_ws.child_nodes().length(), 3); + assert_eq!(old_ws.child_nodes().item(0).unwrap().text_content().unwrap(), "text"); + assert_eq!(old_ws.child_nodes().item(1).unwrap().text_content().unwrap(), "more text"); + let child3 = old_ws.child_nodes().item(2).unwrap(); + assert_eq!(child3.node_name(), "LI"); + assert_eq!(child3.text_content().unwrap(), "even more text"); } #[wasm_bindgen_test] @@ -795,35 +802,73 @@ pub mod tests { parent.append_child(&old_ws).unwrap(); // First add some child nodes using the vdom - vdom = { - let mut new_vdom = make_vdom( - &doc, - div!["text", "more text", vec![li!["even more text"]]], - ); - patch(&doc, vdom, &mut new_vdom, &parent, &mailbox); - - assert_eq!(parent.children().length(), 1); - new_vdom - }; + vdom = setup_and_patch( + &doc, + &parent, + &mailbox, + vdom, + div!["text", "more text", vec![li!["even more text"]]], + ); assert_eq!(parent.children().length(), 1); assert_eq!(old_ws.child_nodes().length(), 3); let old_child1 = old_ws.child_nodes().item(0).unwrap(); // Now test that patch function removes the last 2 nodes - { - let mut new_vdom = make_vdom(&doc, div!["text"]); - patch(&doc, vdom, &mut new_vdom, &parent, &mailbox); - - assert_eq!(parent.children().length(), 1); - assert!(old_ws.is_same_node(parent.first_child().as_ref())); - assert_eq!(old_ws.child_nodes().length(), 1); - assert!(old_child1.is_same_node(old_ws.child_nodes().item(0).as_ref())); - } + setup_and_patch( + &doc, + &parent, + &mailbox, + vdom, + div!["text"], + ); + + assert_eq!(parent.children().length(), 1); + assert!(old_ws.is_same_node(parent.first_child().as_ref())); + assert_eq!(old_ws.child_nodes().length(), 1); + assert!(old_child1.is_same_node(old_ws.child_nodes().item(0).as_ref())); } - // #[wasm_bindgen_test] - fn _el_changed() { - unimplemented!() + #[wasm_bindgen_test] + fn el_changed() { + let mailbox = Mailbox::new(|_msg: Msg| {}); + + let doc = util::document(); + let parent = doc.create_element("div").unwrap(); + + let mut vdom = make_vdom(&doc, El::empty(seed::dom_types::Tag::Div)); + // clone so we can keep using it after vdom is modified + let old_ws = vdom.el_ws.as_ref().unwrap().clone(); + parent.append_child(&old_ws).unwrap(); + + // First add some child nodes using the vdom + vdom = setup_and_patch( + &doc, + &parent, + &mailbox, + vdom, + div![span!["hello"], ", ", span!["world"]], + ); + + assert_eq!(parent.child_nodes().length(), 1); + assert_eq!(old_ws.child_nodes().length(), 3); + + // Now add some attributes + setup_and_patch( + &doc, + &parent, + &mailbox, + vdom, + div![ + span![class!["first"], "hello"], + ", ", + span![class!["second"], "world"], + ], + ); + + let child1 = old_ws.child_nodes().item(0).unwrap().dyn_into::().unwrap(); + assert_eq!(child1.get_attribute("class"), Some("first".to_string())); + let child3 = old_ws.child_nodes().item(2).unwrap().dyn_into::().unwrap(); + assert_eq!(child3.get_attribute("class"), Some("second".to_string())); } }