gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:09:33 25 4
gpt4 key购买 nike

下面是我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com