使用 mocha 进行无头淘汰视图模型测试答案

【问题标题】：Headless knockout viewmodel testing with mocha使用 mocha 进行无头淘汰视图模型测试
【发布时间】：2012-06-26 15:04:40
【问题描述】：

我正在尝试对我的淘汰视图模型进行无头测试。我特意避免在我的视图模型中处理任何 ui 结构，并将连线留给 html 页面。

这在 Jasmine 中运行良好，因为它在浏览器中运行，但是当我切换到 mocha 时，我最终会在淘汰赛的最后一行运行：

})(窗口、文档、导航器);

我已经研究过使用zombiejs，这将是一个不错的选择，但我没有看到一个关于如何在不更改淘汰源本身的情况下使用它的好故事。

关于如何解决这个问题的任何想法？

【问题讨论】：

您的视图模型中需要哪些剔除功能？如果它只是 observables，那么在测试 VM 部分时模拟它们并忽略其余的淘汰赛。
问题是即使使用调试版本，在调用 navigator.userAgent 时，knockout.js 脚本 (v2.1.0) 的初始化也会出错。因此，我无法测试 viewmodel 和 observable/computed/pubsub 部分。
我认为僵尸将是你最好的，因为它模拟了 dom。 Knockout 是作为 DOM 模型绑定器编写的，而不是通用模型绑定器。也许主干可能更符合您的开发风格。 Glue.js 也是一个不错的事件绑定器。
Glue 和 Zombie 仅适用于对敲除源或某种类型的助手进行修改。即使这样，zombie 也不会像淘汰赛使用它那样模拟出 window.navigator。
有了新的淘汰赛，这将不是问题。

标签： knockout.js mocha.js knockout-2.0

【解决方案1】：

这也是我目前关注的一个话题。我将把我的发现放在这里，希望它们能为您指明正确的方向。

我首先尝试的可能路线是PhantomJS。它是一个无头 WebKit 浏览器，因此它应该具有出色的 DOM、JSON、HTML5 和 CSS 选择器支持（例如 works with jQuery and qUnit）。

我之所以选择这个是因为它是由 knockout.js 本身使用的，我在 knockout.js 存储库中发现了它，其中有一个 .travis.yml 文件和这个注释：

我没有任何证据表明这会奏效，但在 knockout.js 核心中使用它感到鼓舞。我还发现 this runner script for knockout/phantom 看起来是一个很棒的启动点。

我还发现 a few examples 通过 node.js 使用 Mocha 和 PhantomJS，包括 this lib extending grunt 在 Phantom 中运行 mocha 和 this script showing how to run mocha inside PhantomJS。所以至少那部分是确定的。

另一个解决方案noted in the knockoutjs archives，是使用knockout-node 和JsDOM 创建一个可行的DOM，但乍一看，这似乎太模糊了，可能会导致实现自己的测试环境。

有一个slidedeck suggestingzombie.js 可以与敲除/节点/等一起使用。但是我找不到任何可以提供确凿证据的东西，所以我也不喜欢这条路线。

【讨论】：

@JohnRayner 您介意发布您的工作流程描述吗？

【解决方案2】：

也许这是因为 Knockout 已经改变（因为接受的答案是旧的），但今天，我不认为这是必要的（不再）。您可以轻松测试 Knockout 视图模型。我需要做的就是在我的测试中设置全局 ko 变量：

global.ko = require('../../Website/Scripts/knockout-3.4.0.js');

之后，您可以像往常一样运行测试：实例化您的视图模型，对其执行任何操作并断言。

我已经写了 a little more 关于它，但本质上，这对我有用：

global.ko = require('../../Website/Scripts/knockout-3.4.0.js');

var MyViewModel = require('../../Website/Scripts/myViewModel.js').MyViewModel;

describe('MyViewModel', function() {
    var viewModel;

    beforeEach(function(){
        viewModel = new MyViewModel();
    });

    describe('...', function() {
        /* And so on */
    });
});

【讨论】：