CODEWITHSUNDEEP
unit-testingangular-reactive-formsangular10
jgolieb
jgolieb

Reputation: 41

Why is FormControl not marked dirty in Angular 10 unit test?

The following test passes with Angular 9, but fails with Angular 10. Why?

upgrade-test.component.html:

<input [formControl]="formControl" />

upgrade-test.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-upgrade-test',
  templateUrl: './upgrade-test.component.html'
})
export class UpgradeTestComponent {
  formControl: FormControl = new FormControl(0);
}

upgrade-test.component.spec.ts:

import { TestBed } from '@angular/core/testing';
import { UpgradeTestComponent } from './upgrade-test.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('Test', () => {
  TestBed.configureTestingModule({
    declarations: [UpgradeTestComponent],
    imports: [ReactiveFormsModule],
  });

  it('should pass', () => {
    const fixture = TestBed.createComponent(UpgradeTestComponent);
    const component = fixture.componentInstance;
    fixture.detectChanges();
    expect(component.formControl.dirty).toBeFalsy();

    component.formControl.patchValue(1);
    const inputElem: HTMLInputElement = fixture.nativeElement.querySelector('input');
    inputElem.dispatchEvent(new Event('change'));
    fixture.detectChanges();
    expect(component.formControl.dirty).toBeTruthy();
  });
});

Test result:

  Test
    ✗ should pass
        Expected false to be truthy.
            at UserContext. (http://localhost:9876/_karma_webpack_/src/app/components/upgrade-test/upgrade-test.component.spec.ts:21:41)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)

Upvotes: 1

Views: 2058

Answers (1)

AsGoodAsItGets
AsGoodAsItGets

Reputation: 3161

Because the patchValue() or setValue() methods do not change the dirty status of the control or the form.

A control is dirty if the user has changed the value in the UI.

https://angular.io/api/forms/AbstractControl#dirty

Upvotes: 1

Related Questions