javascript - 如何在QUnit中加载不同的html文件？-6ren

javascript - 如何在QUnit中加载不同的html文件？

转载作者：行者123 更新时间：2023-12-01 02:29:01

26

4

我正在使用 QUnit 进行 js 和 jquery 单元测试。我的 HTML 看起来像这样:

<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>

 <script src="../lib/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css" media="screen">

  <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>

  <!--This is where I may have to add startPage.html--->
  <script src="../login.js"></script>

  <script src="../test/myTests.js"></script>


</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

目前，我正在添加如图所示的 login.js，并且我可以正确获取对 login.js 中定义的对象的引用。

但是，login.js 中的函数包含对位于其他位置的 startPage.html 中定义的一些 dom 元素的引用。

所以，如果我说 $('#login-btn')，它就会抛出错误。有没有什么办法解决这一问题？

我可以吗(a) 将 startPage.html 引用到上面给出的 qunit 页面？
(b) 在我运行测试的文件 (myTests.js) 中引用或加载 startPage.html:

QUnit.test( "a test", function( assert ) {
    assert.equal( 1, "1", "String '1' and number 1 have the same value" );//works
    assert.equal( login.abc, "abc", "Abc" );//works with attributes
    assert.equal(($("#userid").val()),'',  'Userid field is present');//fails
    assert.equal( login.ValidUserId(), true, "ValidUserId" );//fails with functions
});

QUnit 是否提供任何方法来加载 Html/php 文件，以便在测试之前定义它们。就像 Jasmine 中的“装置”？

编辑:还请告诉我如果有 startPage.php 该怎么办

最佳答案

有几种方法可以做到这一点。最简单的就是使用内置的 QUnit "fixtures" element 。在您的 QUnit HTML 文件中，只需在 ID 为 qunit-fixture 的 div 中添加您想要的任何 HTML。您放入其中的任何 HTML 都将重置为每次测试之前加载的内容(自动)。

<html>
  ...
  <body>
    <div id='qunit'></div>
    <div id='qunit-fixture'>
      <!-- everything in here is reset before each test -->
      <form>
        <input id='userid' type='text'>
        <input id='login-btn' type='submit'>
      </form>
    </div>
  </body>
</html>

请注意，装置中的 HTML 并不一定要与生产中的 HTML 相匹配，但显然您可以做到这一点。实际上，您应该只添加最少的必要 HTML，以便最大限度地减少对测试的任何副作用。

第二个选项是实际从该登录页面提取 HTML 和 delay the start of the QUnit tests直到 HTML 加载完成:

<html>
  <head>
    ...
    <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
    <script>
    // tell QUnit you're not ready to start right away...
    QUnit.config.autostart = false;

    $.ajax({
      url: '/path/to/startPage.html',
      dataType: 'html',
      success: function(html) {
        // find specific elements you want...
        var elem = $(html).find(...);
        $('#qunit-fixture').append(elem);

        QUnit.start();  // ...tell QUnit you're ready to go
      }
    });
    </script>

    ...
  </head>

  ...
</html>

关于javascript - 如何在QUnit中加载不同的html文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27839581/

26

4

0

文章推荐： Javascript .click 监听器在 DOM Ready 上触发

文章推荐： javascript - 如何获取数组中每个dom元素的宽度？

文章推荐： javascript - ngMaterial抛出错误: [$injector:modulerr]

文章推荐： javascript - 函数没有定义？

