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

Question

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

我感觉我调用了 setPristine 方法不正确。

我要测试的逻辑如下

1. 然后将文本添加到您的输入中
2. 测试 ng-dirty 设置 setPristine
3. 然后再次检查 ng-dirty

n

/** 
    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">

谁能指出我正确的方向？

提前致谢

Answer 1

$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();
});