Angularjs angular.js中karma/jasmine测试中的触发器输入

我试着在我写的angular指令中测试更改事件，并且我看到了一些文档，其中人们做了一些事情，比如输入“text”。输入“changed value”，但当我这样做时，我不断发现错误对象不支持属性或方法“enter”

在我的指令中，我从一个常规模板开始，该模板只在span中包装一些文本。 如果用户单击指令，则范围将替换为一个输入字段，其中模型被设置为范围的文本，该范围从初始指令元素的文本中检索

directive('criInput', function($compile){
return {
    restrict: 'A',
    template: "<span ng-click=\"edit\" ng-transclude></span>",
    transclude: true,
    link: function(scope, elm){

        elm.bind('click', function(){
            scope.text = elm.text();
            setAsInput();
        });

        function setAsInput(){
            elm.html('<input type="text" ng-model="text" ng-change="updateForm()" />');
            $compile(elm.contents())(scope);
        }

        scope.updateForm = function(){
            console.log('form updated', scope.text);
        }   
    }

}

我希望这个测试会失败，因为我首先故意检查错误的值。

---

有人能告诉我应该如何测试它，以便我能确认文本字段更新触发updateForm函数吗

这里有几件事你应该试试。将“编辑”事件添加到范围中。我不得不说，总的来说，我对您试图实现的目标感到非常困惑，当情况发生变化时，有比在link函数内部编译更简单的方法。以这种方式替换内容时，会丢失很多初始跟踪。您可以使用ng show，然后只跟踪单击的对象以分别隐藏/显示范围或输入。祝你好运

directive('criInput', function($compile) {
        return {
            restrict: 'EA',
            template: '<span ng-click="edit" ng-transclude></span>',
            transclude: true,
            link: function(scope, elm) {

                elm.bind('click', function (event) {
                    scope.edit();
                });

                scope.edit = function() {
                    scope.text = elm.text();
                    console.log('clicked');
                    setAsInput();
                };

                function setAsInput() {
                    elm.html('<input type="text" ng-model="text" ng-change="updateForm()" />');
                    $compile(elm.contents())(scope);
                }

                scope.updateForm = function() {
                    console.log('form updated', scope.text);
                }
            }

        }
    });

然后修改测试以执行类似的操作

            var initialText = 'Your wrapped text';
            template = '<span cri-input>' + initialText + '</span>';

            var compiled = $compile(template)($scope);
            $rootScope.$apply();
            console.log(compiled[0]);
            var span = compiled.find('span');
            expect(span.scope().text === 'Terence').toBe(false);
            span.length.should.equal(2);
            span.eq(1).click();
            //you have to find the element since you replaced it
            var input = compiled.find('input');
            expect(input.scope().text === initialText).toBe(true);
            console.log('the text ' + input.scope().text);

            $rootScope.$apply();
            console.log(compiled[0]);

            var initialText = 'Your wrapped text';
            template = '<span cri-input>' + initialText + '</span>';

            var compiled = $compile(template)($scope);
            $rootScope.$apply();
            console.log(compiled[0]);
            var span = compiled.find('span');
            expect(span.scope().text === 'Terence').toBe(false);
            span.length.should.equal(2);
            span.eq(1).click();
            //you have to find the element since you replaced it
            var input = compiled.find('input');
            expect(input.scope().text === initialText).toBe(true);
            console.log('the text ' + input.scope().text);

            $rootScope.$apply();
            console.log(compiled[0]);