如何参考另一个类创建QUnit测试?

Bud*_*dda 8 javascript unit-testing qunit visual-studio

我正在尝试将JavaScript的单元测试添加到我的网站中.我使用VS2013,我的项目是一个ASP.NET网站.

基于建议(http://www.rhyous.com/2013/02/20/creating-a-qunit-test-project-in-visual-studio-2010/)我到目前为止做了:

  1. 创建了新的ASP.NET应用程序
  2. 导入的QUnit(使用NuGet)
  3. 进入"Scripts"在我的原始网站中添加了js文件的链接(文件PlayerSkill.js - 包含PlayerSkill类和trainings.js - 包含Trainer和其他一些类)
  4. 创建新文件夹"TestScripts"
  5. 添加了TrainingTests.js文件
  6. 写了简单的测试:

     test( "Trainer should have non-empty group", function () {
        var group = "group";
        var trainer = new Trainer(123, "Name123", group, 123);
        EQUAL(trainer.getTrainerGroup(), group);
     });
    
    Run Code Online (Sandbox Code Playgroud)

注意:我的trainings.js文件包含

function Trainer(id, name, group, level) {
    ... 
    var _group = group;
    this.getTrainerGroup = function () { return _group ; }
};
Run Code Online (Sandbox Code Playgroud)

当我执行我的测试时,我看到错误:未定义培训师.

它看起来像是我的班级无法识别.我觉得链接文件还不够,但我错过了什么?

请帮助添加对类和运行单元测试的原始文件的引用.

谢谢.

PS问题2:我可以添加对2个文件的引用(我的单元测试还需要一个在另一个文件中的类)吗?怎么样?

dev*_*ept 3

您应该将应用程序的所有相关逻辑添加到单元测试文件中,以便它们在运行测试之前全部执行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>QUnit Test Results</title>
        <link rel="stylesheet" href="/Content/qunit.css">
    </head>
    <body>
        <div id="qunit"></div>
        <div id="qunit-fixture"></div>
        <script src="/Scripts/qunit.js"></script>
        <script src="/Scripts/PlayerSkill.js"></script>
        <script src="/Scripts/trainings.js"></script>
        <script src="/TestScripts/TrainingTests.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

不应使用链接文件,因为它们实际上不会存在于脚本文件夹中。

如果您确实想使用它们,您应该让 Visual Studio 智能感知像这样解析文件的物理路径。

  1. 输入脚本标签<script src=""></script>
  2. 将光标放在 src 属性中的引号内,然后按CTRL + SPACE
  3. 搜索您的文件并保持解析的路径不变
  4. 如果您的项目位置发生变化,您必须更新链接的文件以及脚本引用。

{编辑1}

解决方案2:

您还可以使用 MVC 控制器和 Razor 视图来创建单元测试页面,链接的文件将按预期工作,唯一的问题是您的项目中将有一个额外的控制器,但这一点也不坏,例如您想要使用 ajax 测试内容的加载,如果从本地文件运行,默认情况下浏览器会阻止这些内容的加载。

解决方案3:

您还可以为您的 javascript 单元测试设置一个新的 MVC 项目,就像您通常为任何服务器端代码设置一个新项目一样,这将有助于防止您的测试干扰您的生产代码

{编辑2}

解决方案4:

作为 javascript 生态系统的一部分,您可以在运行测试之前使用 grunt 或 gulp 自动将脚本从任何地方复制到项目中。你可以像这样编写 gulpfile.js

var sourcefiles = [/*you project file paths*/];
gulp.task('default', function () {
    return gulp.src(sourcefiles).pipe(gulp.dest('Scripts'));
});
Run Code Online (Sandbox Code Playgroud)

然后运行它,打开控制台并运行命令gulpgulp default