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

Experimenting with event monitoring during an ongoing ajax request with the help of Protractor and Angular

Steps for releasing a third-party library that is compatible with both Angular 2 and Angular 4

Detecting the specific button that was selected with PHP

Using dynamic tag names within React JSX can greatly enhance the flexibility and

The ng-repeat section is not being updated by the data-binding functionality

How can we send state updates directly to a conditionally rendered React component?

Each time a new client connects, socket.io replicates the information

Storing a component in browser storage using JavaScript and Angular

Sorting through a table based on the name of the element

Navigating Pre-Fetched Client Routes in Gatsby with @ReachRouter

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

Storing a byte array in a local file using JavaScript: A Step-by-Step Guide

tips for choosing tags that are nested within specific parent tags

Tips for transforming an Observable stream into an Observable Array

Moving various divisions through Javascript by clicking various buttons although sharing the same identifier

Exploring MongoDB's Aggregation Framework: Finding the Mean

We encountered a ReferenceError stating that 'dc' is not defined, despite having already imported d3, dc, and crossfilter in

PHP object representing a datetime in JSON format

The resource in CosmosDB cannot be found

Explore the world of HTML event listening through .NET integration