javascript - QUnit knockout js 测试失败 : "ReferenceError: ViewModel is not defined"

标签 javascript unit-testing knockout.js requirejs qunit

下面是我的 ViewModel、test.html 和 test.js 的代码:

  1. Viewmodel( View 模型的名称是 TestPersonName.js)

    define(["knockout"], function (ko) {   
        "use strict";
        function PersonNameViewModel () {
            var self = this;
            self.firstName = ko.observable();
            self.lastName = ko.observable();
    
           self.initFullName = function() { 
              return (self.firstName() + " " + self.lastName());
            }        
    
            initFullName();
          };
          return PersonNameViewModel ;
    });
    
  2. Test.html 文件

    <!DOCTYPE html>
    <html>
    <head>
      <title>QUnit Example</title>
      <link rel="stylesheet" href="qunit-1.18.0.css">
     </head>
    <body>
      <div id="qunit"></div>
      <div id="qunit-fixture"></div>  
    
      <script src="qunit-1.18.0.js"></script>
      <script type="text/javascript" src="./knockout-3.3.0.js"></script>
      <script type="text/javascript" src="./jquery-2.1.3.js"></script>
      <script type="text/javascript" src="./require.js"></script>
      <!-- Source js file -->
      <script src="TestPersonName.js"></script>
      <!-- Test js file -->
      <script src="./Test.js"></script>
    </body>
    </html>
    

    我已经从https://qunitjs.com/下载了QUnit js/css

    Require.js 文件使用于 https://raw.githubusercontent.com/jrburke/requirejs/dev2.1/require.js

  3. Test.js 文件

     test("FullNameTest", function () {
         var model = new PersonNameViewModel();
         model.firstName("fn");
         model.lastName("ln");          
         equal("fn ln",model.initFullName(), "full name built properly");
     });
    

执行 Test.html(在 Chrome 中)出现以下错误:

My QUnit Tests: FullNameTest (1, 0, 1)

Died on test #1 at file:///D:/Test.js:23:9: PersonNameViewModel is not defined
Source:
ReferenceError: PersonNameViewModel is not defined
at Object. (file:///D:/Test.js:24:29)

但是,当我将 Knockout 代码 (TestPersonName.js) 重写为以下模式时,QUnit 测试通过并且工作得很好。

var PersonNameViewModel = function() {
     "use strict";
  var self = this;

  self.firstName = ko.observable();
  self.lastName = ko.observable();

  self.initFullName = function() { 
     return (self.firstName() + " " + self.lastName());
  };
 };

问题是我需要遵循顶部为 TestPersonName.js 指定的模式。

最佳答案

您需要添加一个 main javascript 文件作为 requirejs 的入口点。

我也会将我的测试放入这个main文件中。看看这个例子:

test.html

<!DOCTYPE html>
<html>
<head>
  <title>QUnit Example</title>
  <link rel="stylesheet" href="qunit-1.18.0.css">
 </head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>  

  <script src="qunit-1.18.0.js"></script>
  <script data-main="test" src="./require.js"></script>
</body>
</html>

test.js

requirejs.config({
    baseUrl: 'lib',
    paths: {
        jquery: './jquery-2.1.3',
        knockout: './knockout-3.3.0',
        personNameViewModel: './TestPersonName'
    }
});

define(['jquery', 'knockout', 'personNameViewModel'], function($, ko, viewModel){
test("FullNameTest", function () {
     var model = new viewModel();
     model.firstName("fn");
     model.lastName("ln");          
     equal("fn ln",model.initFullName(), "full name built properly");
 });
});

我已经从 html 文件中删除了对 Knockout、jquery 和 TestPersonName 的脚本引用。 Requirejs 会在运行时为您插入脚本引用。test.js 将是此测试的入口点,它将在 requirejs 加载时运行,请注意 data-main > 引用 requirejs 的 script 标签上的属性。

关于javascript - QUnit knockout js 测试失败 : "ReferenceError: ViewModel is not defined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31428902/

相关文章:

javascript - 序列化 knockout View 模型,想法?

javascript - 在这段 JavaScript 代码中,为什么有些函数可以访问内部变量,有些则不能?

unit-testing - 我如何在测试中模拟 Go 函数?

javascript - Jasmine中如何找到Script SRC

javascript - 在 KnockoutJS 中向列表项添加 onclick 事件。

javascript - 无法将默认值绑定(bind)到 knockoutJS 中的下拉菜单

javascript - 在 JQuery 中将代码应用于其父 div 的内部元素单击问题

javascript - 如何获取客户端用户的最后一条消息?

javascript - Angular - 使用 jasmine 测试 websocket 包装器

javascript - Knockout.js 复选框用于控制输入字段的启用/禁用状态