Testing-euv-Applications[20260804025430]

测试 euv 应用

项目代码：github.com/euv-dev/euv

测试是任何软件开发过程的关键部分。它确保你的应用行为正确，及早捕获回归问题，并在重构代码时给你信心。在 euv 中，测试涉及 Rust 原生测试框架和特定于框架的响应式信号系统、组件架构和虚拟 DOM 的策略组合。

本文提供了测试 euv 应用的全面指南，涵盖单元测试、组件测试、事件处理测试以及维护健壮测试套件的最佳实践。

基础：Rust 的测试框架

由于 euv 构建在 Rust 和 WebAssembly 之上，你可以使用 Rust 强大的内置测试框架。每个 Rust 项目都可以使用 #[cfg(test)] 属性直接在源文件中包含单元测试：

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_signal_creation() {
        let count: Signal<i32> = use_signal(|| 0);
        assert_eq!(count.get(), 0);
    }

    #[test]
    fn test_signal_update() {
        let count: Signal<i32> = use_signal(|| 0);
        count.set(42);
        assert_eq!(count.get(), 42);
    }
}

这些测试通过 cargo test 运行，提供了一种快速可靠的方式来验证你的信号逻辑行为。由于信号是 euv 中响应式的基础，彻底测试它们至关重要。

测试响应式计算信号

computed! 宏创建自动跟踪依赖项并在这些依赖项更改时重新评估的信号。测试计算信号涉及验证它们是否正确反映其依赖项：

#[test]
fn test_computed_signal() {
    let celsius: Signal<f64> = use_signal(|| 0.0);
    let fahrenheit: Signal<f64> = computed!(celsius.get() * 9.0 / 5.0 + 32.0);

    assert_eq!(fahrenheit.get(), 32.0);

    celsius.set(100.0);
    assert_eq!(fahrenheit.get(), 212.0);
}

此测试验证计算的华氏温度信号是否正确地将摄氏温度转换为华氏温度，并在摄氏温度值变化时更新。

测试 watch! 宏

watch! 宏用于在信号变化时应发生的副作用。测试 watcher 涉及验证副作用是否正确发生：

#[test]
fn test_watch_signal() {
    let celsius: Signal<f64> = use_signal(|| 0.0);
    let fahrenheit: Signal<f64> = use_signal(|| 0.0);

    watch!(celsius, |c| {
        fahrenheit.set(c * 9.0 / 5.0 + 32.0);
    });

    celsius.set(100.0);
    assert_eq!(fahrenheit.get(), 212.0);
}

此测试确保 watcher 在摄氏温度信号变化时正确更新华氏温度信号。

测试表单验证逻辑

表单验证是任何 Web 应用中最重要的测试领域之一。在 euv 中，表单验证逻辑通常驻留在事件处理程序中，因此测试各种输入场景至关重要：

#[test]
fn test_empty_username_validation() {
    let username: Signal<String> = use_signal(|| "".to_string());
    let errors: Signal<String> = use_signal(|| "".to_string());

    // 模拟用户名为空的表单提交
    let mut validation_errors: Vec<String> = Vec::new();
    if username.get().trim().is_empty() {
        validation_errors.push("Username is required".to_string());
    }

    assert!(!validation_errors.is_empty());
    assert_eq!(validation_errors[0], "Username is required");
}

#[test]
fn test_valid_form_submission() {
    let username: Signal<String> = use_signal(|| "alice".to_string());
    let email: Signal<String> = use_signal(|| "alice@example.com".to_string());
    let errors: Signal<String> = use_signal(|| "".to_string());

    let mut validation_errors: Vec<String> = Vec::new();
    if username.get().trim().is_empty() {
        validation_errors.push("Username is required".to_string());
    }
    if email.get().trim().is_empty() {
        validation_errors.push("Email is required".to_string());
    }

    assert!(validation_errors.is_empty());
}

这些测试验证验证逻辑是否正确识别空字段并允许有效提交。

测试事件处理程序

euv 中的事件处理程序响应点击、输入更改和表单提交等用户交互。测试事件处理程序涉及模拟事件并验证结果状态变化：

#[test]
fn test_counter_increment() {
    let count: Signal<i32> = use_signal(|| 0);

    // 模拟 onclick 处理程序逻辑
    count.set(count.get() + 1);
    assert_eq!(count.get(), 1);

    count.set(count.get() + 1);
    assert_eq!(count.get(), 2);
}

