个人中心
gpt4 book ai didi

javascript - 有人可以解释在使用 QUnit 进行单元测试时使用 qunit-fixture 吗？

转载 作者：行者123 更新时间：2023-11-29 10:38:02 26 4
gpt4 key购买 nike

我刚刚开始使用 QUnit 进行 ui 测试，所以我确定我缺少 qunit-fixture 的一些基本用例。我认为它对测试 DOM 操作很有用，但后来我意识到我的 DOM 操作函数都不知道任何关于 qunit-fixture 的信息(他们也不应该？)。

例子:

<div id="container">
    <form id="my-form">
        <input type="hidden" name="field1" id="field1">
        <input type="hidden" name="field2" id="field2">
    </form>
</div>
<div id="qunit-fixture"></div>

我将 URL 参数传递给函数以填充此表单。如果这些参数不存在，我希望删除该字段，以便 JQuery.serialize() 不会捆绑空字段。

function populate(params){
    if( params.field1 ){
        $("#field1").val(params.field1);
    } else {
        $("#field1").remove();
    }
    if( params.field2 ){
        $("#field2").val(params.field2);
    } else {
        $("#field2").remove();
    }
}

我最初的想法是“哦，太棒了。我可以使用 qunit-fixture 来重复模拟我的表单!”像这样:

QUnit.test("populate - field1=text", function(assert){
    $("#qunit-fixture").html($("#container").html());
    populate( {field1: "text"} );

    assert.deepEqual($("#field1").val(), "text");
    assert.deepEqual($("#field2").val(), undefined);
});

QUnit.test("populate - field1="text", function(assert){
    $("#qunit-fixture").html($("#container").html());
    populate( {field1: "text", field2: "text"} );

    assert.deepEqual($("#field1").val(), "text");
    assert.deepEqual($("#field2").val(), "text");
});

这当然会失败，因为第一个测试对 populate() 的调用改变了 DOM 并从页面的主表单中删除了 #field2 以及原来的副本放入 qunit-fixture(非唯一 ID.. 哎呀)。

那我错过了什么？我真的很喜欢使用 QUnit 测试逻辑模块的能力，并且终于开始看到更多测试驱动开发风格的优点。我也希望能够测试我的 DOM 操作。

注意:这是一个简化的示例。我项目中的实际 DOM 操作要复杂得多，因此希望对其进行测试。

最佳答案

qunit-fixture 元素是一些 HTML 的容器，您的测试可以针对这些 HTML 进行断言。每次测试后，QUnit 都会将其重置为测试开始前的状态，以便下一次测试可以运行，而不必担心之前的测试添加或删除了什么。

当然，如果您的测试开始对 qunit-fixture 之外的元素进行修改，那么您将开始看到影响其他测试的测试，因此请尽量不要这样做。

在您的例子中，您正在创建一个空的 qunit-fixture div 并从另一个 div 复制内容。更好的方法是使用 qunit-fixture 元素来包含您要测试的 HTML，例如:

<div id="qunit-fixture">
    <div id="container">
        <form id="my-form">
            <input type="hidden" name="field1" id="field1">
            <input type="hidden" name="field2" id="field2">
        </form>
    </div>
</div>

(我不知道你是否需要容器div。我在上面的例子中保留了它，但如果不需要，请随意去掉它。)

因为您不再需要将 HTML 从容器 div 复制到 qunit-fixture div，您可以从测试中删除这些行:

    $("#qunit-fixture").html($("#container").html());

您也不再遇到重复 ID 的问题，并且由于 QUnit 会在每次测试后重置 qunit-fixture，因此您不应该遇到一个测试影响另一个测试的问题。

QUnit 的目的是让您从专门为测试目的而创建的页面运行它。此页面应如下所示:

<html>
<head>
  <!-- load various JS and CSS files -->
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture">
    <!-- sample markup for testing against -->
  </div>
</body>

由于 qunit-fixture 之外没有任何标记，除了 QUnit 将用于测试结果的 qunit div 之外，没有“页面部分 qunit-fixture”，如您在评论中所写，也没有任何重复的 ID。

关于javascript - 有人可以解释在使用 QUnit 进行单元测试时使用 qunit-fixture 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33681172/

26 4 0
文章推荐： ios - 在 UIContainerView 中嵌入 UIScrollView
文章推荐： MySQL 普通文本到脊椎大小写转换
文章推荐： java - 如何通过个人设置安装 MySQL 或 MsSQL
文章推荐： javascript - 为什么 waitForKeyElements 对于 Google 搜索结果需要另一个超时？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com