单元测试 AngularJS 文档就绪功能

Question

我正在编写一个 AngularJS 应用程序，并且我正在寻找一种方法来对每个方面进行单元测试。

在这种特殊情况下，我需要对我编写的表示控件的自定义指令进行单元测试。

指令可以在这里找到：

var officeButton = angular.module('OfficeButton', []);

officeButton.directive('officeButton', function() {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            isDefault: '@',
            isDisabled: '@',
            control: '=',
            label: '@'
        },
        template: '<div class="button-wrapper" data-ng-click="onClick()">' +
                    '<a href="#" class="button normal-button">' +
                      '<span>{{label}}</span>' +
                    '</a>' +
                  '</div>',
        controller: ['$scope', function($scope) {
            var event = this;

            var api = {

                changeLabel: function(label) {
                    $scope.label = label;
                },

                enable: function() {
                    $scope.isDisabled = false;
                },

                disable: function() {
                    $scope.isDisabled = true;
                },

                setAsDefault: function() {
                    $scope.isDefault = true;
                },

                removeDefault: function() {
                    $scope.isDefault = false;
                }
            };

            event.onClick = function() {
                if (typeof $scope.control.onClick === 'function') { $scope.control.onClick(); }
            };

            $.extend($scope.control, api);

            function Init() {
                if ($scope.isDefault === 'true') { $scope.isDefault = true; }
                else { $scope.isDefault = false; }
            }

            Init();
        }],

        link: function(scope, element, attributes, controller) {

            scope.$watch('isDefault', function(value) {
                if (value === 'true' || value) { $('a', element).addClass('button-default'); }
                else { $('a', element).removeClass('button-default'); }
            });

            scope.onClick = function() { controller.onClick(); }
        }
    }
});

可以使用以下 HTML sn-p 调用该指令：

<office-button label="Office Web Controls" control="buttonController"></office-button>

现在，该指令公开了一个 API，该 API 具有诸如 changeLabel、enable、disable、...等函数。

现在，这些函数没有在应用程序加载时定义，这意味着如果在我的 HTML 底部我调用以下代码：

$scope.buttonController.changeLabel('Office Web Controls for Web Applications Directive Demo');

会抛出错误，因为changeLabel()方法没有定义。

为了使它起作用，我需要将这些调用包装在一个angular.ready 函数中，例如：

angular.element(document).ready(function () {
    $scope.buttonController.changeLabel('Office Web Controls for Web Applications Directive Demo');
});

这里有一个plunker 供您参考。

现在，我正在使用 Jasmine 编写单元测试，这就是我目前所拥有的：

describe('Office Web Controls for Web Applications - Button Testing.', function() {
    // Provides all the required variables to perform Unit Testing against the 'button' directive.
    var $scope, element;
    var buttonController = {};

    // Loads the directive 'OfficeButton' before every test is being executed.
    beforeEach(module('OfficeButton'));

    // Build the element so that it can be called.
    beforeEach(inject(function($rootScope, $compile) {
        // Sets the $scope variable so that it can be used in the future.
        $scope = $rootScope;
        $scope.control = buttonController;

        element = angular.element('<office-button control="buttonController"></office-button>');
        $compile(element)($scope);
        $scope.$digest();
    }));

    it('Should expose an API with certain functions.', function() {
    });
});

现在，在it 函数中，我想测试$scope.control 是否公开了指令中定义的API。

问题是页面需要在 API 可用之前准备好。

关于如何更改代码或如何正确进行单元测试有什么建议吗？

Answer 1

我找到了问题，只是单元测试的配置错误。

使用此代码时：

$scope.control = buttonController;
element = angular.element('<office-button control="buttonController"></office-button>');

我必须将元素更改为：

$scope.control = buttonController;
element = angular.element('<office-button control="control"></office-button>');