1 个不稳定版本

0.1.0	2024年1月26日

#806 in WebAssembly

用于 leptos_test

Apache-2.0

36KB
562 行

DOM测试库

简介

dom-testing-library trait系列帮助您以用户为中心的方式测试UI组件。深受JavaScript的 Testing Library 启发。

您的测试越接近您的软件的使用方式，它们就能给您带来更多的信心。

问题

您希望编写可维护的测试，这些测试能给您高度信心，您的组件可以为您的工作用户工作。作为这个目标的一部分，您希望您的测试避免包含实现细节，以便您的组件（实现上的变化，但不是功能上的变化）的重构不会破坏您的测试并减慢您和您的团队的工作进度。

解决方案

核心库，DOM测试库，是通过查询和与DOM节点交互来测试网页的轻量级解决方案。它提供的主要实用工具包括以类似于用户在页面上查找元素的方式查询DOM中的节点。通过这种方式，该库帮助确保您的测试能给您信心，您的应用程序将在实际用户使用时正常工作。

这个库不是什么

测试运行器或框架
特定于测试框架

您应该避免使用DOM测试库的内容

DOM测试库鼓励您避免测试实现细节，例如您正在测试的组件的内部（尽管仍然可能）。该库的指导原则强调关注与用户交互方式密切相似的测试。

您可能希望避免以下实现细节

组件的内部状态
组件的内部方法
组件的生命周期方法
子组件

特质

dom测试库有一系列特质，有助于DOM测试。

DomQuery

DomQuery可以为任何前端特定渲染器实现，它包含易于“像用户一样测试”的领域语言和功能。

示例

Leptos

使用用户也能理解的方法调用查询DOM。

use wasm_bindgen_test::*;
wasm_bindgen_test_configure!(run_in_browser);

#[wasm_bindgen_test]
pub fn find_by_id() {
    let render = render_for_test(||{
        let count = create_rw_signal(0);
        view!{
            <button on:click=move|_|count.update(|c|*c+=1)>"Increment"</button>
            <div id="output">{move||count.get()}</div>
        }
    });
     
    render
        // The get_by_X method series return a struct that derefs into web_sys::HtmlElement
        .get_by_text("Increment")
        .unwrap()
        // So we can just click it!
        .click();

    assert_eq!(render.get_by_id("output").unwrap().parse::<usize>().unwrap(),1);
}

轻松查询相关组件并迭代。

use wasm_bindgen_test::*;
wasm_bindgen_test_configure!(run_in_browser);

#[wasm_bindgen_test]
pub fn iterate_list() {
    let render = render_for_test(||{
        view!{
            <ul>
                <li id="list_item_1">Hi</li>
                <li id="list_item_2">how</li>
                <li id="list_item_3">are</li>
                <li id="list_item_4">you?</li>
            </ul>
        }
    });
    let questions = render
        //The get_all_by_X method series return a Vec<TestElement> which derefs into HtmlElement 
        //but has helper functions describing the behavior of your app in a way that describes the usage of your app.
        .get_all_by_id_contains("list_item")
        .into_iter()
        .map(|test_element|test_element.display_text())
        .collect::<Vec<String>>()
        .join(" ");

    assert_eq!(questions,String::from("Hi how are you?"));
}

方便的错误处理，易于理解的测试。

use wasm_bindgen_test::*;
wasm_bindgen_test_configure!(run_in_browser);

#[wasm_bindgen_test]
pub fn handle_errors() {
    let render = render_for_test(||{
        view!{
            <ul>
                <li id="ghost_noises_1">Boo</li>
                <li id="ghost_noises_2">Boo</li>
    
            </ul>
        }
    });
    assert!(render
        .get_by_id_contains("ghost_noises")
        .is_more_than_one());
    assert!(render
        .get_by_id("shark_noise")
        .is_not_found());

}

依赖项

~6.5–8.5MB
~170K SLoC