0

问题/问题

我想将我的视图中呈现的 HTML 包含在我的 CI 构建上运行的 Jasmine 测试套件中，以便我可以验证 Knockout 绑定没有损坏，并且与视图模型的交互按预期工作。有没有既定的方法来做到这一点？

我目前的设置：

我有一个应用程序将 MVC 与 Razor 视图、Web-API 和 Knockout.js 与 MVVM 模式一起使用。我想为项目中不断增长的 JavaScript 添加测试。我首先使用 Jasmine 添加测试。在我的测试中，我创建了 JSON 对象来模拟通常由我的 Web-API 调用提供的数据。我通过 CI 构建添加了测试的执行。

到目前为止一切顺利，除了我觉得这不是一个好的集成测试。如果有人修改了 Web-API 调用的数据结构，则代码可能会在生产中失败。但是测试仍然会通过，因为它使用的是静态模拟数据。如果视图发生变化，情况也是如此。淘汰赛绑定很可能会破裂，而测试根本不会表明这一点。

我能够解决静态数据的问题。可能有更好的解决方案，但我所做的是创建一个可执行文件，该可执行文件序列化 Web-API 方法将返回的相同数据。它将数据保存到 .js 文件中。我将可执行文件添加为构建步骤。然后我可以在我的测试中加载那些 .js 文件并使用这些数据。如果 Web-API/可执行文件正在序列化的对象发生更改，则测试失败并且我的 CI 构建变红。

回到我的问题：

我的问题的重点是，我还没有找到一个好的解决方案来解决如何让我的 CI 确保我的视图上的 Knockout 绑定与视图模型保持同步？我的想法是以某种方式将我的剃刀视图呈现为 HTML 文件。然后在 Knockout 绑定的测试中使用它。我还没有找到一个好的方法来做到这一点。

我已经包含了一些关于我的测试当前设置的示例。可能没有必要为这个简单的示例测试 Knockout 绑定。我的真实世界视图模型有更多依赖于数据和绑定的逻辑。我希望能够对此进行测试。

我也愿意接受任何证据表明我的整个方法存在缺陷，并且有更好的方法来确保所有部分协同工作。

写入 .js 文件的数据（JSON 通常来自 Web-API 调用）

var customerData = { "ID": "123", "FirstName": "John", ... more data... }

茉莉花测试：

describe("domain.myViewModel.test", function () {

    var vm;

    beforeEach(function () {
        vm = new myViewModel(customerData);
    });

    it("should should have some data", function () {
        //assert something
    });
}

加载测试的 HTML 文件

<!DOCTYPE html>
<html>
    <head>
        <title>Jasmine Test Runner</title>
        <!-- include jasmine files here... -->
        <link href="/TestRunner/jasmine-1.3.1/jasmine.css" rel="stylesheet" type="text/css">
        <script src="/TestRunner/jasmine-1.3.1/jasmine.js" type="text/javascript"></script>
        <script src="/TestRunner/jasmine-1.3.1/jasmine-html.js" type="text/javascript"></script>
        <script src="/TestRunner/jasmine.junit_reporter.js" type="text/javascript"></script>

        <!-- include source files here... -->
        <script src="/jsscripts/views/productclass/domain.myViewModel.js" type="text/javascript"></script>       

        <!-- include test js files here... -->
        <script src="/DataScripts/customerData.js" type="text/javascript"></script>
        <script src="/Tests/domain.myViewModel.test.js" type="text/javascript"></script>

        <!-- include jasmine.js files here... -->
        <script src="/TestRunner/executeJasmine.js" type="text/javascript"></script>
    </head>
    <body>            
          // I want the HTML from by views here
          // So I can test the bindings and interactions work as expected
    </body>
</html>
4

0 回答 0