javascript - AngularJS，Karma-使用setPristine清除ng-dirty

在我的一项单元测试中，我试图测试在输入元素上设置setPristine时是否删除了ng-dirty。在元素上调用setPristine之后，我可以看到ng-dirty没有被删除。

我感觉我在错误地调用setPristine方法。

我要测试的逻辑如下


然后在输入中添加文字
测试ng-dirty设置setPristine
然后再次检查ng-dirty


ñ

/**
    Add text to your input,
    then test for ng-dirty set the setPristine,
    then check for ng-dirty again.
*/
it('should set pristine', function() {
    element = angular.element('<input ng-model="temp"></input>');
    element = compile(element)(scope);
    scope.$digest();
    element.val("Some Input");
    element.triggerHandler("change");
    expect(element.hasClass('ng-dirty')).toBe(true);
    element.triggerHandler('setPristine');
    console.log(element);
    expect(element.hasClass('ng-dirty')).toBe(false);
});

然后记录

<input ng-model="temp" class="ng-scope ng-valid ng-dirty">

谁能指出我正确的方向？

提前致谢

最佳答案

$setPristine是Angular的FormController和ngModelController上公开的方法。

因此，如果您有一个名为myForm的表单：

<form name="myForm"></form>
<div ng-form="myForm"></form>

您可以调用myForm.$setPristine()将其中的所有控件设置为原始。

相同的概念适用于各个控件：

<form name="myForm">
    <input name="myInput" ng-model="temp"></input>
</form>

您可以调用myForm.myInput.$setPristine()将该特定控件设置为原始。

您不应该测试要添加/删除的ng-dirty类，这将涉及到$setPristine本身的实现细节。如果明天Angular开发人员将ng-dirty更改为ng-filthy，则测试将失败。

相反，您可以相信Angular开发人员拥有涵盖添加和删除CSS类的测试，并且应该关注测试代码是否正确调用$setPristine的测试，即：

beforeEach(function () {
    element = angular.element(
        '<form name="myForm">' +
        '   <input name="myInput" ng-model="temp"></input>' +
        '</form>'
    );
    element = compile(element)(scope);

    myForm = scope.myForm;
    spyOn(myForm, '$setPristine');
});

it('should set pristine', function () {
    // call your code

    // then assert
    expect(myForm.$setPristine).toHaveBeenCalled();
});