[Testing] Extend diff_layouts with a method for getting the HTML for a single component

[aDogCalledSpot]

Yew's diff_layouts is exposed publicly, so it can be used for testing components.

However, especially when using further libraries, the code from a single component can quickly blow up with a lot of the generated HTML not resulting from the code written for that component but coming from a lower level instead.

Since the lower level code could be subject to change, testing the full HTML output of a component can lead to breakage of tests. Furthermore, the testing code will be hard to read and I believe there is also a risk of the developer not immediately understanding what went wrong and discarding the broken test as broken and simply updating the expected output without looking into it further.

Instead, there should be tools to query the DOM output instead. This is how React Testing Library does it. There's already been an approach at this in frontest. Unfortunately, it isn't actively maintained.

I think it would be beneficial to offer such a suite of tools directly from Yew which simplifies querying specifically for Yew and ensures that the crate stays up to date with any changes in Yew.

From further below:

How about something like a layout_tests::render_single<COMP>(comp: COMP) -> Element? Then crates such as frontest can be completely independent of the framework if each framework simply adds such a function to get an Element from a component.

---

EDIT: I looked a bit into frontest and the code for getting the web_sys element from a Yew component is the following (using Yew 0.19):

pub async fn render(content: Html) -> Element {
    let div = gloo::utils::document().create_element("div").unwrap();
    gloo::utils::body().append_child(&div).unwrap();
    let res = div.clone();
    ::yew::start_app_with_props_in_element::<Wrapper>(div, WrapperProps { content });
    res
}

I made the following change to make it fit Yew 0.21:

pub async fn render(content: Html) -> Element {
    let div = gloo::utils::document().create_element("div").unwrap();
    gloo::utils::body().append_child(&div).unwrap();
    let res = div.clone();
    ::yew::Renderer::<Wrapper>::with_root_and_props(div.clone(), WrapperProps { content }).render();
    res
}

This doesn't update the div though. Comparing this to layout_tests:

let mut bundle = Bundle::new();
bundle.reconcile(&root, &scope, &parent_element, slot.clone(), vnode);
scheduler::start_now();
assert_eq!(
    parent_element.inner_html(),
    format!("{}END", layout.expected),
    "Independent apply failed for layout '{}'",
    layout.name,
);

I'm guessing the most important difference is that the scheduler runs. This is a pub(crate) function though, so we would have to offer something within Yew.

How about something like a layout_tests::render_single<COMP>(comp: COMP) -> Element? Then crates such as frontest can be completely independent of the framework if each framework simply adds such a function to get an Element from a component.

[aDogCalledSpot]

@zvolin do you maybe have any thoughts?

[zvolin]

Hey. So I learnt some frontend and played with react and yew but I don't have much experience on that

[zvolin]

Frontest was heavily inspired by react testing library however that's also the only one I used :)

[zvolin]

I was fighting with the issue that wasm_bindgen_test is running tests sequentially inside the same browser tab so that each test can potentially leave dirty environment and dom and I have never finished that one

[aDogCalledSpot]

Some simple copy paste gives me:

pub fn render_component(vnode: VNode) -> web_sys::Element {
    let document = gloo::utils::document();
    let scope: AnyScope = AnyScope::test();
    let parent_element = document.create_element("div").unwrap();
    let root = BSubtree::create_root(&parent_element);

    let slot = DomSlot::at_end();
    let mut bundle = Bundle::new();
    bundle.reconcile(&root, &scope, &parent_element, slot, vnode);
    scheduler::start_now();

    parent_element
}

which as expected lets you render the component exactly once.

This is good for a one-off, but we can't test any interactions with that as was possible before.
I'll open a PR for this and then discussion can continue there.

[aDogCalledSpot]

You can force yew to update the code by using ::yew::platform::time::sleep(std::time::Duration::ZERO). I will be opening a PR in frontest.