javascript - Knockout JS 单元测试和 ViewModel 耦合和依赖关系

Question

我开始为我的 js 代码编写单元测试，但我是这方面的新手。我们使用 Knockout.js 并需要测试项目的 View 模型。

这是示例:

Tasks.js 文件

var yc = yc || {};

yc.TasksVM = function (options) {
    _addTask = function () {
        yc.AddTask.openDialog();
    },

    _paging = myc.PagingVM();

    _instance = {
        addTask: _addTask,
        paging: _paging,
    };

    return _instance;
}

和AddTask.js文件

var yc = yc || {};

yc.AddTaskVM = function (options) {
    var 
    _openDialog = function (orderId) {
        $.ajax({
            data: data, type: 'get', url: dialogUrl,
            success: function (dialogContent) {
                // ...
            }
        });
    };

    _instance = {
        openDialog: _openDialog
    };

    return _instance;
}

当我尝试使用 Jasmine 来测试 TasksVM 时，我遇到了需要实例化 的问题yc.AddTask.openDialog()调用openDialog() 。我还需要将此文件包含在 <script> 中标签以便能够接听电话。然后，在 yc.AddTask.openDialog我需要模拟 $.ajax调用(并且还在我的 html 中包含 jQuery)。

我的问题是关于耦合的。

1.可以调用yc.AddTask.<my_function>吗？里面来自yc.TasksVM ？

在.NET世界中，我们通过接口(interface)来处理这个问题。我们删除所有外部依赖项并仅使用源代码中的接口(interface)。因此我们可以模拟我们正在测试的代码中的任何内容。

2.我需要将所有这些依赖文件包含到我的 html 文件运行程序中可以吗？

Answer 1

1) 在较小的应用程序中没问题，但对于具有大量耦合的复杂应用程序，我会使用某种 EventAggregator 在模型之间进行通信。

2) 当我对 JS 业务逻辑进行单元测试时，我总是 mock 所有服务和 DOM 交互，通过 KO 免费获得 DOM 交互，因为你只测试已经与 DOM 解耦的 ViewModel(最大的 View 模型之一)如果你问我的话，MVVM 的优点)。

jQuery 是一个 DOM 交互库，你应该只使用它的服务部分(post、ajax、getJson 等)，所以我为我们的单元测试所做的是覆盖 $ 和 jQuery 符号，这样如果我的开发者同事尝试从 ViewModel 使用 $("dom") ，它会在单元测试中崩溃，这是确保所有开发人员正确使用 KO 的好方法。

在单元测试的设置中，只需覆盖您想要模拟的方法(伪代码不是 Jasmine)

$.getJSON = function(url, params, success) {
   assert(1, params.id, "It should call our backend with the correct Id");
   success(mockedData);
};

编辑:在我的项目中，我们使用 Qunit 并有一个基本测试“类”，它有一个拆卸功能，因此它会清空所有模拟函数，这样就无法从不同的测试中调用它们