Javascript 茉莉花中NGM模型的测试

我有一个指令，它创建一些输入字段，并将它们链接到带有

ngModel

的范围。当指令的用户在HTML文件中创建此命令时：

<div tk-quick-form="formStructure" form-data="formData" id="main_form" ></div>

然后，将使用链接到

formData.name

的

ngModel

创建一个输入字段

指令按计划工作，但我不知道如何在Jasmine中测试它

这就是我目前正在做的：

在

it

功能下：

$rootScope.formStructure = [
    {
        fieldName: 'name',
        type: 'string'
    }
];

var element = $compile('<div tk-quick-form="formStructure" form-data="formData" id="main_form" ></div>"')($rootScope);

$(element).find("input#name").val("set")
dump($(element).find("input#name").val()) // outputs "set"

expect($rootScope.formData.name).toBe("set"); //outputs Expected undefined to have value 'set' 
//(although in manual testing $scope.formData.name is actually set because the input field contains ng-model="formData.name")

$rootScope.$digest();

$rootScope.formStructure=[
{
fieldName:'名称'，
键入：“字符串”
}
];
var元素=$compile（“”）（$rootScope）；
$（元素）.find（“输入#名称”）.val（“设置”）
dump（$（element）.find（“input#name”）.val（）//输出“set”
expect（$rootScope.formData.name）.toBe（“set”）；//未定义的输出应具有值“set”
//（尽管在手动测试中，实际上设置了$scope.formData.name，因为输入字段包含ng model=“formData.name”）
$rootScope.$digest（）；

---

我应该如何编写这个测试？

至于我，除了几件事之外，你做的一切都是对的。你应该在预期之前调用

$rootScope.$digest（）

。另外，你必须用

.triggerHandler（'input'）

触发“input”，这样模型才会得到更新

describe('tkQuickForm', function () {
    beforeEach(module('tkQuickForm'));

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

    it('should pass dummy test', function () {
        expect(true).toBe(true);
    });

    it('should link ng-model to formData', function() {
        this.scope.formStructure = [
            {
                fieldName: 'name',
                type: 'string'
            }
        ];

        var element = this.$compile(`
            <div tk-quick-form="formStructure" form-data="formData" id="main_form"></div>"
        `)(this.scope);

        this.scope.$digest(); // call digest first

        var input = element.find("input")[0];
        angular.element(input).val('set').triggerHandler('input');

        expect(this.scope.formData.name).toBe("set");
    });
});

description（'tkQuickForm'，函数（）{
在每个（模块（'tkQuickForm'）之前；
beforeach（注入（函数（$rootScope，$compile）{
这。$rootScope=$rootScope；
this.scope=$rootScope.$new（）；
这个。$compile=$compile；
}));
它（'应该通过虚拟测试'，功能（）{
期望（真），期望（真）；
});
它（'应该将ng模型链接到formData'，函数（）{
this.scope.formStructure=[
{
fieldName:'名称'，
键入：“字符串”
}
];
var element=this.$compile(`
"
`)（这是一个范围）；
this.scope.$digest（）；//首先调用digest
var input=element.find（“input”）[0]；
angular.element（input）.val（'set'）.triggerHandler（'input'）；
expect（this.scope.formData.name）.toBe（“set”）；
});
});

使用

“角度”：“~1.5.0”

检查。所有规格都可以

---

不，我实际上已经试过了，但没有效果。在我的问题中，它出现在之后，因为我厌倦了在代码中的不同位置移动该行，但没有help@TomKlino那么请分享你的指令代码。我很好奇到底发生了什么：-）我在JSFIDLE中显示它时遇到了问题，但我只是在这里为它创建了一个git存储库：（它还不包括测试，因为我不喜欢发布失败的尝试）好的。我会尽我所能do@TomKlino如果已经设置了测试环境就好了，即使测试会中断。

describe('tkQuickForm', function () {
    beforeEach(module('tkQuickForm'));

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

    it('should pass dummy test', function () {
        expect(true).toBe(true);
    });

    it('should link ng-model to formData', function() {
        this.scope.formStructure = [
            {
                fieldName: 'name',
                type: 'string'
            }
        ];

        var element = this.$compile(`
            <div tk-quick-form="formStructure" form-data="formData" id="main_form"></div>"
        `)(this.scope);

        this.scope.$digest(); // call digest first

        var input = element.find("input")[0];
        angular.element(input).val('set').triggerHandler('input');

        expect(this.scope.formData.name).toBe("set");
    });
});