文章/答案/技术大牛

发布

社区首页 >问答首页 >如何测试此组件/模板？:)

问如何测试此组件/模板？:)
EN

Stack Overflow用户

提问于 2016-10-24 15:59:35

回答 1查看 494关注 0票数 1

我在为AngularJS (和nvd3)寻找关于我的UNITEST问题的任何帮助。

事实上，当我试图制作我的图表时，我有一个错误。就像$ctrl.data和$ctrl.options完全空了..。

我不明白问题出在哪里，我整天都在努力解锁，但没有成功。

如果有人知道问题从何而来，我会提前感谢你。

守则：

myComp.comp.js：

angular.module('myMod')
        .component('myComp', {
            template: '<div><nvd3 options="$ctrl.options" data="$ctrl.wrapped"></nvd3></div>',
            bindings: {
                data: '<',
                zoom: '<'
            },
            controller: myCtrl
        })

myCtrl.$inject = ['$scope']
function myCtrl($scope) {
    //Here I set wrapped with data
    //and set the options for nvd3
}

myComp.spec.js：

describe('component: myComp', function() {

    beforeEach(module('myComp'));

    var $ctrl,
        $bindings,
        $template,
        scope,
        elmt;

    beforeEach(inject(function($compile, $componentController, $rootScope, $document) {

        $scope = $rootScope.$new();

        $bindings = {
            zoom: true,
            data: [ /*DATA SAMPLE HERE*/ ]
        }

        $ctrl = $componentController('myComp', $scope, $bindings);
        elmt = angular.element('my-comp data="$ctrl.data" zoom="$ctrl.zoom"></my-comp>');
        elmt = $compile(elmt)($scope);

        $scope.$apply();
    }));

    it("test", function () {
        expect(1).toBe(1);
    });
});

卡玛/茉莉花：

Chrome 53.0.2785 (Mac OS X 10.12.0) component: myComp test FAILED
    TypeError: Cannot read property 'ordinal' of undefined
        at Object.nv.models.multiBarHorizontal (bower_components/nvd3/build/nv.d3.js:8823:23)
        at Object.nv.models.multiBarHorizontalChart (bower_components/nvd3/build/nv.d3.js:9180:30)
        at Object.updateWithOptions (bower_components/angular-nvd3/dist/angular-nvd3.js:106:72)
        at Object.refresh (bower_components/angular-nvd3/dist/angular-nvd3.js:53:39)
        at bower_components/angular-nvd3/dist/angular-nvd3.js:449:68
        at bower_components/angular-nvd3/dist/angular-nvd3.js:517:43
        at Scope.$digest (bower_components/angular/angular.js:17524:23)
        at Scope.$apply (bower_components/angular/angular.js:17790:24)
        at Object.<anonymous> (ml.report/variableImportances/variableImportances.spec.js:38:9)
        at Object.invoke (bower_components/angular/angular.js:4718:19)
    Error: Declaration Location
        at window.inject.angular.mock.inject (bower_components/angular-mocks/angular-mocks.js:3047:25)
        at Suite.<anonymous> (myComp.comp.js:'XX':'XX')
        at myComp.spec.js:'XX':'XX'
        at myComp.spec.js:'XX':'XX'
        /* I have put 'XX' in place of the real lines / col

javascript

angularjs

jasmine

karma-jasmine

angularjs-components

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-24 16:59:51

您在模板示例中缺少了开头的<。

但是，如果您使用的是$componentController，则不需要编译任何模板，所以您可以这样做：

$ctrl = $componentController('myComp', $scope, $bindings);

或者，做：

$scope.zoom = true;
$scope.data = [ /*DATA SAMPLE HERE*/ ];
elmt = angular.element('<my-comp data="data" zoom="zoom"></my-comp>');
elmt = $compile(elmt)($scope);

$scope.$apply();
$ctrl = elmt.controller('myComp');

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40222733

复制

相似问题

问如何测试此组件/模板？:)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何测试此组件/模板？:)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何测试此组件/模板？:)
EN