#[test]
fn test_toggle() {
    let is_active: Signal<bool> = use_signal(|| false);

    // 模拟切换行为
    is_active.set(!is_active.get());
    assert_eq!(is_active.get(), true);

    is_active.set(!is_active.get());
    assert_eq!(is_active.get(), false);
}

这些测试验证事件处理程序逻辑在响应用户交互时是否正确更新状态。

测试组件属性

euv 中的组件通过 try_get_props() 方法接收属性。测试组件属性涉及验证组件是否正确处理其属性：

#[test]
fn test_component_default_props() {
    #[derive(Clone, Default)]
    struct MyCardProps {
        title: &'static str,
        onclick: Option<Rc<dyn Fn(Event)>>,
        disabled: Signal<bool>
    }

    let props = MyCardProps::default();
    assert_eq!(props.title, "");
    assert!(props.onclick.is_none());
    assert_eq!(props.disabled.get(), false);
}

此测试验证默认属性是否正确初始化，这对于确保在未显式提供属性时组件行为合理非常重要。

使用 html! 宏进行测试

html! 宏是在 euv 中定义 UI 的主要方式。虽然直接测试虚拟 DOM 可能具有挑战性，但你可以测试驱动 html! 宏的逻辑：

#[test]
fn test_conditional_rendering_logic() {
    let is_valid: Signal<bool> = use_signal(|| false);

    // 测试驱动条件渲染的逻辑
    let is_valid_value = computed!(username.get().trim().is_empty() == false
        && email.get().trim().is_empty() == false);

    // 当字段为空时，表单应该无效
    assert_eq!(is_valid_value.get(), false);
}

此测试验证决定 html! 宏渲染内容的条件逻辑，确保为不同输入条件生成正确的 UI 状态。

集成测试策略

集成测试验证应用的多个部分是否正确协同工作。在 euv 中，这通常涉及：

1. 信号 + 事件测试：验证信号在事件触发时是否正确更新。
2. 组件 + 信号测试：验证组件是否正确响应信号变化。
3. 表单 + 验证测试：验证表单提交是否正确触发验证并更新状态。

以下是一个结合信号、事件和验证的集成测试示例：

#[test]
fn test_form_submission_flow() {
    let username: Signal<String> = use_signal(|| "alice".to_string());
    let email: Signal<String> = use_signal(|| "alice@example.com".to_string());
    let errors: Signal<String> = use_signal(|| "".to_string());
    let submitted: Signal<String> = use_signal(|| "".to_string());

    // 模拟表单提交
    let mut validation_errors: Vec<String> = Vec::new();
    if username.get().trim().is_empty() {
        validation_errors.push("Username is required".to_string());
    }
    if email.get().trim().is_empty() {
        validation_errors.push("Email is required".to_string());
    }

    if validation_errors.is_empty() {
        errors.set("".to_string());
        submitted.set(format!("Submitted: {}", username.get()));
    } else {
        errors.set(validation_errors.join("; "));
    }

    // 验证结果
    assert!(errors.get().is_empty());
    assert_eq!(submitted.get(), "Submitted: alice");
}

测试最佳实践

在测试 euv 应用时，请记住以下最佳实践：

1. 隔离测试信号逻辑：信号是纯数据转换，应该独立于 UI 进行测试。
2. 彻底测试事件处理程序：事件处理程序包含重要的业务逻辑，应该用各种输入场景进行测试。
3. 测试边界情况：空字符串、边界值和意外输入都应该被覆盖。
4. 使用描述性测试名称：测试名称应该清楚地描述正在测试的内容和预期结果。
5. 保持测试快速：单元测试应该快速运行。避免不必要的设置或清理。
6. 测试计算信号：确保计算信号正确跟踪依赖项并在需要时重新评估。
7. 测试 watch! 宏：验证 watcher 是否正确响应信号变化并触发预期的副作用。

总结

测试 euv 应用涉及 Rust 原生测试框架和特定于框架的响应式信号系统策略的组合：

• 单元测试：测试信号创建、更新和计算值。
• 事件处理程序测试：验证事件是否正确更新状态。
• 表单验证测试：测试表单验证的各种输入场景。
• 组件属性测试：验证组件是否正确处理其属性。
• 集成测试：测试信号、事件和组件之间的交互。

通过遵循这些测试策略和最佳实践，你可以构建可靠、可维护且无回归问题的 euv 应用。Rust 的类型系统与 euv 响应式信号系统的结合为构建经过充分测试的 Web 应用提供了坚实的基础。

---

项目代码：github.com/euv-dev/euv