AngularJS and Karma: Revoking ng-dirty status using setPristine

Question

AngularJS and Karma: Revoking ng-dirty status using setPristine

I'm currently facing an issue in one of my unit tests where I am testing the removal of ng-dirty when using setPristine on an input element. Even after calling setPristine, the ng-dirty is not being removed.

My suspicion is that I may be incorrectly implementing the setPristine method.

The specific logic I am attempting to test includes:

Adding text to the input
Testing for ng-dirty and then setting it pristine
Checking for ng-dirty status again

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

This code snippet logs:

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

If anyone can provide guidance on how to resolve this, I would greatly appreciate it.

Thank you in advance

javascript angularjs karma-runner

Answer 1

Answer №1

$setPristine is a method that can be accessed through Angular's FormController and ngModelController.

If you have a form named myForm, you can utilize this method as follows:

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

To set all controls within the form to pristine, simply call myForm.$setPristine().

This concept also applies to individual controls within the form:

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

In order to set a specific control to pristine, you can use myForm.myInput.$setPristine().

It is recommended not to rely on testing for the addition or removal of ng-dirty classes, as this delves into the internal workings of $setPristine. To ensure robust testing, focus on verifying that your code correctly invokes $setPristine as intended.

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 the relevant code

    // Assert
    expect(myForm.$setPristine).toHaveBeenCalled();
});

Answer 2

$setPristine is a method that can be accessed through Angular's FormController and ngModelController.

If you have a form named myForm, you can utilize this method as follows:

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

To set all controls within the form to pristine, simply call myForm.$setPristine().

This concept also applies to individual controls within the form:

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

In order to set a specific control to pristine, you can use myForm.myInput.$setPristine().

It is recommended not to rely on testing for the addition or removal of ng-dirty classes, as this delves into the internal workings of $setPristine. To ensure robust testing, focus on verifying that your code correctly invokes $setPristine as intended.

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 the relevant code

    // Assert
    expect(myForm.$setPristine).toHaveBeenCalled();
});

AngularJS and Karma: Revoking ng-dirty status using setPristine

Answer №1

Similar questions

Assistance with offsetting a jQuery drop down menu

Display HTML content using AJAX within a div element

Successfully running npm update on a Mac seemed to have updated the package, however, the

Modify the parameters of the apps.facebook.com URL using the Facebook API

Access a webpage whose URL has been dynamically assigned using JavaScript

Guide to reference points, current one is constantly nonexistent

Transform a base64 image into a blob format for transmission to the backend via a form

The script fails to execute on content loaded through AJAX in Django

Implementing a Vue feature where an object is utilized as the v-model within a select

When an image is clicked, I am attempting to access data from a Sharepoint list

What could be causing the error "Err: user.validPassword is not a function" to occur

The Socket IO Client is receiving a different object than the one that was sent by the Server

Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

Exploring the Power of Vue 3 in Manipulating the DOM

The command 'npm install -g bigcommerce-stencil/stencil-cli' failed to run properly in the Windows command prompt

Transfer information from PHP to JavaScript across distinct files

Tips for adjusting the div style when resizing the browser

having difficulty grasping the variable's scope within this code

Setting an if isset statement below can be achieved by checking if the variable

I do not prefer output as my optimal choice