percy-dom 0.10.1

A standalone Virtual DOM creation, diffing and patching implementation
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

//! Tests related to text nodes.
//!
//! To run all tests in this file:
//!
//! wasm-pack test --chrome --headless crates/percy-dom --test text

extern crate wasm_bindgen_test;
extern crate web_sys;

use wasm_bindgen_test::*;

use percy_dom::prelude::*;

wasm_bindgen_test_configure!(run_in_browser);

mod diff_patch_test_case;

use self::diff_patch_test_case::DiffPatchTest;

// TODO: Add tests that we remove the `ptns` separator comments when we remove text nodes.

/// Verify that we can replace a single text node with another text node.
///
/// wasm-pack test --chrome --headless crates/percy-dom --test text -- replace_text_node_with_text_node
#[wasm_bindgen_test]
fn replace_text_node_with_text_node() {
    DiffPatchTest {
        desc: "Replace a text node with another text node.",
        old: html! {
         <div>
           {"Original element"}
         </div>
        },
        new: html! {
        <div>
          {"Patched element"}
        </div> },
        override_expected: None,
    }
    .test();
}

/// wasm-pack test --chrome --headless crates/percy-dom --test text -- append_text_node
#[wasm_bindgen_test]
fn append_text_node() {
    DiffPatchTest {
        desc: "Append text node",
        old: html! { <div> </div> },
        new: html! { <div> Hello </div> },
        override_expected: None,
    }
    .test();
}

/// wasm-pack test --chrome --headless crates/percy-dom --test text -- append_sibling_text_nodes
#[wasm_bindgen_test]
fn append_sibling_text_nodes() {
    let text1 = VirtualNode::text("Hello");
    let text2 = VirtualNode::text("World");

    DiffPatchTest {
        desc: "Append sibling text nodes",
        old: html! { <div> </div> },
        new: html! { <div> {text1} {text2} </div> },
        override_expected: None,
    }
    .test();
}

/// https://github.com/chinedufn/percy/issues/62
///
/// wasm-pack test --chrome --headless crates/percy-dom --test text -- replace_element_with_text_node
#[wasm_bindgen_test]
fn replace_element_with_text_node() {
    DiffPatchTest {
        desc: "#62: Replace element with text node",
        old: html! { <span> <br> </span> },
        new: html! { <span> a </span> },
        override_expected: None,
    }
    .test();
}

/// https://github.com/chinedufn/percy/issues/68
///
/// wasm-pack test --chrome --headless crates/percy-dom --test text -- text_root_node
#[wasm_bindgen_test]
fn text_root_node() {
    DiffPatchTest {
        desc: "Patching of text root node works",
        old: html! { Old text },
        new: html! { New text },
        override_expected: None,
    }
    .test();
}

/// wasm-pack test --chrome --headless crates/percy-dom --test text -- replace_text_with_element
#[wasm_bindgen_test]
fn replace_text_with_element() {
    DiffPatchTest {
        desc: "Replacing a text node with an element works",
        old: html! { <div>a</div> },
        new: html! { <div><br></div> },
        override_expected: None,
    }
    .test();
}

/// wasm-pack test --chrome --headless crates/percy-dom --test text -- text_node_siblings
#[wasm_bindgen_test]
fn text_node_siblings() {
    // TODO: Requires proc macro APIs that are currently unstable - https://github.com/rust-lang/rust/issues/54725
    // // NOTE: Since there are two text nodes next to eachother we expect a `<!--ptns-->` separator in
    // // between them.
    // // @see virtual_node/mod.rs -> create_dom_node() for more information
    // // TODO: A little more spacing than there should be in between the text nodes ... but doesn't
    // //  impact the user experience so we can look into that later..
    // let override_expected = Some(
    //     r#"<div id="after"><span> The button has been clicked:  <!--ptns--> world </span></div>"#,
    // );

    // TODO: After the proc macro span APIs stabilize remove this in favor of the above commented out
    //  code.
    //   https://github.com/rust-lang/rust/issues/54725
    let override_expected =
        Some(r#"<div id="after"><span>The button has been clicked: <!--ptns-->world</span></div>"#);

    let old1 = VirtualNode::text("The button has been clicked: ");
    let old2 = VirtualNode::text("hello");

    let new1 = VirtualNode::text("The button has been clicked: ");
    let new2 = VirtualNode::text("world");

    DiffPatchTest {
        desc: "Diff patch on text node siblings",
        old: html! {
        <div id="before">
            <span> { {old1} {old2} } </span>
        </div>
        },
        new: html! {
        <div id="after">
            <span> { {new1} {new2} } </span>
        </div>
        },
        override_expected,
    }
    .test();
}