1 个不稳定版本

0.1.0	2024年1月26日

#2164 in 网页编程

Apache-2.0

43KB
595 行

DOM 测试库

简介

dom-testing-library 特性系列有助于您以用户为中心的方式测试 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());

}

依赖关系

~19–31MB
~508K SLoC