测试复杂的控制器组件

Question

下面是我尝试进行单元测试的控制器部分的代码。我讨厌 post 一些我还没有尝试过的东西，但我不知道应该如何开始测试这段代码。我认为部分问题是我不确定 modalInstance 是如何执行的。如果你能看到一个好的切入点，请告诉我。

$scope.confirmDelete = function (account) {

            var modalInstance = $modal.open({
                templateUrl: '/app/accounts/views/_delete.html',
                controller: function (global, $scope, $modalInstance, account) {
                    $scope.account = account;

                    $scope.delete = function (account) {
                        global.setFormSubmitInProgress(true);
                        accountService.deleteAccount(global.activeOrganizationId, account.entityId).then(function () {
                            global.setFormSubmitInProgress(false);
                            $modalInstance.close();
                        },
                        function (errorData) {
                            global.setFormSubmitInProgress(false);
                        });

                    };

                    $scope.cancel = function () {
                        global.setFormSubmitInProgress(false);
                        $modalInstance.dismiss('cancel');
                    };
                },
                resolve: {
                    account: function () {
                        return account;
                    }
                }
            });

Answer 1

首先，为了使其可正确测试，您可能希望将嵌套控制器提取到与此相同的 angular 模块中的第一个 class 控制器。

然后你可以测试这个当前控制器（称之为 CtrlA）直到 confirmDelete 点，然后测试新提取的，也就是说，'modal controller'（让我们称之为 CtrlB）单独.

换句话说，在您对 CtrlA 的测试中，您应该调用 confirmDelete 并期望 $modal.open toHaveBeenCalled。请注意，在这些测试中，您将模拟 $modal.open:

spyOn（模态，'open'）；

在幕后，angular-ui-bootstrap 实例化模态并正确设置所有引用，以便在 CtrlB 中注入的 $modalInstance 与 modalInstance 相同在你的 CtrlA 中 $modal.open returns。由于这是第三方代码，因此您不需要 'test' 通过单元测试来验证此声明的有效性。您的单元测试将简单地假设 $modalInstance CtrlB 收到的与在 CtrlA 中创建的相同。

现在剩下的就是测试 CtrlB 中的每个范围方法是否按照您的方式运行。为此，您将创建一个间谍对象并将其作为 $modalInstance 注入 CtrlB，然后您将开始编写测试，就好像您正在为任何普通控制器编写测试一样。

例如，调用cancel并测试间谍$modalInstance.dismiss是否被调用（等等）

祝你好运！

测试复杂的控制器组件

Testing complex Controller component

unit-testing

angularjs