qunit - meteor 与 QUnit
我正在尝试将 QUnit 与 Meteor 应用程序一起使用。这应该可能吗？有什么推荐的款式吗？我试图通过为“/test”创建路由来制作一个“自我测试”的应用程序，但似乎 QUnit 没有运行我的测
qunit - 在测试运行器栏中选择 QUnit 模块列表？
我记得曾经在 QUnit 的测试运行器工具栏中看到过 QUnit 测试模块选择列表的屏幕截图。我的印象是，在选择列表中选择一个模块会导致该模块的测试运行。问题:QUnit 是否真的存在这样的功能 O
qunit - 将 Qunit 集成到客户端框架中
是否有任何示例说明如何将 Qunit 实现到完整的开发周期中。现有示例似乎需要将测试脚本硬编码到生产源代码中。目前有没有办法将单元测试和源代码分开？我只想要开发代码中的单元测试代码，而不是生产代码。
qunit - 如何使用 node-qunit？
此页面上的信息似乎不太可能出现——https://github.com/kof/node-qunit .我有一个安装 nodejs 并安装了 node-quit 模块的设置。我有测试运行器并执行命令
qunit - 在 Qunit 中跳过测试
我刚找到 qHint ，一种将 jsHint 测试集成到 Qunit 中的方法......但它在本地(我不是指本地主机)中不起作用，除了在 Firefox 中。所以我想添加一个“警告”或“通知”，而
javascript - QUnit with Ajax，QUnit 通过了失败的测试
我正在研究用于 JavaScript 单元测试的 QUnit。我处于一种奇怪的情况，我正在检查从 Ajax 调用返回的值。对于下面的测试，我是故意让它不及格的。 // test to check i
qunit - 如何 qunit 测试函数绑定(bind)到被触发的事件
js文件 window.onload = function() { document.getElementById('example').addEventListener('mousedown
qunit - 在 Casper.js 中运行 QUnit 测试
我当前的单元测试使用 QUnit并且它们按照 QUnit website 上的描述执行.基本上我所有的测试都编译成 tests.js这包含在 index.html 中: QUnit E
qunit - 使用 karma 和 qUnit 测试按钮点击的简单 UI
我已经想出如何使用 karma 测试运行器测试我的代码，但我不知道如何在网页上测试 UI 功能。我有一个简单的计算器程序 (calculator.js): window.onload = funct
javascript - 有人可以解释在使用 QUnit 进行单元测试时使用 qunit-fixture 吗？
我刚刚开始使用 QUnit 进行 ui 测试，所以我确定我缺少 qunit-fixture 的一些基本用例。我认为它对测试 DOM 操作很有用，但后来我意识到我的 DOM 操作函数都不知道任何关于 q
javascript - 将 DOM 对象附加到 qunit-fixture + Qunit
我正在通过 Qunit 框架进行 javaScript 单元测试。我有 DOM 对象，其中包含表单和文本框。我会将上面的 DOM 对象添加到 qunit-f
javascript - 我如何构建一套 Qunit 测试，它们都有自己的 qunit 装置？
我有两个 XXXTest.html 文件，每个都与此类似: Somet
javascript - 如何在不使用 QUnit.push 的情况下为 QUnit 编写新的断言函数？
我想为 QUnit 编写自定义 assert 函数来检查 actual 字符串是否与 expected 正则表达式匹配。在this question的帮助下我编写了第一个按预期工作的基本版本: QUn
javascript - 如何使用 qunit 在 TypeScript 中将函数参数声明为 "QUnit"类型？
我正在使用QUnit在麻省理工学院许可的项目部分用 TypeScript 编写。我有一些 TS 函数接受 QUnit 作为参数并希望将它们键入作为其接口(interface)来自the typing
ember.js - 如何将 qunit-bdd 与 ember-qunit 一起使用？
最初由 Andreas Haller 在邮件列表上发布，在此处重新发布，以便“qunit-bdd”标签可供其他人使用。 ember-qunit adds a handy moduleFor helpe
qunit - 作为 TFS 构建的一部分运行 html QUnit 测试会在测试上下文之外给出有关 start() 的错误
使用 instructions here ，我正在尝试通过 chutzpah 配置 QUnit 测试错误是: Error: Error: Error: Called start() outside
jquery - qUnit:在 qunit-fixture 之外编写的 Twitter Bootstrap 模式
我在为使用 Twitter Bootstrap 的项目编写 qUnit 测试时遇到了困难。当生成模态时，它将覆盖层放在 qunit-fixture 之外，因此当运行下一个测试时，覆盖层不会被删除。有人
javascript - 在 ember.js/QUnit 集成测试中，如何让 QUnit 在做出断言之前等待模型完成加载？
这是我的测试代码。 test("user login", function(){ visit("/sessions/new").then(function() { fillIn('inpu
resharper - 使用 Resharper 8 运行单元测试时 Qunit qunit-fixture div 被删除
我有一个问题，当我尝试在 div id="qunit-fixture"中附加或设置 HTML 代码时，使用在 ReSharper 8 下运行的 Qunit 进行测试。div id="qunit-fix
QUnit，断言不行吗？
抱歉，如果这很明显，但是如果我们想断言某个方法返回 false，QUnit 中是否有 notOK 或等效函数？我看不到在 documentation 中否定 OK 的方法. 我试过: !ok...

首页

博学

6Ren·AI

商城

javascript - 如何在QUnit中加载不同的html文件？