测试复杂的控制器组件

Question

下面是我正在尝试单元测试的控制器的一部分的代码。我讨厌发布一些我还没有尝试过的东西，但我对如何开始测试这段代码感到非常迷茫。我认为部分问题是我不确定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

首先，为了使它可正确测试，您可能希望将嵌套控制器提取到与此相同的角度模块中的一级控制器。

然后，您可以将此当前控制器（称为 CtrlA）测试到confirmDelete点，然后分别测试新提取的"模态控制器"（让我们调用 CtrlB）。

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

spyOn（modal， 'open'）;

在后台，angular-ui-bootstrap 实例化一个模态并正确设置所有引用，以便 CtrlB 中注入$modalInstance与 CtrlA 中$modal.open返回的模态实例相同。由于这是第三方代码，因此您无需通过单元测试来"测试"此声明的有效性。单元测试只需假定 CtrlB 收到的$modalInstance与在 CtrlA 中创建的相同。

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

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

祝你好运！