Question

将数据传递到指令进行测试时的Angular指令单元测试问题。

我将数据对象传递给指令时遇到了麻烦。

我收到以下错误：＆＃34; 语法错误：令牌＆＃39;对象＆＃39;是意料之外的，期待在[对象]开始的表达[[对象]]的第9列的[]] ＆＃34;

这是我的单元测试：

describe("Pagination:", function () {

    var element,
      scope,
      mockData,
      rootScope;

    beforeEach(angular.mock.module("myApp"));

    beforeEach(inject(function ($rootScope, $compile) {
        scope = $rootScope.$new();

        //Seems to be an issue here:
        mockData = {
            data: [],
            meta: {},
            links: {}
        };

        element = "<pagination data=\"" + mockData + "\"></pagination>"; 
        element = $compile(element)(scope);

        angular.element(document.body).append(element);

        scope.$digest();
    }));           

    it("should emit for more data when get data is called", function () {
        sinon.stub(scope, "$emit");
        scope.getData("dummyUrl");

        expect(scope.$emit.calledWith("pagination:getTabPage", "dummyUrl")).toEqual(true);
    });
});

测试似乎很好。这似乎是测试设置的一个问题。

这是html：

 <pagination data="data"></pagination>

这是我要测试的指令：

angular.module("myApp")
    .directive("pagination", [function() {
        return {
            restrict: "E",
            scope: {
                data: "="
            },
            templateUrl: "pagination.html",
            link: function(scope) {
                scope.totalPages = scope.data.meta["total-pages"];

                scope.getData = function(pageUrl) {
                    if (pageUrl !== null) {
                        scope.$emit("pagination:getTabPage", pageUrl);
                    }
                };
            }
        };
}]);

Answer 1

mockData的值需要在加入字符串之前进行编码。

element = "<pagination data=\"" + angular.toJson(mockData) + "\"></pagination>";

另一个选项是简单地将mockData对象添加为scope上的属性，并引用您在测试中编译的HTML中的属性。

scope.mockData = { … };
element = "<pagination data='mockData'></pagination>";
element = $compile(element)(scope);

这是我的beforeEach：

 beforeEach(inject(function ($rootScope, $compile) {
        scope = $rootScope.$new();

        scope.mockData = {
            data: [],
            meta: {},
            links: {}
        };

        element = "<pagination data='mockData'></pagination>";
        element = $compile(element)(scope);

        angular.element(document.body).append(element);

        scope.$digest();

         otherScope = element.isolateScope();
    }));

将数据传递到指令进行测试时，Angular指令单元测试问题

1 个答案: